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