10 трендов веб-дизайна западных интернет-магазинов по версии AdvantShop

Какие тренды дизайна интернет-магазинов сейчас находятся на пике популярности в Европе и Америке? 10 главных направлений выделили эксперты команды AdvantShop. Мы предлагаем не отставать от западных коллег и перенимать опыт для улучшения собственных интернет-шопов. Забегая вперёд, скажем, что марку держат визуальные элементы и возможность увидеть товар во всех деталях, а популярность набирает метро-стиль. 

1. Search-акцент

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

Чаще всего строка поиска мудрыми дизайнерами выделяется цветом и располагается в верхней части экранной страницы. Поиск чаще всего ведется морфологически: причем транслируется ваш запрос на нескольких языках. Этот тренд используют магазины-гиганты Amazon и Е-bay.

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

2. Господство визуального

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

На том же Amazon-е товары разбиты по визуальным категориям. Найти необходимый предмет можно несколькими верными кликами мышки по изображениям товаров. На E-bay господствует «пинтерест-формат» – продукты «валятся» на тебя скопом, выстраиваясь в стройную ленту.

3. Бесконечная подгрузка контента

От этого тренда многие не в восторге. Конечно, в поведенческом плане, когда посетитель бесконечно долго остается на сайте, это может быть и хорошо. Но иногда просто невозможно остановиться, это выматывает и приходится практически волевым усилием закрывать магазинную ленту. Наглядно тренд работает под девизом «крути – пока не найдешь», и продавцам нравится куда больше, чем близким засидевшихся у мониторов людей.

4. Разглядываем мелочи

Все объекты при наведении на них мышкой становятся большими. Порой даже – огромными! Вселенская человеческая лень довела до того, что крутить и листать уже не нужно – достаточно навести на предмет послушный курсор! И это, поверьте, тоже самый настоящий тренд веб-дизайна.

Магазины создатели стремятся сделать максимально удобными, чтобы пользователь не испытывал лишнего дискомфорта, а возможности просмотра и поиска были простыми до безумия. Только так покупателям будет удобно фильтровать и отбирать товар.

Слева при этом остается графа «фильтр». Тут можно выбрать необходимые параметры поиска: марку, размер, цвет нужного товара. Сузил поиск? Не успел отвернуться, а лента интернет-продуктов моментально «перестроилась», обновилась, не провиснув при этом ни на секунду.

У небольших интернет-магазинов, как ни странно, возможностей для смелых веб-дизайнерских решений куда больше. Все – из-за возможности концентрироваться на конкретных «лотах». Если уж портал всерьез занялся продажами изделий из кожи, например, то сумки, кошельки и ботинки мы с вами разглядим во всех деталях – вплоть до вариантов создания имиджа обладателя купленного предмета.

Товар в этом случае ставится во главу угла. Исчезают при таком дизайне и строка поиска, и категории отбора. Все внимание покупателя – исключительно на товар. Тем более, что его не так много. Нажал на предмет – и тут же добавил его в корзину.

5. Невзаимное проникновение: товар «лицом»

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

Со стороны это очень похоже на поход по бутикам - выбираешь до посинения. Товар нужно показывать «лицом». Все просто: чтобы продавать, нужно «загипнотизировать» покупателя, привлечь его внимание. К примеру, все ту же кожаную сумку видишь настолько близко, что тебе ее незамедлительно хочется купить. Если можно сделать это одним кликом мышки, зачем бежать в бутик соседнего торгового центра?

Очень активно в этом направлении развиваются сегменты одежды и мебели.

6. Минимализм и простота

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

Черное на белом – самое «читабельное» сочетание. При выборе этого подхода западные дизайнеры интернет-магазинов чаще всего отказываются от графики и вводят в оформление всего пару-тройку шрифтов.

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

7. «Кубизм» в действии: метро-стиль

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

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

Это – тоже адаптированный шаблон под акцент на товаре. Его мы по-прежнему показываем «лицом», но на этот раз элементы расположены в формате «метро». Дизайн можно рассмотреть детальнее по этому адресу.

В этом проекте – снова акцент на товаре. На этот раз выбираем платье нужной фактуры, фасона, размера и цвета. Без лишних проблем и учитывая все пожелания клиентов.

На AdvantShop есть даже специальный шаблон для интернет-магазинов одежды. В движке разработчикам и дизайнерам удалось реализовать механику «товар - это главное».

Заходишь на главную страницу – сразу натыкаешься, допустим, на платье мечты! Оно представлено во всех деталях: возможно увеличение, приближение – все, что вашей душе угодно. Вещь сразу хочется купить. Смотрите и виртуально примеряете! Большие ценники – чтобы не блуждать в поисках стоимости; удобный фильтр, где можно выбрать нужные цвет и размер. Рассмотреть и купить дизайн от AdvantShop можно здесь.

8. «Планшетный» формат: дизайн становится универсальным

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

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

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

9. Товар – на весь экран!

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

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

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

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

Уже есть сайты, которые посвящены какому-то одному уникальному продукту. И дальше все будет двигаться только в этом направлении: так, например, работает магазин apple.com. Минимальные описания и почти полный уход от текстовых «кусков».

10. Видео становится составным элементом дизайна

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

AdvantShop внимательно отслеживает все популярные западные тренды в веб-дизайне: команда активно мониторит их и «запускает» в своих проектах с учетом отечественных интернет-реалий! В итоге клиент становится «хозяином» магазина, ничем не уступающего по привлекательности западному.