Любой бизнес для развития и притока новых клиентов должен быть представлен в сети интернет. Но просто создать сайт и разместить на нем информацию о своем продукте недостаточно — конкуренция высока и нужно уметь “зацепить” клиента, чтобы название бренда буквально отложилось у него в подсознании. Один из способов добиться этого — использовать уникальный дизайн.
Что такое ecommerce?
Если дать простое определение, то ecommerce (электронная коммерция) — это тот тип бизнес-деятельности, при котором между сторонами нет прямого физического контакта. Если владеете, например, продуктовым магазином и параллельно с прямыми продажами запустили сайт — вы занимаетесь электронной коммерцией.
В этой схеме:
- продавец предоставляет на сайте исчерпывающую информацию о продукте, принимает оплату через ЭПС, банковские карты, криптовалюты;
- поставщики гарантируют доставку продукта;
- потенциальный клиент через сайт знакомится с предложением и оформляет заказ.
Одного качественного продукта недостаточно для того, чтобы ваш сайт дал стабильно увеличивающийся поток клиентов. Знакомиться с предложениями, уточнять детали посетитель будет позже. На стартовом этапе нужно удивить его, привлечь внимание, выделиться на фоне конкурентов (причем сделать это не в ущерб юзабилити).
Актуальные тренды ecommerce дизайна
Помните — у вас не будет второго шанса оставить первое впечатление. Отходите от стандартных дизайнерских шаблонов и не бойтесь экспериментировать.
В ecommerce дизайне выделим несколько основных рекомендаций:
- нужна четкая подача информации, посетитель должен сразу понять кто вы, что делаете и что он может получить здесь;
- дизайн не должен быть статичным, динамичные элементы “оживляют” главную страницу и позволяют рассказать больше о себе;
- обязательно подумайте о СТА (call-to-action), дизайн должен плавно подводить посетителя к совершению целевого действия. В случае с ecommerce — к оформлению заказа;
- мобильный сегмент интернета постоянно растет, поэтому дизайн должен учитывать, что значительная часть посетителей будет заходить сюда со смартфонов. Дизайн изначально разрабатывается под разные устройства;
- нужен диалог с посетителем. После входа на сайт у человека должно возникнуть ощущение, что вы обращаетесь к нему лично, знаете о том, что ему нужно и готовы предложить это. Отходите от излишней сухости и официоза;
- уделяйте внимание визуальной составляющей.
На сайте awwwards.com регулярно отмечают лучшие по различным критериям сайты. Есть подобный ТОП и для ecommerce сайтов. Жюри оценивает:
- дизайн в целом;
- юзабилити;
- уровень креатива;
- насколько качественный контент публикуется.
По итогам оценки выдаются различные оценки, например, Honorable Mention — оценка жюри и авторитетных пользователей ресурса не опускалась ниже 6,5, Site of the Day — выдается интернет-ресурсам с максимальными оценками за день. Лучшие из лучших в итоге борются за звание сайта года.
Этот ТОП стоит изучить подробнее, можно взять на вооружение часть приемов, использованных в оформлении отмеченных жюри сайтов.
Carineroitfeld.com
Голландский проект, сайт посвящен духам, созданным Карин Ройтфельд. В 2019 г. вышла новая коллекция ароматов под названием 7 Lovers — именно эту надпись видим на главной странице.
В оформлении используются динамические элементы. Выбрана черно-белая цветовая гамма, только флаконы духов показаны в цвете. Текстового описания минимум — краткая характеристика каждого флакона и кнопка “Add to cart”.
Getwelly.com
Проект основан в Миннеаполисе (США), в 2017 г. Эрик Райан и Даг Стакенборг объединили усилия и предложили всем желающим самостоятельно подобрать состав личной аптечки первой помощи. Туда можно включить повязки, простейшие инструменты.
В оформлении используются динамические элементы, сами аптечки яркие, привлекают внимание, то же касается самих повязок. Есть конструктор аптечек. Отлично проработана версия для мобильных устройств.
Google Stadia
Корпорация Google в дополнительном представлении не нуждается. Жюри awwwards.com выделило страницу в их магазине, посвященную новому проекту в сфере облачного гейминга.
Выделим четкую подачу информации — никакой воды, только конкретика. Даже человек, ранее не слышавший об облачном гейминге, за 20-30 секунд поймет концепцию Google Stadia. К такой информативности следует стремиться. Есть и динамические элементы — все красочно, понятно, эффектно смотрится.
Google Pixel 3a
Еще один продукт от американской корпорации Google. Страница в магазине посвящена запуску новой модели смартфона.
Отметим информативность, использование анимации на странице. Интересно реализован скроллинг — сочетается вертикальный и горизонтальный скроллинг, выглядит эффектно. Отлично проработана мобильная версия.
Adidas Futurecraft
Немецкий концерн, занимающийся производством спортивной одежды, обуви и инвентаря, обратил внимание на экологические проблемы. Запущена серия, полностью изготовленная из перерабатываемых на 100% материалов. Этот интернет-ресурс посвящен этой линейке в продукции Adidas.
Из интересных решений в оформлении сайта выделим: интерактивность, “бесконечный скролл”, 3D — показывается трехмерная модель обуви. Упор сделан на визуальную составляющую, текста минимум — только основная информация по новой линейке.
Closer.game
Проект основан американской дизайнерской студией Lateral. Сайт описывает новую карточную игру и через него же можно купить соответствующие карты. Игра рассчитана на несколько человек — это не соревнование, а просто способ приятно провести время с друзьями и близкими.
В оформлении привлекают горизонтальный и вертикальный скролл, интерактивность — происходящее на сайте зависит от действий посетителя. Отметим узнаваемый дизайн и удачно подобранную цветовую схему. С информативностью проблем нет.
Natureelixir.com
Еще одна американская компания, предлагает средства для ухода за поврежденными волосами. Основатель, Морис, занимает пост СЕО и компания Natural elixir стала делом его жизни.
При оформлении дизайна исходили из того, что визуальная составляющая имеет решающее значение. Использованы мягкие цвета, полутона, резкие переходы отсутствуют. Плавно изменяющийся фон на главной странице. Разработчики добавили приятную мелодию — она автоматически играет при входе на сайт.
Thisissleep.co.uk
Сайт создан британской компанией Loaf, принадлежит бренд Чарли Маршаллу. На сайте предлагают ответить на ряд вопросов о своем сне и получить рекомендации по его улучшению. Здесь же продают подушки, одеяла, матрасы и прочие товары для здорового сна.
При оформлении не обошлись без динамики. Отметим удачно подобранную цветовую схему, упор сделан на сон, не используются резкие цвета, скролл плавный, все в оформлении настраивает на спокойный лад.
Jorik.askphill.com
Сайт создан Ask Phill — голландской студией, специализирующейся на создании интернет-площадок для новых европейских брендов. Этот ресурс создавался для нового бренда голландского музыканта и актера Йорика Шолтена (известен под псевдонимом Lil’ Kleine). На сайте продают одежду с оригинальными принтами.
Веб-ресурс интерактивен, используется оригинальный пиксельный шрифт. Интересно организовано описание товаров — при наведении курсора текст проявляется из бессмысленного набора символов.
Wonhundred.com
Won Hundred — датская компания, работает в сфере моды с 2004 г. Сайт создан для продаж мужской и женской одежды.
В первую очередь сайт — это интернет-магазин, отсюда максимальная информативность и четкая, лаконичная подача информации. Под каждой позицией дается ее описание, при наведении курсора текст исчезает и появляется информация по доступным размерам — очень удобно, экономит время. В дизайне помимо информативности отметим четкую структурированность меню.
Hinderer-wolff.fr
Интернет-ресурс создавался силами парижского агентства Adelios. Сайт посвящен новому бренду эльзасских вин, он одновременно выполняет и роль презентации, и роль торговой площадки. Здесь можно заказать 4 типа вин.
Великолепно проработана визуальная составляющая. Высокодетализированный 3D фон, при перемещении между разделами сайта он полностью меняется. Жюри awwwards.com также отметило техническую составляющую и проработанный дизайн мобильной версии.
Getobachan.com
Через этот японский интернет-магазин продаются привычные в быту предметы, созданные в японском стиле. Запущен в 2017 г.
Создатели обещают буквально “принести Дзен в каждый дом” и в этом же стиле выполнено оформление сайта. Нет резких цветовых переходов и кричащих цветов, скролл очень плавный, лаконичное (но исчерпывающее) описание товаров. Дизайн сразу задает нужный настрой.
Edition.jordansowers.com
Американский сайт, посвящен творчеству Джордана Соуэрса. Интернет-ресурс выполняет роль интернет-магазина, через него можно заказать понравившуюся картину и познакомиться поближе с творчеством американского художника.
Дизайн минималистичный, на сайте только нужная информация. По каждой позиции есть изображение картины в высоком разрешении, ее характеристики. Отметим плавную анимацию, скроллинг.
Store.google.com
Google Store — магазин, принадлежащий всемирно известной корпорации Google. В нем продаются товары либо произведенные самой Google, либо в кооперации к ней. Жюри awwwards.com включило в перечень лучших с точки зрения ecommerce дизайна обновленную версию этого магазина.
Высоко оценили улучшенное юзабилити, подачу информации о продукте в целом. Сайт не выглядит загроможденным лишними элементами.
66nord.com
Французский проект, работает с 2003 г. Команда опытных специалистов организовывает экспедиции на крайний Север. Через сайт можно заказать такую поездку и ознакомиться с уже организованными турами.
Удачное решение в оформлении — использование крупных изображений, связанных с экспедициями. Также в дизайне отметим анимированные элементы, взаимодействие с пользователем и информативность.
My360mirror.com
Сайт создан болгарским дизайнером Стеллой Петковой для американской Synergy Products. Веб-ресурс создан для демонстрации новых технологий в области оборудования для ванных комнат. Здесь же можно заказать новые решения.
В глаза бросается обилие анимации, демонстрирующей устройство новых механизмов. Неплохо реализован скролл. Сторителлинг на высоте, по сути сайт — одностраничник, но вся нужная информация о продукте есть.
Whitetailgin.com
Английский проект, сайт — принадлежит шотландской компании, занимающейся изготовлением алкогольных напитков. Базируется она на острове Малл, его символов является белохвостый орел, отсюда и название.
Жюри отдельно отметило то, что сайт сделан на WordPress. Все элементы выдержаны в одном стиле, чужеродных элементов нет. Анимации немного, но сторителлинг от этого не страдает, использование подходящих изображений на заднем плане настраивает посетителя на нужный лад.
Seaharvest.net.au
Sea Harvest — семейный австралийский бизнес, сайт принадлежит этой компании. Это классический интернет-магазин, через него продают морепродукты по выгодным ценам.
Сайт создан на WordPress, при создании выбран ретро стиль. Веб-ресурс внешне напоминает выпуск старой газеты, смотрится стильно и привлекает внимание.
Studio-job.com
Голландский проект, Studio Job — коллектив дизайнеров, называющих себя пионерами современного прикладного искусства. В связке работают дизайнеры, специалисты в области искусства и современных технологий. Сайт — своего рода портфолио, через него можно связаться с командой и заказать их услуги.
Из оригинальных дизайнерских решений выделим красочность, использование оригинальных шрифтов, удобную навигацию. За креативность жюри Awwwards поставило максимальный балл.
Maradji.com
Сайт создан для продвижения французского бренда, занимающегося дизайном и созданием женской одежды, сумочек и прочих аксессуаров. Здесь же есть раздел с магазином, через него эту продукцию можно купить.
Неплохо реализованы микровзаимодействия посетителя с элементами сайта, отметим фотографии высокого качества и цветовое оформление веб-ресурса. Анимации мало, но на качестве это не сказывается.
Hopdeco.ca
Hop Deco — канадская дизайнерская студия, занимаются в основном дизайном интерьера. Через сайт можно познакомиться с дизайнерами и их работами поближе, а после этого — заказать услуги подбора дизайна комнаты.
Отметим отлично организованную архитектуру, контента масса, но он понятно и логично структурирован, пользователь не заблудится в подменю. Много анимации, масса качественных фото и ярких примеров дизайна помещений.
Kopke1638.com
Сайт создан для самого старого винного дома Португалии, одного из мировых лидеров в производстве портвейна. Веб-ресурс — не только интернет магазин, но и настоящий путеводитель по истории компании и ее продукции.
Отметим обилие уместной анимации, приятное звуковое сопровождение, интерактивность. Сторителлинг здесь на высшем уровне.
Seedlipdrinks.com
Сайт создан для компании из Великобритании, специализирующейся на создании безалкогольных напитков. Seedlip говорит, что создает напитки для тех кто “хочет пить, но не пьет алкоголь”. Частично используются рецепты из труда 1651 г. “Искусство дистилляции”. Есть здесь и раздел с интернет-магазином.
Выделим минималистичный стиль, качественные анимации и видеоролики. На высоком уровне реализована навигация.
Bang-olufsen.com
Сайт создан для датской компании, занимающейся производством видео-, аудиосистем премиум класса. В Awwwards выделили страницу, созданную для новой линейки “бронзовых” устройств.
Сохранился узнаваемый стиль, при скроллинге страницы автоматически меняется размер изображений. Цветовая гамма соответствует “бронзовому” направлению.
Femmeandfierce.nl
Это голландский интернет-магазин, создан силами дизайн-студии Wonderland. Все стандартно — товары разделены на категории, есть корзина, пользователь выбирает одежду, обувь, оплачивает заказ и ждет посылку.
Удачно выбрана цветовая гамма, есть микровзаимодействия с пользователем, анимация, позволяющая больше узнать о товаре без дополнительных кликов. Удобно реализована корзина.
Wonderlandams.com
Wonderland — голландская дизайн-студия, сайт создан ее силами для рекламы и продвижения своих услуг. Занимаются созданием сайтов и обещают индивидуальный подход к клиентам.
В дизайне сайта отдельно выделим использование анимации, ее много — есть анимированный фон, презентация работ дизайн-студии также не статична. Удачно подобраны цвета и общий стиль.
Alafut.qc.ca
Сайт принадлежит канадской компании, занимающейся пивоварением, создавался агентством Stereo. Это крафтовое пиво, повсеместно не продается, через сайт можно его заказать и больше узнать о продукте. Здесь же можно ознакомиться с меню ресторанов, в которых подается это пиво.
Эксперты awwwards.com высоко оценили юзабилити и дизайн в целом. Есть анимация, красочные фото на заднем плане, горизонтальный и вертикальный скроллинг. Отметим и информативность.
ETQ-Amsterdam.com
Еще один голландский проект, сайт посвящен новой женской и мужской обуви от известного бренда ETQ. Веб-ресурс выполняет и функцию интернет-магазина, можно заказать понравившуюся пару обуви.
В первую очередь дизайн выделяется простотой и спокойной цветовой гаммой. Анимации мало, но сайт все равно смотрится современно.
Swallowtailtea.com
Бренд Swallowtailtea разработан американской компанией Red Rooster Coffee Roaster в ответ на повышенный спрос на качественный чай со стороны кафе и ресторанов. Сайт посвящен этой новинке.
Дизайнеры сделали выбор в пользу минимализма. Здесь нет взаимодействий с пользователем, анимации, но сайт не выглядит устаревшим. Информация по сортам чая хорошо структурирована, даже новичок не запутается.
Arche68.com
Сайт принадлежит французской компании, занимающейся производством обуви, одежды, женских сумочек и аксессуаров. Бренд основан в 1968 г., сайт запущен к 50-летнему юбилею. На сайте можно заказать понравившуюся вещь, обсудить ее кастомизацию.
Дизайн необычный, отметим необычную навигацию в главном меню и обилие анимации. Выглядит стильно и гарантированно запоминается.
Charles-simon.com
Через этот сайт продаются чемоданы и сумки ручной работы, изготовленные Чарльзом Симоном. Дизайн разрабатывала студия Phoenix.
Чарльз Симон изготавливает простые, но стильные вещи, тот же принцип дизайнеры исповедовали и при создании интернет-ресурса. Из удачных решений отметим “вертикальное меню”, анимацию и подходящую палитру цветов.
Cowboy.com
Американский интернет-магазин, посвящен электровелосипедам. Это и своего рода презентация новинок, и классическая торговая площадка, через нее можно заказать подходящий велосипед.
Сайт современный и высокотехнологичный. В дизайне использована анимация, 3D элементы, качественные фото на заднем плане, яркий цвет шрифта и крупные надписи.
Mowellens.com
Канадский сайт, существует с 2016 г., через него продаются различные препараты на основе каннабиса. Это не лекарства, а скорее средства для нормализации эмоционального фона и снятия стресса. Ограничений по поставкам в разные страны мира нет.
В дизайне выделим нестандартную навигацию, плавную анимацию, горизонтальный скролл. Удачно подобрана цветовая гамма — спокойные цвета задают нужный настрой.
Keus-store.com
Этот французский интернет-магазин посвящен продажам рюкзаков. Сайт новый, работать начал в 2018 г.
Здесь в глаза бросается хорошо реализованный горизонтальный скролл и в целом удобная навигация по сайту. Есть анимированные элементы, подача информации организована хорошо, все важное находится на виду. Сторителлинг на высоте.
Thecoolclub.co
The cool club — голландский интернет-магазин, являющийся по сути компанией единомышленников, увлеченных созданием карточных игр. Помимо необычных колод здесь можно заказать постеры и прочую печатную продукцию
Дизайн создавался с тем, чтобы подчеркнуть уровень креатива команды. Используется анимация, есть звуковой фон в некоторых разделах сайта. Сознательно выбран не слишком серьезный стиль оформления.
Jacquemus.com
Это официальный сайт одноименного французского бренда. Сочетает в себе функции обычного интернет-магазина и путеводителя в мире моды.
Выделим информативные фото, оформление сайта в светлых тонах, удобная навигация. Есть видеовставки.
Gettyendlessstories.com
Бразильский сайт, посвящен “бою столетия” между Мохаммедом Али и Джо Фрейзером. Здесь ничего не продают, сайт скорее информационного характера, создан с помощью фото с Getty Images.
На сайте много анимации, видео- и фотоматериалов, взаимодействий с пользователем, есть аудиосопровождение истории. Также интернет-ресурс отлично оптимизирован под просмотр на мобильных устройствах.
Myfood.eu
Французский проект, посвящен выращиванию овощей в домашних условиях. Предлагаются различные конструкции теплиц для загородных домов, городских условий. В общих чертах описывается технология, в магазине можно купить готовые к сборке и установке теплицы.
В оформлении сайта выделим обилие фотоматериалов, видео, информативные фото теплиц. Есть анимация, навигация по сайту проста и удобна.
Notanotherbill.com
Это британский интернет-магазин, в нем продаются подарки на любой вкус. Есть подарочные наборы, украшения, предметы быта и прочие типы подарков.
Так как это интернет-магазин, то основное внимание уделили классификации товаров и навигации. Отметим удобство ориентирования в магазине, товары разделены по категориям, ценам, возрасту целевой аудитории. Очень много качественных фото.
Ceremonycoffee.com
Американский сайт, создан дизайн студией Drexler. Компания Ceremony Coffee основана в 2002 г. и занимается только кофе, предлагая классические и экзотические рецепты. Есть на сайте и обычный интернет-магазин, через него можно заказать различные варианты любимого напитка.
В оформлении предпочтение отдали минималистичному дизайну. Есть анимация, интерактивные элементы, а наибольший балл жюри awwwards.com поставили за адаптацию сайта под мобильные устройства.
Nomos-glashuette.com
Nomos Glashütte — немецкий бренд, компания занимается производством механических часов. В этом году исполняется 20 лет с даты регистрации домена. Через сайт можно познакомиться с компанией поближе и ознакомиться с моделями часов.
Сайт технологичный, выглядит современно хотя и выполнен в минималистичном дизайне. При оформлении обошлись без обилия анимации и видео. Отметим удобную навигацию и корректно подобранные цвета.
Contiducco.it
Итальянский проект, сайт принадлежит Conti Ducco — одной из лучших виноделен Франчакорты. Здесь есть интернет-магазин с каталогом вин, большое внимание уделяется сторителлингу, можно больше узнать о винодельне и ее продукции.
В дизайне отметим мощный сторителлинг с обилием фото, плавная анимация, горизонтальный скролл вместо привычного вертикального. Удачно подобраны шрифты.
Franshalsmuseam.com
Сайт сделан по заказу голландского музея имени Франса Халса. Сайт подробнее рассказывает о самом музее, есть календарь запланированных на ближайшее будущее мероприятий, здесь же можно купить билеты онлайн.
Отметим контрастные, насыщенные цвета, бросающийся в глаза шрифт. При оформлении сайта использовалась простая анимация, масса фотоматериалов. Информация разделена по нескольким пунктам меню, ориентироваться на сайте удобно.
P448shoes.com
P448 — итальянский бренд, компания занимается дизайном и производством мужской и женской обуви. Через одноименный сайт продается их продукция.
На сайте используется параллакс эффект, анимации, много достаточно информативных фото. Товары разделены на категории, проблем с ориентированием и навигацией не возникает.
Huru.rocks
Один из немногих украинских проектов, попавших в ТОП по версии Awwwards. Через сайт продают удобные и функциональные рюкзаки.
Дизайн достаточно прост, из примененных приемов отметим использование анимации, обилия информативных фото (хотя пока что продаются только 2 модели рюкзаков), есть на сайте и видео.
Crypton.trading
Американский сайт, через него разработчики предлагают присоединиться к совершенствованию торгового бота, работающего с криптовалютами. Он прогнозирует поведение криптовалют на основе уже совершенных транзакций и может обучаться самостоятельно.
Дизайн очень простой, но сайт выглядит стильно. Все завязано на скроллинге, при перемещении по странице вниз постепенно происходит обновление картинки на фоне и меняется текст.
Everyday-needs.com
Это новозеландский интернет-магазин, в нем продают предметы, которые каждый из нас привык использовать в быту. Это кофемолки, тканые подставки под посуду, сервировочные предметы, чашки, бокалы и прочее. Некоторые из них не выделяются на фоне других магазинов, другие — эксклюзивные вещи.
Жюри awwwards.com выделило в первую очередь подход к подаче информации, цветовую гамму, информативность сайта. Наибольшую оценку поставили именно за дизайн.
Webflow.com
Webflow — американская платформа для построения собственного коммерческого сайта. Как обещает команда Webflow — не понадобится писать ни единой строчки кода для создания полноценного сайта.
В дизайне выделим оригинальный скроллинг, интерактивные элементы, отличные шрифты. Достигается главное — посетитель сразу понимает, с чем будет иметь дело и сохраняется узнаваемый дизайн.
Mrleight.com
Еще один американский проект, братья Гарретт и Ларри Лейты создали бренд и стали заниматься выпуском солнцезащитных и обычных очков. Сайт разработан для продвижения новой линейки очков женских и мужских очков. Здесь же есть список магазинов, где они есть в продаже.
Дизайн довольно красочный, основной упор сделан на фото, используется анимация и интерактивные элементы.
Shopskin.co.uk
Английский проект, через него продвигаются различные средства по уходу за кожей. Это средства по уходу, борьбы со старением, излишней сухостью и прочими косметологическими проблемами. Через магазин можно заказать любое средство с доставкой.
Отметим удобную навигацию и хорошо продуманную структуру сайта, все товары разнесены по соответствующим категориям, затруднений при выборе не возникает. Удачным оказался выбор крупных качественных изображений и общая цветовая гамма.
Вывод
Дизайн сайта в электронной коммерции не менее важен чем качество продукта, который вы продаете. Если не сумеете сделать сайт узнаваемым, завладеть вниманием клиента с первых же секунд, продажи будут ниже.
Что касается текущего перечня сайтов, то копировать их дизайн на 100% не нужно. Они показывают, что популярно в дизайне ecommerce сайтов, используйте это при оформлении собственного интернет-ресурса.
