chain doc dot ok back item-arrow angle-left angle-right vk instagram linkedin facebook play-button mail-ic winged-letter nda
Все статьи Бизнес-wiki

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

Святослав Волков
Задать вопрос

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

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

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

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

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

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