11.09.2025
Прототип и дизайн сайта для интернет-магазина по продаже оборудования для образовательных учреждений
архастрой.рф
Сфера деятельности клиента – комплексное оснащение образовательных учреждений (оборудование, инвентарь, учебные материалы и др.)
Был запрос – упаковать прототип и дизайн для сайта. Клиент хотел, чтобы новый интернет-магазин по удобству и структуре напоминал маркетплейсы.
Прежний сайт устарел по маркетингу, дизайну и интерфейсу.
Маркетплейсы сейчас очень популярны. Пользователи привыкли к их структуре. Поэтому заказчику важно было воспроизвести на новом сайте интерфейс, похожий на маркетплейсы. Но при этом нельзя забывать про особенности компании. Важно выделить ее среди конкурентов.
Нам нужно сделать сайт, который учитывает следующие требования:
Удобная структура, максимально похожая на маркетплейсы (Яндекс Маркет, Ozon), чтобы пользователи чувствовали привычный опыт.
Совмещение стандартов маркетплейса с уникальными особенностями компании, чтобы подчеркнуть экспертность и надежность.
Ограничения по CMS: нельзя было использовать современные анимации, нестандартное расположение блоков и часть сложных элементов. Требовался баланс между возможностями платформы и задачами маркетинга.
То есть на сайте требуется совместить лучшие практики разработки маркетплейсов, продающих и имиджевых сайтов.
Этапы разработки сайта
Разработка сайта шла по нашей стандартной методике:
Бриф с клиентом.
Маркетинговое исследование: анализ ЦА и конкурентов. На этом этапе нашли еще одну компанию, которая сделала сайт по типу маркетплейса.
Разработка черно-белого прототипа.
Согласование прототипа с клиентом и программистами (нужно было проверить, можно ли реализовать все идеи на выбранной CMS).
Изменили реализацию некоторых блоков из-за технических ограничений CMS.
Разработка дизайн-макета на базе прототипа.
Согласование дизайн-макета с клиентом и программистами.
Что сделали
Собрали референсы с известных маркетплейсов – какую структуру и блоки можно применить в нашем проекте.
На основе маркетингового исследования разработали продающие смыслы, которые легли в основу сайта. На этом этапе нам очень помог собственник бизнеса, который подсказал, какие моменты отразить, чтобы выделиться среди конкурентов.
На тот момент в стране произошла серьезная смена законодательной базы. Мы показали это на сайте, в то время как у конкурентов информация была устаревшей и неактуальной.
Какие страницы разработали
Главная
О компании
Блог
Корзина
Избранное
Карточка товара
Доставка
Кабинеты
Каталог
Подкатегория из «Кабинета»
Подкатегория из «Каталога»
Квиз
Контакты
Страница «Спасибо»
Поп-ап окна
Маркетинговое исследование
Провели анализ ЦА по нескольким методикам, чтобы рассмотреть портрет потенциального клиента со всех сторон и ничего не упустить.
По методике 5W
Полностью описали портрет ЦА, а также рассмотрели сегменты по методике JTBD.
Выявили, на что обращают внимание клиенты в первую очередь, что для них важно в продукте и поставщике и другие важные характеристики ЦА.
Анализ конкурентов показал, что в этой нише сложно выделиться продуктом. Склонить клиента в свою сторону поможет максимально клиентоориентированный подход и надежность, репутация компании на рынке.
На основе маркетингового исследования мы определили, на чем делать акцент, чтобы клиенты выбрали нас.
Далее выборочно рассмотрим несколько страниц: как реализован маркетинговый «слой» и дизайн.
Главная страница. Прототип
Что мы взяли с маркетплейсов?
Поиск по сайту
Подборку товаров под разные сценарии
Очень хотелось добавить дополнительные фильтры, чтобы клиентам проще было искать нужный товар. Но не смогли реализовать из-за ограничений CMS.
Что взяли из классического набора продающего лендинга?
Первый экран с оффером и буллитами
Один из CTA – квиз
Социальные доказательства – кейсы, отзывы, сертификаты, логотипы клиентов и пр.
Ключевой смысл – компания снимает с клиента все заботы по подбору и закупке оборудования. И гарантирует, что все будет четко по закону и в срок
Поработали со всеми распространенными страхами, возражениями и вопросами клиентов
Для примера покажем несколько блоков, которые облегчают клиенту поиск и выбор товара.
Ниже распишем подробнее про ключевые элементы базовых экранов.
Первый экран
Крупный оффер «Подберем и поставим учебное оборудование» с акцентом на законодательное соответствие.
Подзаголовки усиливают доверие: «Работаем с 2009 года», «Выполнили все обязательства на 100%», «Скидка 10% на первую поставку».
Кнопка CTA «Получить КП за 30 мин».
Витрина в стиле маркетплейса
Блоки «Бестселлеры», «Хиты продаж», «Новинки и акции» с карточками товаров и ценами.
Категории вынесены прямо на главную: спортивное оборудование, учебно-лабораторное, интерактивное, патриотическое воспитание и др.
Блок «Популярные школьные кабинеты» с готовыми решениями.
Квиз на главной
Встроенный интерактив «Ответьте на 3 вопроса и получите КП и подарок».
Сегментация по типу учреждения (детский сад, школа, колледж, центр реабилитации и др.) и бюджету.
Такой элемент делает процесс подбора более персонализированным и вовлекает пользователя.
Доверие и экспертность
Цифры и факты: 15 000+ товаров, 3527 клиентов за 15 лет, 74% возвращаются с повторными закупками.
Блоки про соответствие ФГОС, реестр Минпромторга, гарантии выполнения обязательств.
Реальные отзывы директоров школ и колледжей.
Контент для вовлечения
Лента с экспертными статьями и материалами («Как получить грант для школы», «Оснащение школьных классов по ФГОС»).
Кейс-блоки: примеры оснащения классов и образовательных учреждений.
Главная страница стала центром продаж и доверия:
быстро знакомит с ключевыми преимуществами компании;
ведет пользователя к каталогу и корзине по понятной логике маркетплейса;
содержит интерактивные элементы (квиз, формы заявки), которые работают на конверсию;
транслирует экспертность и надежность, что критично для государственных закупок.
Одновременно главная страница служит «разводящей» страницей. Клиент может быстро перейти в нужный раздел.
Карточка товара и другие страницы. Прототип
Карточка товара должна была быть максимально удобной для пользователей, которые привыкли к маркетплейсам. Основная цель – сделать процесс выбора и покупки простым и удобным, при этом сохранить экспертный и B2B-имидж компании, которая работает с образовательными учреждениями и госзакупками.
Для оформления карточки товара взяли за основу структуру одного из маркетплейсов, но адаптировали под запросы ЦА и с учетом ограничений CMS.
Ниже основные особенности.
Привычный формат e-commerce
Цена крупным шрифтом.
Кнопки «В корзину», «Отложить», «Сравнить» – стандартный функционал маркетплейсов.
Минимальная сумма заказа (100 000 ₽) вынесена рядом, чтобы исключить нецелевые заявки.
Триггеры доверия и выгоды
«Нашли дешевле? Снизим цену!» – дополнительный стимул не уходить к конкурентам.
Упоминание работы по законам (44-ФЗ, 223-ФЗ, Постановление №1875), что критично для тендеров и госучреждений.
Контакты и форма связи расположены прямо под карточкой.
Детализированное описание
Характеристики вынесены отдельным блоком.
Описание переведено на язык пользы: оборудование подходит для ДОУ и школ, помогает проводить интерактивные занятия.
Указаны способы доставки по России и СНГ, включая популярные ТК.
Кросс-продажи
Блок «С этим товаром часто покупают» усиливает средний чек (например, мобильная стойка для панели, документ-камера).
В карточке товара на первом экране сразу четыре кнопки на ограниченном пространстве. Поэтому на дизайне важно было расставить акценты – выделить главные кнопки и отодвинуть на задний план второстепенные.
В карточке товара также поработали с «конкурентами». Добавили информацию «Сделаем скидку, если нашли дешевле». Таким образом мы не только возвращаем к себе клиентов, но и фоново отслеживаем, что происходит у конкурентов.
Ключевые решения на других страницах. Прототип
Каталог структурирован по типу маркетплейсов: множество категорий, фильтры, быстрый поиск.
Главная совмещает витрину товаров, офферы, факторы доверия (работа по закону, 15 000+ товаров, кейсы, отзывы).
Квиз помогает сегментировать клиентов: по типу учреждения, виду закупки, бюджету. Ответы позволяют менеджерам больше узнать о клиенте еще до созвона и подойти к выбору товара более персонализировано.
Доставка раскрывает логику упаковки, страхования, гарантий замены. Закрывает страх «А если груз приедет поврежденным».
Корзина – привычный для пользователей e-commerce формат с расчетом суммы, возможностью отложить товары и рекомендациями.
О компании усиливает доверие: 15 лет опыта, ни одной претензии со стороны госорганов, помощь с грантами, оформление документов полностью берем на себя и пр.
Промежуточный результат:
Клиент получил продающий прототип, который лег в основу нового сайта.
Структура сайта стала напоминать маркетплейс, но при этом сохранила уникальные конкурентные преимущества компании.
Прототип учел ограничения CMS: дизайн и логика адаптированы под возможности платформы.
Разработка дизайн-макета
После утверждения смыслового прототипа предстояло разработать дизайн-макет, который:
сохранял логику маркетплейса;
был простым и понятным для пользователей;
визуально усиливал доверие и экспертность компании;
учитывал технические ограничения CMS.
Клиент хотел, чтобы сайт выглядел современно и конкурентно, но при этом сохранял строгий, деловой стиль, соответствующий работе с образовательными учреждениями и государственными контрактами.
Чтобы определить концепцию сайта, сделали три варианта первых двух экранов. Итоговый макет стал комбинацией двух вариантов. Важно было не перегрузить экран, а сохранить баланс между продажей и экспертностью.
В процессе создания дизайна главной страницы мы несколько раз проводили созвон с заказчиком, чтобы довести макет до идеала. Также обсуждали, как выглядят разные комбинации цветов и как некоторые блоки «контрастируют» между собой. Разработали несколько вариантов логотипа. В итоге пришли к тому дизайну, который всем и во всем нравится.
Одна из ключевых особенностей всех дизайн макетов страниц – уникальные лаконичные иллюстрации, которые мы создали вручную. Они встречают нас на заглавных баннерах страниц и в некоторых блоках. А с помощью волнистых и в форме сферы линий придали интересную динамику там, где это необходимо.
Сделали одно простое, но интересное стилистическое решение – добавили 3D-типографику с длинной вертикальной тенью, которая добавляет свою щепотку вау-эффекта.
В силу того, что пока у заказчика не хватает фото-контента, некоторые изображения генерировали с помощью нейросетей.
Дизайн всех последующих страниц после главной утвердили с заказчиком без корректировок с его стороны. Мы буквально исключили однотипность страниц и сделали каждую по-своему уникальной, интересной. При этом, выдержав определенную строгость и единый фирменный стиль.
Ключевые решения в дизайне
Цветовая палитра – сдержанная, с акцентом на корпоративные цвета и яркие кнопки CTA.
Шрифтовая иерархия – четко выделены заголовки и цены, чтобы не перегружать пользователя.
UI-паттерны маркетплейсов – каталог, карточки, корзина выполнены так, чтобы интерфейс был привычен аудитории.
Рассмотрим несколько страниц с точки зрения дизайна. Напомню, что наша задача была создать интерфейс, который визуально близок к маркетплейсам, но при этом сохраняет корпоративный стиль и имидж надежного партнера для образовательных учреждений.
Главная страница
Чистая структура и модульная сетка
Блоки выстроены так, чтобы повторять привычную логику маркетплейсов: оффер → подбор товаров → категории → акции → отзывы → статьи.
Модульная верстка облегчает навигацию и делает интерфейс «легким на глаз».
Цветовая палитра
Сдержанные корпоративные оттенки (белый фон, нейтральные серые блоки, акцентные CTA-кнопки).
Яркие CTA-кнопки контрастируют и сразу ведут к действию («Получить КП», «Перейти в каталог»).
Шрифтовая иерархия
Крупные заголовки с офферами для быстрого восприятия.
Второстепенный текст уменьшен и сгруппирован, чтобы не перегружать страницу.
Цены в карточках товаров выделены так, чтобы их легко было сравнивать.
Карточки товаров
Минималистичные, с акцентом на фото и цену – привычный формат для аудитории.
Поддержка элементов e-commerce: «быстро заканчивается», «новинки», «хиты продаж».
Визуальные триггеры доверия
Иконки и маркировка законов (44-ФЗ, 223-ФЗ, Постановление №1875).
Цифры и факты выделены крупным шрифтом, чтобы они бросались в глаза.
Интерактивные элементы
Квиз встроен в дизайн главной: аккуратные карточки с выбором (детский сад, школа, колледж и др.).
Формы обратной связи стилизованы под e-commerce (быстрые, не перегруженные).
Имиджевые блоки
Отзывы клиентов оформлены как карточки с фото и цитатами.
Блог встроен прямо в главную в виде ленты публикаций – добавляет экспертности.
Карточка товара. Дизайн
Минимализм и акценты
Основное внимание на фото товара, цене и кнопке «В корзину».
Второстепенные детали (описание, доставка, характеристики) визуально разгружены и собраны в аккуратные блоки.
Цветовые акценты
CTA-кнопки выделены контрастным цветом, сразу привлекают внимание.
Информация о скидке/выгодах («Нашли дешевле?») выделена отдельно.
Интерактивные вкладки
Блоки «Описание / Характеристики / Комплектация» оформлены в формате вкладок – привычный UX-паттерн маркетплейсов.
Блок кросс-продаж
Визуально оформлен так, чтобы воспринимался как продолжение карточки, а не отдельный элемент.
Кнопки «В корзину» под сопутствующими товарами позволяют быстро добавить их в заказ.
Итог
Карточка товара получилась продающей и удобной:
сохраняет привычный для пользователей маркетплейс-формат;
усиливает доверие через юридические и экспертные триггеры;
стимулирует кросс-продажи;
адаптирована для B2B-аудитории и госзаказчиков.
Далее кратко про остальные страницы сайта.
Корзина
Современный интерфейс корзины с табами «Готовые к заказу / Отложенные».
Счетчик итоговой суммы и минимального заказа.
Блок с рекомендациями («Возможно, вам понравятся»), как в крупных маркетплейсах.
Доставка
Визуально акцентирована надежность: упаковка, видеоконтроль, страхование.
Гарантия замены оборудования даже при ошибке транспортной компании.
Понятная структура и выделенные иконками преимущества.
О компании
Сочетание имиджевых и продающих элементов: факты (3527 клиентов, 15+ лет опыта), кейсы, гарантии.
Упор на надежность: отсутствие в реестре недобросовестных поставщиков, опыт работы по грантам и госпрограммам.
Отзывы реальных клиентов с фотографиями.
Контакты
Четкая и лаконичная страница: телефоны, e-mail, адрес, карта.
Быстрые формы связи, интеграция с мессенджерами.
Результат
Сайт получил современный, понятный интерфейс в стиле маркетплейса.
При этом дизайн сохранил строгий имидж надежного партнера для образовательных учреждений.
Пользовательский опыт стал ближе к привычным e-commerce платформам, что повышает вовлеченность и скорость оформления заказов.
Нужен имиджевый удобный сайт для бизнеса, который помогает продавать? Приходите на консультацию – обсудим ваш проект и задачи, подберем оптимальное решение.
Отправим полезные материалы на вашу почту
Найдем эффективный инструмент для решения ваших бизнес-задач
Шаблон продающей карточки товара
Гайд на цвета и шрифты для сайта
Контактные данные
Контактные данные
Thank you!
Something wrong. Try again later
Сайт, который помогает продавать, рождается на стыке трех составляющих: грамотного маркетинга, современного дизайна и корректной верстки.