Правила сдачи дизайн макета сайта (*.psd + дизайн)

За всё время работы с web-дизайном мы наломали много дров и набили еще больше шишек. Результатом такого «жизненного» подхода является свод правил по приёмке *.psd макетов (также правила применимы и для дизайна, выполненного в sketch).

Для того, чтобы исключить множество запросов от front-end специалиста, не плодить мусор, создать дизайн с которым можно работать и сделать удобно читаемыми ваши psd файлы, необходимо выполнять следующие правила:

ЕЩЕ БОЛЬШЕ ПОЛЕЗНОСТЕЙ У НАС В TELEGRAM

Чек-листы

Готовые промты

Таблицы для генерации контента

Общие требования к дизайн макетам

#1. Макет дизайна должен быть представлен в двух форматах *.psd и *.jpg, цветовое пространство RGB.

#2. Для демонстрации работы дизайнер высылает ссылку на макет, например. Выполнить подобную демонстрацию не сложно: файл дизайна (*.jpg) выгружается в соответствующую папку на сервер. В каждой папке вместе с *.jpg файлом присутствует файл index.html. Содержимое файла index.html следующее:

  
<html lang="ru-ru">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Design</title> 
</head>
<body style="
            margin:0;
            padding:0;
            background-image: url('template.jpg');
            background-repeat: no-repeat;
            background-position:center;
            background-color:#fff;">
<div style="height:2256px;"> </div>
</body>
</html>

где template.jpg - название файла *.jpg, а 2256px - высота дизайна.

#3. Имя файла должно состоять только из латинских букв, цифр и _ (underscore). Основные элементы дизайна именовать в соответствии с их назначением (на английском языке).

#4. Каждая ссылка на дизайн-макет должна иметь свой PSD-файл, даже если это одна и та же страница.

#5. Все дизайны страниц должны быть разбиты по разделам и соответствовать разделам прототипа (т.е. вложенность элементов идентичная как в прототипе) + иметь порядковый иерархический номер. Таким образом, иерархия документов будет следующая:

=> 1-home
    ==> 1-home_theme_default
        ===> index.html
        ===> template.jpg
    ==> 1-home_action_not_authorization
        ===> ...
    ==> 1-home_action_authorization
        ===> ...
    ==> 1-home_size_1200px
        ===> ...
    ==> 1-home_theme_fix_menu
        ===> ...
=> 2-about
    ==> 2.1-about-news
        ===> ...
    ==> 2.2-about-company
        ===> ...
=> 3-contacts
    ==> …

У каждого подтипа страницы должен быть префикс:

theme – измененный вариант страницы (пользователь авторизован и т.д.)
action – все активные элементы на странице отображены (наведение, клик и т.д.).
size – измененный размер сетки под определенные экраны (боле 1170 px, менее1170 px (970px) и т.д.)

Иерархия PSD документов повторяет иерархию файлов и *.jpg файлов, выгруженных на сервер.

#6. Необходимо соблюдать четкую иерархию внутри PSD документа, вложенность логических разделов не должна превышать разумных пределов, порядок логических блоков должен идти сверху вниз как на дизайне:

шапка
    сайдбар
    телефонный блок
    …
рабочая контентная часть
подвал

#7. Кроме необходимых для дизайна страниц, должен быть выполнен отдельный PSD-макет страницы «Style Guide» (styleguide.psd), в котором перечислены все стандартные блочные элементы (меню, галерея, таблица и т.д.) в различных состояниях (наведение, клик и др.). Пример сверстанного style Guide.

#8. В рамках макета должна быть соблюдена сетка (bootstrap grid). На выходе необходимо иметь два макета:

970 px (рисуется изначально, содержит все дизайны страниц)
1170 px (может содержать не все дизайны страниц, в зависимости от сложности утвержденного базового макета 970 px).

Сетка (Bootstrap 4) должна быть красного цвета (прозрачность 15%).

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

grid – no color
header – red
sidebar – yellow
content - orange
footer – green

Возможно добавлять другие логические блоки глобального уровня.

#10. В случае, если планируется делать в дизайне сайта разделение «по экранам» (когда активная область страницы растягивается на всю ширину и высоту экрана), пример: terekspro.ru, то необходимо выполнить версию дизайна страницы на каждый экран в зависимости от высоты рабочей области:

560 px - полная высота экрана (малые устройства);
730 px - полная высота экрана (большинство ноутбуков);
900 px - полная высота экрана (широкоформатные мониторы).

#11. Направляющие («rules») должны быть выровнены с точностью до одного пикселя. Полпикселя недопустимо.

#12. Необходимо в виде отдельных файлов прикладывать все паттерны, используемые в макете, папка «patterns».

#13. Дизайн макет должен сопровождаться favicon в разрешениях 270x270 px и 16x16 px в формате *.png с прозрачной подложкой.

#14. Все нестандартные шрифты, используемые на сайте, должны быть помещены в специальную папку (в формате TTF, OTF) «fonts» (файл шрифта должен называться по имени шрифта). Количество нестандартных используемых шрифтов не должно превышать трех (подтипы шрифта: italic, bold и т.д. считаются отдельным шрифтом). По возможности использовать только стандартные (безопасные) шрифты для разработки дизайна сайта:

Arial, Arial, Helvetica, sans-serif
Arial Black, Arial Black, Gadget, sans-serif
Comic Sans MS, Comic Sans MS5, cursive
Courier New, Courier New, Courier6, monospace
Georgia1, Georgia, serif
Impact, Impact5, Charcoal6, sans-serif
Lucida Console, Monaco5, monospace
Lucida Sans Unicode, Lucida Grande, sans-serif
Palatino Linotype, Book Antiqua3, Palatino6, serif
Tahoma, Geneva, sans-serif
Times New Roman, Times, serif
Trebuchet MS1, Helvetica, sans-serif
Verdana, Verdana, Geneva, sans-serif

#15. При передаче дизайна архитектура передаваемых документов должна быть следующая:

ветка папок *.psd (макеты всех страниц);
patterns (папка паттернов);
fonts (папка шрифтов);
images (папка изображений, не входящих напрямую в дизайн, например: изображения, входящие в новость);
favicon.png («favicon» будущего сайта);
settings.doc (файл с комментариями и текущими настройкам).

#16. Размер холста должен быть 2500 px по ширине, рабочая область должна оставлять 970 px (для дизайна на малых экранах), 1170 px (для дизайна на широких экранах).

#17. При определении масштабируемости дизайн-макета, выполняются все дизайны для малых экранов (ширина 970 px) и определяются страницы дизайна, которые будут также адаптированы под 1170 px.

Требования к слоям

#1. Все имена слоев записываются на английском языке.

#2. Не должно быть слоев, которые не используются (скрытые и не играющие никакой роли слои должны быть удалены).

#3. Каждый элемент должен находиться в одном слое, названным понятным именем, не допускается названия типа «shape 1».

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

#5. Логика представления дизайн-блока:

Обрезка фотографий (скругление углов и т.п.) должны производиться с сохранением исходных изображений с помощью масок.
Важно: все типовые блоки с изображениями должны иметь картинку-заглушку, например, список новостей, если в превью он использует изображения, список объектов и т.д.
Если применяется градиент к слою, использовать обычный режим наложения (blend mode: normal) и его реальные цвета. Не допускается использование полупрозрачных градиентов и сложных режимов наложения типа «multiply, screen, overlay, и т.д.»
Нельзя использовать сложные режимы наложения (blend mode) на любых свойствах слоя (типа inner shadow, drop shadow и т.д.).
Нельзя использовать градиентные границы (border, stroke).
Нельзя сводить простые стили слоёв (например, отбрасывание тени).
Дизайн-макеты, в которых скругления «не совсем округлые», не будут приняты. Это означает, что в какой-то момент прямоугольник со скругленными углами был изменен с помощью функции Transform (которая изменила пропорции прямоугольника). В результате углы оказались не скругленными, а «овальными». Для предотвращения нечеткости границ фигур в Photoshop (версии 13 и выше) есть специальная опция «Выровнять края», которой необходимо пользоваться в подобных случаях.
Обтравочные маски должны наноситься на слой, а не на папку, пример:

Не верный вариант формирования маски

Верный формат формирования маски на слое

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

#1. Размеры (кегль) и интерлиньяж шрифтов должны быть целыми числами. Использование 14.22 в качестве размера шрифта недопустимо.

#2. Возможно только три варианта выравнивания текста в макете: по левому и правому краю, а также по центру.

#3. Запрещено изменять высоту/ширину шрифта способом, отличным от обычного изменения размера кегля.

#4. В случае использования нестандартного шрифта, он должен быть бесплатным и присутствовать в Google.Fonts.

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

#6. Для каждого отдельного блока текста - отдельный text box.

#7. Отличный от дефолта (100%) межбуквенный/межсловный интервал должен быть отмечен комментарием.

#8. Из текстовых эффектов допустима лишь тень, и всё что с её возможностью можно эмулировать.

#9. При использовании иконок в дизайне необходимо все иконки предоставлять отдельными файлами в формате *.svg. Правила наименования SVG-иконок:
- Никакого транслита, только английские наименования. Неприемлемо: strelka, kvadrat. Подойдут: arrow, square.
- Название иконки из нескольких слов пишется "вместе-вот-так" (через знак тире '-').
- Имя иконки должно максимально чётко соответствовать назначению иконки и не должно быть привязано к её положению в макете. Неприемлемо: arrow-right-header, arrow-left-header. Подойдет: arrow-right, arrow-left.

#10. При формировании статичной страницы (а также при формирования полного stylegid) (новость, статья и т.д.), необходимо:

Заголовки различного уровня (h1 «собственно главный заголовок», h2, h3, h4, h5)
Нумерованный и ненумерованный список.
Таблица с шапкой.
Единичная картинка (обтекаемая текстом слева, обтекаемая текстом справа, картинка по центру без обтекания текста).
2 ряда картинок (галерея).
Выделенный текст (жирный текст).
Вставка видео с подписью (по центру без обтекания текста).
Текст курсивом.
Цитата.
Цитата (вид 2 – код <pre>).
Набор базовых цветов для сайта с помощью сервисов: paletton.com.

#11. В дизайне ни в коей мере не использовать иконочный шрифт. Все иконки на сайте должны быть выполнены с помощью SVG-иконок.

Интерактивные элементы

Кнопки, текстовые поля, ссылки и прочие интерактивные элементы должны иметь несколько представленных в макете состояний:

Ссылка

Обычная (не посещённая, не активная).
При наведении (:hover).
При нажатии (click, если необходимо).
Посещённая (visited, если необходимо).

Кнопка

Обычная.
При наведении (:hover).
При нажатии (click, если необходимо).
Заблокированная (disabled, если необходимо).

Поле ввода (input, select)

Обычное.
Активное (active).
Заблокированное (disabled, если необходимо).

Checkbox, radio button

Обычный.
Активный (active).
При наведении (hover, если необходимо).
Заблокированный (disabled, если необходимо).

После полного утверждения дизайн-макета, выгрузку производить в Invision и Avacode. Для выгрузки в Avacode *.PSD-файла - плагин не нужен. Для выгрузки макета из sketch-а необходимо использовать плагин. При завершении любой задачи по дизайну просьба указывать share-ссылку на выгруженные макеты в Invision и Avacode. Без данных ссылок задача не считается закрытой.

Настоятельные рекомендации

Рекомендация №1 избегать полностью черного шрифта (#000) на белом фоне. Вот, что об этом говорят в мире web-дизайна: http://uxmovement.com/content/when-to-use-white-te... и https://ux.stackexchange.com/questions/53264/dark-...

Святослав Волков

Head of SEO

Задать вопрос