Как использовать иконки в веб дизайне

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

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

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

1. Как использовать иконки

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

Усиливаем список особенностей

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

Пример: 280 Slides

Привлекаем внимание к новым особенностям веб приложения

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

Пример: Coda

Список различных приложений и продуктов

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

Пример: Intridea

Перечислите ваши услуги и увеличьте легкость чтения списка

Иконки должны соответствовать контенту и иметь простой дизайн. Определите, что вы хотели выразить с помощью контента и создайте на этой основе иконку. Какая тема у веб сайта или статьи? Какие цвета используются? Что это за стиль? Модерн? Классик? Иконки должны быть визуально унифицированы с идеями, выраженными в контенте.

Пример: J. Alexander Woodworking

2. Назначение и размещение

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

Акцентирование колонтитулов для придания заголовкам особенного вида

Даже простая иконка может добавить шарма и индивидуальности веб сайту.

Пример: Coffeenatic

Увлеките посетителя чтением длинной страницы

Используйте иконки как точки в абзацах. Такой подход существенно повысит удобство чтения даже самого длинного текста.

Пример: Rackspace

Отделяем заголовки и секции

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

Пример: Defined Clarity

Размер значения не имеет! Даже маленькие иконки могут быть эффективны

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

Пример: Morgan Hayes

Выделяем текст, размещая иконки справа от абзаца

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

Пример: South Creative

Изменяете размер и размещение иконок

Включите воображение! Изменение размера и размещения иконок сделает контент более динамичным и интересным.

Пример: Media Temple

3. Выберите свой стиль

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

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

Использование светлых цветов и отличного 3D дизайна иконок отлично дополняет внешний вид сайта: GoodBarry

Простота привлекательна и практична: CrowdSPRING

Использование неряшливого стиля для 2D иконок добавляет глубины: Take the Walk

Выбор уникального и последовательного стиля придает динамичности и профессионализма сайту: Squarespace

Монохроматические иконки могут акцентировать внимание на контенте без отвлечения: Studio 7 Designs

Используйте силу трансформации снимка экрана с простым градиентом в уникальную иконку: Gist

Не надо использовать иконку только потому, что она круто выглядит. Выберите то, что больше подходит к вашему сайту по стилю и марке: Treemo

4. Дополнительные примеры

Ниже приводится несколько примеров эффективного использования иконок.

WP Remix

Subcontrast

Shoestring

Raka

Ruby Tuesday

Transmission Apps

Charity Water

Oypro

QBB Help

Euro Languages

Joomla Designs

The Designs

Midnight Apps

Mach 4

WordPress Designers

Holdfire

Wallpaper Script

Lee Munroe

Dallas Usability Professionals

Light CMS

Astuteo

Digital Mash