Продолжаем описывать процесс работы над проектом нашей команды на основе разработки лендинга с индивидуальным дизайном...
Когда доходим до этапа дизайн-макета, у нас уже собрана основа и проведены исследования. Казалось бы, осталось «просто нарисовать». Но вот на этом «просто» большинство и спотыкается. Потому что дизайн — это не про «красоту». Это про то, как всё работает в деталях.
Обычно начинаем с главного экрана и ещё пару-тройку ключевых блоков, чтобы задать структуру, понять, как будут работать акценты, отступы, тексты. У нас уже имеется черновик дизайна (согласованная визуальная концепция), а так же каркас-прототип всех блоков которые мы собирали на старте (в Части 2). Прогоняем через него реальный контент — тексты от клиента, реальные фото, не идеальные абзацы, а те, что действительно будут на сайте. Потому что именно на этом этапе видно, что работает, а что — нет. Идём дальше по экранам. Всё должно собираться в одну систему — чтобы не было «этот блок как будто делал один дизайнер, а вот этот другой». Единая сетка, логика размеров, читаемость.
На этом же этапе проверяем, насколько вообще сочетается визуальный стиль с продуктом. Бывает, концепция красивая, а клиенту приходит новый брендбук, и всё — палитра уже не подходит. Или приходит фото товара, и оно вообще из другой эстетики. Такое случается — важно не бояться возвращаться к мудборду, концепциям и договариваться заново.
В процессе устраиваем внутренние ревью. Смотрим свежим взглядом: не вылез ли где-то странный стиль кнопки, не сбилась ли сетка, не ушёл ли кто-то от согласованной палитры. Это помогает поймать всякие мелочи до того, как всё покажем клиенту или загрузим в платформу. Такие штуки, как компонент не той версии или шрифт «почти такой же» — случаются. Мы тоже люди. Главное — ловить это на этапе, когда всё ещё легко поправить, а не перед запуском.
Иногда приходится ломать свои же правила. Бывает, делаешь аккуратный сеточный блок — всё чётко, по правилам. А потом смотришь и понимаешь: по сетке правильно, а по восприятию — нет. Например, если рядом идёт визуально массивная картинка, текст теряется, даже если формально отступы одинаковые. В таких случаях не боимся отступить от системы — если на глаз и по логике пользователя это работает лучше.
Когда десктоп готов — адаптируем под мобильное разрешение. Сегодня с телефонов сайты смотрят более половины пользователей, поэтому адаптивам особое внимание. Самое сложное — удержать смысл, не потеряв структуру. В десктопе можно играть с пространством, на мобилке — всё на виду. Бывает, что приходится переделать блок заново: сократить текст, поменять порядок, объединить карточки, упростить задуманную анимацию.
Или ещё нюансы: к примеру возьмём кнопки. Когда их две рядом в десктопе — красиво. На мобиле? Если оставить рядом — будет либо мелко, либо не влезет. А если сделать вертикально — нарушается логика действия. И вот тут начинаются микро-дизайнерские дилеммы. В таких ситуациях всегда ставим себя на место пользователя. Иногда просто открываем похожие сайты на телефоне и честно: удобно ли? Понятно ли? Хочется ли нажать?
Когда все экраны готовы, начинается техническая часть — передача в разработку. Здесь приводим макеты в порядок: переименовываем важные слои, создаём ui-кит с компонентами и повторяющимися элементами: иконками, кнопками, формами и т.д., добавляем стили, комментируем где нужно. Разработчику должно быть понятно, что где и зачем. Это важно.
Во многих проектах мы не просто рисуем, но и верстаем/собираем финальный сайт сами — на Tilda, WordPress, Creatium. Это удобно и даёт гибкость. Но об этом в следующих частях;)
Когда доходим до этапа дизайн-макета, у нас уже собрана основа и проведены исследования. Казалось бы, осталось «просто нарисовать». Но вот на этом «просто» большинство и спотыкается. Потому что дизайн — это не про «красоту». Это про то, как всё работает в деталях.
Обычно начинаем с главного экрана и ещё пару-тройку ключевых блоков, чтобы задать структуру, понять, как будут работать акценты, отступы, тексты. У нас уже имеется черновик дизайна (согласованная визуальная концепция), а так же каркас-прототип всех блоков которые мы собирали на старте (в Части 2). Прогоняем через него реальный контент — тексты от клиента, реальные фото, не идеальные абзацы, а те, что действительно будут на сайте. Потому что именно на этом этапе видно, что работает, а что — нет. Идём дальше по экранам. Всё должно собираться в одну систему — чтобы не было «этот блок как будто делал один дизайнер, а вот этот другой». Единая сетка, логика размеров, читаемость.
На этом же этапе проверяем, насколько вообще сочетается визуальный стиль с продуктом. Бывает, концепция красивая, а клиенту приходит новый брендбук, и всё — палитра уже не подходит. Или приходит фото товара, и оно вообще из другой эстетики. Такое случается — важно не бояться возвращаться к мудборду, концепциям и договариваться заново.
В процессе устраиваем внутренние ревью. Смотрим свежим взглядом: не вылез ли где-то странный стиль кнопки, не сбилась ли сетка, не ушёл ли кто-то от согласованной палитры. Это помогает поймать всякие мелочи до того, как всё покажем клиенту или загрузим в платформу. Такие штуки, как компонент не той версии или шрифт «почти такой же» — случаются. Мы тоже люди. Главное — ловить это на этапе, когда всё ещё легко поправить, а не перед запуском.
Иногда приходится ломать свои же правила. Бывает, делаешь аккуратный сеточный блок — всё чётко, по правилам. А потом смотришь и понимаешь: по сетке правильно, а по восприятию — нет. Например, если рядом идёт визуально массивная картинка, текст теряется, даже если формально отступы одинаковые. В таких случаях не боимся отступить от системы — если на глаз и по логике пользователя это работает лучше.
Когда десктоп готов — адаптируем под мобильное разрешение. Сегодня с телефонов сайты смотрят более половины пользователей, поэтому адаптивам особое внимание. Самое сложное — удержать смысл, не потеряв структуру. В десктопе можно играть с пространством, на мобилке — всё на виду. Бывает, что приходится переделать блок заново: сократить текст, поменять порядок, объединить карточки, упростить задуманную анимацию.
Или ещё нюансы: к примеру возьмём кнопки. Когда их две рядом в десктопе — красиво. На мобиле? Если оставить рядом — будет либо мелко, либо не влезет. А если сделать вертикально — нарушается логика действия. И вот тут начинаются микро-дизайнерские дилеммы. В таких ситуациях всегда ставим себя на место пользователя. Иногда просто открываем похожие сайты на телефоне и честно: удобно ли? Понятно ли? Хочется ли нажать?
Когда все экраны готовы, начинается техническая часть — передача в разработку. Здесь приводим макеты в порядок: переименовываем важные слои, создаём ui-кит с компонентами и повторяющимися элементами: иконками, кнопками, формами и т.д., добавляем стили, комментируем где нужно. Разработчику должно быть понятно, что где и зачем. Это важно.
Во многих проектах мы не просто рисуем, но и верстаем/собираем финальный сайт сами — на Tilda, WordPress, Creatium. Это удобно и даёт гибкость. Но об этом в следующих частях;)