1 138

Дизайн сайта для курса по вёрстке

Созвон

Первым делом созвонились на 20 минут и поговорили:

  • о проекте,
  • сроках,
  • ожиданиях заказчика
  • планшетной версии
  • ограничениях бюджета
  • приёмке дизайна
  • бизнесе в целом

Задача

Нужно создать лёгкий и простой дизайн. Клиент не хотел следить за мной и контроллировать процесс. Договорились о фидбеке клиента на контрольных точках: пк-версия и мобильная-версия.

Понимание задачи

На основании полученной информации составил понимание задачи и отправил заказчикам на согласование.

Дизайн сайта для курса по вёрстке 1

Сроки и ффф

Дедлайн на разработку дизайна 7 дней. Он был несдвигаемый, так как старт рекламы был запланирован на конкретный день. То есть к этому дню дизайн должен был быть готов весь сайт.

7 дней на дизайн достаточно, когда проект один, но когда их четыре — этого мало. Я честно сказал об этом клиенту и предложил варианты. Чтобы я сделал хороший дизайн, не устал от проектов и чтобы заказчик запустил проект в срок.

Дизайн сайта для курса по вёрстке 2

В итоге мы договорились реализовать 70% дизайна, а доделывать будем после запуска, так как основные блоки уже будут созданы и в момент запуска будет готов основной продукт.

В итоге до дедлайна я успел сделать 95% дизайна и во время программирования лендинга доделал остальные 5%.

Дизайн сайта для курса по вёрстке 3

Wireframe

Чтобы во время дизайна постоянно не переделывать структуру, я выношу структуру в отдельную часть работы. Я создаю wireframe — черновой вариант работы.

Так мы понимаем, как будет располагаться информация. На этапе дизайна стоит только добавить цвета, шрифты и акценты.

Дизайн сайта для курса по вёрстке 4

Презентация прототипа

Чтобы клиент не просто получил ссылку на прототип и пытался сам как-то понять прототип — я записал видео с презентацией прототипа. В видео я объяснил почему я использую именно эти решения.

Варианты дизайна

Прежде чем создавать дизайн, нужно определиться с цветовой гаммой и шрифтами. Я сделал 5 разных вариантов, стилизовав несколько блоков из прототипа.

Отправил клиенту 5 вариантов на согласование, и сказал, какой мне понравился больше.

Синий сразу забраковали, потому что этот цвет уже задержался в онлайн-обучении, он везде. В итоге единогласно выбрали 4 вариант — белый и зелёный.

Дизайн сайта для курса по вёрстке 5

Итоговый дизайн

Дизайн сайта для курса по вёрстке 6
Дизайн сайта для курса по вёрстке 7

Презентация дизайна

Презентовал дизайн в формате видео, где рассказывал о том, почему принял определённые решения и как можно улучшить.

Модальные окна

Одной из задача было сделать модальное окно для консультации в мессенджерах. Я сделал такой вариант, он казался мне классным.

Потом я начал это адаптировать и начала получаться какая-то фигня:

[изображение удалёно из-за наличия иконок компаний запрещенной в России организации Meta]

  • Слишком большие блоки,
  • Много кнопок,
  • Одинакые заголовки

Я решил улучшить этот результат и пришёл к такому решению:

[изображение удалёно из-за наличия иконок компаний запрещенной в России организации Meta]

  • Лёгко масштабируется, можно накинуть ещё 4 кнопки и в высоту и в ширину
  • Один заголовок — остальное кнопки
  • Просто адаптировать, тоже легко масштабируется и всё разделено по кнопкам, не дублирующих заголовков

Правки

Правок не было, мы полностью попали в ожидания друг друга.

Отзыв и фидбек клиентов

И Сергею и Максиму очень понравился дизайн и формат работы.

В аудио отзыв Максима Лескина

Ошибки

Не обошлось и без ошибок. На этапе подбора шрифтов я выбрал платный шрифт и не предупредил об этом клиента. В конце работы я понял это, признал ошибку и предложил варианты.

  1. Передалать весь макет с другим шрифтом, бесплатно
  2. Оплатить 30% шрифт

Приняли 2 решение и я оплатил 30% стоимости шрифта.

Поделиться
Отправить
Линкануть
Вотсапнуть
← К списку проектов