Иконки — зло. Они не несут полезной информации, не вызывают эмоций, не работают на задачу сайта и давно превратились в дизайнерский штамп.
Иконки помогают разбить текст, и предполагается, что это повышает читаемость. Но, когда каждый второй сайт оформлен одинаково, пользователь начинает пропускать визуальные штампы вместе с текстом, как графический шум.
Как много вы знаете посадочных страниц курсов, где не было бы такого вот раздела?
Предположим я серфю в интернете и была уже на 3-4 сайтах из ниши. Захожу на пятый, вижу точно такое же оформление, как и везде. Какой делаю вывод? Правильно: «Здесь все то же самое, что и у конкурентов». При этом содержание отдела может быть другим, но я уже и не буду читать текст под иконками.
Вот почему нужно избегать штампов. В статье расскажу, как упаковать смыслы по-другому.
Если информацию можно упаковать в иллюстрацию или схему — сделайте это
Блок на скриншоте выше рассказывает о преимуществах продукта. Такую информацию часто упаковывают в буллиты, но иллюстрация вызывает больше доверия и вовлекает в чтение. Преимущества со скриншота: зажимы для ножей (нож не нужно держать в руке); поворотный механизм (можно сохранить угол заточки даже при повороте ножа) и т.д. Изображение придает тексту вес, простой перечень с иконками выглядел бы блекло.
Замените иконки живыми фотографиями везде, где возможно
*Живыми — т.е. не стоковыми.
Продает тот визуал, который вызывает у человека эмоции и связан с его чувственным опытом. Иконки потому и воспринимаются как шум, что нам сложно соотнести их с жизнью. Кроме того, фотографии повышают доверие и придают тексту вес.
На сайте франшизы «Додо Пиццы» каждый смысл подтвержден фотографиями, скриншотами из CRM системы и другими материалами. Мы видим живую компанию с упорядоченной структурой. Иллюстрации показывают, что в «Додо Пицце» проработана каждая деталь, и франчайзи будет легко раскрутить новую точку. Ниже привожу примеры с сайта, где вместо иконок использованы фотографии.
Если смыслы важные, выделите для них больше места
Добавьте полезной информации, распакуйте каждый буллит в отдельный блок, сделайте слайдер или оформите на плашке, как в примере ниже.
Используйте мокапы
Векторные иконки не привязаны к чувственному опыту покупателя, а вот мокапы изображают нечто реальное, что можно подержать в руках. Мокапы привлекают больше внимания и придают вес тексту.
Делайте плашки
Было полезно? Поделитесь в комментариях, как вы заменяете иконки?
Читайте другие мои статьи:
Чтобы заказать сайт или прототип, пишите в инстаграм или ватсап.
inst @redactor_ot_bloga
WhatsApp +7 999 584 46 48
Как обзорная статья для пачки подходов к дизайну - норм. Но вычленить что-то полезное сложно - тут навалены в кучу абсолютно разные подходы к дизайну, которые направлены на разные задачи.
Если кратко : уникальность - это хорошо. Иконки - это полезно, но не везде. Добавлять на сайт иллюстрации нужно тогда, когда знаешь, зачем.
В этом и смысл: в зависимости от задачи и материала вы можете использовать разные способы оформления и упаковки информации. Пользоваться статьей просто: у вас есть информация, которая просится в буллиты. Заходите и смотрите, как можно сделать по-другому. Я бы сказала, что иконки полезны в исключительных случаях. Одни и те же способы упаковки информации можно использовать в разных стилях дизайна. Мысль в том, что нужно использовать живые фотографии, скриншоты и наглядные схемы вместо бессмысленной векторной графики.
Да, именно: "Мысль в том, что..." и далее по тексту - это ложное утверждение.
Остальная статья, как и ответ мне - это оформление этого ложного утверждения.
Векторная графика ничем не уступает другим способам иллюстрации, пока не доказано обратное.
А если акцент на слово" бессмысленная" - так она ничем не лучше бессмысленных фото и т. д.
Вопрос в задаче, которая решается. Вы на столько сильно упрощаете и обобщаете, что выводы становятся абсолютно ложными и вредными.
Покажите мне пример, где векторная графика работает лучше фото. Да, конечно, и фотографии могут быть бессмысленными, но это уже другая тема для другой статьи. Пока что я вижу сотни одинаковых сайтов с визуальными штампами.
Нет, раз уж вы пишете статью за лиды, а я отвечаю бесплатно - вы покажите доказательства, что фото априорно лучше вектора. А то странно получается.
На мой взгляд, я это показала. Все примеры в статье можно было бы оформить как на первом скриншоте с иконками.
Нет, простите, это так не работает. Вы показали два примера - стоковые иконки и профессиональную иллюстрацию, а утверждаете на счёт правила, которое распространяется на всё. Даже десять подобранных под позицию примеров - не повод обобщать.
Я об этом писал - это просто логически неверно.
Статья моя полезна и ценна тем, что предлагает варианты как можно сделать по-другому. Если кто-то не сможет адекватно оценить уместность фотографий и схем относительно материала — ну уж извините, тут работает обычный здравый смысл
Этим - полезна, как я и писал. Как подборка "а можно сделать так".
Но идея статьи - не "а можно сделать так", а "вредно - иконки и векторная графика".
И этим статья вредна, потому что это бездоказательное утверждение.
В таком случае это просто мое мнение и мнение товарища Ильяхова в том числе. Вы можете придерживаться другого, но примеров вы так и не привели. Возможно, "бессмысленный" - это и правда слишком категорично, но, как я уже говорила — здравый смысл и никакое "правило" не будет вредным.
Окей, так лучше. Жаль, что в статье не написано "мне так кажется".
Примеров я и не вижу смысла приводить, я уже говорил, что они не являются аргументом для правила.
Любое правило будет вредным всегда, если оно не работает. Хватит просто здравого смысла)
Я удивлю : даже "визуальные штампы" не "плохо" само по себе. Они тоже решают задачи:
1) Экономия бюджета на разработку /контент.
2) Узнаваемость привычного: сайт с привычной структурой идентифицируется и воспринимается проще, чем сайт без.
3) Оформление: в эконом - сегменте не всегда есть возможность заказать дорогие иллюстрации, иконки привычно занимают место, разбавляя сухой текст.
И это только если верить утверждению, что это визуальный штамп. На самом деле, только вариантов оформить блок с иконками + вариантов оформить иконки десятки разных способов.
Кстати, меню - гамбургер - точно визуальный штамп. Нужно ли его менять на менб-чизбургер?)
Золотая жила золотая)) . Ребята, меню бургера стало джином. По работайте с z-index. Вообщем протестируйте на такие баги, очень в глаза бросаются.
Комментарий удален модератором