😎 Как не огрести от верстальщика
Краткое руководство
Сверстать можно всё
Веб-дизайнер — это инженер
Технически недоработанный макет осложняет работу технолога
Создавайте компоненты, а не страницы
Работайте вместе с технологом
Не используйте неподходящие инструменты
Пишите техзадание
Если не имеете возможности встретится с технологом
Научитесь верстать
Макеты
sRGB
1/1
Макет должен иметь тот размер, в котором его нужно сверстать
Режим наложения normal
Одна страница = один макет
Скрытые слои не будут свёрстаны
Eсли в техзадании не указано иное
Оставляйте эффекты слоёв
Про корректирующие слои лучше забыть
Прикладывайте все линкованные ресурсы
Картинки, шрифты и скриншоты макета
Стайлгайд
Создавайте стайлгайд
Создали стайлгайд — используйте его
Стайлгайд — это отдельный макет
Это не текстовая инструкция как включать/выключать видимость слоёв, варианты композиции слоёв. Это не артборд, включённый в какой-либо макет
Не забывайте о состояниях элементов
Ссылки
Для ссылок нужны состояния:
- Покой
- Наведение
- Клик
- Уже посещалась (желательно)
Кнопки
Для кнопок нужны состояния:
- Покой
- Наведение
- Клик
- Блокированна
- Идёт процесс (иногда)
Текстовые поля
Для текстовых полей форм нужны состояния:
- Покой
- Курсор в поле
- Блокировано
- Нет смысла делать «клик» и «наведение»
Флажки
Для флажков (чекбоксов) и радиокнопок нужны состояния:
- Отмечено
- Не отмечено
- Блокировано
- Нет смысла делать «клик» и «наведение»
Типографика
Для типографики нужно показать, как минимум, следующее:
- Заголовки с 1 по 4
- Маркированный и нумерованный список
- Блочная цитата
- Таблица
- Чередовать их с параграфами
Типографика
Верстальщику важно увидеть все вертикальные расстояния
Модульные сетки
Используйте модульные сетки
Не нарушайте сетку
Модульные сетки — резиновые
Идеал модульной сетки — 12 колонок
12 делится на 2, 3, 4 и 6
Между колонками может быть пустое место, пропорциональное ширине колонки
Текст и Шрифты
Используйте легальные шрифты
Используйте проверенные шрифты
PX
Размеры шрифтов и интерлиньяж указывайте целыми числами в пикселях
[14, 16, 22, 26, 32]
Выберите несколько размеров шрифта и придерживайтесь их
Высота текста
Вертикальные границы текстового блока проходят по границам «высоты линии», а не по границам букв первой и последней строк
Избегайте менять кернинг и трекинг
Интерлиньяж не должен быть меньше размера шрифта
В вебе нет кроссбраузерных переносов
Не используйте «маркерное выделение текста»
Не используйте «Lorem ipsum»
Блоки
Думайте о блоках и потоках блоков
Всегда думайте о переполнении блока текстом или другими блоками
У блоков есть внутренние и внешние отступы
Однотипные блоки должны иметь однотипные свойства
Векторная графика
Используйте векторную графику везде, где это возможно
Создавайте векторную графику в векторных редакторах
Создавайте векторную графику в отдельных файлах
Рисуйте векторные формы вместо работы кистью
1/1
Предоставляйте векторную графику в том её размере, в котором она использована в макете. Обязательно!
Не накладывайте на векторные изображения в PSD-макетах корректирующие слои, маски, эффекты
Snap to pixel
Выравнивайте точки в кривых по пиксельной сетке
Артборд должен быть подогнан по габаритам фигуры
Недопустимы режимы наложения, отличные от normal
Всё, что может быть слито в единую форму, должно быть слито
Удаляйте всё лишнее из векторных картинок
Все что за артбордом все равно будет в фале
Избегайте наложения эффектов и трансформаций
Избегайте градиентов и теней
Для форм с заливкой не используйте обводку того же цвета, что и заливка
Не комбинируйте в макете слои со вставленной векторной графикой с элементами, нарисованными в макете
Адаптивность, адаптивная графика
Выберите 2-3 брейкпоинта и создавайте макеты для них
Обычно 768, 992, 1200
Уточняйте в техническом задании как ведет себя дизайн на разных брейкпоинтах
Изображения
Ретинизируемые растровые изображения в оригинале должны быть в 2-3 раза крупнее, чем видно в макете
Мы можем показывать разные изображения на разных размерах экранов штатными методами
Хотите сами подготовить растровую графику — посоветуйтесь с верстальщиком
Разное
Анимация может повредить проекту
C точки зрения технологии реализации