Жидкая вёрстка и дряблая типографика
С чего начинается жидкая вёрстка?
Первым делом — начинайте с сетки. Ведь не зря вы читали Мюллера-Брокмана, Брингхерста и ту квадратную книгу, привезённую из Стокгольма, про секреты модульных сеток.
Модульная сетка — ваш верный спутник. С её помощью вы можете сконструировать совершенно любую композицию. Например, двенадцатиколонник — отличный выбор! Настоящий залог успеха.
Никогда не начинайте макетирование с идеи. Сначала создайте сетку и только потом приступайте к работе. Не думайте про суть — главное, чтобы всё было выровнено.
Вот вроде бы тот же канонический двенадцатиколонник, но макет совсем другой, более эмоциональный!
С помощью сетки вы можете конструировать совершенно любые макеты. Текст слева, а картинка справа? Легко. Текст справа, а картинка слева? Пожалуйста! А если всё по-центру? Проще простого. Вот это разнообразие!
Помимо сетки не стоит забывать про модули — они крайне важны. Взгляните на макет ниже.
Не важно, что получилось второсортно, безыдейно и перегруженно. Важно что всё ровно и по модулю. Не придерёшься же.
Как только разобрались с сеткой и модулями, можно собирать рыхлые макеты.
Слева — отличный пример рассыпчатой вёрстки. Много пустоты, нет контраста, одинаковые размеры блоков.
Ну и конечно же, любимый приём квёлого дизайнера — чередование картинки и текста. Картинка слева и текст справа, а ниже — картинка справа и текст слева, и так далее. Зря что ли сетку конструировали?
Вот как делать точно не стоит. Высокая плотность, контраст форм, цветов и текста. Зачем смешивать картинки и контент, когда их можно разнести по этажам? Нужно делать проще, воздушнее.
Другой пример хорошего жиденького макета. Все элементы отлично размазаны по углам так, что не осталось пустого места. Заголовок длинный и неконтрастный, пиктограммы и иконка бессмысленны. Всё примерного одинакового размера.
Ниже плохой пример, так делать нельзя: контрастно, осмысленно, плотно.
Рыхлая типографика
Чтобы вёрстка была ещё рыхлее, стоит обратить внимание на типографику.
Взглянем на макет. Что мы видим? Чёткую иерархию: картинка, крупный заголовок, лид и кнопка. Скукота!
Чтобы сделать макет более дряблым, нужно поиграться с акцидентной типографикой.
Отлично! Заголовок — крупнее, лид — крупнее, кнопка — крупнее, макет — рыхлее.
Набираем прописными, увеличиваем картинку и кнопку и не оставляем никаких пустот —каждый пиксель должен быть чем-то занят. Вот как всего в два шага можно превратить обычный крепкий макет в вялый и дряблый.