Задачи
- Разработать интерфейс пользователя для онлайн-магазина на базе CMS «1С.Битрикс», спроектировать основной шаблон проекта и дополнительные схемы внутренних страниц.
- Создать мобильную версию сайта, весь функционал должен быть доступен для всех мобильных устройств. Подключить специальные модули «Интренет-магазин», «Корзина», «Оформление заказа».
- Определить логическую древовидную структуру наполнения сайта внутренними страницами, уделить внимание разделу «Каталог».
- Подготовить проект к продвижению в поисковых системах Google & Yandex
Крупнейшая металлобаза в санкт-петербурге
О компании
ООО «НЕОТЕХ» – это база по продаже металлопроката, расположена в Санкт-Петербурге. Главное направление деятельности — это продажа, хранение, доставка проката из нержавеющих и черных металлов. Также ООО «НЕОТЕХ» организовало собственное производство заготовок и трудоемких металлических конструкций по чертежам заказчика. Основными клиентами компании являются промышленные предприятия и строительные компании по всей России. На складах фирмы имеется необходимый запас самых ходовых позиций металлопроката. Компания располагает личным парком грузовых автомобилей, также владеет спецтехникой, поэтому клиентам доступны несколько вариантов доставки.
UI\UX disign
Сайт интернет-магазина должен быть максимально информативным, в то же время иметь приятный дизайн, чтобы посетитель был сконцентрирован на предлагаемой продукции. Итак, общая информация о компании выводится в верхней части шаблона: главное меню, контакты, логотип, режим работы. Кнопка «Заказать звонок» – продающий элемент сайта, превращающий посетителя в «лида» – потенциального клиента компании. Слайдер на всю ширину экрана для вывода ТОП предложений, акций, услуг компании – первое на что обратит внимание посетитель. Далее выводится каталог продукции и блок услуг ООО «НЕОТЕХ». Каждый блок, при нажатии на ссылку, переводит пользователя на продающую страницу с полным описанием товара или услуги. Откуда, уже можно оформить заказ.
Цветовая палитра и шрифтовая группа
Что представляет ООО «НЕОТЕХ» для потребителей – это большой ассортимент металлопроката, а также сварку готовых металлических конструкций. Оформление каталога продукции и страниц описания услуг содержат фотографии товаров и процесса производства. Общий стиль онлайн-магазина должен гармонировать с наполнением страниц, выделять сферу деятельности компании. Наши дизайнеры приняли это во внимание и решили использовать три базовых оттенка для шаблона «specprommet.ru».
«Пылкий красно-оранжевый» оттенок, как свечение раскаленного метала, нужен для выделения основных блоков и компонентов сайта, цвет логотипа, кнопок, фон разделов каталога, ссылок, прочее. Чистый «Черный цвет», использован для выделения заголовков, как фон пунктов главного меню, для отображения иконок. Цвет «Светло-серый Гейнсборо», был выбран для вывода текста на всех страницах сайта, он хорошо читается на «Белом» фоне.
Заголовки на «specprommet.ru» отображаются шрифтом «Lato-Bold», он имеет особые оригинальные нюансы в начертании при больших размерах текста. Остальной текст изображается шрифтом «Ubuntu, sans serif», представляет семейство шрифтов без засечек. Он используется уже более 10 лет на всех платформах, в том числе в одноименной операционной «Linux» системе.
Калькулятор
Модуль «Калькулятор» был специально разработан и написан для проекта «specprommet.ru». Он позволяет в режиме реального времени рассчитать вез изделия и длину готовой конструкции или партии товаров. Также представлен каталог марок по материалам из которых изготавливается продукция. С помощью «ГОСТов» можно найти все технические условия на производство и применение готовых металлических конструкций.
Модуль «интернет-магазин»
Продажа товаров происходит с помощью готовых онлайн решений, используется комплексное программное обеспечение интегрированное с каталогом товаров на сайте. Ежедневно ООО «НЕОТЕХ» выполняет свыше сотни сделок и заказов. Весь документооборот готовиться в автоматическом режиме, ассортимент регулярно обновляется в базе данных и автоматически выводятся с каталогом на сайте.
По этому для них специально мы разработали новую структуру сайта
Центральное место в структуре проекта «specprommet.ru» отведено разделам «Каталог» и «Наши Услуги». Они изображены как логическая древовидная система страниц и разделов согласно прайсе компании. Каждый отдельный пункт – это специально созданная нами продающая страница, перейдя на которую пользователь получит всю необходимую информацию и сможет оформить заказ. Остальные разделы являются информативными, содержат дополнительную информацию о компании, процессе заказа, контактах.
Результаты
К завершению 2017 года, интренет-магазин «specprommet.ru» был выложен в Интернет. Заказчик в полном объеме принял выполненную работу, а также дал высокую оценку специалистам Digital Agency "ST". Мы «с чистого листа» создали UI-интерфейс, дизайн сайта, разработали логотип компании, структуру и макеты всех внутренних компонентов. Наши программисты выполнили верстку с учетом требований поисковых систем к оптимизации сайта. Была подготовлена мобильная версия магазина «specprommet.ru» с поддержкой полного функционала «desctop-версии». Подключены необходимые модули, разработан «с нуля» компонент «Калькулятор», проведена интеграция с ПО учета продукции.
С выходом сайта стартовало продвижение в основных поисковых системах Google & Yandex, также запущена реклама на других интернет-ресурсах, в социальных сетях. Через некоторое время, сайт «specprommet.ru» был выведен на первые страницы выдачи Google & Yandex по нескольким поисковым фразам. Следовательно, посещаемость «specprommet.ru» увеличивается от месяца к месяцу. Благодаря современному продуманному интерфейсу конверсия составляет 36% от общего числа посетителей.