Задумывались ли вы, читатели, что иконки тоже подвластны моде и трендам? Люди так часто говорят о дизайне в целом, о логотипах, графике и типографике, но только вскользь уделяют внимание иконкам. А ведь они на сайте играют если не самую важную роль, то весьма значительную. И в течение года тренды иконок могут тоже подвергаться изменениям. Впрочем, здесь ситуация обстоит несколько похоже на ту, что и у логотипов. Существуют проверенные временем стандарты и стили, от которых впоследствии и отталкиваются художники и дизайнеры.
Но, так или иначе, цель иконок сделать любой дизайн уникальным, придать ему утонченности и характера, выделить среди аналогов. Именно среди аналогов, конкурентов, а не всего и вся в интернете, так как иконки по своему виду сильно зависят от дизайна и выбранных цветов, зависят от тематики и стиля.
Но какие же они существуют, эти маленькие визуальные помощники? Как они изменились за текущий год и какими встретят год грядущий? И действительно ли можно создать уникальную иконку самостоятельно? Вот об этом и поразмышляем в нашем материале.
Линейные иконки
Практически вечная и не стареющая тенденция линейных иконок будет жить еще долго, радовать глаз пользователей и вдохновлять художников. Причин тому много, но одна из них – универсальность. Неважно, какой общий стиль дизайна сайта или приложения, линейные иконки вписываются отлично, скорее даже – идеально. Любой фон, любой цвет, с анимацией или без. И если присмотреться ко многим пакетам готовых иконок, то они включают в себя линейный вариант. Как раз из-за универсальности и вечной моды.
Достаточно подробно о линейных иконках мы рассказывали в отдельном материале, но увидеть практическое их использование можно на: agostinetto-win, northwest, expressbank, creative_agency, appinstitute. И как наглядно видно - везде разные стили дизайна, разные тематики, даже места размещения. Но иконки легки для восприятия, не кажутся лишними и даже наоборот, подверждают представление пользователей о том, на что указывают ссылки или контент. Кроме того, стоит обратить внимание, что линейные иконки могут быть не просто контурными, но и с небольшим заполнением. И именно – с небольшим. В противном случае, они превращаются в «упрощенные».
Эскизы и простота
Простота доминирует в веб-дизайне уже года полтора и останется таковой еще и на протяжении следующего года. И, разумеется, что иконки тоже соответствуют такому тренду. Но в отличие от своих линейных братьев, они близки к эскизам, графическому творчеству. В основе таких упрощенных иконок лежат простые формы и геометрические элементы, которые соединяются между собой и образуют новый объект. Но чтобы лишние линии не присутствовали в рисунке весь объем иконки заливают одним цветом.
Здесь нельзя увидеть разноцветности, градиентов или художественных эффектов. Все просто и отчасти схематично. Но отличительная особенность такого стиля в том, что в одном наборе эскизных иконок всегда присутствует нечто общее, что связывает их. Нет, не тема, а какой-то элемент, например, круг, квадрат, стрелочка, полосочка и прочее. И такой элемент может присутствовать как в общей форме части иконок набора, так и в качестве составляющей части одной иконки.
Чтобы было немного понятнее, о чем речь, посмотрим на coldservice. Иконок много, и каждая из них характеризует раздел сайта. Но выполнены они в кубическом стиле. То есть основной элемент – маленькие квадратики, прямоугольники, которые благодаря анимации создают потрясающий эффект «живого» сайта, будто бы он имеет собственную жизнь, ведет активность.
Аналогично, элемент треугольник был положен в основу иконок на manhattanmiami. Если прокрутите страницу главную вниз, то увидите и другие интересные вариации.
Окружность была взята за основу на modeltheme и если вы подумаете, что иконка «А» отличается, то присмотритесь к нижним засечкам – они выпуклые, немного изогнутые, а значит, часть окружности использована. Аналогичные иконки есть и на cadovani.
Графическая раскраска – «комикс»
Существует множество иконок, обладающие не одним цветом, а достаточно большим их количеством. Но при этом они не являются высокохудожественными, а все такие же – линейные по большей части. Благодаря раскрашиванию, полости отдельных элементов обретают новый вид, а иконка – смысл.
Такие иконки используют цвета основной палитры, простые и ясные. И это понятно, поскольку в дизайне и без того существует много цветов или необычных оттенков, а иконки с иными цветами или сложными оттенками могут перегрузить целостность дизайна, уничтожить ощущение пространства и свободы, быть просто неприятны визуально.
В то же время необходимо помнить, что чем меньше деталей в иконке, тем она легче, тем проще её раскрасить и понять. Особенно если иконка используется маленького размера. Главное, что отличает такие иконки – стиль дизайна сайта/приложения. Они совершенно не подходят для художественных вариантов, а потому гораздо чаще можно видеть цветные иконки именно в графическом дизайне.
На примере appinstitute мы видим раскрашенную линейную иконку. Причем в окрашивании использовалось три основных цвета – два оттенка зеленого и серый (квадратики красного и оранжевого рассматривать не будем). Если учесть, что весь дизайн сайта создан в зеленом цвете, то использование такой раскраски вполне оправдано. Но благодаря двум оттенкам художники смогли добавить объемность, немного художественности.
Весьма эффектно выглядят и иконки от Alexey Gushin, которые могут использоваться и на сайтах, и как стикеры.
Аналогичные варианты цветных иконок можно увидеть и на peoplegrove, eatlambs, reneza, make-my-persona, checkout.
Плоские и толстые
Мы объединили два вида таких иконок, поскольку для них многое одинаково характерно. В отличие от обычных линейных иконок, толстые иконки рисуются более жирной линией и более схематично. Соответственно, выглядят крупнее, возможно, и чуть более грубо. Но и их используют аналогично линейным в любом дизайне любого стиля, и в коллекции иконок они обычно не входят. Их создают специально под проект: иконку одной только корзинки или телефонной трубки.
Что же касается плоских иконок, то они похожи на графические раскрашенные, но представляют более художественный вариант. Да в целом дизайн сайтов немного ушел от 100% плоскости, веб-мастера стараются придать немного объема, структурности. Но вот иконки плоские используются в разных стилях, так как сочетать их удобно.
Примеры обоих вариантов можно увидеть на: kinfo, hflu, fitnessamp, juicymo, hashworks, mentelocalebrescia, maydayhealthcareplc.
Особенности создания иконок
Использовать иконки в дизайне сайтов хочется практически всегда и всем. Но просто так взять и выбрать какой-то один стиль не всегда удобно. Как мы говорили выше, он может не сочетаться с дизайном и тематикой. Другой момент заключается в том, что заказчики/клиенты придирчиво относятся к тому, если нечто подобное где-то видели. И попробуй поясни, что общие элементы могут и должны быть, но в целом стилистика-то разная. Вот и приходится дизайнерам приступать к быстрому макету и рисованию собственной небольшой иконки. И хорошо еще, если навык рисования есть.
Так на что обратить внимание, если решили создать две-три иконки самостоятельно?
- Сетка. Четко разметьте иконку по клеточкам, при необходимости нарисуйте её на бумаге. Потом перенести гораздо проще или отсканировать прототип.
- Геометрия. Используйте правильные фигуры и формы. Сочетайте их под четкими углами (30,45,90 градусов и т.д.).
- Уникальность формы. Полукруг, угол, переходящий в овал – ищите что-то оригинальное и необычное.
- Пространство. Не тесните иконку. Между элементами сделайте отступы, чтобы было понятно, что нарисовано.
- Цвета. Цвета и оттенки обычно используют не просто дизайна сайта, а всего бренда. Вот, предположим, сайт МТС. Он бело-красный, синие иконки или сиреневые будут чужими. В крайнем случае, можно сделать их нейтрально черными, серыми.
- Без эффектов. Не украшайте иконку звездочками, бликами и прочим. Это лишнее, если иконка маленькая или схематичная. Если вы создаете более-менее художественную, то небольшую звездочку еще можно, и то, если это уместно по стилю дизайна сайта. Но обычно такого не делают.
- Детали. Если иконка создается маленькой, то она должна быть четкой. Поэтому линейный стиль в большем приоритете, чем любой цветной или эскизный. Посмотрите на сайт agostinetto-win и вы поймете о чем речь.
Дополнительно можно почитать и наш материал о логотипной сетке, её использовании. Для иконок идеи все те же, поэтому материал, наверняка, не покажется лишним.
Кроме того, всегда стоит наблюдать за стандартами и руководствами по стилю. Принимая во внимание частые нововведения в веб-дизайне, Apple и Google публикуют разные материалы по работе с цветами, плоскостями и прочим. Относится это и к иконкам, тем более что у этих компаний они менялись быстро и часто (то с тенями, то с линиями, то объемные и так далее). Иконки Apple, иконки Google 1 и Google 2 (причем с курсом рисования по сетке и прочими полезными мелочами).
Завершение
Иконки невероятно полезный инструмент веб-дизайна, несмотря даже на то, что используются они не на каждом первом или втором сайте. Используется ли значок соцсети, элементы логотипа, картиночки-пояснения к услугам или олицетворение ссылок меню – это все равно иконка (статическая или динамическая). И выполняет она всю ту же цель – визуальное представление того, что написано рядом. Некоторым пользователям вполне достаточно пробежаться глазами «по диагонали» по сайту и понять, что им нужно, а что – нет. И достигается это именно благодаря понятным иконкам, вне зависимости от их размера, стиля, цветности и прочего.
Но основные тенденции иконок всегда в моде и всегда применимы. Простота, плоскость, минимализм цветов, общие геометрические формы для набора на всем сайте. Иконки могут быть объемными, с тенями или без – и это приходящее и уходящее. Но это как раз и есть – временная мода. Простота, плоскость, ясность – тенденции, которые вечны всегда, особенно если иконка маленькая.
Но при этом именно маленькие иконки очень виляют на дизайн, они его будто расширяют, насыщают информацией, придают некую пикантность. Если они подобраны по стилю и цветности, то становятся единым целым с дизайном и создается ощущение того, что без иконок смысл весь потеряется.