Сайт с каталогом
брендов для MTA
Group
- Адаптивный сайт с каталогом брендов:trademta.com
- Python, Django, React SPA, PostgreSQL
- Leaflet
MTA Group требовалось разработать сайт для текущих и потенциальных партнеров, чтобы:
- — рассказать им о компании и ее команде;
- — показать многообразие брендов-производителей, с которыми работает MTA Group, и чьи товары она может предоставить для реализации магазинам.
Так как компания работает по всему миру, основным языком сайта должен был стать английский, а дополнительным — русский.
Заказчик
MTA Group — поставщик детских товаров от известных брендов, таких как LEGO, Barbie, L.O.L., Enchantimals, My Little Pony и PAW Patrol. Компания соединяет ключевых производителей и ритейлеров по всему миру, позволяя находить лучшие решения и бренды.
В числе партнеров компании такие площадки как Amazon, Wildberries, X5 Retail Group, Ozon, Яндекс.Маркет, Магнит, Лента, СберМаркет и Самокат.
Реализация
Мы тщательно изучили нишу, в которой работает MTA Group, и ее конкурентов. Исследовали сайты-референсы: обратили внимание на те решения, которые заказчик посчитал правильными и удачными для своего бизнеса. Это помогло нам лучше понять задачу, разработать структуру и дизайн в соответствии с бизнес-целями компании.
Дизайн
Минимализм с акцентом на большие, красивые изображения, простой, легкочитаемый шрифт и динамика за счет анимации — основные принципы, которых мы придерживались при разработке дизайна сайта.
Монохромная цветовая гамма без обилия ярких деталей. В качестве основного изображения того или иного бренда — всего один товар, в основном, игрушки, которые сами по себе яркие и красочные.
Главная страница
Основной упор в структуре как главной страницы, так и всего сайта сделан на бренды.
Большую часть главной страницы занимают:
- — 4 статичные карточки с основными брендами, которые являются приоритетными для заказчика;
- — дополнительные бренды в виде слайдера, которые можно настраивать так, как удобно заказчику: добавлять или убирать уже существующие бренды, менять их порядок.
Чтобы лишние элементы не перекрывали изображение товара, но бренд все еще можно было легко узнать — с карточек на главной убрали текстовое описание, оставив только лого. Для красивого отображения длинных названий некоторых брендов в списке мы задали несколько правил переноса слов, в зависимости от пробелов и количества символов.
Обнаружили лайфхак, позволяющий не только обесцветить любые изображения с помощью кода, но и сделать их светлее, чем они есть, не прибегая к помощи дизайнера. Значительно упростили жизнь заказчику, так как теперь изображения можно загружать сразу с белым фоном.
Список брендов
Также есть отдельная страница со списком брендов, которая позволяет удобно посмотреть их все и упрощает навигацию по сайту.
Страница бренда
Для каждого бренда предусмотрена отдельная страница с его описанием — все они соответствуют единой структуре.
В административной панели установили CKEditor — редактор, позволяющий вносить свой текст и свободно его форматировать как с помощью инструментов, так и в формате HTML.
Благодаря редактору заказчик в любой момент может скрыть бренд, добавить новый, заполнить и отредактировать в нем информацию по своему усмотрению.
Все текстовые поля в административной панели дублируются: для русской и английской версии сайта.
Также в административной панели мы реализовали возможность загружать документы в формате .pdf и .doc. При необходимости администратор может добавить один и тот же документ на разных языках: пользователю будет отображаться нужная версия.
О компании
Чтобы не плодить лишние страницы, на каждой из которых планировалось не так много информации, мы решили объединить страницы «О компании» и «Партнерам» в одну.
Страница содержит текстовую информацию с ключевыми фактами о компании, список ключевых сотрудников с фото, а также информацию для партнеров и поставщиков с возможностью скачать нужные документы.
Список текущих партнеров отображается на главной странице в виде слайдера с логотипами. При добавлении нового партнера можно выбрать языковую версию сайта, на которой он будет отображаться, а также указать порядковый номер специально для каждой версии.
Стать партнером
Добавили форму заявки, которая позволила бы посетителям сайта, заинтересованным в партнерстве, оставить свои контактные данные.
Все заявки, которые пользователь оставляет на сайте, администратор может увидеть не только на почте, но и в административной панели.
Контакты
Страницу «Контакты» мы сделали классической: она содержит карту, адрес и форму обратной связи.
Карта и офисы редактируются в административной панели. Заказчик может добавлять новый офис, задавая все необходимые параметры: координаты на карте, адрес, телефон, электронный адрес.
MTA Group — международная компания с представительствами в Казахстане и ОАЭ. Вместо Яндекс.Карт мы использовали Leaflet — одну из наиболее популярных картографических библиотек с открытым исходным кодом, которая работает без дополнительных регистраций или SMS.
Сознательно отказались от подмены по IP-адресу, чтобы не усложнять сайт функционалом, который может сбоить при использовании VPN, а также в других возможных случаях не выполнять нужную функцию.
Результат
Разработали для MTA Group минималистичный сайт с каталогом брендов. Рассказали о компании потенциальным партнерам, а также показали многообразие брендов-производителей, с которыми она работает, и чьи товары может предоставить для реализации магазинам.
Упростили процесс коммуникации для потенциальных партнеров и поставщиков за рубежом. Увеличили информационную открытость компании, сформировали имидж надежного участника международного рынка.