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