Главная страница

Главная страница сайтов — это обычно та страница, на которую пользователь попадает в первую очередь. Она вводит в курс дела, помогает понять, куда пользователь попал и что может здесь найти. Поэтому обычно главная страница отличается от других страниц сайта, она более эффектная, на ней расположено больше разнообразной информации. С учётом этого её нужно проектировать и верстать.

Самый простой вид — это лента:

Это какая‑то шапка страницы с меню, логотипом, может быть, названием, заголовком. Дальше идёт лента равномерно однообразно поданных материалов.

Ленту мы чаще всего встречаем в социальных сетях. Например, главная страница Твитера — это лента:

Если мы просто зайдём на Твитер, главная страница будет посвящена именно ленте. Это какая‑то уже устаревшая версия Твитера, но, даже если посмотреть на актуальную, там всё выглядит точно так же. Идёт просто лента, какие‑то материалы за материалами нескончаемым потоком.

В этом есть и главная сила, и главная слабость ленты. Это очень хорошо подходит, когда нам нужно действительно всё, что мы хотим сказать пользователю, выразить в виде такого нескончаемого потока, а слабость заключается в том, что этот нескончаемый поток рано или поздно, а может быть, довольно рано может надоесть листать. И, конечно же, всё, что в ленте оказывается где‑то внизу, сильно внизу, скорее всего, пользователь уже никогда не долистает и никогда не почитает.

Но при этом, даже если мы хотим показать и сконструировать главную страницу в виде ленты, в ней тоже можно немного развлекаться и стараться каким‑то образом что‑то важное или что‑то популярное выделить. Например, в той версии Твитера, которую я показываю вам, ребята умели выделять наиболее популярные твиты или по количеству ретвитов, или по количеству лайков с помощью кегля. Обычные твиты писались мелко, а важные популярные твиты писались более крупным кеглем, соответственно, когда я листал ленту, эти большие штуки на меня автоматически выпрыгивали, и я на них обращал в первую очередь своё внимание.

Вот ещё одна лента, тоже всем знакомая, — это Фейсбук:

Здесь бесконечная лента, которая в случае Фейсбука формируется по какому‑то никому не известному алгоритму. Там материалы подаются не в хронологическом порядке, как это делается в каких‑то нормальных интерфейсах, а в соответствии с какой‑то другой системой ценностей.

В случае Фейсбука лента состоит не просто из текстовых сообщений, а из всяких разнообразных вещей: там могут быть картинки, виджеты со ссылками, можно написать текстовое сообщение, но поставить его на яркий фон и так далее. В результате вся лента Фейсбука превращается в ярмарку, в которой каждый пост каждого человека старается перетянуть на себя внимание. В сочетании с тем, как пользователи ленту читают — они просто мотают, мотают и мотают, становится особенно важным обратить читательское внимание именно на мой пост.

Эту картинку прислали мне в советы и попросили покритиковать вёрстку:

Ребята сделали рекламу в Фейсбуке. На мой взгляд, эта реклама не очень хорошо должна сработать, по той простой причине, что она выглядит как продолжение какого‑то интерфейса Фейсбука, что мне здесь не пытаются сообщить что‑то важное, это какое‑то чуть ли не сервисное сообщение от самого Фейсбука. Она бело‑синяя, почти идеальное попадание в цвет самого Фейсбука. И ничем не выделяется на фоне белого интерфейса того, что происходит вокруг. Даже торчащая из‑за нижнего края картинка с видосиком «Симпсонов» выглядит более активной и более привлекательной, чем эта штука.

А вот картинка, которую сделал Артём Горбунов, когда искал разработчиков в бюро:

Он, зная, как устроена лента в Фейсбуке и как её читают, решил привлечь внимание пользователя, во‑первых, необычным цветом, не так часто увидишь в Фейсбуке что‑то коричневое. Во‑вторых, огромным словом. Оно ничего не значит, это просто какое‑то приветствие. Самое главное, что это две огромные буквы и восклицательный знак. Они очень сильно выделяются на фоне всего остального, что я в Фейсбуке увижу.

Следующий вид главной страницы — это плитка:

Пример — «Совотека»:

Понятное дело, здесь есть сверху шапка, внизу подвал, но существенную часть страницы занимает плитка.

Проблема конкретно с этой плиткой в том, что всё подано одинаково равномерно, и далеко не всегда именно так надо делать. Если у вас действительно «Яндекс‑маркет», где вам нужно показать одинаково поданные товары или какую‑то информацию, чтобы пользователь мог её сравнивать, тогда это, может быть, сгодится. Но когда речь идёт про картинки, портфолио, товары, скорее всего, такая равномерная подача не очень подойдёт.

Самый простой способ разнообразить плитку — это сделать плитки разного размера:

Вот пример портфолио дизайнера Жени Арутюнова, в котором всё организовано по принципу плитки, но плитки отличаются друг от друга по ширине и высоте. В результате получилась гораздо более интересная на вид структура, более сложная для восприятия. Зато её гораздо интереснее воспринимать и изучать. Глаз начинает бегать от плитки к плитке и смотреть, а что здесь ещё есть интересного.

На самом деле у Жени ещё каждая из этих плиток интерактивная. Если на неё навести, там начинает листаться, анимироваться, двигаться — и в результате весь сайт с интересом изучаешь, пока каждую работу не посмотришь.

Вот плитка, к сожалению, на безвременно умершем «Лук‑эт‑ми»:

Здесь контраст между материалами ещё больше увеличен и есть как совсем маленькие анонсы, в которых в качестве иллюстрации выступают иконки, так и большие картинки. В результате получилось ещё большее разнообразие. Причём в случае «Лук‑эт‑ми» мне кажется, что формат плитки совершенно выбран не случайно. На самом деле на «Лук‑эт‑ми» материалы выходили довольно редко. Хорошо, если два‑три в день. Если бы это показать всё в виде ленты — это моментально бы вскрылось, и мне кажется, что люди на «Лук‑эт‑ми» приходили бы гораздо реже, чем приходили на самом деле.

А когда смотришь на эту штуку, у тебя создаётся впечатление, что как много всего, надо всё это изучить, почитать. Каждый раз, когда в «Лук‑эт‑ми» выходил какой‑то материал, у них был хитрейший алгоритм, который всё это всячески перестраивал, и создавалось ощущение, что много всего обновилось. В результате клёво.

Вот перед нами ещё одна страничка — это портфолио норвежской студии дизайна «Метрик Дизайн»:

Это немного устаревшая версия. Но обратите внимание, что ребята плитку просто разнообразили с помощью только ширины. То есть высота всех плиток одинаковая, ширина разная.

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

А ещё смотрите, какие в конце есть плитки просто текстовые. Тоже плитки‑плитки, но текстовые, без картинок.

Вот главная страница «Олимпиады.ру»:

Тоже организована в форме плиток. Эта страница полностью динамическая — в админке этой страницы можно не то что наполнять эти плитки какими‑то материалами, но ещё можно было и создавать новые раскладки.

Здесь у нас, например, раскладка три на три с одной сдвоенной плиткой:

Здесь такая:

Здесь сякая:

И можно прямо в админке рисовать новые раскладки, при этом принципы всё равно сохранялись. При этом все материалы на таких плашках обязательно есть.

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

Чтобы человек всё‑таки не уставал от обилия плиток, мы придумали перебивки, которые существенно отличаются от обычных плиток по ритму и насыщенности:

Это огромные иллюстрации, большие заголовки, текст и белый фон. Таким образом, главная страница выглядит вполне себе съедобно — можно зайти и за один присест её проглотить.

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

Ещё один пример — Пинтерес:

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

Всё это на тебя так или иначе вываливается в виде плиточной конструкции, в которой все плитки одинаковые по ширине, но отличаются по высоте. Мы такую конструкцию с вами ещё до этого не встречали, мы видели, когда отличается и шириной, и высотой или отличается только шириной, а вот чтобы только высотой — ещё не видели.

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

Следующий вид главной страницы — это фоторама:

Фоторама — это название, которое придумал, если не ошибаюсь, Артём Поликарпов — бывший разработчик бюро в каком‑то далёком 2010⁠—2011 году, а может быть, даже и раньше. Он сделал маленький плагин, маленькую программу для веба, которая позволяла очень быстро сделать на любом сайте листающуюся фотогалерею.

Как пример — на странице Коворкафе:

Здесь у нас есть фоторама, которая демонстрирует интерьер Коворкафе, её можно листать.

Фотораму можем встретить с вами очень часто. Вот фоторама на сайте «Ролекса»:

Вот фоторама на сайте «М‑видео»:

Вот фоторама на сайте «Орион Арт» — компании, которая занимается созданием световых шоу и пиротехники:

Они показывают проекты, здесь их можно внизу переключать.

То есть фоторама — это одна большая картинка с возможностью листания, превьюшками и индикаторами, которые помогают понять, что можно всё это листать. На них можно нажать, и всё это полистается. В случае «Ролекс» это такие точки, в случае «Орион Арт» это превью с названиями — более информативная штука.

Как именно устроить саму фотораму, надо решать в зависимости от задач. В случае «Ролекс» им, судя по всему, была совершенно неважна какая‑то информативность, им важно было показать часы. Смотрите, какие крутые часы. Какие‑то точки тут есть, можно понажимать. Кажется, что с точки зрения пользовательского интерфейса и информативности это плохая история, потому что в эти точки надо прицеливаться и долго нажимать, а превью гораздо лучше. Они уже помогают понять, что я увижу, если на них нажму, а если ещё есть и название, то проще понять, надо ли туда нажимать. А может быть, я не буду туда нажимать, я уже увижу, сколько всего интересного здесь есть.

Главная опасность фоторамы заключается в том, что это такой очень лёгкий для освоения формат, в который можно запихнуть примерно что угодно.

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

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

Но так как в фотораму можно засунуть что угодно, абсолютно любую картинку и какой‑то информационный блок, делать это можно бесконечно, то без должного контроля и особенно без участия вдумчивого дизайнера эта штука может превратиться в то, во что превратилась на сайте «М‑видео»:

Это такая очередь из кружочков, которую надо сидеть и кликать, чтобы знать, а что же мне такое эти ребята хотят сообщить. На мой взгляд, вероятность того, что кто‑то это начнёт кликать, довольно маленькая. Во‑первых, потому что цена клика в вебе и в любом приложении довольно высока. Это же нужно сообразить, что нужно нажать, потом нужно решиться нажать. Потом навести курсор, прицелиться, наконец нажать. То есть сделать кучу действий, чтобы перелистнуть эту несчастную фотораму.

Вероятность того, что кто‑то нажмёт, маленькая. Вероятность того, что кто‑то перекликает все эти 11 кружочков, — ещё меньше. Таким образом, скорее всего, пользователь не увидит всего, что вы хотите ему сказать или хотят сказать какие‑нибудь маркетологи, которые придумали всё это сюда добавить.

В этот момент кто‑нибудь обязательно придёт с гениальной идеей — а давайте сделаем фотораму автоматически прокручивающейся. То есть пользователь ничего не делает, он просто зашёл на страницу, и эта штука сама листается.

Следующий вид главной страницы — это рубрикатор. Выглядит примерно так:

На наш взгляд, это самый продвинутый и интересный способ организации главной страницы. Все предыдущие способы организации, которые мы видели, очень однородные. Или мы всё вываливаем в виде ленты, или мы всё вываливаем в виде плитки, или мы всё засовываем в фотораму.

Рубрикатор может сочетать в себе эти разные способы. Смысл в том, что мы разные какие‑то информационные сущности можем подавать по‑разному. То есть какую‑то главную акцию можем показать в виде картинки, какие‑то четыре второстепенные новости можем пустить колонками, рассказ про какой‑то из товаров подать в виде картинки и описательного текста и так делее.

Например, старый сайт бюро был организован в форме рубрикатора:

Здесь всё по возможности было разложено по полкам. Был какой‑то рекламный банер, связанный с набором в Школу дизайнеров, был большой и самый главный этаж с последними бюрошными работами. Здесь по полкам были разложены какие‑то ежедневные рубрики и товары, когда только вышла книга Артёма Горбунова. У нас есть раздел «Бюросфера» для дизайнеров на сайте. Есть «Дизайн‑собака», есть рубрика «Наблюдение», точнее была. И, конечно же, каждый день выходят новые советы. И так далее здесь было как‑то разложено: дипломные работы, новости бюро, курсы, на которые сейчас можно записаться, и блок Коворкафе. Всё разложено по полочкам.

Вот пример рубрикатора главной страницы «Мэри Трюфель». Как она устроена.

Наверху нас встречают самые главные подборки этого сезона:

Причём здесь фоторама, и обратите внимание, что в ней ограниченное количество кружочков. Их тут всего пять, а не одиннадцать.

Здесь же рядом с этой фоторамой живут какие‑то ключевые ценности салона. Мы говорим, что смотрите, как много у нас платьев, и что мы дадим всё примерить, ещё порекомендуем аксессуары.

Следом мы берём и по полочкам раскладываем ассортимент салона:

Мы показываем самые клёвые подборки. Вот платья со скидкой, то есть по спеццене. Есть подборки платьев с длинным шлейфом, трансформеры и т. д. Обратите внимание, что мы намеренно ещё постарались показать эти подборки разнообразно, чтобы, опять же, глазу было за что уцепиться. Есть что‑то с фотографией, есть что‑то в виде фактоида, что‑то повёрнуто. А вечерние платья ещё на специальной такой чёрной плашке — с месяцем и шампанским.

После этого мы берём и показываем разделение платьев не по подборкам, а по силуэтам:

И эта форма представления радикально отличается от того, что мы видели до этого. Я сначала видел плотный этаж с фотографиями насыщенными, а потом суперлёгкий этаж с силуэтами. А ниже ещё более лёгкий и плоский этаж с разделением тех же самых платьев, но по брендам и дизайнерам.

После этого очень важный этаж с обращением сооснователей салона, в котором они рассказывают, откуда салон появился и как они относятся к своему делу:

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

И дальше этот рубрикатор на главной странице продолжается. Здесь есть этаж блога, есть платья большие и маленькие:

Есть платья с сортировкой по цене и ещё какие‑то подборки. А в конце схема проезда:

Таким образом, мы на главной странице с помощью рубрикации разложили по полочкам весь каталог салона. Для этого какая‑нибудь плитка, лента, а тем более фоторама не очень подошли бы.

Ещё хочу показать пару примеров рубрикатора в браузере. Во‑первых, есть сайт Ильи Бирмана:

Он начинает с того, что показывает какие‑то свои последние работы:

После этого немного в другой манере показывает не то чтобы последние работы, а какие‑то проекты, которые для него очень важны, которые могут помочь в работе дизайнерам:

У него есть типографская раскладка, есть движок «Эгея» для блогов, есть «Жуэль плеер» и так далее. Лайки.

А потом он закончил с портфолио, и следующая полочка в его рубрикаторе:

Это рассказ о себе, рассказ о том, что он проводит курсы и преподаёт в Школе дизайнеров бюро, что он написал книги вот какие.

И, наконец, очень много всего написал в блог:

И блог у него — это ещё один отдельный рубрикатор внутри рубрикатора. Видите, как всё разложено по темам. Но это далеко не весь блог. Какие‑то самые главные мысли, которые Илья посчитал нужным вытащить наружу.

В таких подобных рубрикаторах иногда бывает клёво выделить какие‑то статьи с помощью картинок, сразу выглядит всё гораздо разнообразнее и привлекает внимание. Ещё Илья придумал плашку поставить, чтобы выделить отдельную рубрику.

В конце оцените уже знакомый всем нам элемент — линии. Илья в линию вытянул какие‑то не связанные или почти не связанные друг с другом ссылки, которые ему хотелось на главную страницу поставить. Просто отлично, подходящий для этого формат.

Ещё одна страница, которую я для себя отношу к рубрикаторам, — это главная страница студии Лебедева:

Как она устроена. С одной стороны, это плитка. Потому что они берут и виде плиток показывают какие‑то последние свои работы. У них что‑то вышло, если полистать, там ещё что‑то вышло. И вот какие‑то работы. И вот работы, и вот работы, работы.

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

Во‑первых, у них есть этаж со свежаком. Раньше здесь ещё был бизнес‑линч и идиотека. Теперь здесь архив бизнес‑линча и идиотеки. Какие‑то рубрики, которые не каждый день обновляются.

После этого этажа идёт опять плитка, плитка:

А потом очередной этаж перебивочный:

Ребята рекламируют свою услугу экспресс‑дизайна, показывают отзывы. Если полистать дальше — у них ещё одна перебивка про товары в их магазине:

Можно полистать дальше. Очередная перебивка: «Смотрите, что мы тут понаделали для города Москвы».

Если ещё полистать: «Смотрите, сколько у нас тегов, сколько у нас работ по разным темам»:

Это всё какие‑то разделы их портфолио. И дальше это продолжается — шрифты, полезные ссылки, инструменты для дизайнеров и редакторов, для программистов. «Смотрите, мы задизайнили логотипы для блогеров, приходите к нам, если вы блогер». И всё в таком духе.

Совместили два формата, получился довольно интересный рубрикатор, то есть, с одной стороны, вроде бы длинная бесконечная лента, а с другой стороны, её довольно интересно изучать, то есть это не просто бесконечный поток плиток, как было в Пинтересе, а вот какие‑то ещё перебивки.