Дизайн интернет-магазина: основные компоненты, как выполняется разработка и примеры удачного дизайна сайта интернет-магазина
Созданию дизайна интернет-магазина следует уделить не меньшее внимание, чем разработке контента, формированию ассортимента или подбору поставщиков. Он обеспечивает визуальное восприятие, стимулирует рост конверсии, мотивирует и помогает посетителю понять, оставаться ли на сайте. Рассказываем, что такое дизайн интернет-магазина и как выполняется разработка, представляем ТОП-10 удачных примеров оформления.
Что такое дизайн интернет-магазина
Дизайн сайта – это структура и визуальное оформление, состоящее из типографики, цветовой палитры, медиаконтента, картинок и других компонентов. Основная цель – достижение максимального удобства для посетителей. Необходимо, чтобы оттеночное сочетание не было аляповатым или чрезмерно бледным, шрифты являлись легко читаемыми, а кнопки или меню находились на своих местах. Например, пользователи привыкли, что CTA-элементы всегда яркие и отлично просматриваться. Если сделать кнопку серой, то она выглядит нерабочей, сливается на общем фоне и не вызывает желание сделать клик. Что может оттолкнуть пользователей:
- перегруженный и нетипичный интерфейс: корзина слева, а не справа, много всплывающих окон, нагромождение компонентов, не позволяющих сосредоточиться на чем-то одном;
- слишком большие формы обратной связи, речь идет о количестве полей. Если пользователю нужно указать имя, номер телефона, электронный адрес и заполнить еще 2-3 поля, а потом пройти сложную капчу – он не будет этого делать, а просто покинет сайт;
- сложные структура и навигация, например, отсутствие хлебных крошек и перелинковки, нелогичное меню и наличие «тупиковых» страниц, с которых никуда нельзя перейти или вернуться;
- некрасивая типографика: сливающийся цвет текста и фона, неправильно подобранные шрифтовые пары;
- отсутствие мобильной версии или адаптивного дизайна: сайт интернет-магазина не подстраивается под размер экрана пользователя, поэтому выглядит неаккуратно, растягивается и искажается;
- аляповатость, невыразительность и другие проблемы с цветовой палитрой;
- избыточность анимации: она добавляет динамику, но снижает скорость загрузки страниц и мешает сосредоточить внимание как на коммерческих призывах, так и на CTA-элементах.
Так выглядит неудачный дизайн без конкретики
Дизайн традиционно разделяют на UX/UI: первый – пользовательский опыт (как выполняется взаимодействие с интерфейсом), второй – пользовательский интерфейс (оформление кнопок, цвета, шрифты, иконки и прочее). UX и UI дизайн взаимосвязаны, работа над компонентами не завершается и после запуска проекта. Например, с помощью тепловых карт и других инструментов разработчики определяют, что посетители игнорируют определенную кнопку, а потом вносят изменения и тестируют новые варианты.
Почему дизайн интернет-магазина важен
Правильный дизайн сайта интернет-магазина обеспечивает улучшение коммерческих показателей, а также:
- повышает время пребывания на сайте, улучшает глубину просмотра и другие поведенческие факторы, которые поисковики учитывают при ранжировании;
- стимулирует рост конверсии: добавление товаров в корзину, клики по кнопкам, заполнение форм обратного звонка, скачивание файлов;
- предупреждает уход потенциальных клиентов к конкурентам;
- обеспечивает положительный пользовательский опыт и формирование правильного ассоциативного восприятия;
- повышает доверие к бренду: клиенты видят, что компания позаботилась об их удобстве.
Сайт – официальное представительство бизнеса в интернете, поэтому он должен обеспечивать комфорт, простоту выбора и навигации, создание определенной атмосферы и эмоций. Если пользователь, попавший на страницу, не может найти корзину или не понимает, на какую кнопку нажимать, – компания потеряет не только прибыль, но и лояльность.
Основные составляющие дизайна сайта интернет-магазина
Логотип. Графическое изображение, помогающее аудитории идентифицировать бренд и узнать его из сотни других предложений.
Фирменный стиль. Набор компонентов, объединяющих предложения, товары, каналы продаж компании в одно целое. Сюда входят корпоративные оттенки, шрифты, персонаж, графические элементы, характерные для конкретной компании.
Навигация по сайту интернет-магазина. Помогает пользователям ориентироваться на страницах, искать необходимое, возвращаться к понравившимся разделам. Сюда входят меню, подсказки, хлебные крошки, перелинковка, фильтры и теги, прочее. Так, блоки «Вы просматривали» дают пользователю возможность не потерять то, чем он интересовался ранее.
Графические элементы. Включают фото, иконки, баннеры и другое.
Пользовательские страницы. Речь идет о личных кабинетах, корзинах, блоках с реферальными и партнерскими программами. В качестве примера: клиент добавил в корзину 5 позиций, но видит только финишную цену, не имея возможности выполнить редактирование и удалить ненужное. Если он очистит корзину и будет вынужден собирать ее повторно – вероятность получения заказа существенно снизится.
CTA-элементы. Это формы, кнопки, калькуляторы, виджеты обратного звонка и другие решения, с помощью которых посетитель выполняет целевое действие.
Дополнительно – наличие адаптивного (резинового) дизайна или мобильной версии (на поддомене и с урезанным функционалом) для корректного отображения на разных экранах. Набор компонентов зависит от ниши интернет-магазина. В e-commerce обязательны удобные системы оплаты и выбора способа доставки, остальное – на усмотрение владельца. Например, продажа одежды или аксессуаров нуждается в виртуальной примерочной, строительный магазин – в калькуляторе для расчета количества материалов, продавцы гаджетов и бытовой техники – в инструменте для сравнения товаров по разным характеристикам.
Виртуальная примерочная на сайте онлайн-магазина
Правила создания дизайна интернет-магазина
Правило третей
Правило третей применяется для выстраивания гармоничной и правильной композиции. Принцип простой:
- рисуем две вертикальные линии, разделяя страницу;
- две линии – горизонтальные.
Правило третей на практике
Создается сетка из девяти равных по размеру блоков, а основные объекты размещаются в местах пересечения линий или секциях. Объект помещается не в центр или произвольно, а в определенных точках фокусировки, за которые «цепляется» взгляд пользователя при взаимодействии со страницей. Правило не означает, что нужно обеспечить идеальное положение и всегда использовать только маяки из сетки. Оно применимо как для создания идеальной симметрии, так и асимметрии. В основе – теория о том, что мозг человека всегда ищет определенную последовательность или узор: композиция по правилам третей становится привлекательной и более интересной.
Золотое сечение
При привлечении правила золотого сечения визуальная часть разделяется в соотношении 62% и 38%. В основе – принцип математический пропорции, речь идет о числе Фи (не Пи), составляющем 1,618. Возьмем прямоугольник: в рамках золотого сечения он будет считаться идеальным, если одна из сторон на 1,618 единицы меньше, чем вторая (ранее упомянутые пропорции 62% и 38%). Рассмотрим на примере блока, ширина которого составляет 800 пикселей:
- 800 / 1,1618 = 494,4 пикселя;
- ширина большей части блока равна 494,4 пикселя;
- ширина меньшей – 305,6 пикселей.
Как выглядит золотое сечение
Правило актуально и для макетов сайтов, в этом случае золотое сечение выражено в пропорциях 3/2, 3/8 и аналогичных. Можно использовать для типографики, так, если размер заголовка равен 26 pt, то основной текст – 16 pt (26 / 1,1618). В веб-дизайне сечение нередко выстраивается по спирали, а группировка компонентов в блоках происходит от малого к большому.
Этапы разработки дизайна интернет-магазина
Бриф
Процесс работы с брифом похож на знакомство: исполнитель понимает, что заказчик хочет получить в рамках реализации проекта. Проводится как анкетирование, включающее следующие вопросы:
- название компании;
- описание товаров или услуг + ценообразование;
- основные цели создания интернет-магазина;
- целевая аудитория;
- конкуренты;
- пожелания по дизайну и общему оформлению сайта;
- цветовая гамма, типографика, фирменный стиль, если есть;
- референсы (примеры), которые заказчику нравятся;
- что может и не может присутствовать в дизайне;
- структура и функциональность (страницы, виджеты, формы, калькуляторы, прочее);
- какие интеграции нужны, например, онлайн-оплата картами и доставка с привлечением определенных служб;
- адаптивная или мобильная версия;
- требования к хостингу и домену;
- способ создания (индивидуальная разработка, конструктор, CMS);
- сроки и бюджет.
Бриф на разработку дизайна
Бриф – вариативное понятие, в веб-агентствах он имеет разные форматы, может отправляться на почту или быть размещен на сайте разработчика. Основная цель – собрать первичную информацию и понять, какой результат клиент хочет получить. Заполнение брифа ни к чему не обязывает, но дает представление о пожеланиях заказчика, а также позволяет сформировать примерную стоимость и сроки реализации.
Составление технического задания
После согласования всех драфтов по брифу и установления договоренностей, создается техническое задание (ТЗ) – это подробный документ, в котором прописаны требования к проекту, набор функций, цвета, шрифты и другие визуальные параметры, технические особенности. Документ является гарантией как для заказчика, так и для веб-дизайнера. Если что-то будет не выполнено – клиент сможет выдвинуть претензию, в это же время исполнитель защищен от необоснованных пожеланий, которые зафиксированы не были.
При отсутствии ТЗ требования к проекту размытые, нет четкой структуры, технических характеристик, что может стать причиной увеличения бюджета и сроков выполнения, разочаровывающего результата. Например, клиент хочет, чтобы на сайте были формы обратной связи. Он не указывает, как они должны выглядеть, поэтому веб-дизайнер проводит оформление на свое усмотрение. После запуска оказывается, что формы не работают, ведь в них много полей, а цвет не вызывает энтузиазм у клиентов – это становится причиной споров, которые в случае предварительного составления ТЗ точно невозможны.
Проведение исследований
На этом этапе веб-дизайнер или команда агентства проводят исследования, позволяющие создать конкурентоспособный продукт:
- целевая аудитория и портрет клиента;
- сегменты и рыночные ниши;
- анализ конкурентов;
- дополнительные каналы, интересные для аудитории;
- требования поисковых систем;
- продуктовое исследование;
- необходимый набор функций;
- тренды и перспективы развития на ближайшие несколько лет.
Исследования позволяют понять, что работает хорошо и плохо, куда будут двигаться тенденции, что хочет получить потенциальный клиент и какие фишки реализуют конкуренты, чтобы извлекать прибыль. Данные фиксируются в отчетах и другой документации, выделяются основные маяки, ложащиеся в основу создания дизайна интернет-магазина.
Проектирование и работа над дизайном
Объединив в единое целое ранее полученную информацию, дизайнеры приступают к разработке. Занимаются созданием структуры сайта, реализацией функционала и адаптивной/мобильной версии. Создаются концепция, стили, фирменные цвета, шрифты и другие компоненты, что позволяет:
- визуализировать проект для программистов и заказчика;
- обеспечить корректное отображение на десктопах и мобильных устройствах;
- продумать сценарии пути клиентов и определить, как они будут взаимодействовать с сайтом.
7 – Так выглядит макет сайта
На финише создаются прототипы, как в формате рисунков и схем, так и интерактивные. Последние помогают заказчику оценить сайт в действии, а также своевременно внести замечания, которые лягут в основу правок. Готовый дизайн должен основываться на правиле трех кликов: пользователь находит необходимое, делая не более трех нажатий мышкой. Специалист должен позаботиться о том, чтобы все идеи были реализованы, не замедляли процесс работы интернет-магазина и не вызывали сложности на стороне программистов.
Верстка и программирование
Верстальщики и программисты приступают к трансформации дизайнерского макета в статический формат. Создаются страницы, основные разделы, административная панель и другие компоненты, переносится функционал. Наиболее трудоемкий этап, занимающий больше всего времени.
Наполнение контентом
Сайт интернет-магазина уже готов, наступает время наполнения контентом. Речь идет не только о текстах и картинках, но и о SEO-оптимизации, включающей формирование семантического ядра, кластеризацию, составление технических заданий под отдельные страницы. Что делают на этом этапе:
- готовят ТЗ для страниц;
- пишут метатеги;
- составляют тексты, релевантные запросам;
- осуществляют подбор картинок и видео для иллюстрирования страниц, для товаров рекомендовано создание с нуля (можно сделать фото самостоятельно или обратиться в студию);
- проектируют инфографику.
Тексты формируются по мере приоритетности, первыми наполняются «Главная», «Оплата и доставка», «О компании», «Контакты» и другие разделы, с которыми пользователи взаимодействуют постоянно. Если товаров в интернет-магазине много – соблюдается аналогичный принцип: сначала описания и фото добавляются в карточки лидеров, потом – менее приоритетных позиций. Весь контент должен быть уникальным, можно создавать самостоятельно или с помощью нейросетей для текстов, картинок. Дополнительно настраивается блог, помогающий привлекать трафик по информационным запросам, для него составляется контент-план.
Тестирование
Решаются последние технические вопросы – интеграции, подключение сервисов аналитики и статистики, хостинг и домен. На финише проводится тестирование и проверка на:
- соответствие ТЗ;
- поведение при разных нагрузках;
- скорость загрузки сайта и страниц;
- отображение интернет-магазина в разных браузерах и на устройствах;
- функциональную составляющую;
- работоспособность сторонних сервисов, например, приема оплаты или CRM-системы;
- технические ошибки.
Тестирование сайта в сервисе Google PageSpeed
Тестирование – первичное, последующие проверки осуществляются на всех этапах функционирования проекта. В случае выявления проблем – вносятся доработки, они продолжаются до тех пор, пока сайт не буде отвечать техническому заданию и его не примет заказчик.
ТОП-10 примеров удачного дизайна интернет-магазинов
1. Утконос
Интерфейс Утконос
Интуитивная навигация и наличие всех необходимых конверсионных элементов. Дизайн выполнен в фирменных цветах, есть чат-бот для бесперебойной обратной связи. Реализован структурированный каталог и хлебные крошки, CTA-элементы на привычном для пользователей месте. В карточках есть фото, описания, отзывы и оценки, повышающие доверие потребителей.
2. ABtoys
Дизайн ABtoys
При оформлении дизайна применено правило золотого сечения, каталог – структурированный, есть хлебные крошки и удобная навигация. Контакты, корзина, избранное хорошо видны, поэтому посетители не теряются на сайте. В карточках – характеристики, фото, доступные способы оплаты и отзывы.
3. Spadream
Spadream
Дизайн интернет-магазина косметики выполнен в стиле минимализм, есть структурированное меню, на главную вынесена основная информация – новинки, акции и подарки, преимущества, стимулирующие интерес аудитории. Предусмотрены хлебные крошки и CTA-элементы, логика меню соблюдена.
4. LoftyHome
LoftyHome
Реализован стиль лофт в дизайне интернет-магазина – светлая палитра, много «воздуха» и удобный каталог. Сразу доступны фильтры для подбора необходимых моделей мебели по параметрам. Формы для регистрации и входа – на хорошо просматриваемых позициях, как и контактные данные с возможностью перехода в мессенджер для последующей коммуникации. В карточках – не только фото и описания, но и инструкции по сборке, помогающие покупателям не искать дополнительную информацию на других сайтах.
5. BRANDSHOP
BRANDSHOP
Здесь сразу виден ассортимент – мужская и женская одежда, доступны разделы со скидками, аксессуарами и брендами, упрощающие процесс выбора. Каталог максимально простой, есть разнообразие фильтров для сортировки товаров. Избранное, поиск, корзина, личный кабинет – справа, что соответствует современному видению веб-дизайна. В карточках выполнена склейка по размерам и оттенкам моделей, есть фото и описания, а также заказ в один клик и информирование о возможности купить по оплате частями
6. DNS
DNS
Интернет-магазин бытовой техники предлагает массу инструментов, облегчающих процесс выбора – от сравнения товаров до избранного. Дизайн выполнен в фирменных оттенках, на главной странице доступны сведения об акциях, доставке, вакансиях и другие важные данные. Корзина, личный кабинет – в отлично просматриваемых зонах. В каточках доступны подсказки по техническим характеристикам, выполнена склейка по оттенкам и основным параметрам. Реализованы интуитивное меню и удобная навигация.
7. Белый Кролик
Белый Кролик
Еще один пример лаконичного дизайна, в котором объединяются яркие оттенки и минимализм. Посетителям не придется долго искать CTA-элементы и товары, что обусловлено соблюдением правила трех кликов. На главной есть ссылки на разделы с акциями, новостями, сведениями для покупателей – вся необходимая информация остается на виду. Реализовано структурирование по продукции (под виды, породы животных и назначение), разветвленные фильтры и склейка по основным характеристикам в карточках.
8. Randewoo
Randewoo
Интернет-магазин парфюмерии предлагает дизайн с интуитивным представлением товаров, коммерческих предложений и выгод. Реализована светлая цветовая палитра, справа в интерфейсе – корзина и избранное, что привычно для пользователей. Карточки – функциональные, здесь есть объединение по ценам, оттенкам и другим характеристикам, поэтому потенциальным клиентам не придется искать что-то дополнительно.
9. Rendez-Vous
Rendez-Vous
Интернет-магазин предлагает современный дизайн, выполненный в светлых оттенках. На главной – все необходимое для клиентов: ассортимент, выгоды, поиск товаров по картинке, корзина, личный кабинет и другое. Реализована интуитивная структура, присутствуют хлебные крошки и перелинковка для упрощения навигации, есть акции и информация для сотрудничества. В карточках – варианты моделей обуви со склейкой по размерам и цвету, а также данные о кэшбэке и бонусных баллах.
10. Poison Drop
Poison Drop
Интернет-магазин украшений представлен в современном нейтральном дизайне, в котором доминируют светлые оттенки с контрастными дополнениями. Предусмотрены удобный юзабилити, продуманная структура каталога, а основные элементы для клиентов (избранное, корзина, поиск) отлично просматриваются. Форма для подписки на рассылку имеет одно поле, что повышает шансы на заполнение, а в карточках товаров есть вариации размеров и данные о покупке, возврате, гарантиях.
В заключение
Дизайн интернет-магазина – фактор, который по уровню важности не уступает ассортименту или политике ценообразования. Оказывает влияние на то, захочет ли пользователь продолжить взаимодействие, насколько ему комфортно и какую конверсию будет иметь проект. Некачественный дизайн отвлекает от выполнения целевых действий, негативно влияя на конверсию, показатель отказов и другие поведенческие факторы. Он проектируется один раз и может подвергаться трансформациям, но основные черты сохраняются, ведь они уже привычны для пользователей. Разработку можно заказать в агентстве или у фрилансера, а также создать самостоятельно в конструкторе сайтов.