Металлургическая компания Метком-Групп corporate site

О клиенте

Компания метком уже более 21 года занимается закупом, переработкой и оптовой торговлей ломом и отходами цветных и черных металлов. За эти годы они создали бизнес-систему, которая объединяет участников производственного цикла — от поставщиков лома до производителей готовой продукции и металлопроката.

Цель:

Реализовать новый дизайн сайта компании, нацеленный на презентацию своей деятельности для бизнес-сегмента.

Идея:

На начальном этапе разработки мы решили сделать упор на масштабности предприятия и готовности сотрудничать с крупными компаниями. Сайт должен был наглядно демонстрировать все преимущества сотрудничества и презентовать компанию как надежного партнера в сфере металлообрабатывающей промышленности.

Инструменты:

Photoshop

metkom-group.ru

Целевая аудитория

Делится на 5 основных групп:

Крупные металлообрабатывающие компании.
Компании-поставщики лома цветного и черного металлов.
Государственные органы федерального и регионального уровня.

Средства массовой информации: российские федерального и регионального уровня, зарубежные отраслевые.
Контрагенты: взаимодействие по услугам компании.

Задачи

Имиджевая

Создание современного дизайна сайта, соответствующего статусу компании.

Ориентация на b2b сегмент

Четкая ориентация на ожидания и потребности целевой аудитории сайта.

Информационная

Дать пользователю исчерпывающую информацию о компании, ее сфере деятельности и возможностях.

Этапы работ

сбор информации

На начальном этапе разработки мы детально изучили отрасль, описали целевую аудиторию будущего сайта и провели исследование конкурентов по данной тематике.

На основе полученных данных, мы составили схему дальнейшей работы.

Прототипирование

На следующем этапе мы составили карту переходов по сайту и составили полную карту сайта.

На основе полученной структуры мы начали отрисовку первого высокодетализированного прототипа сайта, в котором наглядно показали расположение всех графических элементов и их взаимодействие между собой.

Разработка дизайна

Утвердив прототипы, мы взялись за разработку графического решения всех страниц сайта и модальных окон. В дизайне мы использовали фирменный шрифт компании и специально составленную цветовую палитру.

На основе утвержденного дизайна мы написали спецификацию для последующей верстки сайта.

Верстка

Руководствуясь подробным техническим заданием, мы начали верстать сайт. Этот этап оказался самым продолжительным из-за наличия большого количества интерактивных элементов на сайте.

Верстка сайта кроссбраузерна и абсолютно адаптивна, из-за чего одинаково корректно отображается на всех устройствах.

Программирование

На заключительном этапе мы интегрировали сайт в систему управления контентом (CMS) Битрикс 1С и объединили верстку сайта с его функциональной частью.

Структура сайта

Всего было отрисовано: 1 прелоадер, 10 страниц и 1 модальное окно. Главная страница представлена в виде 4 экранов с горизонтальной прокруткой.

пРЕЛОАДЕР

Первое, с чем сталкивается пользователь, заходя на сайт - это прелоадер. Он выполнен в виде логотипа компании с полосой загрузки фирменного цвета. По мере загрузки сайта линия движется слева направо. По окончании загрузки мы переносимся на первый экран главной страницы сайта.

ГЛАВНАЯ СТРАНИЦА

структура и концепция

Главная страница выполнена в виде 4 экранов с описанием деятельности компании, ее особенностей, преимуществ. Самый первый, главный экран выполнен в виде слайдера, каждый слайд тезисное описание преимущества.

Второй экран описывает три основных направления деятельности компании. Четвертый экран - Слайдер с подробным описанием деятельности компании. Пятый слайд - дублирует главное меню для легкого доступа к остальным разделам сайта.

Прототип сайта

Этап прототипирования сайта является важнейшей составляющей, ведь именно хорошо продуманная структура позволяет пользователю без лишних усилий перемещаться по страницам сайта и быстро находить необходимую информацию, что в итоге повышает его лояльность.

Уникальность сайта

Сайт имеет простую структуру и очень лаконичен по своей сути. Но в тоже время предоставляет исчерпывающую информацию о сфере деятельности и направлении развития с целью информирования других крупных металлообрабатывающих компаний или компаний-поставщиков лома цветного и черного металлов о своих возможностях и готовности сотрудничать.

Адаптив

Реализация адаптивной верстки под различные разрешения экрана:

Мобильный телефон (320*568px)
Планшет (768*1024px)
Десктоп (1280*1431px)

Подбор запчастей по марке

Основная задача сайта – дать возможность пользователю быстро найти нужный товар. Для этого на сайте реализован сложный фильтр, позволяющий подобрать запчасти, начиная от марки, заканчивая поколением автомобиля. Простой и понятный интерфейс дает возможность быстро подобрать нужную деталь в несколько кликов. Подгрузка товара без обновления страницы показывает только подходящие товары, что упрощает выбор. В фильтрации участвует большое количество марок, у каждой из которых есть свой перечень моделей и поколений.

Мультиязычность

Так как компания работает не только по России, но и за рубежом, одной из задач стало создание мультиязычности. Для этого на сайте был реализован специальный переключатель языков. Его особенность заключается в том, что он не просто переводит сайт на другой язык. По сути, для каждого языка мы реализовали отдельный сайт, со своим функционалом и наполнением, а также с возможностью включать\выключать блоки и разделы для того или иного языка.

Связи

Одной из самых сложных задач стало создание связей между товарами. В каталоге магазина самые разные запчасти и комплектующие, которые связаны между собой марками и моделями автомобилей. Помимо этого, одна и та же запчасть может быть применима к разным маркам, у нее могут быть аналоги и комплектующие. Все это необходимо было упорядочить и прописать.

ВНУТРЕННИЕ СТРАНИЦЫ

Также были отрисованы еще 8 внутренних страниц:

О холдинге

АДАПТИВ

Согласно техническому заданию, сайт был детально проработан под 2 разрешения экрана:

Настольный монитор 1920*1080px
Мобильный телефон 320*480px

Мобильная версия

Все страницы мобильной версии сохранили полную функциональность сайта. Каждый блок приобрел наиболее удобное для использования на мобильном телефоне графическое решение.