Для Wine92 мы разработали новый дизайн пяти страниц действующего магазина и перенесли его на InSales. Вместе с заказчиком прошли путь от брифа и прототипа до выбора визуального направления, согласования внутренних страниц и проверки готового сайта.
Wine92 представляет продукцию производителя вина и коньяка. На сайт приходят частные покупатели и представители бизнеса, которым интересны оптовые поставки. Магазин уже работал на InSales, а наша задача состояла в обновлении его оформления с учётом фирменного стиля и мобильных устройств.
Главная до и после редизайна
В старом шаблоне первый экран занимал слайдер с фотографиями производства, а меню располагалось поверх изображения. В новом дизайне выделили заголовок о продукции и кнопку перехода в каталог. Ниже показываем первый экран старого сайта и утверждённый макет новой главной. Обе страницы можно открыть целиком.
Начали с брифа и разговора о покупателях
В брифе заказчик обозначил два ориентира: простота и доступность. Для оформления подходили оттенки, близкие к фирменному малиновому. В работу вошли главная, каталог, карточка товара, корзина и оформление заказа, включая мобильные версии.
После брифа мы уточнили, кто пользуется сайтом и как компания работает с оптовыми обращениями. Выяснилось, что представители бизнеса находят контакты на сайте, а дальше общаются с менеджером. Для заказчика это было важное направление. Поэтому в проекте предусмотрели отдельное представление оптового предложения рядом с розничным каталогом.
На основе этих ответов подготовили техническое задание и передали его заказчику для комментариев. Так до работы над графикой согласовали, какие страницы обновляем и что должно быть на них показано.
В прототипе обсудили содержание страниц
Прототип позволял рассмотреть будущие страницы без влияния цвета, шрифтов и фотографий. На главной мы показали последовательность блоков: предложение производителя, категории, товары, оптовое направление и сведения о компании. Для внутренних страниц подготовили расположение товарной информации и элементов заказа.
Обсуждение шло на уровне конкретных решений. Например, для карточки уточнили, какие данные команда будет поддерживать: количество товара в наличии, краткое и полное описание, отзывы. Заказчик подтвердил планы готовить описания и собирать отзывы. Отображение точного остатка в этот этап не включили, поскольку компания не планировала его регулярно обновлять.
Макеты отправили ссылкой, а по просьбе заказчика продублировали в PDF. После просмотра он согласовал прототип. Это дало основу для следующего этапа: структуру уже обсудили, можно было выбирать её визуальное оформление.
Предложили два варианта главной
Мы подготовили два направления на основе одной задачи и объяснили различия между ними. В первом сочетали выразительные заголовки со шрифтом с засечками, простой шрифт для интерфейса и крупные скругления. Во втором использовали шрифт без засечек и более прямые формы блоков.
Первый вариант связывал оформление с винной тематикой через типографику и мягкие контуры. Второй предлагал более сдержанную подачу. Заказчик мог сравнить характер двух готовых страниц, включая фотографии, заголовки, товарные блоки и цветовые акценты.
Заказчик выбрал первый вариант. Его шрифтовую пару, бордовые акценты и скругления мы затем использовали в каталоге, карточке товара, корзине и оформлении заказа. Выбор главной определил оформление всего согласованного набора страниц.
Главная: ассортимент и отдельное предложение для опта
Первый экран знакомит с продукцией через крупную фотографию и ведёт в каталог. Дальше посетитель может выбрать направление по виду напитка и формату упаковки. В плитках рядом с изображениями разместили названия и обозначения объёма: по ним видны различия между бутылкой, коробкой и другой упаковкой ещё до перехода в раздел.
После категорий расположили популярные товары с ценами и действиями для заказа. Главная последовательно переходит от общего знакомства с ассортиментом к конкретным позициям. Выразительные заголовки отделяют разделы, а бордовый цвет отмечает кнопки и специальные предложения.
Показали компанию за товарным каталогом
Оптовое предложение получило самостоятельный блок на главной. В нём перечислены условия сотрудничества, предусмотрены переход к подробностям и телефон для обращения. Такой блок соответствует процессу, который описал заказчик: обсуждение оптовой поставки продолжается с менеджером.
Ниже разместили рассказ о компании и фотографии производства. Эти материалы показывают посетителю, кто стоит за ассортиментом. В той же последовательности предусмотрели отзывы и ответы на частые вопросы, чтобы после знакомства с товарами можно было получить дополнительную информацию о компании и порядке заказа.
Каталог: от категории к конкретному товару
В верхней части каталога оставили визуальные входы в категории. Посетитель видит разные напитки и форматы упаковки, затем переходит к списку товаров. У списка есть фильтры цены и состава, а также сортировка. Это два уровня выбора: сначала раздел ассортимента, затем подходящие позиции внутри него.
В настольном макете фильтры расположены слева, товары собраны в три колонки. В каждой карточке выделены фотография, название и цена; рядом находятся избранное и действия для заказа. Рядом с текущей ценой предусмотрено место для прежней, а отдельная плашка отмечает хиты продаж. Единый порядок элементов помогает сопоставлять несколько позиций по тем же признакам.
При этом оформление каталога продолжает выбранное направление: светлый фон, бордовые кнопки и скруглённые товарные блоки. После перехода с главной посетитель остаётся в знакомом интерфейсе.
Состав в фильтре берётся из описаний в карточках товаров, поэтому в макете показаны исходные развёрнутые формулировки. После сдачи дизайна мы рекомендовали заказчику сократить их и сделать понятнее: так состав будет легче читать в карточке и использовать при выборе через фильтр.
Карточка товара: фотография, описание и подробности
На первом экране карточки крупная фотография находится рядом с названием, ценой и кратким описанием. В примере макета описание рассказывает о вкусе и подходящих сочетаниях с едой. Покупателю доступны основные сведения о напитке до перехода к подробным характеристикам.
Миниатюры под основной фотографией показывают дополнительные изображения. Рядом с текстом расположены кнопки добавления в корзину и заказа в один клик. Ниже информация разделена на вкладки описания, характеристик и отзывов. Это продолжает договорённость на этапе прототипа: у товара есть место и для краткого знакомства, и для развёрнутого содержания.
Дальше на странице предусмотрены сведения о производителе, оптовое предложение и подборки других товаров. Посетитель может продолжить знакомство с ассортиментом из карточки, а представитель бизнеса получает ещё одну возможность перейти к обсуждению поставки.
Корзина и оформление заказа в общем стиле
Вместе с каталогом обновили корзину и страницу оформления заказа. Для них сохранили ту же типографику, цвет кнопок и характер форм. Важные для завершения заказа страницы вошли в полный цикл дизайна и переноса.
В настольном макете оформления поля контактов и условия получения расположены слева, состав заказа справа. Покупатель заполняет данные и одновременно видит выбранные товары. Блоки авторизации, контактов, получения и оплаты отделены заголовками, чтобы форму можно было последовательно просмотреть перед подтверждением.
Отдельно подготовили мобильные макеты
Для телефона элементы карточки выстроили в одну колонку: сначала галерея, затем название, цена, описание и действия. Миниатюры сохранили под основной фотографией, а товарные подборки ниже показали по две карточки в ряд.
Мобильные макеты дали заказчику возможность заранее увидеть, как крупная настольная композиция превращается в последовательную страницу на небольшом экране. При переносе и последующей проверке учитывали обе версии.
Согласовали дизайн и перенесли его на InSales
После выбора направления мы подготовили остальные страницы и отправили заказчику полный комплект для просмотра. На этом этапе он уточнил текст об оплате и подтвердил, что остальной дизайн его устраивает. Затем перешли к вёрстке и переносу макетов в действующий магазин на InSales.
Готовый магазин передали заказчику. После просмотра он принял работу.
Заказчик участвовал в работе на каждом этапе: задавал ориентиры в брифе, отвечал на вопросы по прототипу, выбирал вариант главной и согласовывал внутренние страницы.
Результат
Wine92 получил новый дизайн пяти страниц действующего магазина на InSales: главной, каталога, карточки товара, корзины и оформления заказа. Подготовили настольные и мобильные макеты и перенесли их на платформу.
В оформлении объединили фирменную цветовую гамму, выразительную типографику, фотографии продукции и производства. Каталог ведёт к отдельным товарам, карточка раскрывает информацию о напитке, а оптовое направление представлено на главной и товарной странице.
Нужен новый дизайн для действующего магазина? Подробнее об услуге: редизайн интернет-магазина с внедрением на InSales.
