Следите за нами:
Про технологии Про бизнес Про опыт Про книги Прокачай!

Дизайн интернет-магазина: тенденции и советы

Дизайн интернет-магазина – первое, с чем сталкивается пользователь. От его адекватности и понятности для целевой аудитории зависит доверие к бренду. А от степени проработки деталей – то время, которое покупатель проведет на сайте и, в конечном счете, конверсия.
О том, какие тенденции преобладают в веб-дизайне сегодня, мы спрашиваем экспертов:
  • Руслана Баранчикова, дизайнера компании iTrack
  • Алену Пешкову, ведущего UX/UI-специалиста AREALIDEA, Interactive Agency
«Чистый» дизайн и material design

Мода на чистый, плоский дизайн пришла после презентации новой операционной системы iOS от Apple.



Сайт видеохостинга Wistia в стилистике flat design

В свое время он пришел на смену скевоморфизму с его 3D, выпуклыми текстурами и объемными элементами. 



Скевоморфизм использует элементы, напоминающие аналогичные детали реальной жизни

Сегодня эта концепция уступает место новому тренду – material design, предложенному Google как дизайн ПО и операционной системы Android. 



Сайт компании Futurice.com, оказывающей услуги в области digital решений, реализован в концепции material design. Использованы различные оттенки зеленого, легкая навигация между разделами (по материалам materialdesignblog.com).

Тем не менее, по оценке Руслана Баранчикова, flat design сейчас в ходу и 70-80% создаваемых сайтов используют флэтовскую стилистику.

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

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


Структура сайта подчинена выбранной сетке: элементы вписаны на страницу квадратными или прямоугольными блоками.



Образец использования сетки на сайте-портфолио http://themeforest.net/

Шрифты – тоже важная часть. Не стоит использовать вычурные или слишком разнообразные шрифты. Лучше ограничиться 1-3, обеспечив смысловую привязку к элементам страницы: в чистом дизайне смена шрифта уже может обозначать выделение того или иного раздела. 

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

Цветовую палитру стоит ограничить 1-2 цветами, разнообразия можно достигать, используя различные оттенки одного цвета. Строить работу по созданию сайта дизайнеры рекомендуют «от общего к деталям»: создать единую концепцию, после чего прорисовывать элементы. 

«Флэтовский» сайт не перегружают текстовой информацией или анимацией. Навигация простая и предусматривает возможность добавления новых страниц (например, разделов «Акции» или «Распродажи»). 

Тенденции в разработке 

Из очевидных выгод флэт-дизайна для интернет-магазинов – уменьшение времени загрузки страниц, простота навигации, которая увеличивает глубину просмотра. Тем не менее, пожелание спроектировать магазин именно в этой стилистике чаще исходит от разработчика, а не от заказчика. Руслан Баранчиков замечает, что заказчик часто не знает последние тенденций в дизайне и задача агентства – показать ему, что сейчас в моде, в конечном счете, это плюс и для разработчика, портфолио которого не должно выглядеть плохо или скучно на фоне конкурентов. Обычно клиенты избегают экспериментов: боятся, что они не оправдают себя и ориентируются на успешные проекты в своем сегменте: «Чаще всего клиент просит, чтобы сделали сайт, похожий на конкурентов, но чтобы немного отличался», – говорит Руслан Баранчиков, с ним соглашается Алена Пешкова. Первый сайт с минималистичным дизайном – equipage.ru – в AREALIDEA спроектировали в 2014 году. Сначала разработали выкладку для десктопа, позже — для смартфона. «При просмотре страниц сайта на retina-дисплеях пропорционально меняются расстояния между объектами, кадрируются изображения, переносятся строки, при этом шрифты сохраняют свой размер. Каждая страница выглядит как разлинованный лист, каталог товаров имеет плиточную структуру». Такой формат сайта помог сделать акцент на качестве, которое является ключевой ценностью компании-клиента. Алена Пешкова утверждает, что после запуска сайта многие последующие заказчики приходили, указывали на этот кейс в портфолио и говорили: «хочу такой же».

По словам Екатерины Ким, исполнительного директора агентства iTrack, тенденция чистого дизайна была на пике в 2013-14 годах, после выхода iOS7: «Они сильно сменили дизайн интерфейсов, убрали все эффекты, оставили простую инфографику и стали делать акценты на цветах и простых иконках. Все стало минималистичнее, и это стало трендом». Сегодня, по ее словам, в тренде material design. Эта концепция представляет собой метафору работы с реальными объектами, обладающими физическими свойствами (тени, наложение объектов друг на друга, шрифтовая иерархия). Принципы material design: 
  • свет, текстуры, движение используются для обозначения взаимосвязи объектов; 
  • базовые элементы – типографика, сетки, иконки, цветовая палитра расставляют смысловые акценты, задают иерархию, делая функционал сайта очевидным для посетителя;
  • акцент на действиях пользователя: движения объектов осмысленны, происходят синхронно, таким образом, что взаимодействие пользователя с интерфейсом оказывается непрерывным (синхронное изменение масштаба, элементов, адаптивность).


Обновленный сайт aviasales.ru. В своем блоге компания делится подробностями перехода ресурса на material design.



Проект агентства iTrack для клиента – продавца звукового оборудования. При создании использованы шрифтовые комбинации, тени, которые представлены в руководствах Google по material design.

Руслан Баранчиков признает, что material design пока чаще используется в мобильных приложениях, в веб – реже, преимущественно в тех местах, где нужны тактильные действия пользователя: «Плюс это или минус – вопрос. Если бы он был везде, быстро бы изжил себя. У самих Google есть англоязычный блог, где собраны топовые примеры сайтов, созданных с помощью него. Они красочные, интересные. В Google material design цвета ярче, контрастнее, если множество сайтов создано в этой концепции, то они могут быть похожи друг на друга». По мнению Руслана Баранчикова, material design удобен для интернет-магазинов, так как легко адаптируется под мобильные версии, но на российском рынке подобные проекты в сегменте e-commerce вспомнить затрудняется: «Лично я пока таких не знаю. Думаю, что material design будет распространяться, в том числе и как концепция дизайна интернет-магазинов»

Перерабатываем контент

Если вы решили создать будущий магазин в концепции material design и раздумываете, кто может справиться с задачей, то обращать внимание стоит не столько на художественное образование дизайнера, сколько на присущее ему чувство композиции. У Google есть гайды, рассказывающие как делать подобные сайты, какие выбирать настройки, тени. Поэтому, главная задача дизайнера, по мнению Руслана Баранчикова – грамотно распорядиться найденной информацией: правильно скомпоновать, расположить: «Навыков рисования от руки тут не требуется, главное, что необходимо – чувство композиции. Гигантский плюс – умение делать анимацию»

То же самое Алена Пешкова отмечает и про флэтовскую стилистику: навыков, отличных от создания других веб-сайтов от дизайнера не требуется. Нужно соблюдать структурную сетку, уметь работать с типами и размерами шрифтов, создавать (или находить) лаконичные иконки. Грамотно подбирать цветовые схемы и уметь работать над конкретными задачами сайта. Единственный навык, который Алена Пешкова выделяет особо – обработка и создание целевого контента: «Для создания «чистоты» мы обязаны перерабатывать получаемый контент, выбирать только самое важное, размещать его так, чтобы пользователь мог обрабатывать материалы, практически сканируя взглядом. Зачастую заказчик не готов предоставить продуманный контент, поэтому дизайнер изучает текстовый массив, смотрит презентационные видеоролики, бренд-бук, выбирает и создает то, что поможет донести ключевые идеи проекта или конкретного продукта». То есть, из предоставленных клиентом материалов в первую очередь выносится информация о ключевых ценностях бренда. После чего определяется, как донести их пользователю таким образом, чтобы информация считывалась «с первого взгляда». Формат зависит от конкретной задачи проекта. 

Алена Пешкова: «Если сайт посвящен какому-то одному продукту, то уместно использовать на главной странице презентацию его ценностей, преимуществ, свойств в виде инфографики, или просто иконок с подписями. Иногда анимацию. Но чем проще, тем легче, поэтому для большинства случаев, я бы не рекомендовала использовать анимацию. Это в любом случае нагрузка и ограничения, накладываемые сетью, которые могут сделать работу с сайтом невыносимой. Если это интернет-магазин, то отрабатывать инфографику для всего множества товаров становится затратным. Поэтому в этом случае достаточно и просто текста, грамотно отформатированного – например, маркированным списком, или таблицей характеристик, делением описания на абзацы». 

Дизайн и конверсия

Важность минимализма заключается в том, что контент более тщательно отбирается. Для чистого дизайна характерно «ведение» пользователя до момента совершения целевого действия при помощи рационально организованного текстового содержания, графических «маяков».

Основываясь на опыте работы AREALIDEA, Алена Пешкова подсказывает, как отформатировать контент, чтобы облегчить его восприятие и подтолкнуть пользователя к выполнению последовательных шагов на сайте:
  • 3-4 колоночная структура страницы. При обозначении преимуществ, ключевых фактов, направлений услуг ограничиваем список до 3-4 элементов. Это количество характеристик легко воспринимается и остается в памяти.
  • Длина заголовков 1-2 слова, пояснения на 2-3 строки. Быстро считывается, текст не утомляет. Если есть потребность рассказать подробнее, создаются детальные страницы описаний.
  • Заголовки формируем из существительных, так как они создают образ, конкретный объект, связь с изображением. 
  • Важную информацию стараемся оформлять крупными шрифтами. Соответственно, важные фразы приходится перерабатывать в короткие, цепляющие.
  • Простые, не детализированные, но явные иконки. Чем проще изображение, тем меньше информации для анализа, тем быстрее приходит понимание назначения объекта.
  • Стиль изложения – зависит от специфики сферы. Например, если это интернет-магазин бытовых вещей, то стиль изложения должен быть прост, без терминологии и сложных оборотов, повседневным языком, привычным пользователю.


http://spigotdesign.com/


Скоро выставится сайт conformstyle.ru. Сравните текущую и будущую версии страницы. Блочная структура облегчает чтение, цветовые акценты подводят посетителя к оформлению заказа и выбору способа персонализации. 

Отвлекающие элементы, не несущие функциональной нагрузки,  фильтруются, и пользователь движется в информационном поле туда, куда нужно. Руслан Баранчиков: «Мы не должны дизайном перетягивать внимание от продукта или услуги. Акценты, цепляющие внимание, можно расставить скорее при помощи анимации, заголовков. То есть, мы можем решать маркетинговые задачи при помощи flat или material design, но важна цель, которой мы добиваемся и требования клиента».

Об авторе
PR- и event-специалист, журналист, преподаватель.
Более 6 лет работала в компаниях СПб в должностях менеджера проектов, специалиста по связям с общественностью, pr-директора (digital, телекоммуникации, СМИ, реклама). C 2010 года — фрилансер, преподаватель высшей школы. С 2013 года - автор портала Prograbli.ru.
Кандидат экономических наук. Автор учебных курсов курсов "Event менеджмент как инструмент маркетинговых коммуникаций",
"Корпоративная и социальная ответственность бизнеса".