Пн, 9/01/17 – 17:44 | One Comment

Окинув взглядом главную страницу, средне-статистический посетитель сайта доверится впечатлению от дизайна, интерфейса, стиля. Оформленное «на коленке» вызовет рефлекторную реакцию закрытия вкладки – такого он …

Читать статью »
CSS верстка

О красивом оформлении страниц с css3 и html5

Дизайн

О создании веб-дизайна с примерами сайтов

Wordpress

Самое современное для сайта на Wordpress

Шаблоны сайтов

Обзоры шаблонов: лучшие темы для сайта

Свой сайт

Как создать, оформить, сделать сайт лучше

Главная » Интернет магазины

ТОП 10 инновационных дизайнов сайтов электронной коммерции

19 апреля 2017 Нет комментариев

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

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

1. A-dam Underwear

Лучшие сайты электронной коммерции на 2017 год

Один из главных трендов e-Commerce дизайна 2017 – сайт электронной коммерции больше не выглядит обычным онлайн-магазином. Дизайнеры стремятся отойти от типичной шаблонности в оформлении, а E-коммерческий сайт начинаете напоминать портфолио агентства. A-dam показывает пример.

Пример успешного сайта электронной коммерции

Продавец нижнего белья, A-dam не уклоняется от смущающих моментов своего бизнеса. Наоборот, с юмором привлекает внимание к продукции заголовком «got balls?» и фиговым листом в логотипе.

В обычном дизайне привередливый потребитель посмотрит на это брезгливо, но здесь креатив составляет значительную часть индивидуальности eCommerce бренда и делает сайт продавца ближе к целевому покупателю. Успех объясним: тут понимают потребителя для которого создана продукция.

Тренды и новинки в веб-дизайне сайтов электронной коммерции на примере adamunderwear.com

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

При всей необычности дизайнерских решений, A-dam поддерживает ясность в навигации и структуре, необходимую продающему товар сайту (уже привычное выскальзывающее меню, корзина в правом верхнем углу и т.д.). Анимированные микроитерации с блеском подчеркивают крутость сайта. Визуальное креатив-великолепие приправлено UI-плюшками: активными hotspot точками с круглыми плашками, всплывающими миниатюрами, сме­ной кур­со­ра над ак­тив­ной об­ла­стью.

2. Shun Cutlery

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

Shun Cutlery подает пример, как переложить старую e-Commerce модель на новый лад. Зачем менять то, что работает. Проще представить в новом свете и выделиться среди конкурентов, сохраняя привычный функционал.

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

3. Paul Valentine

Дизайнеры Paul Valentine пошли на оправданный риск. Например с Hero-фотографией во весь первый экран, без каких-либо текстов и навигации… полагаясь на последующий скролл (допущение логичное для 2017-го).

пример смелых дизайн решений в сфере электронной коммерции

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

Пример красивого дизайна сайта электронной торговли

В конце концов, Paul Valentine целенаправленно усиливает визуальное восприятие продукта — разумный выбор для первоклассного бренда. Внимание акцентировано на продукции, а не на элементах дизайна.

4. The Cool Club..

Пример креативного дизайна интернет-магазина

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

Пример красивого дизайна сайта электронной коммерции : карточка товара

Посетитель, переходя с главной к каталогу и карточке товара и видя знакомое e-Commerce окружение, может легко совершать покупки. Формат продуктовой страницы достаточно стандартный:изображение товара, описания, отзывы и СТА-кнопка.

5. Bouguessa

Пример красивого дизайна сайта электронного магазина

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

Идея эффектной сортировки товаров взята из интерфейса игры со словами «mad lib». Смысл 2-х выпадающих списков раскрывается при затемнении окружающего контекста предложения.

6. Someone

Интернет магазин обуви и туристических принадлежностей Someone, пожалуй наиболее «заурядный» в этой eCommerce-подборке, но и он в достаточной степени узнаваем. На вид, главная страница не так уж оригинальна. Но сайт выделяется благодаря деталям – например, ландшафтные фото вместо изображений товара (Someone – туристический бренд), фирменный нейминг, вроде «Be Someone».

Внутренняя страница каталога оформлена в типичном формате электронного магазина. Уникальности добавляет hover-эффект с осветлением фото и появлением в рамке наименования / цены.

7. Fotonaut

Запустить интернет-магазин под новый, никому не известный продукт не так-то просто. Преодолеть трудности помогает искусно выполненный дизайн, который выводит продающий сайт на новый уровень.

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

Читайте также:  Подборка черно-белых сайтов и интернет магазинов

Выигрышная дизайн-маркетинговая стратегия помогает представить товар продвинутым и совершенным.

Дизайнер оформляет карточку товара в тех же тонах (акцентный желтый), но с минималистским шиком. При этом страница принимает особый футуристический вид.

8. Glitty

Оригинальный дизайн помогает eCommerce ресурсу продавать товар из коллекции эксклюзивных Macbook, iPhone, iPad с отделкой под дерево. Его задача – создать настроение под целевую аудиторию (современная молодежь). Довольно нестандартно для ресурса онлайн-торговли расположена корзина (внизу вертикальной панели навигации). Учтен свободолюбивый дух потребителя: В лендинг экране эмоциональное Hero-видео с автозапуском – все по хип-хопу!

Визуал на первом месте. На странице товара с Hero-изображениями, все пропитано идеей: как естественно и хорошо выглядит продукт.

9. Horological Smartwatch

Пример красивого дизайна сайта электронной торговли - сайт smartwatch.frederiqueconstant.com

Утонченный дизайн со стильной анимацией. При прокрутке меню эффектно сжимается. Уникальная опция – счетчик прокрутки, подсказывающий сколько скроллить осталось.

Примеры дизайн инноваций в сфере e-Commerce, продуктовая страница smart watch frederiqueconstant.com

Микроитераций и визуального креатива на внутренних страницах не меньше, чем на главной. В каждом экране расположена кнопка призыва. Полезное новаторство в оформлении продуктовой страницы: вертикально расположенный список основных моментов (если вы упустили что-то на главной странице).

10. Zulu & Zephyr

Топ лучших сайтов электронной коммерции 2017

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

Обычный трех-колоночный каталог. Полезная опция: по наведению курсора можно выбирать размер и добавлять в корзину. Модели изображены в пол-лица, чтобы не отвлекать внимание. В то же время сами изображения более вытянуты (в сравнении с др. интернет-магазинами) с целью лучше показать, как смотрится товар на модели.

Читайте также:  20 лучших примеров дизайна главной страницы сайта