Дизайн сайта для курса по вёрстке
Созвон
Первым делом созвонились на 20 минут и поговорили:
- о проекте,
- сроках,
- ожиданиях заказчика
- планшетной версии
- ограничениях бюджета
- приёмке дизайна
- бизнесе в целом
Задача
Нужно создать лёгкий и простой дизайн. Клиент не хотел следить за мной и контроллировать процесс. Договорились о фидбеке клиента на контрольных точках: пк-версия и мобильная-версия.
Понимание задачи
На основании полученной информации составил понимание задачи и отправил заказчикам на согласование.
Сроки и ффф
Дедлайн на разработку дизайна 7 дней. Он был несдвигаемый, так как старт рекламы был запланирован на конкретный день. То есть к этому дню дизайн должен был быть готов весь сайт.
7 дней на дизайн достаточно, когда проект один, но когда их четыре — этого мало. Я честно сказал об этом клиенту и предложил варианты. Чтобы я сделал хороший дизайн, не устал от проектов и чтобы заказчик запустил проект в срок.
В итоге мы договорились реализовать 70% дизайна, а доделывать будем после запуска, так как основные блоки уже будут созданы и в момент запуска будет готов основной продукт.
В итоге до дедлайна я успел сделать 95% дизайна и во время программирования лендинга доделал остальные 5%.
Wireframe
Чтобы во время дизайна постоянно не переделывать структуру, я выношу структуру в отдельную часть работы. Я создаю wireframe — черновой вариант работы.
Так мы понимаем, как будет располагаться информация. На этапе дизайна стоит только добавить цвета, шрифты и акценты.
Презентация прототипа
Чтобы клиент не просто получил ссылку на прототип и пытался сам как-то понять прототип — я записал видео с презентацией прототипа. В видео я объяснил почему я использую именно эти решения.
Варианты дизайна
Прежде чем создавать дизайн, нужно определиться с цветовой гаммой и шрифтами. Я сделал 5 разных вариантов, стилизовав несколько блоков из прототипа.
Отправил клиенту 5 вариантов на согласование, и сказал, какой мне понравился больше.
Синий сразу забраковали, потому что этот цвет уже задержался в онлайн-обучении, он везде. В итоге единогласно выбрали 4 вариант — белый и зелёный.
Итоговый дизайн
Презентация дизайна
Презентовал дизайн в формате видео, где рассказывал о том, почему принял определённые решения и как можно улучшить.
Модальные окна
Одной из задача было сделать модальное окно для консультации в мессенджерах. Я сделал такой вариант, он казался мне классным.
Потом я начал это адаптировать и начала получаться какая-то фигня:
[изображение удалёно из-за наличия иконок компаний запрещенной в России организации Meta]
- Слишком большие блоки,
- Много кнопок,
- Одинакые заголовки
Я решил улучшить этот результат и пришёл к такому решению:
[изображение удалёно из-за наличия иконок компаний запрещенной в России организации Meta]
- Лёгко масштабируется, можно накинуть ещё 4 кнопки и в высоту и в ширину
- Один заголовок — остальное кнопки
- Просто адаптировать, тоже легко масштабируется и всё разделено по кнопкам, не дублирующих заголовков
Правки
Правок не было, мы полностью попали в ожидания друг друга.
Отзыв и фидбек клиентов
И Сергею и Максиму очень понравился дизайн и формат работы.
В аудио отзыв Максима Лескина
Ошибки
Не обошлось и без ошибок. На этапе подбора шрифтов я выбрал платный шрифт и не предупредил об этом клиента. В конце работы я понял это, признал ошибку и предложил варианты.
- Передалать весь макет с другим шрифтом, бесплатно
- Оплатить 30% шрифт
Приняли 2 решение и я оплатил 30% стоимости шрифта.