Использование самых различных иконок по размеру, количеству и стилю в веб-дизайне настолько распространено, что зачастую встает вопрос о том, какие же именно по стилю иконки способны оживить тот или иной сайт и придать ему «свежести». Обычно мы с вами видим иконки под большим изображением в начале страницы, под слайдерами. Иногда встречаются иконки в секции «услуги», что выглядит как табличный инфоблок 2х3. Более того, иногда и веб-мастера и заказчики полагают, что современное направление дизайна сайтов – это минимализм и плоскость, а потому иконки банально не вписываются в общую стилистку сайта, какими бы те не были по внешнему виду.
Но вот что занятно… Именно контурные (линейные или тонкие, как их еще называют) иконки придают дизайну уникальность, изюминку, побуждают пользователя к действиям и обладают некой магической силой, что буквально притягивает взгляд к дизайну сайта в целом. Такие строгие и минималистические иконки, как инструмент подачи информации, подходит не для каждого дизайна и пользовательского интерфейса. Необходимо создавать соответствующие условия для их использования такими, чтобы иконки не потерялись среди контента (текста или видео), чтобы были на своем месте и несли свой смысл.
Таким образом, линейная иконография, как и любое другое направление в веб-дизайне, сегодня нам более интересна, так как основная задача помочь пользователю усвоить и разобраться в информации на сайте как можно более эффективно. Как говорится: вместо тысячи слов – одна смысловая картинка.
Линейные иконки используются не только в секциях Landing Page, но и в меню, социальных виджетах, областях навигации, даже просто среди всего общего объема контента. При этом новаторы и веб-мастера стараются разместить как несколько стилизованных изображений, так и создавать смелые решения, которые без использования этих иконочек просто потеряют не только свой вид и смысл, но и будут выглядеть «опустошенными» и скучными.
Откуда брать идеи
Сегодня мы посмотрим некоторые примеры наиболее яркого сочетания общего стиля дизайна сайта с различными вариантами использования линейной иконографии, как она органически сочетается с концепцией сайта и придает ему ту «изюминку», которая делает его понятным и привлекательным для посетителей. Все сайты весьма необычны, поэтому зачастую лучше посетить их лично и увидеть, как все это представлено «вживую».
Brianza Che Nutre
Проект обладает большим количеством негабаритных, но великолепных иконок, которые выглядят необычно и доступны для понимания. Каждая из них соответствует какой-то услуге компании и может изменять свой внешний вид, при наведении на неё мышкой, что превращает секцию в графическое меню сайта. При этом плоский геометрический стиль хорошо подходит как под современные тенденции, так и под общую стилистку сайта.
RDT54 и Flyt Verden
Другим интересным вариантом стилизованного использования иконок является оформление навигации, которая занимает весь экран браузера. Мы привыкли, что навигация создается в виде верхней строчки или вертикального меню справа/слева. Здесь же веб-мастера решили создать нечто более просторное, свежее и доступное. Каждая иконка обладает оригинальным изображением, меняющимся, анимационным, ну а сами пункты меню дополнительно оснащены текстовыми заголовками. Вкупе с использованием для каждого пункта фона разных цветовых оттенков, эти два сайта действительно выглядят необычными и… удобными для изучения и неоднократного посещения.
o2Source и Sweet Magnolia Gelato Company
Два неординарных варианта по стилистике. Первый – использует упрощенные скетч-иконки для навигации по сайту. Дополнительные серые пятна придают эффект глубины изображениям и выделяют их на фоне контента. Решение простое весьма, но интересное.
Другой вариант – узоры из иконок и стилистически подобранные активные. Компания сладких кондитерских приправ использовала иконки для создания всего веб-дизайна и, надо сказать, получилось неимоверно оригинально.
SB Joinery и Jorgerigabert
Иконки в меню наряду с текстом – не новшество, но оригинальное сочетание придает колорит всему сайту. Маленькие, аккуратные линейные иконки соответствуют своему пункту меню. Они созданы в общей стилистике дизайна сайта, не являются чужеродными, вписываются в атмосферу и не нарушают минимализма. Наглядность и простота – девизы этих сайтов.
Линейные иконки – как часть основного контента
Для удобного усвоения информации на сайте иконки используются чаще и выглядит это как выстроенные в линию изображения или табличный блок 2х3. Иконки уже не являются ссылками на страницы сайта, а имеют исключительно информативный характер. Но и этот момент веб-мастера стараются оформить весьма оригинально.
Yama
Раздел сервиса компании решено было сделать в виде временной шкалы, которая попросту нарушает все возможные традиции, но не выглядит чем-то дурным. Согласны? Плоские контурные иконки, линии и выноски создают элегантность и утончённость, которой пропитывается весь дизайн сайта.
MotoCMS и GoodPatch
Проект GoodPatch обладает большим количеством свободного пространства, которое позволяет посетителю чувствовать себя свободнее и спокойнее. Нет яркой цветовой гаммы, вся стилистика выдержана в деловой атмосфере с использованием только двух тонов. Иконки органически вписаны в этот стиль и размещены в пространстве страницы так, что и визуально они воспринимаются быстро и смысл понятен.
Аналогично работали мастера и над проектом MotoCMS. Здесь иконки используются в секции описания движка с представлением преимуществ. Плоские, контурные и невообразимо минималистические иконки, пусть и не слишком выделяющиеся на фоне текста и цветовом фоне страницы, но способные обогатить визуально весь контент, подчеркнуть плюсы информации и отражают нынешние направления веб-дизайна.
KPMG
Пройти мимо данного сайта невозможно. Оригинальные решения и внешняя красота манит буквально каждого. Но для нас интересна средняя часть страницы, где над анимированным изображением города (время суток совпадает с вашим) возвышаются пиктограммы. Простые, линейные, ярко выделяющиеся – они быстро «бросаются в глаза» и несут в себе много информации, если подвести мышку. С одной стороны, это меню; с другой, своеобразная карта. В совокупности же, сайт приобретает эстетику и нотки изысканности.
Planet Escape
Польские веб-дизайнеры решили совместить сразу несколько видов контента: текст, фотографии и иконки. Необходимо заметить, что как раз такое содержание тяжеловато для восприятия посетителями, так как глаза и без того «разбегаются» от обилия ярких и контрастных фотографий. Тем не менее, иконки использовались едва заметные и на некоторых изображениях они хорошо видны. Но есть другая сторона такого сочетание - смысловая. Если рассмотреть иконки внимательнее, то они отражают варианты путешествия по землям, которые представлены на фото или цель визита. По саване – на авто, пляж – для совместного отдыха, море – для лодки, отель – бриллиант отдыха и так далее. Посему, в данном контексте, такое сочетание является весьма интересным и необычным, и удобным.
Fineocar
Французы решили, напротив, насытить иконками почти весь сайт, сохранив информативность, стилистику, традиции и современные стандарты веб-дизайна. Что получилось…? Иконки стали олицетворением кнопок меню, которые разместились сразу на логовом изображении, создавая, тем самым, второю линию меню. Более того, они используются и для подчеркивания контента ниже. Маленькие по размеру, яркие по контрасту, минималистически стилизованные – они выделяются и привлекают внимание посетителя к информации под ними. Справа в плавающей панели также размещаются иконки, подчеркивающие информацию и буквально заставляют посмотреть глазами в их сторону. То есть, побуждающий элемент здесь использовался как нельзя ярко.
Годовой отчет Fiverr
Интересен и следующий пример – годовой отчет компании. Контент представлен пиктограммами – контурными, аккуратными, черно-белыми. В правой же части страницы отображается контекстная информация при выборе той или иной пиктограммы. Таким образом, контент подается не в стандартной форме, как мы видели ранее, а уже через интерактивность и взаимодействие с посетителем, предоставляя ему возможность узнать то, что его интересует в первую очередь.
Lovely Things
Мы всё это время рассматривали строгие минималистические решения в деловом стиле. Но дизайн интернет-магазина ювелирных украшений может порадовать не только общим оформлением, но и иконками, что используются в меню. Сайт обладает декоративной эстетикой и придает даже товарам некую ауру изыска и необычности, ибо покупатель иначе воспринимает совокупность дизайна и товара. Тонкие, витиеватые линии в графике иконок наполняют дизайн сайта воздушностью и нежностью. Другой, более строгий вид иконок не смотрелся бы и был бы явно чужеродным.
Social Blue
И еще одно новаторство с использованием геометрических форм, диагоналей и крупных элементов, придающие дизайну изысканную привлекательность. Здесь первичная навигация выполнена в виде ромбовидных текстовых иконок, затем, словно вложение за темным фоном, используется «полотно» с прямоугольными элементами меню. И везде при этом используются минималистические, линейные иконки. Решение же всего дизайна проекта очень необычно и интересно, его можно долго рассматривать и находить идеи.
Завершение
Линейные иконки – отражение изысканности, утончённости, делового настроя и строгого характера. Между тем, они сказочным образом освежают сайты, добавляют четкости и упорядоченности и не ущемляют возможностей для творчества. Разумеется, просто взять и разместить их на своем сайте или Landing Page не получится. Весь дизайн должен органически им соответствовать, чтобы не получилось так, что дизайн, рисованный от руки, а иконки с проекта Social Blue. Не сочетаются они. Линейные пиктограммы могут стать центром всего дизайна, могут стать частью, хрупкой и элегантной, подчеркивающей вкус владельца и создателя.
Но в любом случае, использование такого элемента в веб-дизайне – это стильный способ улучшить проект, сделать его удобным для навигации и интуитивного серфинга. Примеров использование контурных иконок много, но мы рассмотрели самые новаторские и необычные, атмосферные и притягательные.
