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

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

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

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

Дизайн

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

Wordpress

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

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

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

Свой сайт

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

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

30 стильных интернет-магазинов с уникальной структурой

26 февраля 2017 Нет комментариев

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

Эти 30 примеров современных продающих онлайн – магазинов, собраны со всего веба. Рассмотрим, что делает их лейауты и структуры эффективными для Е-коммерческого дизайна.

SALT

SALT – интернет салон оптики c блочной структурой дизайна. Главная страница интригует hover-эффектом смены картинки и появлением ограниченного выбора (коллекции & новинки).

Nikoskoulis

Визуальная сбалансированность при асимметричной разметке поддерживается крупной черной CTA-кнопкой. Это пример продуманной маркетинговой стратегии. Грамотно использована эстетика нестандартного дизайна со стильным утонченным интерфейсом.

Colliripani

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

Креативный дизайн итальянского интернет магазина Colliripani

American Eagle

Модный американский онлайн-магазин с уникальной структурой утонченного дизайна. На главной странице – сочетание асимметрии и Z-паттерна. Не выровненные блоки с заголовками в общем пространстве и крупные призрачные кнопки. Эти атрибуты современного минималистичного стиля становятся все популярнее в E-commerce.

Современный стиль дизайна интернет-магазина: утонченный минимализм

Paolita

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

Стильный современный дизайн интернет магазина купальников Paolita

JACK & JONES

На субдомене интернет-магазин представил джинсовый стиль Деним в «молодёжной манере». Уникальность дизайна с не шаблонным макетом – в нестандартном согласовании элементов.

BXXLGHT

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

Torie Howard

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

Rudy’s

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

So Worth Living

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

Happiness Abscissa

Минимализм и фантастическая структура главной страницы. Используется эффект параллакса с фотографиями товара и акварельными декорациями.

ERDEM

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

  • Придавать профессиональный вид модным фасонам брендов
  • Улучшает опыт пользования сайтом в любой его части

People

People – обувной онлайн-магазин с бесшовной структурой. Секции главной страницы заполнены фоновыми изображениями – имиджевыми фото крупным планом. В каталогах и карточках, товар представлен без рамок изображения. Этот паттерн повторяется 4 раза для разных коллекций и пользователь сталкивается с уже знакомым интерфейсом.

Bill Bass

Bill Bass предлагает коллекции повседневной одежды в спокойном стиле. Зеленый – цвет, создающий подходящее настроение. Главная страница целиком отведена под ознакомление с ассортиментом. Разметка нестандартна, но с некоторым выравниванием – для удобства пользования ресурсом со столь интересной структурой. Своеобразный компромисс индивидуальности и удобства.

Eastworks Leather Company

У продающего кожаные изделия онлайн-магазина простой вид. Макет сделан по модульной сетке. За приятный дизайн под ретро с меню «лентой», E-сommerce сайт не раз отмечался наградами. С первого экрана, он привлекает внимание GIF-изображением вращающегося бумажника.

Ada Blackjack

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

Красивый минимализм интернет магазина: отличный дизайн незаметен

Bureau Tonic

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

Интернет-магазин с уникальным дизайном - все в первом экране

BOUGUESSA

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

современный черно-белый дизайн интернет-магазина

Wooden Dot

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

Во-вторых, GIF-изображения в утонченном черно-белом дизайне – это впечатляет. В статике скриншота вы не сможете передать настроение или показать, как пользоваться мебелью.

Stuff

Утонченность и супер-минимлизм. Ресурс обращает на себя внимание параграфом слева внизу – напоминает колонку текста из журнала или газеты.

Oi Polloi

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

Marc Jacobs

Интернет-магазин демонстрирует товар во всех ракурсах. Черно-белый стиль дизайна минимально отвлекает внимание посетителя. Заголовки в общем пространстве усиливают эффектность изображений, экономя полезное место на главной странице. Добавляют разнообразия: отсутствие выравнивания, различные формы представления товара (осветленное видео, фотографии – колоритные /черно-белые / с размытием). Похожий оформительский подход и в разделе ABOUT.

Лейаут по типу масонри с изображениями без рамок. Отличная идея для создания имиджа привлекательного e-commerce ресурса. Это важно, когда помимо своего, предлагается товар сторонних онлайн-торговцев. На главной много всего: от розовых пампасов, бурлящего прибоя – до картин космоса. Такой интернет-магазин скучным не назовешь.

Death wish Coffee

Разметка каталогов выполнена под Z-паттерн просмотра веб-страницы.

Stefanel

Е-коммерческий ресурс комбинирует симметрию и асимметрию в дизайне (см. главную и лукбук). Визуальный баланс поддерживается типографикой в общем пространстве с фотографиями товара.

Old Faithful Shop

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

Solid & Striped

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

Интернет-магазин со стильным продающим дизайном

Allbirds

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

Примеры стильного дизайна интернет-магазинов: креативная анимация на allbirds.com