Требования к дизайн макетам
Данные требования являются рекомендацией для дизайнеров, и имеют своей целью:
- уменьшить время на коммуникации между дизайнером и верстальщиком; уменьшить объем работы дизайнера до передачи макета верстальщику; ускорить работу верстальщика над макетом упростить дальнейшее обслуживание и поддержку сайта
Содержание
Общие требования
Обеспечить наличие всех макетов, описанных в ТЗ в формате psd. Т. к. предполагается, что сайт будет адаптивным, то необходимы макеты для каждого состояния ширины имеющего отличное отображение. Макет должен иметь тот размер, в котором его нужно сверстать. При работе с модульной сеткой, определяя ширину макета учесть известное несоответствие размеров.
Название файлов PSD должно отражать содержимое, например, main, catalog, catalog-list. Наименования слоёв и папок внутри PSD писать по-английски или транслитом. К названиям файлов добавлять приставки в формате год-месяц-число, позволяющие легко определить актуальную версию. Обеспечить наличие полноразмерного jpg в качестве превью макета (для макетов, содержащих на отключаемых слоях значимые элементы нужно несколько превью). Название превью совпадает с названием psd (+ комментарий, если превью несколько).
Цветовой профиль файлов PSD — sRGB. Иначе цвета в вёрстке могут отличаться от макетных.
Единицы измерения — пиксели (в том числе и для текста).
Между объектами (например иконка и карта) допустим только режим наложения normal. Внутри объектов, которые предполагается экспортировать целиком (например баннер) — все что угодно.
Не использовать корректирующие слои. Соблюдать порядок в слоях и папках в макете. Обозначать скрытые слои (например цветом слоя), писать комментарии ко всем неочевидным моментам, описывать анимации.
Все отдельные элементы должны быть на разных слоях. Если макетов несколько, в любом из них должен быть полный набор всех элементов. Например, header не должен быть вставленным картинкой или смарт-объектом.
Если в макете используются большие изображения, например, фоны для full-width блоков или большие картинки в слайдерах, их нужно вынести отдельно в отдельную папку images. Названия этих файлов давать на латинице без пробелов. Приложить полную версию фона (не обрезая его под ширину макета) в соответствующую папку.
Модульность
На каждом из этапов (дизайн, вёрстка, программирование) сайт должен собираться из типовых элементов. Именно модульный дизайн обеспечивает легкость дальнейшей разработки и облегчает поддержку и развитие сайта.
Необходимо сделать отдельный макет с набором типовых элементов и стилей (цветовая палитра, стили текста, кнопки, ссылки, отступы, типовые блоки и т. д.) и все остальные макеты собирать из этих элементов.
Не следует плодить лишние сущности (цвета, стили текста, блоки), когда можно обойтись теми, что уже есть.
Модульная сетка
Обязательно использовать модульную сетку для расположения элементов. Реомендуем Bootstrap. Идеальный вариант сетки 12 колонок (делится на 2, 3, 4 и 6).
Отход от стандартной сетки допустим, например, на сложных промо-страницах или для отдельных элементов, но в целом это скорее исключение.
Например, если мы используем 12-колоночный вариант и хотим задать ширину элемента в 50% ширины сайта, то зададим ему ширину 6 колонок.
Колонки можно вкладывать в другие колонки, — вложенная сетка имеет столько же колонок. Например, на странице есть элемент шириной 6 колонок (половина страницы если используем 12). Внутри него — 2 элемента, визуально и в соответствие с направляющими, шириной в 3 колонки каждый.
На самом же деле, внутри у нас так же 12 колонок, соответственно вложенные элементы должны иметь ширину 6 колонок каждый, что и будет соответствовать 3 колонкам.
Проблема возникает с элементами, шириной например 7 колонок, внутри которых 2 элемента — 3 и 4 колонки шириной. Нельзя, используя сетку, если у нас адаптивный/резиновый макет, разделить этот блок, чтобы получить элементы такой ширины.
Это не является серьезной проблемой, и может быть решено несколькими способами. Однако, если изначально стоит задача сделать дизайн под конкретную модульную сетку («дизайн под bootstrap») — следует быть внимательными с такими моментами.
Изначально определить количество колонок и расстояние между колонками (gutter) и использовать их для всех размеров экрана.
Использование не стандартных сеток и инструментов для их генерации недопустимно т. к. усложняет как процесс верстки так и дальнейшую поддержку такого кода и является потенциальным источником ошибок.
Будет очень хорошо, если сетка представлена не направляющими, а отдельным полупрозрачным слоем, например. Направляющие могут использоваться дизайнером не только для построения основной сетки, но и для каких-то отдельных элементов, что иногда путает при верстке.
Хорошая статья на тему сеток здесь: Полное руководство по сеткам в веб дизайне
Адаптивный дизайн
При создании адаптивных макетов, следует учитывать технические ограничения. Если необзодимо, посоветуйтесь с верстальщиком при создании макета. В идеале использовать подход mobile first.
Актуальные разрешения экранов для адаптивного сайта
- 320 px (смартфон, в том числе iPhone до 6 включительно). 768 px (планшет в портретной ориентации). 1024 px (планшет в альбомной ориентации, ноутбук).
Почему iPhone указан с шириной 320px при разрешении экрана 750Ч1334 у iPhone 6
Настоящие размеры viewport у разных мобильных устройств
Основные разрешения экранов: 1280, 1366, 1440, 1680, 1920. Важно понимать, что при разрешении экрана 1024 px по ширине контент должен быть меньше (~960–980 px), так как из ширины придется вычесть полосу прокрутки (17 px в среднем) и, возможно, рамки окна.
Retina, графика, иконки и иконочные шрифты
Все что можно сделать векторным (в том числе и иллюстрации) — должно быть векторным. Векторные элементы лучше передать отдельными файлами.
Все иконки без сложных эффектов (градиенты, тени) должны быть векторными и без проблем эскпортироваться в svg. Такие иконки следует рисовать шейпами в Photoshop или в Illustrator, вставляя в макет также шейпами (shape). Вставленные смарт-объектами иконки приходится по-отдельности открывать в Illustrator и сохранять оттуда, что замедляет работу.
Выравнивайте точки в кривых по пиксельной сетке, если возможно. Тогда иконки не будут мыльными на экранах с низким разрешением, к тому же будут лучше сжиматься. В редакторах настройка обычно называется «snap to pixel».
Артборд должен быть подогнан по габаритам фигуры. Для нескольких иконок одинакового размера допустимо, чтобы артборды были одинаковых размеров (больше габарита фигур).
Всё, что может быть слито в единую форму, должно быть слито.
Избегайте наложения эффектов и трансформаций.
Избегайте градиентов и теней. В некоторых случаях это может наложить ограничения на использование векторной графики.
Не комбинируйте в макете слои со вставленной векторной графикой с элементами, нарисованными в макете. Если вы вставили в макет векторную картинку и потом дополнили её какими-то слоями макета, использовать такую картинку без растеризации в вёрстке не получится
Эффект Блюр: использовать только для всего блока целиком, при этом блок не должен быть динамичным (например, google карта).
Если ипользуются иконки с icomoon. io, и подобных сервисов и вы скачиваете их оттуда в виде архива с SVG-файлами, приложите используемые к макету.
Не накладывайте на векторные изображения в PSD-макетах корректирующие слои, маски, эффекты. Это приведёт к невозможности использования такой векторной графики.
Для ретины: все элементы интерфейса со сложными эффектами, которые будут экспортироваться в растре, должны быть в двукратном размере (тогда весь макет рисуется в двукратном размере) либо без потери качества ресайзится.
Контентные элементы (фото, баннеры и т. д.) готовятся под ретину по согласованию с заказчиком и разработчиком. При поддержке retina-экранов и для контента весь макет рисуется в двукратном размере.
Наличие файлов favicon. Иконки должны быть заранее подготовлены в формате png в размерах:
16х16 (favicon. png)
32х32 (favicon2x. png)
72x72 (apple-touch-icon-72x72-precomposed. png)
76x76 (apple-touch-icon-76x76-precomposed. png)
114x114 (apple-touch-icon-114x114-precomposed. png)
120x120 (apple-touch-icon-120x120-precomposed. png)
144x144 (apple-touch-icon-144x144-precomposed. png)
152x152 (apple-touch-icon-152x152-precomposed. png)
Статьи по теме
Icon System with SVG Sprites SVG symbol a Good Choice for IconsШрифты
Приоритет использования
Системные шрифты Шрифты с Google Fonts Бесплатные шрифты, имеющие веб-версию. Платные приобретенные шрифты, имеющие веб-версию. Бесплатные шрифты, не имеющие веб-версии. Платные приобретенные шрифты, не имеющие веб-версии. Платные не приобретенные.Форматы
Веб-версия шрифта включает в себя форматы. eot, woff, woff2 (опционально), ttf, svg (опционально).
Существует множество конвертеров шрифтов для использования на сайте, однако ни один из них не дает 100% качества: разная высота символов, несоответствие высоты строки в браузере, «рваные» символы, отдельные символы не отображаются.
Лицензии шрифтов
Не стоит использовать шрифты, имеющие лицензионные ограничения (т. е. которые для использования следует купить), не покупая их.
Если заказчик настаивает — следует предупредить о нарушении лицензии. Вероятность привлечения к ответственности очень мала, но это как минимум неэтично. И именно с такими шрифтами больше проблем при их конвертации.
Семейства и начертания
Не рекомендуется использовать на сайте более 2 шрифтов и 3 начертаний (regular, semibold, bold) в каждом. Каждое начертание каждого семейства увеличивает время загрузки страницы.
Используемые шрифты приложить к макету (файлы, или ссылки).
Кегль
В макете кегль шрифта задавать целым числом.
Деформации
В Photoshop можно деформировать текстовый блок, например — вытянуть по вертикали, сжать по горизонтали. В верстке скорее всего это будет невозможно.
Переносы
В вебе нет кроссбраузерных переносов. Лучше не использовать переносы слов вообще. Расстановка символов мягкого переноса в тексте возможна, но делать это вручную никто не будет.
Контент
Активные элементы
Для всех активных элементов (ссылки, кнопки, инпуты) должны быть нарисованы дополнительные состояния, помимо обычного. В макете слои с состояниями должны быть соответствующим образом подписаны, чтобы не перепутать, например, hover и focus.
- Для ссылок: hover и active, иногда требуется visited. Для кнопок hover, active, disabled. Для текстовых инпутов: focus и disabled. Для чекбоксов и радио-кнопок: checked и disabled.
Прорисовать при необходимости все виды выпадающих меню и их состояния
Типовые элементы
Если предполагаются текстовые страницы, должен быть макет со всеми типовыми элементами.
- Заголовки H1-H6. Параграфы(абзаци). Нумерованные и маркированные списки. Таблицы. Медиа (изображения, галереи, файлы для скачивания) в зависимости от задач. Цитата (blockquote) опционально. Кнопки Элементы форм
Формы
Если предполагаются формы, должны быть нарисованы сама форма и лейблы к полям и основные элементы форм.
Основные элементы форм
- Input Text Textarea Checkbox Radiobutton Select
В формах предусмотреть дизайн отображения ошибок. Например: при отправке незаполненного обязательного поля меняется цвет границы поля ввода и выдается соответствующее сообщение.
Стилизация
По возможности следует избегать стилизации нестандартных элементов. Например, select стилизовать средствами CSS нельзя, приходится подключать скрипт, который заменяет его другой конструкцией. Если на сайте select используется только в одном месте и для выбора пола пользователя, разумнее будет заменить его на 2 радио.
Текст
Не помещать в 1 текстовый блок 2 разных стиля, если это возможно. Например, если идет заголовок (красный, 60 px), а за ним текст (черный, 18 px) — это должны быть 2 разных блока, нажав на каждый из которых верстальщик сможет сразу увидеть используемый стиль.
Не набирать текстовые блоки КАПСОМ, использовать «All Caps». Предусмотреть экстремальные значения. Например, всегда учитывать, что аннотация новости может отсутствовать или быть несколько больше, чем предполагается отобразить.
При наполнении макетов текстом, предусмотреть максимальное использование реальной информации. Использовать реальные фото, тексты с сайтов группы компаний и т. д.
В случае необходимости текст-рыбу использовать на языке сайта. Генератор для русского языка.
Прочее
Не использовать прозрачность, чтобы добиться цвета (например прозрачность для черного текста, чтобы он выглядел серым).
Если используется фон из бесшовной текстуры — нужно приложить её отдельно.
Все элементы должны быть подготовлены и обрезаны таким образом, чтобы исключить ситуации, когда, например, при экспорте треугольника из макета получается ромб (потому, что верхнюю его половину просто прикрывал другой слой.
Если в макете предполагается анимация (например, при прокрутке страницы), сопроводить макет детальным описанием этой анимации (раскадровка) или сделать видео/gif-анимацию, описать словами все анимационные эффекты.
Прорисовать страницу 404
Использовать только лицнезионно чистые - предоставленные заказчиком либо купленные на стоках изображения, видео, шрифты и другой контент.
