Сделать дизайн интернет магазина

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

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

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

SALT

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

Nikoskoulis

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

Colliripani

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

American Eagle

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

Paolita

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

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

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

Charlotte Stone

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

Death wish Coffee

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

Stefanel

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

Old Faithful Shop

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

Solid & Striped

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

Allbirds

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

Главная страница в дизайне интернет-магазина.

О чем эта статья?

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

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

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

В этой первой статье цикла мы расскажем какие основные правила создания главной страницы интернет-магазина. От дизайна зависит многое и мы постараемся направить вас в нужное русло.

В этой статье расскажем о следующих темах:

Дизайн интернет-магазина.

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

• Что вы продаете? Если вы продаете ювелирные изделия, стоит ли делать дизайн в “детском стиле”?
• Ориентируйтесь на целевую аудиторию. Если это молодежь, то стоит сделать сайт поярче. А если целевая аудитория исключительно мужчины, розовые тона явно не подойдут.
• Посмотрите интернет-магазины, которые занимаются продажами схожего товара, а также на сайты ваших поставщиков (как их найти?). Что вы находите общего среди них?
• Вы думаете, что сможете нарисовать дизайн самостоятельно не имея профильного образования? Бросьте эти потуги. Научитесь делегировать.
• Найдите компромисс между дизайном и юзабилити. Ведь главная цель – продать. Сделайте путь покупателя к этой цели максимально простым и ясным, не перегружая его информацией.

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

Главное: никогда не стоит дожидаться сразу готового дизайна, крайне редко попадаются профессионалы, которые с нуля нарисуют отличный дизайн, который сразу будет принят заказчиком. Сначала брифлист и ТЗ, потом прототипирование (примеры прототипов) и только потом пошаговая разработка дизайна с промежуточными согласованиями и контролем со всех сторон. Иначе никак. Проверено.

Элементы главной страницы.

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

Шапка сайта.

В шапке сайта следует размещать такие элементы, как:

• Строго слева логотип сайта, нажимая на который покупатель всегда попадет на главную страницу;
• Строго справа корзина интернет-магазина (подробней о ней). Пользователи привыкли, что она именно там;
• Контактные данные (телефон, электронная почта, другие виды связи);
• Горизонтальное меню с условиями оплаты, доставки и другими общими вопросами;
• Строка поиска.
• Краткое описание интернет-магазина, чтобы пользователи смогли понять что у вас продается;

Левый сайдбар (левая часть сайта)

Данное место зарезервировано для:

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

Правый сайдбар (правая часть сайта).

Здесь нет четких правил размещения. Обычно тут размещают акции, новые товары или любую другую полезную информацию. Приведем пример из shoppinglive.ru:

В правой части сайта можно разместить:

• Акции и новости магазина;
• Новые товары;
• Любую другую полезную информацию, которая не будет сильно отвлекать от покупок.

Центральная часть главной страницы.

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

• Наиболее популярными товарами;
• Товарами со скидкой;
• Важной текстовой информацией. Хороший пример: “Товар дня: Соковыжималка. 1000 рублей вместо 5000, осталось 3 штуки”. Плохой пример: “Добро пожаловать!”;
• Всем тем, что по вашему мнению сможет заинтересовать пользователя не закрыть страницу сразу, а остаться. Самое главное – в течение 3-х секунд пользователь должен понять что продают там куда он зашел. Казалось бы очевидная вещь, но очень много сайтов, где только через секунд 10 приходит понимание о том что продается.

Нижняя часть сайта.

На примере нижняя часть сайта BabrBabr.ru:

В этой части размещаем:

• Контакты (кстати, как выбрать контактный телефон для интернет-магазина?)
• Ссылки на основные страницы: “О магазине”, “Акции”, “Контакты”, “Вакансии” и так далее;
• Ссылка на сайт разработчика (если оговорено);
• Прочая информация, не перегружающая нижнюю часть сайта.

В итоге.

Главная страница должна иметь примерно следующую компоновку (подробно об этом изображении):

Еще раз общие советы при создании главной страницы интернет-магазина:

• Не перегружайте её информацией и изображениями;
• Пользователь должен сразу понять что вы продаете;
• 3-4 свежих анонса новостей будет достаточно для того, чтобы покупатели поняли, что магазин существует;
• Правильно оформите тег TITLE, так как поисковые машины очень сильно ориентируются на него;
• Следуйте правилам создания интернет-магазинов, не “креативьте”, идя на поводу у дизайнеров;
• Обратитесь к нам и мы поможем вам поставить правильно задачу разработки главной страницы.

Что дальше?

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

Подпишитесь на обновления, чтобы следовать по пути бесплатного создания интернет-магазина вместе с нами.