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