О чем нужно помнить дизайнеру при создании веб-продуктов

07.09.2018

Расскажем о правилах «хорошего тона» для веб-дизайнера, о том кодексе «правильной работы», который существенно облегчает работу с макетом специалистам из смежных отделов. И начнем с технических моментов, касающихся отрисовки и оформления. Именно они помогают делать сайт законченным и в конечном итоге положительно влияют на конверсию.

Векторные элементы и удобный размер шрифта

Первое правило – рисуйте все нужные элементы в векторе и сохраняйте готовые иконки в svg. Векторные элементы хорошо масштабируются и не теряют качества при этом, так что работать станет на порядок удобнее.

Второе правило – указывайте размер шрифтов целыми числами. Это существенно облегчит последующую работу верстальщику. Считается, что минимальный размер шрифта для большинства текстовых фрагментов – 14 px. CAPS LOCK использовать не стоит. Если выбираете размеры кнопок и других элементов, тоже делайте их целыми. Дробные размеры не вписываются в пиксельную сетку и будут в готовом дизайне выглядеть размытыми.

Также есть правило хорошего тона, относящееся к межстрочному расстоянию. Не используйте здесь параметр Auto, то есть настройки по умолчанию, и увеличивайте межстрочный интервал так, чтобы он был в 1,5 раза больше текста. Тогда строчки не сливаются, и читать текстовые фрагменты гораздо удобнее. Расстояния между однотипными объектами тоже должны быть одинаковыми. Если отступаете по 32 px перед первым заголовком Н2, то и перед всеми последующими такими заголовками должен быть точно такой же отступ.

Чек-лист для проверки готовой работы

В работе не рекомендуется использовать blend mode или режим наложения. Если в дизайнерской программе преобразовать фоновый слой в прозрачный, а не вырезать его, то в программе верстальщика все снова станет на свои места, и изображение получится искаженным.

Также не забывайте о Style Guide. Сформируйте новую страницу PSD с набором элементов пользовательского интерфейса. Это позволит собрать грамотный макет, как конструктор, и избежать досадных ошибок.

Рекомендуем в процессе работы регулярно сверяться с чек-листом:

  • Favicon – в двух форматах, png и ico;
  • Pagination
  • Breadcrumbs (хлебные крошки можно оформлять мелким шрифтом, от 12 px);
  • 404 page;
  • Изображения No Image для карточек товара и тех элементов, которые будут загружаться позже основных;
  • Pop-up окна и thanks-сообщения (лучше сразу вынести их в отдельный файл) – эти элементы обратной связи очень важны для пользователя, так как позволяют видеть, что заявка принята, а заказ оформлен;
  • Выпадающие списки в меню навигации и для фильтров в каталоге;
  • Стрелка «вверх», позволяющая прокрутить страницу к началу.

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

Последнее в нашем блоге