{"id":3089,"title":"\u041a\u043e\u043c\u0430\u043d\u0434\u0430 \u00ab\u0420\u043e\u043a\u0435\u0442\u0431\u0430\u043d\u043a\u0430\u00bb \u2014 \u043e \u0441\u0432\u043e\u0451\u043c \u043d\u043e\u0432\u043e\u043c \u043b\u043e\u0433\u0438\u0441\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u043c \u0441\u0442\u0430\u0440\u0442\u0430\u043f\u0435","url":"\/redirect?component=advertising&id=3089&url=https:\/\/vc.ru\/promo\/229898&hash=77cef69f6d8bf95d5812fed909adc10d2082032514f75e66aa372ef60d639edb","isPaidAndBannersEnabled":false}
Анастасия Ершова

Как уйти от надоевших иконок

Анастасия Ершова
Маркетолог, копирайтер и project. Делаю сайты и лендинги вместе с командой. Отвечаю за смыслы, позиционирование и тексты, курирую верстку и дизайн.

Иконки — зло. Они не несут полезной информации, не вызывают эмоций, не работают на задачу сайта и давно превратились в дизайнерский штамп.

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

Как много вы знаете посадочных страниц курсов, где не было бы такого вот раздела?

Предположим я серфю в интернете и была уже на 3-4 сайтах из ниши. Захожу на пятый, вижу точно такое же оформление, как и везде. Какой делаю вывод? Правильно: «Здесь все то же самое, что и у конкурентов». При этом содержание отдела может быть другим, но я уже и не буду читать текст под иконками.

Вот почему нужно избегать штампов. В статье расскажу, как упаковать смыслы по-другому.

Если информацию можно упаковать в иллюстрацию или схему — сделайте это

Сайт с просторов интернета. Продукт — профессиональная ножеточка

Блок на скриншоте выше рассказывает о преимуществах продукта. Такую информацию часто упаковывают в буллиты, но иллюстрация вызывает больше доверия и вовлекает в чтение. Преимущества со скриншота: зажимы для ножей (нож не нужно держать в руке); поворотный механизм (можно сохранить угол заточки даже при повороте ножа) и т.д. Изображение придает тексту вес, простой перечень с иконками выглядел бы блекло.

Визуализация преимуществ полировального оборудования Klindex
Взрыв-схема на сайте по продаже витрин. При клике на желтый маркер всплывает описание с преимуществами. Плашка сверху связана с маркерами
Скриншот с сайта компании, которая проводит оксфордский тест и выдает сертификаты о знание английского языка

Замените иконки живыми фотографиями везде, где возможно

*Живыми — т.е. не стоковыми.

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

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

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

Если смыслы важные, выделите для них больше места

Добавьте полезной информации, распакуйте каждый буллит в отдельный блок, сделайте слайдер или оформите на плашке, как в примере ниже.

На сайте Klindex каждый смысл развернут и упакован в слайдер.
Еще один слайдер Klindex
Сайт курса по маркетингу. Вместо перечисления тем под иконками — слайдер, где описано и проиллюстрировано каждое занятие
Сайт курса по маркетингу. Для каждого важного смысла выделен отдельный экран

Используйте мокапы

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

Делайте плашки

Личный сайт инвестора

Было полезно? Поделитесь в комментариях, как вы заменяете иконки?

Читайте другие мои статьи:

Чтобы заказать сайт или прототип, пишите в инстаграм или ватсап.

inst @redactor_ot_bloga

WhatsApp +7 999 584 46 48

{ "author_name": "Анастасия Ершова", "author_type": "self", "tags": [], "comments": 13, "likes": 0, "favorites": 0, "is_advertisement": false, "subsite_label": "unknown", "id": 228517, "is_wide": true, "is_ugc": true, "date": "Thu, 08 Apr 2021 11:30:24 +0300", "is_special": false }
0
13 комментариев
Популярные
По порядку
Написать комментарий...
0

Как обзорная статья для пачки подходов к дизайну - норм. Но вычленить что-то полезное сложно - тут навалены в кучу абсолютно разные подходы к дизайну, которые направлены на разные задачи.

Если кратко : уникальность - это хорошо. Иконки - это полезно, но не везде. Добавлять на сайт иллюстрации нужно тогда, когда знаешь, зачем.

Ответить
0

В этом и смысл: в зависимости от задачи и материала вы можете использовать разные способы оформления и упаковки информации. Пользоваться статьей просто: у вас есть информация, которая просится в буллиты. Заходите и смотрите, как можно сделать по-другому. Я бы сказала, что иконки полезны в исключительных случаях. Одни и те же способы упаковки информации можно использовать в разных стилях дизайна. Мысль в том, что нужно использовать живые фотографии, скриншоты и наглядные схемы вместо бессмысленной векторной графики.

Ответить
0

Да, именно: "Мысль в том, что..." и далее по тексту - это ложное утверждение.

Остальная статья, как и ответ мне - это оформление этого ложного утверждения.

Векторная графика ничем не уступает другим способам иллюстрации, пока не доказано обратное.

А если акцент на слово" бессмысленная" - так она ничем не лучше бессмысленных фото и т. д.

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

Ответить
0

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

Ответить
0

Нет, раз уж вы пишете статью за лиды, а я отвечаю бесплатно - вы покажите доказательства, что фото априорно лучше вектора. А то странно получается.

Ответить
0

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

Ответить
0

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

Я об этом писал - это просто логически неверно.

Ответить
0

Статья моя полезна и ценна тем, что предлагает варианты как можно сделать по-другому. Если кто-то не сможет адекватно оценить уместность фотографий и схем относительно материала — ну уж извините, тут работает обычный здравый смысл

Ответить
0

Этим - полезна, как я и писал. Как подборка "а можно сделать так".

Но идея статьи - не "а можно сделать так", а "вредно - иконки и векторная графика".
И этим статья вредна, потому что это бездоказательное утверждение.

Ответить
0

В таком случае это просто мое мнение и мнение товарища Ильяхова в том числе. Вы можете придерживаться другого, но примеров вы так и не привели. Возможно, "бессмысленный" - это и правда слишком категорично, но, как я уже говорила — здравый смысл и никакое "правило" не будет вредным.

Ответить
0

Окей, так лучше. Жаль, что в статье не написано "мне так кажется".

Примеров я и не вижу смысла приводить, я уже говорил, что они не являются аргументом для правила.

Любое правило будет вредным всегда, если оно не работает. Хватит просто здравого смысла)

Ответить
0

Я удивлю : даже "визуальные штампы" не "плохо" само по себе. Они тоже решают задачи:

1) Экономия бюджета на разработку /контент.

2) Узнаваемость привычного: сайт с привычной структурой идентифицируется и воспринимается проще, чем сайт без.

3) Оформление: в эконом - сегменте не всегда есть возможность заказать дорогие иллюстрации, иконки привычно занимают место, разбавляя сухой текст.

И это только если верить утверждению, что это визуальный штамп. На самом деле, только вариантов оформить блок с иконками + вариантов оформить иконки десятки разных способов.

Кстати, меню - гамбургер - точно визуальный штамп. Нужно ли его менять на менб-чизбургер?)

Ответить
0

Золотая жила золотая)) . Ребята, меню бургера стало джином. По работайте с z-index. Вообщем протестируйте на такие баги, очень в глаза бросаются.

Ответить

Комментарий удален

Комментарии

null