├── README.md └── assets └── grid.png /README.md: -------------------------------------------------------------------------------- 1 | # Требования к PSD-макетам 2 | 3 | *Данные требования ни в коем случае не несут цели подавить фантазию дизайнера, но предлагают некоторые рамки, работа в которых позволит сделать верстку максимально быстрой и качественной. И положительно скажутся на дальнейшей разработке и развитии проекта. Всегда есть место компромису, всегда можно чуть-чуть подвинуться, стерпеть отход от общей сетки в отдельном блоке. Но все компромисы должны быть оправданы, а не являться следствием лени или некомпетентности.* 4 | 5 | Бо́льшая часть требований актуальна и для макетов в Sketch, и для макетов в AI. 6 | 7 | ## Содержание 8 | 9 | 1. [Общие требования](#Общие-требования) 10 | 2. [Модульность](#Модульность) 11 | 3. [Модульная сетка](#Модульная-сетка) 12 | 4. [Адаптивный дизайн](#Адаптивный-дизайн) 13 | 5. [Retina, графика, иконки и иконочные шрифты](#retina-графика-иконки-и-иконочные-шрифты) 14 | 6. [Шрифты](#Шрифты) 15 | 7. [Контент](#Контент) 16 | 8. [Статьи и видео по теме](#Статьи-и-видео-по-теме) 17 | 18 | ## Общие требования 19 | 20 | Название файлов и слоёв писать по-английски или транслитом. К названиям файлов добавлять приставки в формате год-месяц-число, позволяющие легко определить актуальную версию. Например, `file_2016-11-01.psd`. Если макет согласуется несколько раз в день, то имеет смысл включить в приставку и время: `file_2016-11-01_14-30.psd`. 21 | 22 | Макет должен иметь тот размер, в котором его нужно сверстать. 23 | 24 | Цветовой профиль — `sRGB`. Обязательно и критично. Иначе цвета в вёрстке могут отличаться от макетных. 25 | 26 | Разрешение — `72dpi`. Можно сделать `144dpi`, если рисуем в 2-кратном размере для retina-экранов и не используем векторную графику. 27 | 28 | Единицы измерения — пиксели (в том числе и для текста). 29 | 30 | Между объектами (например иконка и карта) допустим только режим наложения `normal`. Внутри объектов, которые предполагается экспортировать целиком (например баннер) — все что угодно. 31 | 32 | Не использовать корректирующие слои. Любые пост-модификации могут всерьёз осложнить работу верстальщика. 33 | 34 | Соблюдать порядок в слоях и папках в макете. Обозначать скрытые слои (например цветом слоя), писать комментарии ко всем неочевидным моментам, описывать анимации. 35 | 36 | Все отдельные элементы должны быть на разных слоях. Если макетов несколько, в любом из них должен быть полный набор всех элементов. Например, header не должен быть вставленным картинкой или смарт-объектом. 37 | 38 | При передаче макетов в архиве использовать формат `ZIP`. 39 | 40 | ## Модульность 41 | 42 | На каждом из этапов (дизайн, вёрстка, программирование) сайт должен собираться из типовых элементов. Именно модульный дизайн обеспечивает легкость дальнейшей разработки и облегчает поддержку и развитие сайта. 43 | 44 | Необходимо сделать отдельный макет с набором типовых элементов и стилей (цветовая палитра, стили текста, кнопки, ссылки, отступы, типовые блоки и т. д.) и все остальные макеты собирать из этих элементов. 45 | 46 | Не следует плодить лишние сущности (цвета, стили текста, блоки), когда можно обойтись теми, что уже есть. 47 | 48 | ## Модульная сетка 49 | 50 | Обязательно использовать модульную сетку для расположения элементов. 51 | 52 | Идеальный вариант сетки 12 колонок (делится на 2, 3, 4 и 6). Так же иногда используются 16 и 24. 53 | 54 | Отход от стандартной сетки допустим, например, на сложных промо-страницах или для отдельных элементов. 55 | 56 | Важно понимать, как работает сетка для верстальщика. 57 | 58 | Самый популярный подход к сетке на сегодняшний день предлагает [Bootstrap](http://getbootstrap.com/css/#grid). Его суть заключается в том, что задается общее количество колонок, а размеры элементов, указываются в колонках. 59 | 60 | Например, если мы используем 12-колоночный вариант и хотим задать ширину элемента в 50% ширины сайта, то зададим ему ширину 6 колонок. 61 | 62 | Колонки можно вкладывать в другие колонки, но здесь кроется важная деталь — вложенная сетка имеет столько же колонок. 63 | 64 | Например, на странице есть элемент шириной 6 колонок (половина страницы если используем 12). Внутри него — 2 элемента, визуально и в соответствие с направляющими, шириной в 3 колонки каждый. 65 | 66 | На самом же деле, внутри у нас так же 12 колонок, соответственно вложенные элементы должны иметь ширину 6 колонок каждый, что и будет соответствовать 3 колонкам. 67 | 68 | ![Grid](https://raw.githubusercontent.com/andrey-hohlov/psd-templates-requirements/master/assets/grid.png) 69 | 70 | Старайтесь изначально определить количество колонок и расстояние между колонками (gutter) и использовать их для всех размеров экрана. Допустимо задавать разное количество колонок и расстояние между ними для разных размеров экрана. 71 | 72 | Будет очень хорошо, если сетка представлена не направляющими, а отдельным полупрозрачным слоем, [например](https://raw.githubusercontent.com/hagatorn/bootstrap3-grid-template/master/bootstrap%20md%20970px.png). Направляющие могут использоваться дизайнером не только для построения основной сетки, но и для каких-то отдельных элементов, что иногда путает при верстке. 73 | 74 | [Полное руководство по сеткам в веб дизайне](http://deadsign.ru/design/grids_in_web_design/) 75 | 76 | ## Адаптивный дизайн 77 | 78 | При создании макетов, особенно адаптивных, следует понимать процесс верстки и технические ограничения. Пройдите базовый курс верстки или посоветуйтесь с верстальщиком при создании макета. 79 | 80 | В идеале использовать подход `mobile first`. 81 | 82 | ### Актуальные разрешения экранов для адаптивного сайта 83 | 84 | * 320 px (смартфон, в том числе iPhone до 6 включительно). 85 | * 768 px (планшет в портретной ориентации). 86 | * 1024 px (планшет в альбомной ориентации, ноутбук). 87 | 88 | [Почему iPhone указан с шириной 320px при разрешении экрана 750×1334 у iPhone 6](http://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions) 89 | 90 | [Настоящие размеры viewport у разных мобильных устройств](http://viewportsizes.com/) 91 | 92 | Поддержка остальных разрешений зависит от проекта. Так, например, нет смысла делать блог, в котором преобладает текстовый контент, шириной больше чем 1024. А вот интернет-магазин вполне можно сделать под бо́льшие размеры экрана. 93 | 94 | Основные разрешения экранов: 1280, 1366, 1440, 1680, 1920. Очевидно что не имеет смысла делать разные макеты для 1280 и 1366. 95 | 96 | Важно понимать, что при разрешении экрана 1024 px по ширине контент должен быть меньше (~960–980 px), так как из ширины придется вычесть полосу прокрутки (17 px в среднем) и, возможно, рамки окна. 97 | 98 | Как правило, не обязательно делать макеты всех страниц под все разрешения, в некоторых случаях достаточно будет описания, например: *«На экранах 1200+ px добавляется ещё один столбец товаров в каталоге»* 99 | 100 | ## Retina, графика, иконки и иконочные шрифты 101 | 102 | Все что можно сделать векторным (в том числе и иллюстрации) — должно быть векторным. Векторные элементы лучше передать отдельными файлами. 103 | 104 | Все иконки без сложных эффектов (градиенты, тени) должны быть векторными и без проблем эскпортироваться в svg. Такие иконки следует рисовать шейпами в Photoshop или в Illustrator, вставляя в макет также шейпами (shape). Вставленные смарт-объектами иконки приходится по-отдельности открывать в Illustrator и сохранять оттуда, что замедляет работу. 105 | 106 | Выравнивайте точки в кривых по пиксельной сетке, если возможно. Тогда иконки не будут мыльными на экранах с низким разрешением, к тому же будут лучше сжиматься. В редакторах настройка обычно называется «snap to pixel». 107 | 108 | Артборд должен быть подогнан по габаритам фигуры. Для нескольких иконок одинакового размера допустимо, чтобы артборды были одинаковых размеров (больше габарита фигур). 109 | 110 | Всё, что может быть слито в единую форму, должно быть слито. 111 | 112 | Избегайте наложения эффектов и трансформаций. 113 | 114 | Избегайте градиентов и теней. В некоторых случаях это может наложить ограничения на использование векторной графики. 115 | 116 | Не комбинируйте в макете слои со вставленной векторной графикой с элементами, нарисованными в макете. Если вы вставили в макет векторную картинку и потом дополнили её какими-то слоями макета, использовать такую картинку без растеризации в вёрстке не получится 117 | 118 | Если ипользуются иконки с [icomoon.io](http://icomoon.io), [flaticon.com](http://flaticon.com) и подобных сервисов и вы скачиваете их оттуда в виде архива с SVG-файлами, приложите используемые к макету. 119 | 120 | Не накладывайте на векторные изображения в PSD-макетах корректирующие слои, маски, эффекты. Это приведёт к невозможности использования такой векторной графики. 121 | 122 | Все элементы интерфейса со сложными эффектами, которые будут экспортироваться в растре, должны быть в двукратном размере (тогда весь макет рисуется в двукратном размере) либо без потери качества ресайзится. 123 | 124 | Контентные элементы (фото, баннеры и т. д.) готовятся под ретину по согласованию с заказчиком и разработчиком. При поддержке retina-экранов и для контента весь макет рисуется в двукратном размере. 125 | 126 | Не стоит использовать иконочные шрифты из-за проблем с кроссплатформенностью и возможных дефектов отрисовки. 127 | 128 | ### Статьи по теме 129 | 130 | 1. [Руководство для дизайнера по DPI](https://habrahabr.ru/post/237931/) 131 | 2. [Icon System with SVG Sprites](https://css-tricks.com/svg-sprites-use-better-icon-fonts/) 132 | 3. [SVG `symbol` a Good Choice for Icons](https://css-tricks.com/svg-symbol-good-choice-icons/) 133 | 4. [Inline SVG vs Icon Fonts](https://css-tricks.com/icon-fonts-vs-svg/) 134 | 135 | ## Шрифты 136 | 137 | ### Приоритет использования 138 | 139 | 1. [Системные шрифты](http://www.cssfontstack.com/) 140 | 2. Шрифты с [Google Fonts](https://www.google.com/fonts/) 141 | 3. Бесплатные шрифты, имеющие веб-версию. 142 | 4. Платные приобретенные шрифты, имеющие веб-версию. 143 | 4. Бесплатные шрифты, не имеющие веб-версии. 144 | 5. Платные приобретенные шрифты, не имеющие веб-версии. 145 | 6. Платные не приобретенные. 146 | 147 | ### Форматы 148 | 149 | Веб-версия шрифта включает в себя форматы `.eot`, `woff`, `woff2` (опционально), `ttf`, `svg` (опционально). 150 | 151 | Существует множество конвертеров шрифтов для использования на сайте, однако ни один из них не дает 100% качества: разная высота символов, несоответствие высоты строки в браузере, «рваные» символы, отдельные символы не отображаются. 152 | 153 | ### Лицензии шрифтов 154 | 155 | Не стоит использовать шрифты, имеющие лицензионные ограничения (т. е. которые для использования следует купить), не покупая их. Если заказчик настаивает — следует предупредить об ответственности за нарушении лицензии. 156 | 157 | [Разработчики шрифта отсудили полмиллиона у страховой компании](https://journal.tinkoff.ru/omg/480000-za-shrift/) 158 | 159 | ### Семейства и начертания 160 | 161 | Не рекомендуется использовать на сайте более 2 шрифтов и 3 начертаний (`regular`, `semibold`, `bold`) в каждом. Каждое начертание каждого семейства увеличивает время загрузки страницы. 162 | 163 | Используемые шрифты приложить к макету (файлы, или ссылки). 164 | 165 | ### Кегль 166 | 167 | В макете кегль шрифта задавать целым числом. 168 | 169 | ### Деформации 170 | 171 | В Photoshop можно деформировать текстовый блок, например — вытянуть по вертикали, сжать по горизонтали. В верстке скорее всего это будет невозможно. 172 | 173 | ### Переносы 174 | 175 | В вебе нет кроссбраузерных переносов. Лучше не использовать переносы слов вообще. Расстановка символов мягкого переноса в тексте возможна, но делать это вручную никто не будет. 176 | 177 | ## Контент 178 | 179 | ### Активные элементы 180 | 181 | Для всех активных элементов (ссылки, кнопки, инпуты) должны быть нарисованы дополнительные состояния, помимо обычного. 182 | 183 | * Для ссылок: `hover` и `active`, иногда требуется `visited`. 184 | * Для кнопок `hover`, `active`, `disabled`. 185 | * Для текстовых инпутов: `focus` и `disabled`. 186 | * Для чекбоксов и радио-кнопок: `checked` и `disabled`. 187 | 188 | ### Типовые элементы 189 | 190 | Если предполагаются текстовые страницы, должен быть макет со всеми типовыми элементами. 191 | 192 | * Заголовки H1-H6. 193 | * Параграфы. 194 | * Нумерованные и маркированные списки. 195 | * Таблицы. 196 | * Медиа (изображения, галереи, файлы для скачивания) в зависимости от задач. 197 | * Цитата (blockquote) опционально. 198 | 199 | ### Формы 200 | 201 | Если предполагаются формы, должны быть нарисованы сама форма и лейблы к полям и основные элементы форм. 202 | 203 | #### Основные элементы форм 204 | 205 | * Input Text 206 | * Textarea 207 | * Checkbox 208 | * Radiobutton 209 | * Select 210 | 211 | #### Стилизация 212 | 213 | По возможности следует избегать стилизации нестандартных элементов. Например, `select` стилизовать средствами CSS нельзя, приходится подключать скрипт, который заменяет его другой конструкцией. Если на сайте select используется только в одном месте и для выбора пола пользователя, разумнее будет заменить его на 2 радио. 214 | 215 | ### Текст 216 | 217 | Текст-рыбу использовать на языке сайта. [Генератор для русского языка](http://fishtext.ru/index.php). 218 | 219 | Не помещать в 1 текстовый блок 2 разных стиля, если это возможно. Например, если идет заголовок (красный, 60 px), а за ним текст (черный, 18 px) — это должны быть 2 разных блока, нажав на каждый из которых верстальщик сможет сразу увидеть используемый стиль. 220 | 221 | Не набирать текстовые блоки КАПСОМ, использовать «All Caps». 222 | 223 | ### Прочее 224 | 225 | Не использовать прозрачность, чтобы добиться цвета (например прозрачность для черного текста, чтобы он выглядел серым). 226 | 227 | Если используется фон из бесшовной текстуры — нужно приложить её отдельно. 228 | 229 | Все элементы должны быть подготовлены и обрезаны таким образом, чтобы исключить ситуации, когда, например, при экспорте треугольника из макета получается ромб (потому, что верхнюю его половину просто прикрывал другой слой. 230 | 231 | ## Статьи и видео по теме 232 | 233 | * [Правила хорошего тона в «Фотошопе»](http://i-love-psd.ru/) 234 | * [Памятка дизайнеру сайтов](http://habrahabr.ru/post/50497/) 235 | * [8 простых способов улучшить типографику в вашем дизайне](http://habrahabr.ru/post/56625/) 236 | * [Designing for web](https://github.com/KyreenaH/Designing-for-Web) 237 | * [О чём должен помнить веб-дизайнер](https://github.com/nicothin/web-design) 238 | * [О чём смеются верстальщики | Вадим Макеев | Дизайн-форум Prosmotr](https://www.youtube.com/watch?v=lW4uzJp6uIg) 239 | * [Дизайнь как верстальщик](https://habrahabr.ru/post/311800/) 240 | * [Требования к дизайн-макету сайта - Студия ПаЛыЧа](http://palpalych.ru/blog/7-prochee/85-trebovanija-k-dizajnmaketu-sajta.html) 241 | * [Работа в команде. Как помирить дизайнера и верстальщика](https://habrahabr.ru/post/330144/) 242 | -------------------------------------------------------------------------------- /assets/grid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andrey-hohlov/psd-templates-requirements/ff9a8c738bd38f87694dee66c776b6f231d047a9/assets/grid.png --------------------------------------------------------------------------------