Иконки как мы работаем для сайта
Перейти к содержимому

Иконки как мы работаем для сайта

  • автор:

Новые иконки. Визуальное разнообразие для вашего сайта

Вот новый набор, который уже доступен для всех наших пользователей:

Новые иконки от LP151 в модуле «Выгоды»

Сайт должен быть не только удобным, но и визуально привлекательным

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

Они помогают пользователю ориентироваться. А если человек просматривает страницу по диагонали — направят внимание на нужные разделы.

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

Пример использования новых иконок на главной странице сайта LP151.com

Новые иконки лёгкие и светлые, а заложенные в них метафоры подойдут для самых разнообразных случаев

Это важно, ведь мы работаем с абсолютно разными сферами — от рукоделия до сложных медицинских услуг. У каждого направления свои требования и специфика.

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

1) У нас появились иконки с цифрами. Их можно использовать для иллюстрации плана пошаговой работы или описания модулей обучающей программы.

2) Обновился сет с иконками популярных соцсетей и способов коммуникации.

3) Нестандартные иконки, которые можно использовать для описания услуг или преимуществ. Презентуйте огненные курсы, космические мероприятия и инвестиционные возможности.

Сейчас обновление тестируется

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

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

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

Зачем нужны иконки?

Иконки нужны для ускорения восприятия информации. Давайте сразу посмотрим на примере. Это сайт программы для организации закладок. На экране показан функционал программы.

Дизайнер использовал иконки с привычными образами. Лупа — поиск. Земной шар — мультиязычность. Звёздочка — избранное. Все иконки на этом примере помогают легко считывать информацию.

Что будет, если их убрать? Отметьте, как изменилась скорость восприятия.

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

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

А вот так не надо

Но образы должны быть явные и привычные. Иначе ничего не выйдет. Смотрите пример.

Иконка с бирками — непонятно, как она относится к фиксированной цене. Иконка с копилкой никак не намекает на отсутствие скрытых комиссий. Деньги в руке еще и агрессивны. Так и говорят “Shut up and take my money”.

В этом блоке иконки использованы ради иконок. Они не доносят суть. Потому что преимущества очень расплывчатые и непонятные. Это скорее принципы работы. В таком случае лучше просто написать понятный текст из 3 предложений, чем использовать неуместные иконки.

«Как мы работаем» — в этом блоке описывается процесс работы. Иконки непонятны. И не нужны. Порядок лучше иллюстрировать числами и направлением (стрелочки, линии).

Еще один пример. Здесь всё еще хуже.

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

Запомните

1. Иконки должны помогать восприятию.
2. Они должны передавать чёткие образы.
3. Используйте иконки там, где это уместно. Не лепите иконки ради иконок.
4. Если образ чёткий, а иконка не подходит, возможно текст сформулирован недостаточно точно.

Где брать иконки?

Бесплатно:
1. Более 1 000 000 иконок от дизайнеров со всего мира — https://thenounproject.com/
2. Еще почти 2 000 000 иконок — https://www.iconfinder.com/
3. 57 000 плоских иконок. Можно выбирать стилистику и менять цвета — https://icons8.com/
4. 540 000 иконок — https://www.flaticon.com/

Эти 4 сервиса могут полностью закрыть потребность в иконках. А если хочется чего-то особенного, то посмотрите на платные иконки. Сайты, где за небольшие деньги можно купить хорошие иконки.

Иконки как мы работаем для сайта

Данный сайт предлагает IT поддержку малым и средним компаниям, расположенным в Лондоне.

Маленькие иконки для сайта Purplelattice.com
Сделано в 2011 году

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

Другие работы Purplelattice.com:

Что клиент думает о работе с нами:

Icon Design LAB подошли очень ответственно к нашей задаче. Они сделали иконки для нашего сайта в отличном качестве. Работать с ними было одно удовольствие. Искренне рекомендую.

7 принципов дизайна иконок. На что нужно обращать внимание при создании иконок

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

Понятность

Основная цель иконки – быстро донести до пользователя идею. Иконки на приборной панели Toyota Prius Prime (Источник: 2020 Manual) Какие из этих символов вам понятны? Водители могут выучить их со временем, но некоторые из этих значков интуитивно не понятны. Вам нужно руководство, чтобы расшифровать их значение. Примерно так они выстраиваются для меня по уровню понятности: Когда иконка использует незнакомую метафору, ее трудно понять. «Сигнал напоминания о ремне безопасности» (3-й слева) довольно буквальный, и мы можем его быстро понять. «Сигнал электроусилителя рулевого управления» (крайняя справа) намного сложнее. Часто непонятная иконка просто раздражает. В случае вождения транспортных средств неправильное понимание предупреждающих индикаторов может быть опасным. Вот несколько значков, которые кажутся наиболее знакомыми – символы любви, предупреждения, музыки и направления вверх / вперед: Знакомые метафоры из семейства иконок Phosphor Carbon Стрелка является мощным символом, используемым для навигации: Знаки Нью-Йоркского метрополитена (Источник: Capture of an original copy of NYC Transit Authority Graphic Standards Manual) Наиболее успешные иконки легко понять не только группе людей, они универсальны для разных культур, возрастов и знаний. Изучите свою аудиторию и используйте метафоры и цвета, которые резонируют с ними. Помните, что отдельная иконка может быть не самым понятным решением, если представляемая идея слишком абстрактна. В этом случае добавьте к иконке текстовую метку или найдите альтернативу.

Читабельность

Если у вас есть понятный символ, убедитесь, что он читабелен. Иконки в мобильном приложении Amtrak Сложно разглядеть иконку Station в приложении Amtrak (первая строка), потому что ее детали слишком мелкие. Приложение Transit имеет похожую проблему. Их значок папки с зажимом для бумаг похож на пятно, потому что пространство между папкой и зажимом слишком мало: Иконки в мобильном приложении Transit Небольшая корректировка значительно улучшит иконки: Улучшенная иконка При работе с несколькими фигурами оставляйте достаточно места между ними. Обилие тонких штрихов делает иконку перегруженной и трудной для чтения. Google Maps отлично справился с задачей – иконки удобочитаемы при очень маленьком размере: Иконки Google Map

Выравнивание

Чтобы убедиться, что каждый значок выглядит сбалансированным, выровняйте его элементы оптически. Хотя в этой иконке “Play”, треугольник расположен в центре круга, нашим глазам он кажется смещенным. Широкая часть треугольника кажется «тяжелее», чем точка, и смещенной влево. Точно так же, как художники-шрифтовики точно настраивают шрифты для создания оптической иллюзии баланса (обратите внимание на смещенные точки на «i» и «j» и на выступ буквы «O») Дизайнеры иконок делают аналогичные корректировки, чтобы сбалансировать иконку. Давайте немного сдвинем элементы, чтобы исправить приведенный выше пример: Так лучше. Вывод: не доверяйте цифрам, используйте глаза, чтобы проверить свою работу.

Краткость

Идея, выраженная в нескольких словах, кажется эффективной и элегантной.

Обучение других тому, что вы знаете, укрепляет ваше собственное понимание предмета.

Как сказал Роберт Хайнлайн:

Когда один преподаёт, двое учатся.

Прекрасно. Material Design довольно хорошо иллюстрирует краткость в своем системном руководстве по иконкам. Вместо того чтобы говорить: Чрезмерно сложная иконка корабля (Источник: Material) Скажите проще: Лаконичная иконка корабля (Источник: Material) Краткость подходит для дизайна иконок, так как зачастую мы работаем с небольшими холстами. Не используйте в иконках больше деталей, чем нужно. Стремление к уменьшению и упрощению в интерфейсах подчеркивает смысл и освобождает место для контента. Иконки Telegram лаконичные и приятные: Иконки Telegram Иногда иконки интерфейса приобретают более иллюстративный стиль. Иконки Yelp – это восхитительные изображения популярных продуктов питания. Креветка в иконке тайской кухни изысканна: Иконки Yelp от Scott Tusk В случае иконок приложений, представляющих программы, можно добавить больше глубины и цвета. Поскольку зрители понимают их контекст на мобильных домашних экранах, в доках и магазинах приложений, иконки могут быть более выразительными. Иконки приложений Apple

Последовательность

Чтобы достичь гармонии в семействе иконок, соблюдайте одни и те же стилистические правила. До iOS 13 иконки Apple имели всевозможные штрихи, заливки и размеры: Иконки Apple в меню быстрых действий до iOS 13 Любая иконка имеет визуальный вес, определяемый такими параметрами, как заливка, толщина обводки, размер и форма. Чтобы добиться согласованности и последовательности эти параметры должны быть одинаковыми для всего набора иконок. Apple недавно выпустила введение в SF Symbols, впечатляющее дополнение к шрифту San Francisco. SF Symbols охватывает графический стиль иконок в 9 весах и 3 масштабах (возможно, немного сложное, но дотошное руководство). Из-за этого иконки кажутся более гармоничными. Поддержание согласованности – непростая задача для большого семейства иконок, особенно создаваемых несколькими дизайнерами. Очень важно иметь четкие принципы и правила, которым нужно следовать. Набор иконок Phosphor, проектированный автором этой статьи и созданный ее супругом, содержит более 700 последовательных иконок. Хотя каждая из них имеет различную форму, они имеют одинаковый вес и хорошо смотрятся вместе: Подмножество семейства иконок Phosphor Carbon

Индивидуальность

Каждый набор иконок имеет вкус. Что делает его уникальным? Что он говорит о бренде? Какое настроение он создает? Иконки Waze Интерфейс Waze во многом зависит от иконок. Эти красочные, лаконичные иконки говорят: «Мы причудливы!» Иконки Twitter легкие и четкие: Иконки Twitter Иконки Sketch утонченные и воздушные: Иконки Sketch от Janik Baumgartner Freemojis очень милые: Freemojis от Streamline Наборы иконок для Android предназначены для широкого спектра настроений тем домашнего экрана. Ниже представлены абстрактный, пиксельный, пузырьковый и неоновый стили: Сверху вниз, слева направо: iJUK, PixBit, Crayon, Linebit

Простота использования

Создание набора иконок не заканчивается, когда вы нарисуете иконки. Требуется их дальнейшее тестирование. Нужно, чтобы было легко создавать новые иконки, чтобы дизайнеры могли использовать их в своих проектах (для экрана, печати и т. д.), а разработчики – кодить их. Качественный набор иконок организован, хорошо задокументирован и проверен в контексте. Хорошо, если он поддерживается специальными инструментами, такими как менеджер иконок.

Организованный

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

Хорошо задокументированный

  • Понятность.В первую очередь ясно выражайте идеи. Сделайте иконку узнаваемой и читабельной. Никогда не жертвуйте ясностью значения иконки.
  • Краткость. Используйте как можно меньше деталей. Стиль Phosphor направлен на упрощение. Будьте краткими и учитывайте каждый штрих, чтобы передать суть того, что представлено.
  • Характер. Будьте причудливым. Экономно добавляйте уникальные детали, чтобы оживить иконки и не быть слишком строгим.

Перечислите технические правила:

Примеры технических правил семейства иконок Phosphor:

  • Используйте холст 48x48px
  • Используйте centeredstroke1.5px
  • Используйте закругленные концы
  • Используйте сплошные линии, за исключением случаев, когда ломаные сегменты полезны для понимания
  • Используйте прямые сегменты, идеальные изгибы и приращение угла 15° там, где это возможно
  • При необходимости отрегулируйте кривые, чтобы следовать принципам дизайна
  • Используйте, по возможности, приращения целых, четных чисел; уменьшите до 1px и 0.5px при необходимости
  • Используйте следующие контуры фигур: 28x28px круг, 25x25px квадрат, 28x22px ландшафтная ориентация, 22x28px портретная ориентация
  • Keep a 6px thick trim area

Проведите их итерацию и сделайте документацию общедоступной, если хотите:

  • Иконки Material System
  • Иконки интерфейса,иконки приложений и руководство по иконкам от IBM
  • Иконки Shopify Polaris
  • Иконография Atlassian

Проверенный

Проверьте последовательность. Убедитесь, что иконки работают в контексте, в соответствующих размерах. Убедитесь, что они гармонично сочетаются с визуальной системой.

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

Тестовые листы, используемые в Phosphor

Специальные инструменты

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

Material делает иконки легко доступными с помощью собственной библиотеки иконок. Найдите нужную иконку и загрузите разные стили («темы»), цвета и размеры в выбранном вами формате файла:

Простая в использовании библиотека иконок Material

Набор иконок – это живое существо. Дайте ему любовь и инструменты, необходимые для успеха и роста.

Ресурсы

Библиотеки иконок

  • Feather – великолепный набор из более 200 контурных иконок, которые хорошо масштабируются
  • Material system icons – свыше тысячи утилитарных иконок для интерфейса в 5 стилях
  • Nucleo – набор из примерно 30 тысяч иконок в 3 стилях: контурный, плоский / цветной и глиф
  • Streamline – набор более 30 тысяч красиво нарисованных иконок в 3 весах

Агрегаторы иконок

  • Noun Project – отличный способ поиска вдохновения в стилях и метафорах

Менеджеры иконок

  • С помощью приложения Nucleo, вы можете импортировать наборы иконок, просматривать, экспортировать и перетаскивать их в нужные инструменты дизайна.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *