Сегодня я представляю новую рубрику, посвящённую вёрстке. Я планирую делиться знаниями, которые накапливал и систематизировал в течение своей дизайнерской жизни. Я работал над сайтами, приложениями, презентациями, информационными терминалами, бланками, визитками, плакатами, навигационными табличками и упаковкой. Читал книги о типографике, выуживая из каждой крупицы смысла и удачные ходы. Придумывал и обобщал собственные правила и приёмы.
Сегодня я чувствую в себе силы научить любого внимательного и трудолюбивого дизайнера сверстать крепкий, экономичный, рабочий макет.
Мы начнём с бумажной афиши, введём принципы плотной модульной вёрстки и в следующих советах применим их к другим печатным и экранным форматам.
Рубрика выходит с этого понедельника раз в две недели. Мы уделим внимание конструкции макетов из базовых деталей: заголовков, текста, иллюстраций, таблиц и элементов интерфейса. По сравнению с привычными советами мы станем меньше касаться вопросов смысла и пользы. Предмет обсуждения — как построить дом, а не зачем. К сожалению, по моему опыту, умный дизайнер часто не умеет верстать.
Базовый принцип системы вёрстки, которую я проповедую,— модульность. Модульные сетки, о которых слышали все дизайнеры — только частный случай модульной вёрстки. Знания о сетке редко помогают дизайнеру собрать страницу.
Информационные носители — экран, бумага, рекламный щит, — имеют прямоугольную форму. Прямоугольник — самая технологичная фигура, способная делиться на другие прямоугольники без отходов.
Поэтому мы примем как первую аксиому: все блоки — модули макета — должны иметь прямоугольную форму и составлять вместе общий прямоугольник страницы или экрана, которым они ограничены. Это не значит, что любой макет должен быть заполнен информацией, как ванная комната плиткой — главное, чтобы прямоугольники читались. В вёрстке полноправно участвует пустота, или контрпространство, а элементы вёрстки в модулях должны следовать правилу якорных объектов.
Ваш макет устроен по принципу сендвича:
Соседние слои вашего бутерброда контрастируют друг с другом, и это хорошо. Если не использовать принцип чередования, слои начнут сливаться, и тогда не спасут ни линейки, ни дополнительные отступы.
Но слоёв‑модулей слишком много — целых девять. Из‑за этого афиша выглядит дробной и сложной.
Кроме того, сами модули не прямоугольны и имеют разные размеры. Поэтому они плохо стыкуются друг с другом и не составляют общий прямоугольник макета:
Я рекомендую начинать с самых крупных и важных, якорных объектов. В данном случае это заголовок акции. Якорные объекты должны находиться либо у краёв своего прямоугольника, либо в визуальном центре. Поскольку мы предполагаем, что модулей будет несколько, пока выберем произвольную высоту. Заголовок, подзаголовок и начало текста лучше не разрывать:
Добавим иллюстрацию. Коричневую лужу сразу заменим на зелёную травку:
На самом деле, картинку заметят раньше текста, поэтому для естественного чтения иллюстрацию лучше ставить выше заголовка:
Поставив картинку и заголовок, мы ответили на вопрос «что». Ответим на вопросы «когда»
Добавим строки культурной программы. Один из элементов списка явно выбивается по длине:
Конечно, можно попытаться сократить первую строчку. Но в ней содержится важное сообщение о бесплатных консультациях и название спонсора. Почему бы не выделить «фичу» из общего ряда, к тому же есть и другая — палатка помощи:
Получается слишком много этажей — а ведь мы ещё не разместили всю информацию. Переставим и подкрасим фичи в боковой колонке, придав ей высоту модуля:
Названия и адреса организаций расставим в подвале в виде колоночек одинаковой высоты. Логотип тоже подчиним модулю:
Освободим место для телефонов, подняв иллюстрацию и текстовую часть. Телефоны стали частью подвального модуля, поэтому логотип подрос:
Кстати, мелкая вертикальная строчка справа внизу — это подпись автора. Подпись должна быть скромной, но без неё нельзя.
Итак, мы собрали конструкцию — получилась традиционная афиша события с датой. Попробуем поставить призыв к действию в более логичное место — в конец:
Кстати, уважаемые советчики приглашаются попробовать конструкцию, в которой подвал с организациями переезжает в шапку, а дата и адрес — вниз.
Получается неплохо по смыслу — сначала что, потом уже когда и куда. Однако нарушаются сразу все принципы хорошей конструкции: якорные объекты — заголовок и даты — расплылись по макету, соседние этажи не контрастируют, большая часть макета превратилась в груду текста. Поэтому мы остановимся на предыдущей компоновке и займёмся нюансами.
Кстати, уважаемые советчики приглашаются попробовать конструкцию, в которой подвал с организациями переезжает в шапку, а дата и адрес — вниз.
Постараемся согласовать элементы макета, сделав его более цельным.
Пусть наша иллюстрация поиграет с текстом, привлечёт к нему внимание. Выдвинем папину голову в модуль с датой, для этого не грех скорректировать картинку:
Этот приём очень любят газетчики и пока совсем не используют веб‑дизайнеры.
Обратимся к заголовку. Отцепим слово «акция», избавимся от кавычек и наберём заголовок крупнее. Слово «акция» приклеим к началу заголовка:
Назовём такую конструкцию заголовка «биркой». Советую её запомнить: она удобна для выделения рубрик и ключевых слов. Бирка делает заголовок законченным, одетым и более дорогим. Бирка для заголовка — то же, что засечка для буквы, карниз для здания, подпись для картинки. Как правило, бирка контрастирует с заголовком: жирный с нежирным, капитель со строчными.
Теперь смысловая текстовая часть. Развеселим по‑афишевски (т. е. в стиле журналов «Афиши») строки списка цветами и стилями. Одну
Заодно систематизировали вертикальные отступы и интерлиньяжи
Логотип в подвале стоит уменьшить. Заодно приведём к общему знаменателю цветовой акцент в телефонах:
Итого:
Было‑стало:
Этажей — меньше, кегль — крупнее, конструкция — проще и крепче.
P. S. Это был понедельничный совет о вёрстке и типографике в вебе. Хотите знать всё об интерлиньяжах, полях, отступах, кеглях, выравниваниях и модульных сетках? Присылайте вопросы.