Разработка сайта интернет‑магазина кабельной продукции

Создание сайта для интернет-магазина кабельной продукции Квадро-Импэкс.

Квадро-Импэкс — один из самых мощных игроков на рынке кабельной продукции. Но из старого сайта это не считывалось. Было непонятно, чем компания круче конкурентов.

Мы провели аналитику, чтобы выявить конкурентные преимущества:

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

Дополнительно проработали блоки доверия:

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

Переработали каталог и построили новую фильтрацию:

• область применения,
• марка кабеля,
• количество жил,
• сечение жилы,
• изоляция,
• тип жилы (материал),
• наличие экрана,
• наличие брони.

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

Чтобы продумать удобство и логику сайта, сделать его интуитивно понятным для пользователя, дизайнер построил прототип — это чёрно-белая схема страниц сайта, которая включает контентные блоки, навигационные и конверсионные элементы. Если по прототипу, без дизайна, понятно, как взаимодействовать с сайтом, значит, и готовый сайт будет удобным.

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

Формы в подвале и меню:

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

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

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

Заказчику мы предложили 3 концепции, основываясь на проведенной аналитике и на визуальном исследовании.

Одной из концепций был метро-стиль или карточный дизайн. Заказчик от неё отказался, посчитав тяжёлой. Но в итоговом дизайне мы частично вернулись к ней и позаимствовали некоторые приёмы. В процессе визуального исследования было принято решение ориентироваться на стилистику минимализма.

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

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

По итогу остановились на двух оттенках, которые отлично смотрятся на тёмном фоне и подходят для данной ниши.

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

Мы предложили несколько вариантов оформления первого экрана:

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

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

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

В дизайне мы использовали необычный визуал слайдеров, который удобен, но смотрится интереснее и креативнее традиционных вариантов:

В проекте мы построили UI-kit, который содержал в себе все элементы дизайна сайта: от стилей полей до оформления текстовых блоков и других элементов.

Сложной задачей было оформить справочник кабельной продукции так, чтобы там было просто ориентироваться. Обычно у конкурентов это килотонная портянка текстов вниз, где ничего не найти. Мы решили поделить всё на разделы по алфавиту, для удобного поиска.

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

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

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

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

Отдельного внимания заслуживает карточка товара. Она у нас тоже нестандартная.

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

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

Дизайн самой карточки мы проработали так, чтобы она получилась информативной, при этом структурированной и удобочитаемой.

По техническому заданию мы должны были верстать сайт в контейнере — то есть, располагать контент в фиксированной ширине экрана. Но когда сайт был готов, заказчик посмотрел его на широкоформатном мониторе и изменил своё решение. Чтобы избавиться от «ушек» по бокам экрана, мы предложили перейти на резиновую вёрстку: так контент будет «растягиваться» пропорционально размеру экрана пользователя. Чтобы уложиться в срок, пришлось сжать булки, ускориться и перепилить часть стилей под новые требования.

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

Благодаря этому решению, оперативно натянули готовую вёрстку на WordPress, создали административную панель и подтянули контент из базы данных без особого изменения html-кода страниц.
В проекте использованы необычные анимационные решения, чтобы сделать сайт запоминающимся и улучшить пользовательский опыт.

Нестандартная анимация фото на обложке главной страницы:

Анимация обводки прозрачных кнопок при наведении мыши, которая создаёт эффект тока, пробегающего по проводам: