Чек-лист требований к дизайн макету сайта

Эта статья была одной из первых в нашем старом Блоге. На дворе 2024 год, уже поменялись технологии и подходы, тренды многие. Однако данный чек-лист остается немного устаревшим технологически, однако очень актуальным по своей сути, и на текущий момент. 

Всё чаще приходится выдавать информацию веб-дизайнерам, или клиентам, у которых в штате есть свои дизайнеры — какие требования к оформлению макета дизайна сайта. Поэтому своеобразный чек-лист к макету дизайна выкладываю для общего доступа и удобного внутреннего использования.

Основные параметры дизайн-макета сайта

1. Формат файлов, которые вы сдаете в качестве дизайн макета: PSD либо TIFF. PSD предпочтительней (если макеты делаются по старинке в Photoshop). Еще лучше - сразу делать в Figma, всё таки 2024й год уже. 
2. Разрешение: 72dpi. Цветовая палитра: строго RGB, 8 бит на канал (настройки для фотошопа)
3. В 90% случаев макет сайта имеет фиксированную ширину рабочей области. Обязательно ограничить эту ширину направляющими линиями в макете. Распространенные размеры: 1170px, 960px, 1100px. (по состоянию на 2024 год - всё чаще создаются макеты под 2к разрешения, иногда даже под 4к, однако фиксированные размеры в 1170 пикселей - до сих пор очень актуален!)
4. Ширину фонов предусмотреть до разрешения мониторов в 1920px (full hd), или для 2560px (2k). Фоновые изображения могут выходить за пределы контентной части сайта.
5. Обязательно отрисовать к макету дизайна файл favicon.ico, размер — 16*16px, а еще лучше - в svg, но тестировать в размере 16*16. Если нет возможности сохранить его как .ico файл — сделайте в обычном png24.
6. Очень желательно все иконки предоставить в svg формате. 

Слои и группы слоев в дизайне сайта

1. Слои НЕ склеены. Фоны, тексты, формы, изображения поверх фонов — всё это должно быть на отдельных слоях.
2. Элементы одного смыслового блока должны быть объединены в группу с человеко-понятным названием. Например, если это верхняя часть сайта, группа может называться Шапка, header, Верх сайта и т.п.
3. Каждый слой внутри группы так же должен быть назван в соответствии с назначением и/или содержанием. Например, слой с иконкой телефона: tel, phone, телефон и т.п.
4. Если вы делаете скрытую группу (например, в ней будет показано как выглядит всплывающее окно), то цвет группы нужно выделить, чтобы верстальщик не пропустил этот элемент.
5. Неиспользуемые слои в итоговом макете нужно УДАЛЯТЬ. Если слой просто остался в дереве и не несет никакого значения — нужно почистить файл перед завершением работы. Сохранит место на вашем компьютере, а так же множество оперативной памяти верстальщика.

Текстовое содержимое в веб-дизайне

1. В первую очередь стараемся использовать стандартные шрифты. Их не так уж много (Arial, Tahoma, Times и т.д.)
2. Когда недостаточно стандартных шрифтов (достаточно часто такое бывает при создании макета дизайна сайта) — идем на www.google.com/fonts и стремимся, чтобы выбранный шрифт был на этом ресурсе. С одной стороны это обеспечит соблюдение авторских прав (т.к. шрифты там бесплатные), с другой намного упростит подключение выбранного вами шрифта для использования на сайте.
3. Все текстовые элементы должны быть без эффекта Сглаживание. Простой стандартный текст.
4. Трансформирование текста недопустимо. Если нужно изменить размер текста — меняем его через Размер текста.

Активное содержимое, формы, кнопки

Очень часто дизайнер закладывает в макет кнопки, формы, ссылки и другие элементы, которые должны по его задумке изменять своё поведение при наведении курсора мыши. Чтобы верстальщик понял вашу задумку — отрисуйте соответствующую кнопку в Активном состоянии, и скройте эту группу слоев. А еще лучше вынести все подобные вещи (кнопки, ссылки, поля форм) в отдельный файл PSD, который принято называть UI Kit.

Дополнительные параметры дизайн-макета сайта

• Контрастность и читаемость
  Убедитесь, что текст читаем и контрастен на всех фоновых элементах.
• Адаптивный дизайн
  При необходимости, предоставьте макеты для различных устройств (десктоп, планшет, мобильный).
• Сетка и выравнивание
  Убедитесь, что все элементы находятся на сетке и правильно выровнены, что обеспечит гармоничный внешний вид сайта.
• Интерактивные элементы
  Отметьте интерактивные элементы, такие как выпадающие меню, всплывающие окна и анимации, чтобы верстальщик мог правильно реализовать их в коде.
• Кроссбраузерность
  Учитывайте совместимость с различными браузерами (Яндекс, Chrome, Firefox, Safari, Edge, Opera) для обеспечения одинакового отображения на всех платформах.
• Анимации и переходы
  Если предусмотрены анимации или переходы между страницами, описывайте их подробно в макете.
• Логотип и брендирование
  Предоставьте паспорт логотипа и брендбук компании,  и другие брендовые элементы для их правильного размещения на сайте.

Комплект для передачи дизайна сайта на верстку

1. Макет сайта в формате PSD или FIGMA
2. Рендер макета в JPG, для быстрого просмотра и оценки сложности дизайна.
3. Приложить файлы используемых шрифтов
4. Favicon для сайта в .ico или .png формате, а лучше в svg формате
5. Если в макете используются текстурные заливки — отдельным файлом прикрепить файлы используемых текстур.