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