Итак, мы подобрались к самому интересному — итоговой прорисовке дизайн-макета. И первое, что мы обсудим — это визуальные правила в веб-дизайне. Так как у вас есть прототип, теперь мы будем его оптимизировать.
🖼️Визуальные правила веб-дизайна
«Правило внутреннего-внешнего»
«Правило близости» и много другим названий. Оно означает, что: «Когда мы хотим элементы расположить в визуальную группу, то расстояние между ними мы делаем меньше, чем внешние отступы этой группы от других элементов» и наоборот «Если мы хотим визуально отделить элемент или группу элементов, то мы делаем расстояние больше, чем внутренние отступы этой группы.
Правило контраста
В композиции наиболее важные элементы должны выделятся среди остальных. Таким образом мы управляем вниманием пользователя, заставляя его смотреть на нужные нам элементы. Можно контрастировать: начертание текста, цвета, размеры, отступы и др.
Пропорции кнопки
Следующее небольшое, но важное правило — внутренние отступы у кнопки должны быть 1:2 (верхний и нижний отступы к боковым). Это нужно, чтобы кнопка либо не утопала в огромных отступах, либо не была слишком скомканной, если отступы будут небольшими.
Работа с текстом
Далее работа с текстовыми блоками. Здесь у нас будет 3 рекомендации:
- Основной текст для сайта 14 или 16 пикселей. Остальные размеры рассчитываем исходя из этих чисел. Данные размеры хорошо смотрятся как на мобильных устройствах, так и на компьютерах.
- Абзацы должны быть в высоту 4-5 строк. В длину максимум 400-500 пикселей (опционально). Это нужно, чтобы пользователь не перегружался чтением огромных простыней текста.
- Межстрочный интервал 140% (стартовое значение). Как мы говорили на этапе визуальной концепции: между строками текста должна пролезать еще одна строка. Если шрифт вытянутый, то мы делаем больше 140%, если сплюснутый — меньше 140%.
Правило наследования (преемственности)
Если в своем макете мы используем тени, градиенты, скругление элементов, наличие декоративного элемента у заголовка или абзацев или другие визуальные особенности, то во всех композициях нужно придерживаться этой стилистики. Это создаст ощущение полноценности и завершенности макета. Если же этому правилу не следовать, то макет будет “Франкенштейном”, где в каждой композиции свои визуальные эффекты и правила.
💻Итоговая отрисовка
После оптимизации нашего макета, мы можем вставлять туда иконки, картинки и добавлять фирменные цвета. Таким образом на выходе у нас получается готовый дизайн-макет десктопной версии.
Также хотел бы порекомендовать уже на этапе создавать дополнительные состояния для кликабельных элементов (кнопки, формы, слайдеры, переключатели и т.д.). Таким образом мы точно не забудем их указать в процессе сдачи макета в разработку.
Что это за состояния:
- Обычное
- Наведение
- После клика (когда поставили курсор в поле для ввода формы)
- Ссылки после посещения
- Отключенное
Для некоторых элементов состояния будут не нужны (например для меню не нужно рисовать отключенное состояние, потому что его в принципе не может быть. Тут в помощь логика и здравый смысл).
📱Адаптивные версии дизайн-макета
Только теперь мы переходим к этой теме. Она на самом деле вообще не сложная. Начнем с видов адаптивного дизайна, которые могут быть:
- Резиновая верстка, когда блоки сайта ужимаются или разжимаются в зависимости от ширины экрана, но при этом перестроения макета не происходит.
- С перестроением элементов, когда ширина окна становится определенной величины, то макет начинает перестраиваться. Основными шагами могут быть 1400 пикселей по ширине стартовое значение на компьютера; 768 — для планшета, 375 пикс. для смартфона.
Принципы адаптива
- Уменьшение шрифтов. Если вы использовали для основного шрифта 14-16 размер, как мы говорили выше. То уменьшать нужно будет только заголовки. Если не использовали, то на мобильной версии делаем 14-16 размер шрифта.
- Убираем графику. Фоновые сложные изображения, неприоритетная инфографика. Все то, что в мобильной версии будет тяжело восприниматься пользователем.
- Формируем мобильное меню. Главное меню мы убираем в выпадающее, и формируем иконку бургерного меню. Также отрисовываем вертикальное меню, когда оно будет открыто.
- Управляющие элементы увеличиваем под пальцы (если нужно), чтобы большинство людей смогли удобно использовать интерфейс на своем телефоне.
- Однотипные элементы (карточки товара, изображения) мы можем переводить в слайдер.
Всегда проверяем мобильные версии с помощью приложения Figma Mirror, его можно скачать в магазинах приложений! Если вы начинающий, то особенно будет трудно почувствовать размерности на мобильной версии. Поэтому скачайте на телефон данное приложение.
📍Выводы
- Основные визуальные правила: “внутреннего-внешнего”, пропорции кнопки, грамотное оформление текста, правило “наследования”, правило “контраста”
- Отрисовка адаптивных версий макет — обязательные стандарт
- На этапе итоговой отрисовки уже можно собирать дизайн-систему
