• Главная  
• Вредные советы  
• Требования к дизайн-макету сайта

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

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

Жесткие требования

• Сам макет дизайна должен быть представлен в форматах PSD или TIFF, сохранять строго в RGB.
• Все слои одного логического элемента должны быть в одной папке (например, модуль авторизации).
• Слои ни в коем случае не должны быть склеены, кроме дизайнерских фишек.
• Выравнивание слоев — строго по Guide. Их не удалять. Оставлять в макете.
• Rulers должны быть выровнены строго с точностью до одного пикселя. Полпикселя не допустимо.
• Каждый элемент должен находиться в одном слое, названным человечески-понятным именем, а не «slice 1,2».
• В случае фиксированного шаблона должно быть четкое соответствие ширины макета утвержденной минимальной ширине сайта (а то говоришь, что сайт будет фиксированный на 800px, а макет рисуют на 850px — что хошь, то и верстай после этого).
• При разработке дизайна «под разрешение» обязательно отрисовывать в разрешение окна браузера, а не монитора (при 1024px ширина браузера составляет 986px).
• Важно: ширина макета — 1980 пикселей. 1000, 980 пикселей и другие размеры не принимаются. Причина: что бы понять, как будет выглядеть сайт на 100% ширины браузера.
• В случаях, когда сайт тянется на 100% ширины браузера, необходимо подготовить второй макет, например на ширину 986px, что бы понять как ведут себя элементы на небольших экранах.
• На каждую отдельную страницу должен быть отдельный PSD файл. Отображение всех странц в одном макете приведет к использованию дикого количества оперативной памяти.
• Макет должен предусматривать резиновую/адаптивную верстку. Таким образом желательно иметь два макета: широукий 1980px по ширине и узкий, например 800px.
• Отрисовать макет дизайна сайта для мобильных устройств, например 311px по ширине.

Требования к цвета в макетах

• Недопустимо использовать прозрачность для элементов, содержащих текст. Допустимо, можно использовать rgba при верстке.

Требования к графическим «фишкам»

• Фоны должны быть повторяющимися, текстурированые без логики повтора не принимаются.
• Эффекты подсвечивания не допустимы. Например при наведении на ссылку, фон ссылки становится полупрозрачным «облаком».
• Минимум элементов, которые потребуют создания графических файлов PNG-24 (полупрозрачность etc).
• Для создания favicon.ico для сайта предоставить «фишку» проекта в виде картинки PNG-24 в размере 512х512 пикселей.
• Все иконки должны быть в формате SVG.
• Вообще стараться по максимум использовать формат SVG для оформления. При адаптации на мобильных устройствах, качество графики не ухудшается.

Требования к текстовому содержимому

• Для текстовых элементов обязательно указывать шрифт и его размер (учитывая, что стандартных шрифтов всего ничего), желательно в комментариях, фотошоп умеет их делать. Никаких трасформаций с текстом. Размер меняется размером шрифта.
• Быть внимательными в использовании нестандартных шрифтов. Стандартных шрифтов очень мало, которые есть в каждой операционной системе. Можно, конечно, подгрузить шрифт, но 100% не будет работать в старых браузерах.
• Шрифт должен быть бесплатным или должна быть приобретена лицензия на его использование.
• Лучше всего шрифты выбирать на сайте google.com/fonts. Выбрав тут шрифты, можно без проблем подключить их на сайте, и тем более использовать.
• Минимум изменений стандартных контролов форм, таких как селекты.
• Все текстовые элементы должны быть без сглаживания, т.е стандартный шрифт.
• Описать поведение ссылок в дизайне (неактивная, при наведении, посещенная) в меню/модуле, то же самое касается ссылок, отличающихся от дефолтного стиля (например, ссылки в меню, pathway и т.д.).
• Обязательно должно быть указано оформление следуюших HTML-тегов: параграф, абзац (<p>), заголовки с 1 по 4 уровень (h1, h2, h3, h4), маркированный список (<ul>), нумерованный список (<ol>), цитирование (<blockquote>).

Ui Kit

В последнее время включили в требования к дизайну разарботку обязательный макета с UI Kit. В этом макеты должно быть отрисовано поведение элементов и форм на сайте. Список элементов для отрисовки:

• Ссылки, в том числе основная навигация, постраничная навигация и их состояния.
• Текстовые поля: обычное состояние, в фокусе.
• Кнопки: обычное состояние, наведение курсора, клик/тап.

Легкие пожелания

• И самое главное — дизайнер должен быть верстальщиком, чтобы он мог сам сверстать то, что нарисовал (пусть не быстро и не на 100% валидно, но уметь).
• Элементы навигации типа стрелок, иконок хорошо бы получать в отдельном SVG формате на прозрачном фоне.

Минимальный комплект материала для передачи верстальщику

• Макет в формате PSD или TIFF.
• Шрифты.
• SVG Иконки.
• Заготовка для favicon.ico (если нет возможности в ICO, то можно в PNG-24).
• Паттерн текстуры, если используется для фона, в виде отдельного файла PSD.

Спасибо beliyadm, poizon и Mitrich за дополнения к требованиям к дизайн-макету сайта.

Ссылки по теме:

1. WEB DESIGN: Переход на личности
2. Когда Photoshop отображает совсем не то, что надо