Чек-лист требований к дизайн макету сайта — Блог Media Group

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

Дата публикации: Май. 21, 2017
Просмотров: 4540
чек лист каким должен быть макет дизайна сайта

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

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

1. Формат файлов, которые вы сдаете в качестве дизайн макета: PSD либо TIFF. PSD предпочтительней.

2. Разрешение: 72dpi. Цветовая палитра: строго RGB, 8 бит на канал

3. В 90% случаев макет сайта имеет фиксированную ширину рабочей области. Обязательно ограничить эту ширину направляющими линиями в макете. Распространенные размеры: 1170px, 960px, 1100px.

4. Ширину фонов предусмотреть до разрешения мониторов в 1920px. Фоновые изображения могут выходить за пределы контентной части сайта.

5. Обязательно отрисовать к макету дизайна файл favicon.ico, размер — 16*16px. Если нет возможности сохранить его как .ico файл — сделайте в обычном png24.

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

1. Слои НЕ склеены. Фоны, тексты, формы, изображения поверх фонов — всё это должно быть на отдельных слоях.

2. Элементы одного смыслового блока должны быть объединены в группу с человеко-понятным названием. Например, если это верхняя часть сайта, группа может называться Шапка, header, Верх сайта и т.п.

3. Каждый слой внутри группы так же должен быть назван в соответствии с назначением и/или содержанием. Например, слой с иконкой телефона: tel, phone, телефон и т.п.

4. Если вы делаете скрытую группу (например, в ней будет показано как выглядит всплывающее окно), то цвет группы нужно выделить, чтобы верстальщик не пропустил этот элемент.

5. Неиспользуемые слои в итоговом макете нужно УДАЛЯТЬ. Если слой просто остался в дереве и не несет никакого значения — нужно почистить файл перед завершением работы. Сохранит место на вашем компьютере, а так же множество оперативной памяти верстальщика.

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

1. В первую очередь стараемся использовать стандартные шрифты. Их не так уж много (Arial, Tahoma, Times и т.д.)

2. Когда недостаточно стандартных шрифтов (достаточно часто такое бывает при создании макета дизайна сайта) — идем на www.google.com/fonts и стремимся, чтобы выбранный шрифт был на этом ресурсе. С одной стороны это обеспечит соблюдение авторских прав (т.к. шрифты там бесплатные), с другой намного упростит подключение выбранного вами шрифта для использования на сайте.

3. Все текстовые элементы должны быть без эффекта Сглаживание. Простой стандартный текст.

4. Трансформирование текста недопустимо. Если нужно изменить размер текста — меняем его через Размер текста.

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

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

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

1. Макет сайта в формате PSD

2. Рендер макета в JPG, для быстрого просмотра и оценки сложности дизайна.

3. Приложить файлы используемых шрифтов

4. Favicon для сайта в .ico или .png формате

5. Если в макете используются текстурные заливки — отдельным файлом прикрепить файлы используемых текстур.