Дизайн интернет-магазина: как сделать его максимально продающим

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

Основные «боли» владельцев интернет-магазинов

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

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

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

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

• Нет уверенности, что ресурс работает со стопроцентной отдачей.

• Посетителей много, но мало кто из них в итоге покупает (слабая конверсия). Целевые действия (покупка, заполнение анкеты с контактными данными) совершаются крайне редко.

• На привлечение клиента идет большой расход средств, а он совершает покупку единожды и больше не возвращается.

• От посетителей часто приходят сообщения о том, что им не удается отыскать на сайте необходимый товар (хотя точно известно, что он есть, и сами сотрудники магазина знают, где он расположен).

• Общение между клиентом и менеджером получается слишком продолжительным.

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

Роль аналитики и маркетинга в выборе дизайна будущего сайта

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

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

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

Одна из популярных моделей интернет-маркетинга — AIDA (Attention — Внимание, Interest — Интерес, Desire — Желание, Action — Действие). Она как бы предписывает порядок действий, которые происходят после того, как человек увидел вашу рекламу, а в случае с сайтом — представленный на нем контент. По сути, AIDA — это бизнес-логика, которая продает ваш товар или услугу буквально в четыре действия.

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

К примеру, открывая страницу с конкретным товаром, клиент шаг за шагом будет двигаться к покупке (кликая «Купить» четыре раза). И тут важно грамотно его к этому подвести, разместить цепляющие тексты, акцентировать на них внимание и т. д. Эту же модель вы можете использовать и на других страницах, где покупок не происходит. Пусть это будет, например, место для отзывов. Там уже есть отзывы предыдущих покупателей, а AIDA подведет человека к тому, чтобы он тоже что-то написал.

При этом не забывайте о вашей главной цели — продажах, получении дохода. Поэтому не допускайте, чтобы пользователь просто так ушел с сайта. Он добрался до кнопки «Оставить отзыв»? Отлично! Обычно она расположена где-то внизу, ближе к подвалу, — вот там и постарайтесь снова зацепить клиента. Перечислите ему еще раз категории товаров. Может, человек что-то брал для себя на заметку, но, пока листал сайт, успел забыть? Он вспомнит, что упустил из виду, и теперь купит.

На практике больше 30 % пользователей оформляют заказ, но покупку так и не совершают. Возможно, человек решил повременить, или отвлекся, или действовал спонтанно, нелогично и поэтому не завершил сделку. AIDA помогает снизить число таких пользователей и довести конверсию сайта до желаемых показателей.

Проектирование как первая ступень разработки дизайна интернет-магазина

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

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

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

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

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

6 главных правил дизайна интернет-магазина

1. Удобство для посетителя.

   Если на сайте все запутанно и сложно, посетитель быстро уйдет, ничего не купив, — в этом можно не сомневаться. В последнее время очень популярен дизайн UX/UI. Он максимально упрощает пользование сайтами и аккуратно продвигает пользователя к выполнению целевого действия (регистрации, заполнению анкеты, покупке). И тут задача дизайнера — ничего не упустить из виду. Все должно быть сделано максимально удобно для людей: простое меню и распределение товара по категориям, яркие кнопки (обозначающие корзину или оформление заявки), нормально работающие ссылки и проч. Передвижение по страницам должно быть логичным и простым, чтобы человек спокойно шаг за шагом пришел к покупке.

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

2. Красота и строгость.

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

3. Фирменный стиль.

   Непременно поработайте над собственным фирменным стилем, то есть айдентикой (имеется в виду логотип, уникальный товарный знак, свой слоган, зарегистрированные шрифты и цвета). Это непременно выделит вас среди громадной массы конкурентов, и именно картинка вашего сайта отложится в голове у пользователей.

4. Профессиональные фотографии.

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

5. Визуализация.

   Никому не интересно читать в магазине громадные тексты (уместные на сайтах новостей или в онлайн-библиотеке). Человек заходит за покупкой, и сложности тут ему не нужны. Поэтому лучший дизайн интернет-магазина — это тот, где меньше текста и больше картинок, иконок.

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

6. Интересные фишки.

   Дизайн интернет-магазина в 2020 году подразумевает использование новых современных фишек, которые отлично работают не только на сайтах или посадочных страницах, но и на торговых площадках в онлайне. Что это за фишки? Картинки с 3D-эффектом, анимированные картинки, оттеночные градиенты, объемные тени, Parallax (спецэффект, дающий иллюзию двух независимых пространств, в которых перемещаются изображения) и многие другие.

Секреты хорошего дизайна

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

1. Золотое сечение.

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

   

2. Правило третей.

   В чем суть этого правила? Просто разбейте любую страницу сайта на три равные части (по высоте и по ширине). Появятся точки пересечения. Запомните, что именно эти места в первую очередь бросаются в глаза любому пользователю. Поэтому здесь и расположите все самое главное, к примеру кнопку «Купить», или объявление о скидках, или корзину — в общем все, что для вас имеет первостепенную важность.

   

Создание дизайна основных страниц сайта интернет-магазина

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

1. Дизайн главной страницы интернет-магазина

   

   Это страница, которая должна стопроцентно привлекать пользователя и давать ему как можно больше информации о сайте. И здесь, разумеется, немаловажен дизайн. Вот несколько советов:

   • Навигация не должна быть сложной. Буквально главное меню, разделы, категории и подкатегории. Распределите товары по категориям, по брендам либо объедините эти метки, но в любом случае придерживайтесь правила трех кликов. То есть на третьем клике мышкой пользователь уже должен видеть перед собой товар, который ищет. Пример: женская одежда (раздел) ® платья (категория) ® длинное красное платье ZARA (товар). Когда ассортиментный перечень очень широк, настроить такой короткий путь довольно трудно. Тут помогут фильтры (по цене, материалу, цвету и проч.). На тему структуры интернет-магазина есть хорошая статья у Университета InSales.

   • Вверху страницы (не задвигайте их вниз) сразу разместите бросающиеся в глаза баннеры с информацией о распродажах, скидках, акциях. Выделите жирно и ярко размеры скидок (конкретные цифры, проценты).

   • Если пока не собираетесь делать широкие распродажи, привлекайте внимание разделом «Хиты продаж», где перечисляйте продукты, пользующие на данный момент наибольшей популярностью. Покажите, что у вас чаще всего покупают, и к вам из любопытства подтянутся новые клиенты.

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

2. Дизайн карточек товара интернет-магазина

   

   Вот несколько важных правил:

   • хорошие качественные фотографии (лучше несколько). Не берите фото на стоках — дайте людям несколько изображений, демонстрирующих товар со всех сторон, задействуйте для съемок, если нужно, профессиональных моделей. Прекрасно, если к фото вы добавите еще и видео;

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

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

   

3. Кнопка призыва к действию (СТА)

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

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

   • Текст, написанный на кнопке. Он должен призывать, но не отпугивать. Проверенные варианты: «Купить», «Добавить в корзину». Хотите покреативить — пожалуйста! Напишите: «Не думай долго, нажимай!», но это если вы хорошо знаете повадки своей целевой аудитории и уверены, что таким обращением никого не спугнете. Хорошо срабатывает предложение зарегистрироваться в обмен на какие-то полезности вроде бесплатных курсов, уроков, персональной подборки подходящих товаров и проч.

   • Удобство. По статистике, именно на данном этапе из воронки отсеивается очень много пользователей. То есть люди заходят, ищут товар, видят то, что им нужно, но заявку не оформляют. Причина чаще всего в неудобстве кнопки. Дизайн кнопки призыва к действию в продающем интернет-магазине не должен быть слишком громоздким (с многошаговой регистрацией, капчей или проверочными картинками, большим числом строк для заполнения). То есть тут важен не только внешний вид кнопки, но и то, что прячется под ней. Думайте в первую очередь об удобстве клиентов. Оговорите с дизайнером число полей, условия регистрации. Например, на «Алиэкспресс» (да и не только там) можно регистрироваться через социальные сети.

4. Дизайн корзины интернет-магазина

   

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

   • лучшее местоположение — справа, вверху страницы. Тут не надо долго думать, это уже проверено и работает;

   • сам значок корзины должен быть достаточно крупным — пусть покупатель заметит ее сразу;

   • цвет тоже лучше сделать ярким, выделяющимся;

   • сразу отображайте для пользователя содержимое его корзины: пусть все время видит, что он собирался купить (чтобы не забыл и не передумал);

   • пусть дизайнер сделает так, чтобы перед клиентом сразу всплывал список товаров, собранных в корзину, как только он наведет на нее мышку. Имеется в виду, чтобы человек даже без клика (не заходя в корзину) видел все свои товары;

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

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

11 вещей, которые сделают дизайн интернет-магазина продающим

1. Пользователь должен понимать, куда попал.

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

   Есть, к примеру, один сайт, торгующий ювелирными изделиями, где громадное всплывающее окно появляется перед каждым посетителем сразу в момент входа.

2. Строка поиска должна быть на виду.

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

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

   

3. Сделайте поиск товара максимально релевантным.

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

   

4. Добавьте реакцию сайта на действия пользователя.

   Посетителю непременно нужно видеть, что сайт реагирует на любые его действия. К примеру, в дизайне любого интернет-магазина, как правило, есть кнопка «Добавить в корзину». Человек должен видеть, что происходит после клика по ней. Хорошо, если клиенту дается время подумать, прежде чем оплачивать товар, то есть положить его в раздел «Избранное» или «Сравнить».

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

   

5. Избегайте использования непонятных слов и терминов.

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

   

6. Предоставьте посетителям возможность оставить отзывы о товаре и посмотреть на другие отзывы.

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

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

   В таком случае комментарии, набравшие больше всего лайков, будут сразу видны.

   

7. Создайте удобный каталог товаров и фильтры.

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

   

8. Обеспечьте понятную процедуру заказа/покупки товара.

   Примите к сведению следующие рекомендации:

   • Не задавайте лишних вопросов.

   • Если собираете информацию, то ее ввод должен быть абсолютно простым, с подсказками и автоматическим заполнением.

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

9. Блок с условиями доставки и возврата товара должен быть на виду.

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

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

   

10. Добавьте форму обратной связи.

    Форма обратной связи обязательно должна быть в дизайне интернет-магазина. Покажите посетителю, что в случае возникновения проблемных ситуаций или вопросов по поводу самого товара ему всегда есть куда обратиться. Разместите на сайте номер телефона, по которому можно связаться с менеджером, хорошо, если он бесплатный (вроде 9-900). Либо установите кнопку заказа обратного звонка.

    Еще один вариант обратной связи — онлайн-чат, через который можно пообщаться с менеджером в оговоренное время (к примеру, с восьми утра до восьми вечера). Страницы с ответами на часто задаваемые пользователями вопросы (FAQ) тоже весьма полезны. Там можно осветить все, в том числе касательно доставки, оплаты, жалоб, возврата (даже если на сайте об этом уже написано — ничего, повтор лишним не будет).

    

11. Не забудьте про факторы доверия к магазину.

    Продемонстрируйте пользователям свою хорошую репутацию, расскажите, чем занимается ваша компания и что она из себя представляет. Сделайте на сайте информационные блоки вроде «О компании», «Наши успехи» и проч. Опубликуйте фото имеющихся у вас официальных документов, а именно регистрационного свидетельства, пользовательского соглашения. Укажите свои адреса (и юридический, и фактический), электронную почту, платежные реквизиты. Неплохо было бы разместить на сайте ссылки на ресурсы вроде Flamp, iRecommend, где можно оставить отзыв о работе вашей компании.

Несколько советов по созданию стильного дизайна интернет-магазина

Лучший дизайн интернет-магазина — тот, что не бросается в глаза. Джо Спарано однажды сказал об этом так: «Хороший дизайн виден сразу. Отличный дизайн незаметен». Ведь самое главное, чтобы посетители сайта выбирали товары и покупали, а не рассматривали дизайн. Разумеется, оформление сайта должно быть приятным для восприятия, настраивать на покупки. И тут получается, что вроде как, с одной стороны, дизайн должен быть незаметен, а с другой — вызывать правильные эмоции. Как же этого добиться?

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

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

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

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

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

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

9 крутых примеров дизайна интернет-магазинов

Ниже приведены примеры готовых дизайнов интернет-магазинов, уже работающих в Сети.

1. SALT

   Это онлайн-магазин по продаже оптики. Структура дизайна — облачная. Тут сразу впечатляет главная страница, где использован hover-эффект смены изображения и перед пользователем всплывает ограниченный выбор, а именно «коллекции» и «новинки».

   

2. Nikoskoulis

   Пример уникального дизайна интернет-магазина. Очень изящный, стильный интерфейс. Разметка ассиметричная, но в целом все смотрится гармонично. Грамотный маркетинговый ход — большая черная кнопка для целевого действия (СТА).

   

3. Colliripani

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

   

   

4. American Eagle

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

   

5. Paolita

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

   

6. JACK & JONES

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

   

7. Rudy’s

   Здесь много анимации, но каких-то сверхъестественных спецэффектов нет. При этом все товары представлены очень достойно. В дизайне этого интернет-магазина используется так называемая квадратность (но без фанатизма), крупные элементы, задействованы hover-эффекты, что в целом делает сайт современным и привлекательным.

8. Happiness Abscissa

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

   

9. BOUGUESSA

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

   

   Итак, резюмируя, можно сказать следующее:

   • Дизайн — это важно, ведь человек буквально за секунду, бросив взгляд, составляет свое мнение о сайте.

   • Чем проще — тем лучше. Постарайтесь дать людям именно то, чего они от вас ждут.

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

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

Автор статьи

Анастасия Гурьева

Руководитель интернет-проектов

Статья опубликована: 31.08.2020

Последние статьи этого автора:

• Google инструменты: шпаргалка для бизнесмена в Сети
• Продвижение услуг в Интернете: лучшие способы и фатальные ошибки
• Какие способы продвижения интернет-магазина самые эффективные

Забрать гарантированный подарок

Полезные
материалы
для руководителей

Скачать 3,2 MB