Иконки на сайтах. Свирлы

Вот ещё пример, где иконки работают как навигация, но при этом выполнят функции буллитов — показывают начало списка:

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

Иконки, которые вроде и не иконки:

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

Вот пример иконок, которые выполняют ту же функцию, что и предыдущие, но они в миллиард раз хуже:

А хуже они потому, что они неинтересные и по сути одинаковые. Можно было бы нарисовать просто кружки или всё выбросить, сделать заголовки в два раза крупнее и написать несколько строчек — и иконки уже работали бы гораздо лучше. А эти вообще никакие.

Ещё хуже, когда никакие иконки ещё и прячут что‑то под собой:

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

Классный пример, где заголовка нет, а иконка выполняет его функцию:

При этом получается контрастная фактоидная конструкция. Работает это по принципу фактоида, по принципу водонапорной башни:

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

Круто иконками на сайтах что‑нибудь выделять:

Это и в печати работает. Причём работает в обе стороны. Может быть фотография, фотография, фотография — пум! — неожиданно иконка. И она тут же выделилась и выпрыгнула на зрителя. Может быть наоборот: иконка, иконка, иконка — пум! — неожиданно фотография выпрыгивает на зрителя. Опять же она выделилась за счёт контраста, перетекания воды.

Вместо обычных буллитов‑точек могут быть маленькие иконки:

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

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

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

Иконки как буллиты используют очень‑очень давно. Это «Нью‑Йорк Таймс» 1945 года:

Но тогда ещё были отдельные буллиты рядом. А потом все поняли, что это одно и то же и можно половину убрать.

Посмотрите на объявление в центре: первая иконка — это вилка, ложка и нож. Раньше «поедальные» заведения обозначали именно таким символом — перекрещёнными вилкой, ложкой и ножом в такой снежиночной позе. Это было повсеместно:

На современном сайте «Нью‑Йорк Таймс» рядом с иконками нет буллитов:

Можно было бы выкинуть и эти иконки, они ничего не обозначают и не помогают в навигации. Но как инструмент выделения иконки тут прекрасно работают.

Пример из офлайна:

Естественно, тут с расстояниями налажали.

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

Вопрос из зала: «Возможно, без них было бы ещё хуже?»

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

Представьте, что у нас есть девять блоков текста и их нужно как‑то расположить на сайте. Хочется поставить их так:

Знаете про девяток яиц? Про 900 грамм молока вместо литра? Мне однажды рассказали, что существует девяток яиц вместо десятка. И я такой: «Блин, как это можно?! То есть коробка будет без одного яйца!» Нет, они просто такую коробку сделали, как на картинке.

Итак, это абсолютно нормальное расположение девяти пунктов меню. Но, естественно, им нужно ещё иконки нарисовать, и у каждого пункта будет по иконке:

А можно при помощи иконок сделать вот так:

Я вам этот пример уже показывал. Когда не у каждого пункта есть иконка, сетка тут же ломается. Появляется брендирование, становится клёво, интересно, красиво. Иконки не какие‑нибудь маленькие, а с размахом:

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

А вот ребята делают чуть‑чуть иначе:

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

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

Вот вкратце все функции иконок на сайтах:

Свирлы, «текст свирл» — это завитушки, водовороты и всякое такое для украшательства текста:

Вопрос из зала: «Это виньетки?»

Можно их назвать виньетками, но я о них узнал как о «тексте свирл», поэтому так называю.

В какой‑то момент в книжках их стали заменять звёздочками:

Функция у этих звёздочек та же, что и у завитушек, но в эстетике потеряли, теперь это не какая‑то прикольная штука, а тупо графические вещи.

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

Очень круто свирлы работают на таких разделителях этажей:

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

А вот слоник:

В тексте такой свирл работает как виньетка и добавляет новый смысл:

Тут про бесконечные путешествия, и нарисована бесконечность, как ты бесконечно катаешься по острову с пальмами.

А здесь абзац начинается с такого лицехвата: