Дизайн интернет-магазина
компании La Marée
Дизайн интернет-магазина
компании La Marée
ЗадачаРазработать дизайн-концепцию магазина La Marée
19 апреля 2018 г.
ЛА МАРЕ занимает лидирующие позиции на рынке поставок деликатесной продукции. Чтобы помочь компании увеличить обороты розничного направления, мы разработали дизайн-макеты для нового интернет-магазина и проконтролировали его сборку.
Погружаемся в задачу...
Перед стартом каждого проекта мы глубоко анализируем рынок и погружаемся в бизнес заказчика. Это помогает найти наиболее эффективные решения поставленных задач.
Изучаем аудиторию
На основе анализа веб-статистики и предоставленных заказчиком данных мы составили подробный портрет целевой аудитории.
Возраст аудитории, лет
< 18
18 – 29
30 – 44
45 – 54
> 55
Женщины — 0%
Мужчины — 0%
0%Москва
0%С.-Петербург
0% — другие города
Анализируем дизайн
При проведении редизайна мы детально изучаем имеющиеся визуальные решения и определяем их слабые места. Это позволяет добиться качественного улучшения показателей магазина.
Устаревший визуал
Устаревший дизайн
Сайт имел неявную визуальную концепцию, которая не отвечала потребностям целевой аудитории. В результате конверсия была низкой, а магазин терялся среди десятка подобных проектов.
Отсутствие адаптивности
Более 50% посетителей просматривали сайт со смартфонов, но мобильной версии у магазина не было. В результате пользователи испытывали неудобства, а компания теряла прибыль.
Неструктурированный каталог
Наполнение магазина проходило хаотично, поэтому с годами его структура стала запутанной. Пользователям было сложно ориентироваться в категориях и находить нужные товары.
Неэффективное SEO
Результаты продвижения за последний год были отрицательными. При редизайне нужно было заложить потенциал, необходимый для быстрого увеличения органического трафика.
Визуальная концепция
Проанализировав всю необходимую информацию, мы разработали две эффективных, но визуально противоположных концепции дизайна. Они были представлены заказчику на отчетной презентации, в ходе которой мы определили наилучшее направление дальнейшей работы.
Концепция #1
Концепция #2
Презентация
shop-lamaree.ru
Мы сделали первый концепт более атмосферным и классическим. «Вкусные» фотографии, большие заголовки и тонировка делают его понятным для представителей целевой аудитории из гурмэ-сегмента.
shop-lamaree.ru
Второй концепт получился более современным и свежим. Простые геометрические формы, общая динамика и основной упор на контенте делают его очень нестандартным для рынка деликатесов и продуктов питания.
Прототипы
После утверждения концепции мы создали прототипы всех важнейших страниц и разделов сайта. Это позволило сократить время отрисовки и конечного утверждения дизайн-макетов.
Концепция в реальном мире
Процесс воплощения выбранной концепции в дизайн-макеты не был простым. Но благодаря хорошему взаимопониманию с заказчиком мы смогли получить отличный результат.
дизайн-макетов спроектированы нами для отображения магазина на мобильных устройствах: смартфонах и планшетах.
макетов страниц спроектировано и отрисовано для будущего интернет-магазина
Система модулей и 8pt Grid
Для достижения единообразия в отображении контента используются принцип 8pt Grid и система модулей. Они позволяют легко собирать любые страницы с сохранением визуальной стилистики и ритма.
Вертикальные модули
Направляющие
Все вместе
shop-lamaree.ru
shop-lamaree.ru
shop-lamaree.ru
Адаптивная верстка
Одной из важнейших задач проекта было спроектировать сайт таким образом, чтобы каждый элемент легко адаптировался под различные устройства. Поэтому в процессе работы мы продумали поведение сайта для всех существующих типов экранов.
Веб-браузер
≥ 1366 px
Веб-браузер
Планшеты
≥ 1024 px
Планшеты
Смартфоны
≥ 576 px
Смартфоны
model
Анимация компонентов
Программирование и верстку сайта заказчик решил выполнить внутренними ресурсами компании. Чтобы улучшить итоговый результат, мы сделали анимационные ролики, иллюстрирующие работу отдельных элементов дизайна.
Поиск товаров
Подписка на рассылку
Меню на смартфонах
Прелоадер
shop-lamaree.ru
shop-lamaree.ru
shop-lamaree.ru
shop-lamaree.ru
Типографика. Шрифты
Для проекта были подобраны три гарнитуры, каждая из которых используется для оформления заголовков, наборного текста и декорирования дополняющих надписей.
font
Данная гарнитура сочетает современные тенденции в типографике, открытые формы и грубые засечки, но при этом несет в себе своеобразную элегантность. Это настоящая рабочая лошадка, но мы решили использовать ее только для заголовков, чтобы дополнительно подчеркнуть контраст между ними и основным набором.
font
Эта гарнитура отвечает за отображение наборного текста и включает в себя большое количество разнообразных символов. Стройный и неприхотливый гротеск поможет пользователю быстро узнать необходимую информацию о товаре.
Цветовая палитра
На выбор цветовой палитры сайта огромное влияние оказало море, с его непомерной глубиной, а также аутентика дерева, благородство вин и текстурные оттенки натуральных материалов.
#FFFFFF
Основной цвет сайта, который подобран так, чтобы одновременно придавать сайту глубину и легкость. Это достигается тонкой балансировкой позитивного пространства.
#FFFFFF
Такой оттенок основного цвета используется для декоративных и оформительских элементов. Он помогает создать на сайте иллюзию моря, которое часто переливается оттенками синего.
#FFFFFF
Небольшие элементные вставки этого цвета придают сайту дополнительную игривость и позволяют пользователю лучше понимать логику работы интерактивных элементов.
#FFFFFF
Этот оттенок напоминает цвет благородных пород дерева, из которых делают пробки для дорогого вина. Он помогает создать на сайте ощущение роскоши и комфорта.
#FFFFFF
Красный цвет контрастирует с основной цветовой гаммой сайта и служит сигнальным флажком для привлечения внимания пользователей к отдельным элементам дизайна.
#FFFFFF
Данный цвет мы использовали для тех элементов, которые предназначены для увеличения конверсии. Это могут быть объявления о скидках, стикеры, теги и другие инструменты повышения продаж.
Над проектом работали
Руководитель проекта
Сергей Анисимов
Дизайнер
Александр Данилов
Технический консультант
Александр Петряков
Фронтенд-разработчик
Евгений Скирко
Копирайтер
Ольга Мысливчик