Задача
Нужно было собрать сайт для группы компаний «МАРКОН», которая объединяет несколько направлений работы с товарным бизнесом:
- честная маркировка;
- фулфилмент;
- логистика;
- консалтинг.
Отдельные направления уже существовали или разрабатывались как самостоятельные проекты. Например, сайт по честной маркировке и отдельный проект по фулфилменту.
Новый сайт должен был связать всё это в одну понятную систему и стать основной визиткой группы компаний.
Дизайн пришлось собирать почти с нуля
Готового брендбука не было. В качестве основы был логотип МАРКОН и общее понимание того, что визуально компания должна выглядеть серьёзно и дорого, без типичного шаблонного корпоративного сайта.
На этой базе я постепенно собрал визуальный язык:
- молочные и ivory-оттенки;
- глубокий графит;
- песочно-золотые акценты;
- крупную типографику;
- минималистичную геометрию;
- светлую и тёмную темы.
Отдельно прорабатывалось, как сайт будет выглядеть в двух режимах. Важно было не делать две разные версии, а сохранить одну дизайн-систему, которая нормально переключается между дневной и ночной темой.
Структура сайта
Главная страница строится вокруг направлений группы компаний.
Каждое направление получило отдельную крупную секцию с коротким описанием и своим визуальным фоном.
Честная маркировка
Блок рассказывает про маркировку товаров, обучение и сопровождение. Из него можно перейти на отдельный сайт направления — chestnaya-markirovka.ru.
Фулфилмент
Здесь собраны упаковка, транспортировка, FBO/FBS, отгрузка и распределение товара.
Для этого направления уже есть отдельный проект: niki-losk.ru/fulfillment.
Логистика
Позже в структуру добавилось отдельное направление логистики: оформление документов через ГИС ЭПД, страхование груза, работа по договору и сопровождение перевозки персональным менеджером.
Консалтинг
Четвёртое направление связано с работой с товарным бизнесом и маркетплейсами: личными кабинетами, продвижением и другими задачами вокруг продаж.
Не просто четыре отдельных блока
Одна из основных задач была в том, чтобы сайт не выглядел как список несвязанных услуг.
Поэтому дальше на странице направления объединяются в общий процесс — от подготовки товара до его продажи.
Получается понятная логика: компания может закрывать несколько этапов работы с товаром в рамках одной группы.
Фоны и визуальная часть
Для направлений я отдельно подготовил широкие фоновые изображения.
Здесь было важно не просто поставить красивые картинки, а учитывать реальную вёрстку: текст находится слева, поэтому основные объекты на изображениях специально смещены вправо.
Для светлой и тёмной темы используются те же изображения, а внешний вид меняется за счёт overlay и цветов интерфейса. Это позволяет сохранить одну композицию и не загружать сайт разными версиями одного и того же визуала.
Адаптив под мобильные устройства
После desktop-версии отдельно проходил мобильную.
Это был не просто перенос тех же блоков на узкий экран. Пришлось отдельно проверять:
- шапку и burger-меню;
- размеры заголовков;
- положение больших номеров секций;
- фоновые изображения;
- формы;
- процесс работы;
- карточки;
- footer;
- светлую и тёмную темы;
- portrait и landscape.
В итоге desktop остаётся самостоятельной версией дизайна, а мобильная компоновка перестраивается под небольшие экраны.
Отдельный домен
Для проекта был зарегистрирован отдельный домен:
Название хорошо совпало с самим позиционированием бренда — МАРКОН, группа компаний.
До этого рабочая версия находилась внутри моего сайта, после чего проект был вынесен на собственный адрес.
Что получилось
В результате из исходного логотипа и списка направлений появился полноценный корпоративный сайт с собственной визуальной системой.
Для меня этот проект интересен именно тем, что здесь работа была не только про вёрстку. Нужно было одновременно собрать структуру, визуальный язык, связать несколько бизнес-направлений и уже после этого реализовать всё как рабочий сайт.
Другие мои проекты можно посмотреть в разделе кейсов.
Коротко по теме
- Сайт МАРКОН был собран с нуля без готового брендбука.
- Для бренда сформирована собственная светлая и тёмная дизайн-система.
- На одной странице объединены маркировка, фулфилмент, логистика и консалтинг.
- Для направлений подготовлены отдельные фоновые визуалы и адаптивная композиция.
- Проект получил собственный домен
markon-group.ru.
Нужен корпоративный сайт?
Если вам тоже нужно собрать сайт компании с нуля — от структуры и дизайна до рабочей версии на домене — оставьте заявку. Я посмотрю задачу и предложу понятный вариант реализации.
