Горизонтальная сетка — главный структурный элемент веб-дизайна. Без неё макет теряет гармоничность и логику. Макет без сетки — чертёж дома, нарисованный на глаз. Представьте, какой дом в итоге по этому чертежу построят.
Структурные блоки располагают по сетке. Чаще используются сетки на 12, 16 и 24 колонки. Количество колонок зависит от количества структурных блоков сайта.
Сетка однородна в пределах проекта.
Вертикальная сетка или высота строки выбирается в зависимости от размера шрифта основного текста. Так, имея текст размером 16px на рабочих страницах, читабельная высота строки равна 24px (16 * 1,5). Эти 24px и считаются вертикальным шагом сетки.
Как использовать эти 24px? Вертикальные отступы и высоты элементов кратны этому числу. Вставляя в текст изображение, выбираются высоты 192px, 216px, 240px, 264px и т.д., с отступами снизу и сверху по 12px (12*2=24) или по 24px. Отступы между параграфами — 24px снизу. И так далее. Смысл в том, чтобы создать однородный вертикальный ритм на странице, чтобы глаз читателя плавно переходил от элемента к элементу, не цепляясь за разнородные отступы и высоты.
Макеты с продуманной и реализованной вертикальной сеткой встречаются крайне редко.
Дополнительное чтиво: Why is Vertical Rhythm an Important Typography Practice?
Типографика должна быть тщательно продумана. Наличие всех типов заголовков, оформление цитат, списков, вложенных списков, изображений в тексте, таблиц — обязательно, если на сайте будет область контента. Не нужно делать 1 заголовок, 2 абзаца текста и на этом всё.
Не нужно использовать магические цифры в размерах шрифтов, отсупах (13, 17, 133 и тд). Для отсупов есть вертикальная сетка, всё должно быть кратно ей. Размеры шрифтов подбираются исходя из знаний в области типографики или при помощи сервисов ниже.
Заголовоки должены иметь отсуп к последующему тексту меньше чем к предыдущему. Это помогает визуально разбивать текст на разделы.
Важно чтобы ощущалось единство типографики в пределах всего сайта. Чтобы были закономерности в отступах и размерах элементов.
Главный источник шрифтов для сайтов — Google Fonts. Надёжно, подключается за пару минут. Если макет требует нестандартный шрифт — WebFont.ru.
Важно! Не качайте с непонятных сайтов шрифты, не предназначенные для веб.
Среднестатистический сайт рисуют с использованием одного-двух шрифтов. Важна однородность восприятия шрифтов на сайте.
И, конечно же, в идеале шрифты подбираются сочетаемые. Литературы по сочетанию шрифтов масса, поэтому тут сложно дать конкретные советы. Для Google Fonts создан сайт с уже готовыми сочетаниями шрифтов Font Pair.
Если главный контент сайта — текст, то важно подобрать правильную типографику и размеры шрифтов. Используйте Type Scale, Modular Scale, Golden Ratio Typography Calculator и прочее.
Проще и удобнее применять шрифтовые и SVG иконки. Они легко масштабируются под мобильные и десктопные устройства, легко меняются при помощи CSS (не нужно лишний раз заходить в Photoshop/Sketch и нарезать). Наборы таких иконок — Font Awesome, FlatIcon.
В идеале цветовая схема соответствует тематике сайта и гармонична. 1-3 цвета с оттенками на сайте — достаточное количество.
Важно: выбрав цветовую схему, нужно ей следовать в пределах проекта. Не используйте 100500 оттенков серого/другого цвета.
Умение определить цветовую схему, исходя из тематики сайта и прототипа — дар.
К верстальщику макет поступает подготовленным и оптимизированным. Лишние слои/элементы удаляются.
Важно группировать слои в блоки, чтобы верстальщик мог в один клик скрыть любой структурный блок в макете. Группы слоёв называются в зависимости от своей роли в макете.
Отдельно предоставляется макет с типографикой/цветами/шрифтами (UI) сайта. Такой макет способен увеличить скорость вёрстки в разы.