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