Главное Авторские колонки Вакансии Образование
10 339 8 В избр. Сохранено
Авторизуйтесь
Вход с паролем

9 тенденций веб-дизайна в e-commerce, актуальные в 2016 году

Чтобы быть на шаг впереди своих конкурентов в e-commerce, нужно отслеживать тренды в дизайне интернет-магазинов и брать от них лучшее. Планируете создать новый онлайн-шоп или поменять дизайн существующего? Эта статья может быть вам полезна.
Мнение автора может не совпадать с мнением редакции

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

Если вы планируете создать свой интернет-магазин (или хотите сделать редизайн для существующего), вы обязаны быть в курсе сегодняшних тенденций в e-commerce. Некоторые самые свежие из них, которые будут актуальны в 2016 году - в нашем переводе статьи от WebDesignerDepot.

Кстати, заказать интернет-магазин, который будет соответствовать всем актуальным трендам веб-дизайна, можно у нас в TruVisibility.Agency.

1) Material Design

Material design всё еще популярен, а в электронной коммерции он используется в больших масштабах. Этот живой дизайнерский стиль, сфокусированный на контенте, активно применяется веб-дизайнерами с момента его выхода в 2014 году, и он будет в тренде еще некоторое время. Адаптивность под различные устройства и платформы, будто осязаемый и живой внешний вид - всё это делает Material Design таким привлекательным для разработчиков интернет-магазинов.

awifDsLxIbknrJqNBzD0LXpP5XK0M6mwlG2c3i0o

Несмотря на то, что использовать Material design для интернет-магазина не совсем просто, некоторые представители электронной коммерции сделали это весьма успешно. PA Design и Bewakoof - только два из них.

2) Скрытое меню

Скрытое меню (наиболее распространенная вариация - меню “гамбургер”) освобождает много места, которое обычно загромождено множеством ссылок на страницы интернет-магазина. Благодаря этому скрытое меню так популярно. Первоначально такой вид навигации использовался только для мобильной версии сайтов, но теперь всё чаще его можно заметить и на десктопе.

GXOsTdLorvg3Cuaf8z0pswayx5xWkQF0YWorS8qN

В 2015 году многие интернет-продавцы стали применять скрытое меню на своих сайтах как для малых, так и для больших экранов, тем самым экономя место на экране. В будущем эта тенденция продолжит расти. “Гамбургер” можно увидеть на сайтах таких известных интернет-магазинов, как House of Fraser и EtQ.

PFc0RkoxwqzNzgES5-AAht2slXGwQEm4eEOlxb54

3) Сверхадаптивный дизайн

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

Q5fNRb65PNq1I_Vo2nFTuvsrRHJxp8OtWrorOx1D

Более 32% пользователей имеют хотя бы одно устройство с разрешением 1920px и выше. Это говорит о важности адаптации веб-сайтов под сверхбольшие экраны. Помните об этом и берите пример с сайтов Firebox, Smythson и Burberry.

TRbZGVVLnEI07fxPnKZU05r_CeQAItGfNnYO8ao3

QCgZSsGQxmR4MeZIb0ayKdolDV5GzTyATHxGV8yH

4) Анимация

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

VvSr2pe22Kij1M7HfE8Z6IZD3owB21Cb7uLhdScO

В 2016 году вы будете встречать всё больше интернет-магазинов с креативными анимациями в дизайне. Мигающие кнопки, вращающиеся иконки и необычные индикаторы загрузки - всё это при правильном использовании оставит приятное впечатление у покупателя. Примеры удачного применения анимированных элементов в дизайне можно посмотреть у Nixon, Fleet Feet Sports и Fallen Hero.

kP1Andj4psQGAifjDZmQ6-cqlsPml3R7gsRm7cRl

rzowEP1WFANyX1kcqt8E7Drfoiv5Fle2_C90ez8L

5) Сторителлинг

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

5xj7wgzs1_y3KEPHffzx_mG81Hkr0IdKOQa4HIBi

Применить сторителлинг в e-commerce не так-то просто, однако быстрорастущие интернет-магазины успешно используют эту стратегию в своих интересах. Два популярных онлайн-шопа, которым сторителлинг “идёт”, это Bonobos и Greats.

sbLDY6Cmv3RikDFK0Wnj2AtWuaEIFVARYhpyNEc9

6) Карточный дизайн

В последние годы карточный макет стал очень популярен у дизайнеров, и эта тенденция просуществует в 2016 году и после. Во-первых, потому что карточки - это неотъемлемый элемент Material Design. Во-вторых, потому что карточный макет легко адаптируется под маленькие и большие экраны.

xD4xcJmkZEqgLpjf2f3nH5NoNCrbMlIwHnSgiJdr

Одно из преимуществ карточного дизайна - он понятен и удобен для пользователя. Позволяя вам классифицировать и организовывать ваши товары, карточки не только помогают покупателям получить всю необходимую информацию с первого взгляда, но и предоставляют возможность рассмотреть похожие продукты, если конкретный продукт не подошёл. Карточный дизайн с успехом используется на сайтах Rejuvenation и Lord & Taylor.

Ti9hmMyw4sf2JJbcUU7VB_AutFDMt7OB5Pcdf4UO

7) Крупная гибкая типографика

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

3e9YGFYVmM9bZRI3MSQ0pA6EDIwcCTPoS-yi4Ibr

Типографика играет важную роль в построении сильного визуального бренда, а также в привлечении клиентов к товарам интернет-магазина. Именно поэтому многочисленные онлайн-шопы уделяют оформлению страниц особое внимание. AYR, Nasty Gal и Brdr. Krüger успешно используют крупную адаптивную типографику.

0uIqQNA7Txrhq-ft7yxgDdWuOMWArBRTLL-aGVTZ

CeBhj5ZA4eEc3sSFioly2LotYbNt-_KCvYKtXIAL

8) Большие фоновые изображения

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

RjaMEQWZHZDApvNGYYknFDMlozxSDYLgfWYsLw0v

Большие бэкграунды отлично работают на главной странице интернет-магазина, однако они могут применяться и на страницах товаров, чтобы погрузить пользователя в конкретный продукт. Благодаря таким изображениям или интерактивным фото/видео на странице с информацией о товаре, ваши посетители смогут почувствовать, будто они уже владеют этим товаром, хотя они еще его не купили. Взгляните, как Eye Heart World и Bugaboo здорово реализовали эту функцию.

wNsgydg_FnMhiNpBbRk44y5faS96qBnS5gohtmSq

9) Динамический поиск

Наконец, последний тренд в веб-дизайне, на который нужно обратить внимание, это динамический поиск. Ожидается, что в 2016 году многие e-commerce сайты будут внедрять поиск на основе JavaScript и Ajax, чтобы показывать товары динамически. Этот метод - особенно удачное решение, если у вашего магазина очень много товаров.

6LBbsIunoke61ct7sGvvo-GMkvaAycdC80xesa4H

Наиболее удачный пример интернет-магазина с такой функцией - JadoPado. Если вы зайдете на сайт и начнёте вводить название интересующего товара в строку поиска, то увидите, что выборка товаров на странице меняется с каждым знаком. Еще один отличный пример динамического поиска можно посмотреть на сайте Stuart Weitzman.

NQXhRGi4jyFnQT4ikQ00z2dRxT8mXBGHF04hdKGZ

Источник: http://www.webdesignerdepot.com/2016/01/9-ecommerce-design-trends-to-embrace-in-2016/

+5
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Комментарии
Foreseer
Data Mining для вашего бизнеса
Ван Гугенхайм
Почему не упомянули про неактуальность сладера на главной? По моему это главное открытие 15ого года - слайдер на главной уменьшает конверсию.
Ответить
TruVisibility
создание и продвижение сайтов
Anna Shabaeva
Здравствуйте, Ван Гугенхайм!
Думаю, каждый может дополнить статью по-своему, ведь каждый сделал выводы об эффективности тех или иных элементов дизайна на своем примере) А вы можете подкрепить инфу о неактуальности слайдера материалами - ссылкой на исследование по этой теме?
Ответить
Foreseer
Data Mining для вашего бизнеса
Ван Гугенхайм
http://conversionxl.com/dont-use-automatic-image-sliders-or-carousels-ignore-the-fad/
Вот неплохая статья, также совет убрать слайдер можно найти в каждом новом материале по повышению конверсии, и на vc.ru не помню точно, но какжется basecamp или mail.ru кейс приводился модернизации страницы, где в цифрах показывалось насколько слайдер сокращал кол-во действий.
Ответить
Gordon Shamway
Главное открытие 15 года - прикладывание подорожника не лечит от триппера. Слайдер отродясь не был инструментом повышения конверсии. Для меня это было всегда очевидно. Не бывает чудаков что либо купивших со слайдера. Задача слайдера такая же как и у рекламной креативной иллюстрации, или быстро продемонстрировать ассортимент, скорее эстетическая и без прямого воздействия. Но, когда они появились, нужен был повод использовать, так как "во первых это красиво" мало. И все решили а пусть это будет типа для конверсии.Сами придумали, сами передумали. Ясен пень, если есть контент, то содержимое слайдера просто раскладывается и подается в другом виде: как картинка на беграунд, как карточки и тп. При убогости контента более менее что то симпатично можно изобразить слайдером. А конверсии не было от него и не будет. Так же как от логотипа, значка копирайта и скроллбара.
Ответить
4devs
Разработка и поддержка проектов на Symfony 2
Андрей 22153
думаю многие пункты, если не все, относятся к любым проектам/сайтам.
Ответить
Viktor D.
Коллтрэкинг и виртуальные номера уже не актуальны? :) В 2015 только обороты набирать начали https://megamozg.ru/post/17494/
Ответить
TruVisibility
создание и продвижение сайтов
Anna Shabaeva
Виктор, здравствуйте!
В статье говорится лишь про элементы в дизайне интернет-магазинов, а где вы про коллтрекинг увидели?)
Ответить
Николай Лагунов
Статья - сплошное капитанство. Многие вещи должны быть по умолчанию на сайте в зависимости от его направленности.
Сторителинг, большие изображения, как пример, должны быть на многих интернет-магазинах, продающих,допустим, свою брендовую одежду.
Ответить
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать

Spark использует cookie-файлы. С их помощью мы улучшаем работу нашего сайта и ваше взаимодействие с ним.