Артём
27 октября 2014

Как собрать страницу из модулей: с иллюстрациями.



Вернёмся к нашей текстовой странице из совета о вёрстке без иллюстраций. Чтобы сделать её интереснее и привлечь внимание читателя, добавим к модулям иллюстрации:

Страница выросла в размерах, но не зря — с иллюстрациями на неё приходит жизнь.

Если все картинки слишком маленькие и одинаковые по размерам, страница выглядит слабо. Хороший верстальщик выделяет главное. Читатель справедливо сочтёт главным самый большой элемент в начале страницы, поэтому одна из иллюстраций должна быть крупной и доминировать над остальными. При этом доминирующая иллюстрация не обязана стоять на самом верху, однако лучше чувствует себя в верхней части страницы:

Плохо

Плохо

Хорошо

К странице применяется правило якорных объектов — иллюстрации должны тяготеть к углам, сторонам или визуальному центру. Но при этом на хорошо сбалансированной странице иллюстрации распределены равномерно. Ошибкой было бы собрать все иллюстрации в самом верху, далеко внизу или у одной из сторон:

Плохо


Веб-страница не ограничена в длине. На одной странице легко поместится содержание бумажного каталога или рекламного буклета. Чтобы читатель не утомлялся от однообразия, дизайнеры чередуют на экранной странице спокойные текстовые слои, насыщенные иллюстрации, вдумчивые таблицы и цитаты из отзывов. Это напоминает работу с динамикой многостраничного бумажного издания, как если бы страницы не перелистывались в книжке, а располагались прямо друг под другом:

Хорошо


Чем проще содержание страницы, тем меньше слоёв и тем они однообразнее, чем сложнее структура — тем больше слоёв и разнообразия:

Слои чередуются по визуальной яркости, динамике, эмоциональному тону, преобладанию иллюстраций или текста, размеру иллюстраций, длине текста и обязательно по ритму.

Рассмотрим отдельно особенный тип модуля с иллюстрациями — «галерею». Галерея занимает отдельный слой или всю страницу новостного фоторепортажа, каталога товаров, отчёта о путешествиях. Иллюстрации в галерее — главный герой, им отдаётся вся полезная площадь.

Мы не поддерживаем путь ленивых веб-дизайнеров — мёртвые однообразные матрицы из фотографий. Жизнь приходит с разнообразием размеров и формы:

Плохо

Хорошо

К галереям применимо правило модульности — блоки из фотографий должны стремиться к прямоугольной форме. Но «кирпич» из иллюстраций выглядит как… кирпич:

Кирпично


Скучно, душно и монотонно. Такой модуль выглядит тяжеловесно и с трудом встраивается в страницу рядом с другими.

Небольшой поток воздуха вокруг фотографий оживляет галерею и естественно соединяет её с другими частями страницы:

Интересно


На примере справа у модуля появилось два набора полей — внешний, вокруг большой фотографии, и внутренний, вокруг вертикальной фотографии и подписи к ней.

Иллюстрация — самый плотный элемент вёрстки и сильнее всего активирует контрпространство. Если неудачно скомпоновать иллюстрации разных размеров и пропорций, пространство между ними образует навязчивые углы, тупики и ступеньки. Поэтому дополнительный воздух и подписи лучше «отжимать» к краям галереи:

Плохо

Хорошо

Иллюстрация как базовый элемент вёрстки
P. S.
Это был понедельничный совет о вёрстке и типографике в вебе. «Типографика и вёрстка» — одна из дисциплин Школы стажёров. Присылайте вопросы.
P. P. S.

Открыт набор в Школу стажёров до 24 июля или пока есть свободные места. Занятия с 28 августа.

 

Поделиться

Комментарии

Сергей Михайлов
27 октября 2014

Артём, в примерах совета заголовок стоит над иллюстрацией. Я так понимаю, что это не критично для первых (главных) иллюстраций. Что думаете?

Олег Репин
27 октября 2014

Т. е. когда модули с фото равнозначные по смыслу — это не плохо?

Евгений Максименков
31 октября 2014

Я согласен, что разнообразие выглядит живо, но нет уверенности, что это эффективней. Проводились ли A/Б-тесты, чтобы подтвердить данную практику?


10 марта 2015

Сергей, вы совершенно правы. Фактически это заголовок всей страницы, а не просто первого модуля.


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

Сделали страницу для обучающего сервиса по безопасности. Как навести порядок? Вторая часть 2




Недавно всплыло

Расскажите об управляемости: программа 2 Как сделать плавный переход от общения с администратором к директору? 1 У меня остаётся ощущение, что я идиот, «рассыпала бобы», но на конкретных ошибках не могу себя поймать 3 Столкнулся с проблемой, когда долго общаешься с клиентом, и потом выясняется, что его не устраивает порядок цен. Часть 1 2