И только сейчас мы подошли к работе над макетом в Figma. Для начинающих весь мой процесс кажется очень загруженным и насыщенным лишними действиями. Но данный алгоритм позволяет создавать сайты с хорошей конверсией и предсказуемым результатом для клиента. И, что не мало важно, в короткие сроки (За счет определенности каждого шага).
Итак, у нас есть контент и визуальная концепция. Теперь мы можем отрисовывать дизайн-макет в формате прототипа. Композиции, которые мы нашли на этапе Mood Board-a нужно перерисовать в соответствии с контентом из текстового прототипа.
🖼️Основные принципы отрисовки:
- Прототип рисуется в черно-белом формате (оттенки серого)
- Все отступы, расположение и размеры элементов рисуются в “окончательном” варианте, как-будто вы этот макет сдаете для верстки (не надо схематичного расположения; вы отвечаете за каждый пиксель в макете)
- Внедряются все шрифты из mood board
- Под иконки и изображения делаются прямоугольные заглушки
📐Какую сетку использовать?
Это ваше предпочтение или пожелание верстальщика. Я использую систему сеток Bootstrap. Так как это очень популярный фреймворк для верстки, и можно начать именно с этой системы сеток. Никто не мешает делать 8-12-16 или другие варианты. Полезные материалы по сетке Bootstrap 5:
- Спецификация по bootstrap 5.0 — https://getbootstrap.com/docs/5.0/getting-started/introduction/
- Сетка Boostrap 5 для Figma — https://figma.info/blog/templates/2021-03-31-setka-bootstrap-5-dlya-figma.html
💻Как размечать блоки по сетке:
Крупные блоки размечаем по сетке (Это композиции или крупные смысловые части)
Средние — желательно встроить в сетку
Мелкие — не обязательно (В мелкой разметке будут играть роль 2-4 пикселя, поэтому мы не можем грамотно встроить данные элементы в сетку).
🖥️Всплывающие окна, меню и т.д.
Данные элементы я отрисовываю в том же дизайн-макете, а потом скрываю. В дальнейшей работе можно создавать отдельные фреймы и делать оживление при помощи прототипирования. А данные элементы выносить в UI-кит.
Эти правила позволят вам отрисовать макет, который будет максимально отражать суть коммерческого предложения клиента. Если же мы сразу будем рисовать дизайн-макет с изображениями и иконками, то они просто перетянут на себя внимания и скроют недостатки. А нам как раз нужно, чтобы все недостатки наших гипотез по дизайну была подсвечены. Этим мы гарантируем детальную проработку дизайна.
📍Выводы
- На этапе прототипирование рисуется дизайн в окончательных размерах, как-будто мы отдаем дизайн в разработку
- Использование сетки — обязательное требование
- Правила использование: крупные блоки — встраиваем сетку; средние — желательно; мелкие — не встраиваем
