Посмотрим на схему хорошей модульной страницы с иллюстрациями:
Что здесь хорошо? Во‑первых, у страницы есть заголовок. Причём обратите внимание, что на этой схеме он стоит не под иллюстрацией, хотя в принципе мог бы, а над ней. Потому что он накрывает всю страницу, он про всю страницу и эта фотография ему подчиняется.
Хорошо, что у страницы есть явная доминанта — главная фотография. Это самый большой элемент, и с ней ничего не спорит. Также очень важно, что эта доминанта находится наверху. С неё начинается страница. Если вы сгрузите доминанту куда‑нибудь вниз или в середину страницы, это будет плохо. Акценты будут смещены. Самое громкое заявление должно быть в начале.
Дальше на странице какие‑то дополнительные иллюстрации. И обратите внимание, как они разбросаны: они не сгружены все на один борт, а появляются то слева, то справа. Это нужно, чтобы сохранялась какая‑то композиция, чтобы иллюстрации не сваливались на один борт и страница не казалась с одной стороны перегруженной.
Здесь ещё имеет значение чередование ритма, про которое мы с вами говорили. Когда ритм меняется, страницу разглядывать интереснее.
Разберём схемы плохих страниц.
Вот эта схема, с одной стороны, соблюдает все правила чередования ритма, но в ней есть проблема с доминантой:
Доминанты здесь просто‑напросто нет. Фотография в начале недостаточно большая, чтобы главенствовать над всем остальным.
Страница ниже плоха тем, что доминанта свалилась куда‑то вниз:
Я зашёл, мне сначала показывают какую‑то фигню, а потом — бдыщ! — самое главное оказывается внизу, а не в начале. Так фигово.
Эта страница плоха тем, что здесь после главной иллюстрации идёт скучное перечисление какого‑то текста, фич или ещё чего‑то:
Плюс здесь нижние иллюстрации сгрузились в самом конце. Получается, начало интересное, середина суперскучная, конец тоже противоречивый, может быть, и скучный, и перегруженный.
Хочу показать пару хороших студенческих страниц, которые ребята сделали в Школе дизайнеров бюро. Страница про то, что кофе полезно пить:
Во‑первых, есть довольно неплохая доминанта — крупный заголовок, плашка, которая добавляет веса всему этажу, большая фотография девушки‑врача:
Дальше идёт текстовый блок, какая‑то лошадь для развлечения:
И весь этаж старается отличиться от первого этажа. Не в последнюю очередь благодаря тому, что выше кофейная плашка есть, а здесь уже нет.
После этого идёт плотный этаж с каким‑то Денисом Гусевым:
Эта штука по ритму сильно отличается от того, что мы видели до этого. То есть выше были лёгкие этажи, а здесь плотный этаж с не менее плотным Денисом.
После идёт какой‑то лёгкий текст и меняется ритм — появляются две колонки, а за ними верблюд. И дальше как‑то ритм чередуется:
В результате страницу легко изучать и интересно читать.
Посмотрим страницу «Оксфорд‑теста», которую в своё время мы задизайнили с Максом Ильяховым. «Оксфорд‑тест» — это такой микросервис, который позволяет проверить уровень своего английского. Мы сделали промостраницу, которая про это рассказывает и призывает этот тест пройти:
Что у нас здесь происходит? Заголовок объясняет, куда мы попали, а дальше — мегадоминанта, которая призвана заинтриговать человека:
Это такой интерактивный виджет: можно нажимать на английских персонажей, и они будут говорить какие‑то свои цитаты. В зависимости от того, насколько ты хорошо знаешь английский, ты можешь разобраться, что они говорят. Например, Гамлет говорит на каком‑то шекспировском языке — я не в состоянии его распознать. А кролик из книжки «Алиса в Стране чудес» говорит что‑то очень простое. Понятное дело, это не сам тест. Эта игра для демонстрации, которая интригует и показывает, у нас здесь прямо Англия‑Англия.
После этой компактной по высоте доминанты мы начинаем очень подробно рассказывать про сам тест: как он устроен, кому будет полезен, как использовать результат:
Текстовый модуль мы постарались немного развлечь и добавили иллюстрацию исключительно для того, чтобы огромный кусок текста не выглядел слишком скучно. Перед нами большой, но довольно лёгкий этаж из текста на белом фоне. После этого мы раз — и поставили большой важный этаж, но на тёмном фоне:
Этажом про сертификат мы череданули лёгкое и тяжёлое и ритм.
После этого мы опять меняем ритм и приглашаем смотреть отзывы:
Причём обратите внимание, что выше был плоский этаж «Проверьте свой прогресс», а этаж с отзывами высокий. Ещё ритм колонок поменялся. Правда, мы тогда не разбирались в том, что не очень хорошо ставить картинки сбоку от текста. Надо было бы поставить справа. Но что поделать.
В конце мы на плашке предлагаем зарегистрироваться и пройти тест:
В результате получилась разнообразная по ритму и насыщенности страница, которую интересно пройти до конца, если эта тема в принципе интересна.
Ещё обратите внимание на перебивки с фактоидами, которые мы используем время от времени, чтобы разделять этажи. Во‑первых, они помогают внести разнообразие на страницу. Во‑вторых, они лучше помогают отделить один этаж от другого. Читатель привыкает: раз фактоид, значит, какая‑то мысль закончилась, начинается следующая. Это удобно и с точки зрения внешнего вида, и с точки зрения вёрстки. И ещё мы таким образом можем сообщить любопытные детали, которые могут помочь читателю решиться пройти тест.
Вот пример не очень удачной модульной страницы:
Насколько я могу судить, автор этой страницы читал советы по вёрстке, а может быть, даже книжку Артёма Горбунова по вёрстке, но, к сожалению, не очень хорошо воспринял то, о чём там пишется. Он понял, что этажи и ритм этажей надо чередовать, но немного переборщил. В результате у него получился Франкенштейн, больше похожий на какую‑то дикую ярмарку, чем на какую‑то страницу, которую можно прочитать.
Смотрите, насколько здесь всё хаотично. Что ни этаж, то обязательно разнообразие, радикально новый ритм. И местами очень рваная вёрстка. Это не очень хороший пример вёрстки.
Частный случай модульной страницы с иллюстрациями — это галерея. Мы с вами уже говорили о том, что скучно, когда вы берёте и ставите серию иллюстраций вот такой матрицей:
Гораздо лучше, когда эта серия выглядит разнообразно:
Есть какая‑то главная иллюстрация, есть второстепенная. Если совсем не получается сделать что‑то суперразнообразное, можно хотя бы как‑то комбинировать большое‑маленькое, большое‑маленькое:
Но в некоторых случаях гораздо круче выглядят такие композиции:
Посреди фотографий с подписями можно оставлять какие‑то свободные кусочки. При этом важно следить, чтобы воздух, который вы оставляете в своих композициях, оставался снаружи всего модуля. Не зажатый где‑то между фотографиями, а снаружи. Мы это называем — отжимать воздух наружу.
Вот плохая композиция:
Тут, во‑первых, слишком большая дырка. Во‑вторых, воздух не отжали наружу — и в результате получается очень сложная история на вид.
Вот так уже гораздо лучше:
Мы с вами уже видели «Мэри Трюфель», которая по этому принципу построена:
И увидели, что, если так раскладывать фотографии, может получиться довольно интересный каталог, не в пример интереснее, чем какая‑нибудь скучная матрица из «Яндекс‑маркета».
Когда мы делали «Мэри Трюфель», мы придумали вот эту схему раскладки:
Здесь ещё были перебивочные фактоиды, которые нам ещё сильнее помогали разнообразить страницу.
«Лавишустринг» устроен по этому принципу:
Вот его схема раскладки:
«Лавишустринг» мы делали после «Мэри Трюфель», с тех пор сильно прокачались. Поэтому мы здесь придумали ещё более сложную систему раскладки, здесь прямо вот это всё неповторяющийся какой‑то ритм, то есть такая последовательность, она зациклена. После неё её можно запустить заново. И пользователь, на мой взгляд, в жизни не сможет понять, что, оказывается, здесь вот эта последовательность была зациклена.
Расскажу, как там было всё устроено. Это интересная история. Вот у нас схема «Лавишустринга». Как мы её выстраивали:
Смотрим на самую левую колонку:
Сначала мы нарисовали просто разные разновидности этажей. Был такой, сякой, была зелёная подборка. Синяя — это какой‑то любопытный факт. Мы нарисовали сколько‑то таких разновидностей этажей.
После этого на что мы ещё обратили внимание. Мы стали компоновать эти этажи так, в такие композиции, чтобы в них было равное количество фотографий, то есть каких‑то предметов, которые можно купить:
Здесь оранжевый блок, зелёный, синий, розовый. Они очень сильно отличаются по ритму друг от друга, но у них есть одна общая вещь — в них равное количество предметов. То есть если пересчитывать эти бледно‑розовые квадраты, то их будет везде одинаково. По‑моему, по пять штук. Есть пять оранжевых, пять зелёных, пять синих, пять красных. А яркие элементы — это в расчёт мы не брали.
После этого мы взяли и стали смотреть, как можно получившиеся комбинации стыковать друг с другом, чтобы всегда было хорошо. Мы смотрели, чтобы не было таких вещей, когда у нас ритм совпадает между этажами:
Чтобы не оказывалось на одном краю одинаковых элементов:
Если справа оказались сразу две подборки близко друг к другу — плохо. Соответственно, эти этажи рядом друг с другом ставить нельзя.
Также мы смотрели за тем, чтобы у нас не образовывалось навязчивых связей. Плохо, если фактоиды встали в какую‑то линию:
Соблюдая эти правила, мы собрали очень‑очень длинную последовательность, которую мы видим в самой правой колонке:
Фишка в том, что эта последовательность состоит из этих этажей, которые мы с вами увидели раньше. В каждом этаже по пять фотографий.
Дальше, используя довольно лёгкое программирование, можно очень легко собирать из этой последовательности этажи. Как это делается? Мы просто берём страницу, понимаем, сколько предметов мы хотим на ней показать. Просто берём из базы данных количество, скажем, 125. Потом 125 делим на 5 и получаем количество этих этажей, которое нам нужно вывести на странице. То есть 125 мы делим на 5, мы получаем 25 этажей. Соответственно, мы берём эту последовательность и повторяем циклично столько раз, пока у нас не наберётся 25 этажей. Вуаля, страница готова.
Она выглядит так, как будто её собрал какой‑то мегаискусственный интеллект, хотя на самом деле никакого искусственного интеллекта там нет.
А чтобы закрыть там дыры, если, например, у нас количество предметов не соответствует чему‑то, что кратно пяти, скажем, 123, то мы просто придумали какие‑то заглушечные этажи на 1 предмет, на 2, на 3, на 4. Если у нас 123 предмета, то мы делим на 5, у нас получается 24 этажа по 5 предметов плюс ещё 3 в остатке.
Мы собираем 24 этажа, а в конце ставим специальный этаж на 3 предмета. Получается хорошо.
Таким образом и получился у нас каталог «Лавишустринга», который, кстати, потом в интернетах было очень интересно смотреть: программисты на разных форумах обсуждали, а как это сделано. Оказалось, что реализация этого алгоритма, который я вам сейчас описал, по‑моему, мы его просто сами придумали, может быть за несколько дней. А ещё через два‑три дня программисты нам уже принесли прототип, в котором всё это работало. Так что берите и пользуйтесь.
Вот эти принципы организации галереи, которые я вам показал, не обязательно использовать всегда и везде. Бывает так, что уместно показать фотографии всё‑таки друг за другом. Вот перед нами страница конкретного платья на сайте «Мэри Трюфель»:
Здесь мы не используем никакую галерею, мы просто говорим: «Ты хочешь посмотреть это платье „Изольда“, и вот тебе одна фотография, а за ней ещё одна».
Если зайти на настоящий сайт, там всё так и будет. Вот мы зашли на страницу платья, и здесь уже показывают это платье без всяких специфических эффектов:
Следующая история, про которую я хочу поговорить, — это история про управление вниманием. Здесь я хочу показать несколько картинок хорошего и плохого.
Вот перед нами главная страница сайта журнала «Нью‑Йоркер»:
На мой взгляд, она довольно неплохо выглядит и, наверное, довольно неплохо должна работать для читателя. По причине, что я сюда захожу, и мне довольно интересно, и я могу быстро разобраться, что здесь важное, а что неважное. На меня сразу смотрит самая главная тема, которую редакция посчитала нужным выделить, и какие‑то дополнительные.
Вот пример плохой истории:
Это какой‑то банер типографии. Мне прислали его в советы. Здесь проблема в том, что на меня пытаются орать сразу все возможные слова. В результате автор этого банера постарался выделить всё, что только можно, и таким образом не выделил ничего. Это всё равно, что оказаться в комнате, где десять людей орут одновременно. Я не смогу разобрать, что они мне говорят. Примерно такое же впечатление производит этот банер.
Максимум, что я здесь замечу, — это слово «типография», потому что оно орёт громче всех. Поэтому я предлагаю запомнить очень простое правило:
Выделяя всё, вы не выделяете ничего
Ещё пример. Несколько вариаций шапки сайта, посвящённого дронам:
Когда я в первый раз увидел эти макеты, я прямо почувствовал боль дизайнера, который эту шапку пытался задизайнить, потому что, скорее всего, к нему пришёл клиент или начальник и сказал: «Чувак, нам надо обязательно в шапке показать вот это, это, это, и ещё, пожалуйста, номер телефона и заказ обратного звонка, и вот это меню. А ещё мы официальный дилер, об этом надо сказать, и поле поиска было бы неплохо. И, смотри, у нас ещё личный кабинет, давай там иконку пользователя. Ну и конечно бы, неплохо меню, какие у нас дроны».
Бедный дизайнер бросился это всё как‑то сюда впихивать. И мне кажется, что у него ничего не получилось. Он просто взял хоть каким‑то образом это упихал. Да, он, конечно, всё упихал, но разобраться во всём этом невозможно. Оно всё опять равномерно на меня орёт.
Ещё один пример на эту тему:
Это какая‑то карточка на сайте, посвящённая эхолоту, в которой, видимо, тоже клиент или начальник пришёл к дизайнеру, и сказал, что здесь нужно и 100% качества, и фотографии, и в коробке, и без коробки, и скидка, и спецпредложение, и видеообзор, и что входит в комплект, и все технические характеристики. И попросил, чтобы это заняло поменьше места. Вот дизайнер сверстал.
Очевидно, это плохо. Заходишь на эту штуку, и невозможно разобраться, что же здесь происходит.
Я действую следующим образом. Если я начинаю верстать что‑то с нуля или мне приходит такая картинка и говорят: «А как же это переверстать?» Я начинаю с того, что просто нафиг всё выкидываю с листа, всё, что здесь было показано, я это к чертям выкидываю. И начинаю с чистого листа. И на этот лист сначала добавляю всё, что считаю самым важным:
Я сначала на лист добавил название эхолота, объяснил, что это эхолот, показал его изображение. Решил, что, наверное, было бы неплохо поставить какое‑то описание и кнопку «купить». Всё это я взял и разместил в соответствии с железобетонным правилом якорных объектов. Просто всё по краям и углам расставил. Уже хорошая карточка.
Таким образом я нашёл отношение между самыми главными элементами, которые есть в моей вёрстке.
Сейчас я попробую найти следующий совет из этой серии. Вот я эту штуку сверстал.
Следующим этапом я стал думать: «Теперь мне нужно добавить все остальные элементы. Конечно же, не забывать про здравый смысл». Например, в оригинальной вёрстке есть видеообзор. Но это какая‑то полная дичь. Кто в таком размере его сможет разглядеть? Вообще, кто захочет на него нажать? Конечно же, там видео, наверное, распахнётся на весь экран, но реально издевательство. Кто это будет делать?
А ещё там есть характеристики, которым нужно найти место. Но так как я нашёл место и выстроил отношения между самыми главными элементами, присоседить к ним всякие второстепенные мне уже гораздо легче. То есть плохо пихать всё в макет, а потом панически думать: «О господи! Как же мне всё это распихать и там двигать, как будто я играю в какие‑то дизайнерские пятнашки». Я рекомендую — нашли главное, потом начали разбираться, как поставить всё второстепенное.
Что я сделал? Я сначала аккуратно добавил какие‑то главные особенности:
У меня было общее описание эхолота, и вот я добавил аккуратную строчку, типа смотрите, какие‑то там есть особенности: защищён от воды, работает до глубины 914 метров.
Потом я понимаю, что, конечно же, не очень всё‑таки. Потому что если я таким списком начну вываливать абсолютно все особенности этого эхолота, то это получится ещё один нечитаемый абзац текста. Поэтому я взял сделал колонкой:
А так как эта колонка такая получилась прямоугольная, модульная, я без проблем смог присоседить к какому‑то уже существующему главному объекту. Причём я здесь немножко пошалил и намеренно поставил эти технические характеристики не слева от фотографии, как можно было бы, а справа. Таким образом, не разорвал связь между заголовком и картинкой.
Ну и плюс как‑то очень хорошо здесь связывается, что эти характеристики с этой картинкой, как будто всё хорошо.
Посмотрите, как вся прямоугольность при этом осталась выдержана. Всё разделено хорошо:
После этого я немного почистил эти характеристики. Самое главное написал крупно:
Понятное дело, я на свой вкус их написал крупно. Может быть, не это самое главное. Но тем не менее показал принцип.
И нашёл место каким‑то недостающим вещам, типа спеццене. В результате получилась такая карточка.
Конечно же, там по ходу ещё какая‑то информация потерялась, но там уже надо было включать здравый смысл, потому что ребята хотели на такой ограниченный формат запихнуть содержание полноценной отдельной страницы. Я решил, что не буду в это играть. Вместо этого сделал такую более‑менее компактную карточку, сохранив тот формат, который им был нужен. А все подробности, пожалуйста, уже смотрите на отдельной странице — и что там в коробке, и видеообзор, и, может быть, отзывы.
Вот, кстати, про ту самую шапку сайта с дронами, с квадрокоптерами:
Первым делом я опять же выкинул всё, что только можно, и оставил самое главное:
Не знаю, название магазина, куда я попал, главное меню и корзину, потому что это же интернет‑магазин, куда без корзины.
Следующим этапом я вытянул в линию какие‑то дополнительные ссылки и кнопки:
Причём, помните, я говорил, что линия в этом плане очень удобный формат. В линию можно вытянуть кучу всего, и линию можно поставить почти где угодно. Собственно, я это и сделал. Вот она у меня встала. И на самом деле, если сюда посмотреть и потом сравнить с начальным макетом, я буквально за пару шагов сразу же всем элементам нашёл место. Всё, что было в изначальном макете, я вот здесь уже разместил. Всё выглядит гораздо чище и разборчивее, потому, что я сначала всё лишнее, всё вспомогательное выкинул, сначала поставил всё самое главное.
Но тем не менее я на этом не остановился. Я ещё что‑то добавил поле поиска, почистил логотип, чтобы не шумело, потому что здесь многоцветье. Добавил официального дилера. В результате получилась шапка:
Может быть, она не самая дизайнерская и модная на свете, но гораздо чище и понятнее выглядит, чем то, что было изначально.
Рецепт мой такой: когда верстаете что‑нибудь, сначала находите место и размер для самых главных элементов, потом к ним аккуратно присоседиваете всё второстепенное, а не пытаетесь запихнуть всё и сразу. Даже если за спиной стоит клиент и требует запихнуть всё и сразу.