О проекте
Разработка интернет-магазина кабельной продукции компании «Квадро-Импэкс».
«Квадро-Импэкс» — поставщик кабельной продукции. Сайт компании устарел и не соответствовал её позиционированию и лидерству на рынке.
Но проблема заключалась не только в визуальной составляющей. Сайт развивался хаотично, и со временем структура стала слишком сложной, а навигация запутанной. Клиентам было трудно найти продукцию в каталоге, сайт практически не привлекал покупателей.
Перед студией стояла задача: разработать современный веб-сайт, который бы имел понятную структуру и навигацию, был удобен, визуально привлекателен.
«Квадро-Импэкс» — поставщик кабельной продукции. Сайт компании устарел и не соответствовал её позиционированию и лидерству на рынке.
Но проблема заключалась не только в визуальной составляющей. Сайт развивался хаотично, и со временем структура стала слишком сложной, а навигация запутанной. Клиентам было трудно найти продукцию в каталоге, сайт практически не привлекал покупателей.
Перед студией стояла задача: разработать современный веб-сайт, который бы имел понятную структуру и навигацию, был удобен, визуально привлекателен.
АНАЛИТИКА
Квадро-Импекс — один из ведущих игроков на рынке кабельной продукции. Но это было неочевидно из информации на старом сайте, оставалось неясным, чем компания лучше конкурентов.
Мы провели анализ, чтобы определить конкурентные преимущества:
— бесплатное хранение заказанных товаров на складе компании до отгрузки;
— свой автопарк, чтобы организовывать доставку с учётом специфики продукции во все регионы, даже труднодоступные;
— свой склад, обеспечивающий оперативное выполнение заказов благодаря постоянному наличию товара;
— возможность отсрочки платежа, прописанная в договоре.
Мы проработали разделы, формирующие доверие пользователей:
— Отзывы и благодарности клиентов на фирменных бланках с указанием их реквизитов и заверенные печатями.
— Экспертный контент в блоге и новостных статьях. Эти разделы решают разные задачи: статьи о выборе продукции и её особенностях помогают пользователям, улучшают поведенческий фактор, а новости информируют об актуальных событиях в отрасли и компании, обновлении ассортимента, акциях.
— Кейсы, как Квадро-Импекс поставляет кабельную продукцию в труднодоступные регионы, предлагает специальные условия для транспортировки кабелей, осуществляет монтаж продукции.
— Ответы на часто задаваемые вопросы, которые помогают развеять сомнения потребителей.
— Карточки товаров с подробными характеристиками, отзывами, сертификатами соответствия, подтверждающими качество товаров.
— Участие в тематических выставках и отраслевых мероприятиях.
Мы пересмотрели структуру каталога и внедрили новую систему фильтрации, которая включает следующие категории:
— Область применения.
— Марка кабеля.
— Тип жилы (материал).
— Количество жил.
— Сечение жилы.
— Изоляция.
— Наличие экрана.
— Наличие брони.
Мы провели анализ, чтобы определить конкурентные преимущества:
— бесплатное хранение заказанных товаров на складе компании до отгрузки;
— свой автопарк, чтобы организовывать доставку с учётом специфики продукции во все регионы, даже труднодоступные;
— свой склад, обеспечивающий оперативное выполнение заказов благодаря постоянному наличию товара;
— возможность отсрочки платежа, прописанная в договоре.
Мы проработали разделы, формирующие доверие пользователей:
— Отзывы и благодарности клиентов на фирменных бланках с указанием их реквизитов и заверенные печатями.
— Экспертный контент в блоге и новостных статьях. Эти разделы решают разные задачи: статьи о выборе продукции и её особенностях помогают пользователям, улучшают поведенческий фактор, а новости информируют об актуальных событиях в отрасли и компании, обновлении ассортимента, акциях.
— Кейсы, как Квадро-Импекс поставляет кабельную продукцию в труднодоступные регионы, предлагает специальные условия для транспортировки кабелей, осуществляет монтаж продукции.
— Ответы на часто задаваемые вопросы, которые помогают развеять сомнения потребителей.
— Карточки товаров с подробными характеристиками, отзывами, сертификатами соответствия, подтверждающими качество товаров.
— Участие в тематических выставках и отраслевых мероприятиях.
Мы пересмотрели структуру каталога и внедрили новую систему фильтрации, которая включает следующие категории:
— Область применения.
— Марка кабеля.
— Тип жилы (материал).
— Количество жил.
— Сечение жилы.
— Изоляция.
— Наличие экрана.
— Наличие брони.
В результате анализа была оптимизирована структура и глубина вложенности сайта, что позволило упростить поиск товаров и улучшить навигацию.
прототип
Для обеспечения удобства и логичности сайта, а также интуитивного понимания его структуры пользователем, дизайнер создал прототип — это чёрно-белая схема страниц, включающая информационные блоки, навигационные и конверсионные элементы. Если по прототипу без визуального оформления становится ясно, как взаимодействовать с сайтом, то и итоговый вариант будет комфортным для пользователей.
В прототипе дизайнер предусмотрел формы для заявок, чтобы не упустить потенциальных заказчиков. На странице с результатами поиска мы добавили форму с предложением обратиться к менеджеру для получения дополнительной информации о товаре.
Формы в подвале и меню:
Мы создали функцию сортировки по алфавиту. Теперь при добавлении новых данных в каталог или справочник информация автоматически размещается в соответствующей категории на сайте.
дизайн
Дизайна сайта кабельной продукции - одновременно интересная и сложная задача. Сайты в этой отрасли часто перегружены информацией и имеют сложную структуру, что затрудняет восприятие. Найти подходящие референсы оказалось непросто.
Перед нами стояла задача: создать привлекательный и удобный дизайн, что сложно реализовать, учитывая обилие разнообразной кабельной продукции, которая сама по себе не выглядит привлекательно.
Мы предложили заказчику три концепции, основанные на анализе данных и визуальных исследованиях. Одна из них предполагала использование стиля «метро» или карточного дизайна. Однако заказчик посчитал эту концепцию слишком тяжёлой. Тем не менее, в итоговом варианте дизайна мы частично использовали её элементы. В ходе визуального исследования было решено сосредоточиться на минимализме.
Перед нами стояла задача: создать привлекательный и удобный дизайн, что сложно реализовать, учитывая обилие разнообразной кабельной продукции, которая сама по себе не выглядит привлекательно.
Мы предложили заказчику три концепции, основанные на анализе данных и визуальных исследованиях. Одна из них предполагала использование стиля «метро» или карточного дизайна. Однако заказчик посчитал эту концепцию слишком тяжёлой. Тем не менее, в итоговом варианте дизайна мы частично использовали её элементы. В ходе визуального исследования было решено сосредоточиться на минимализме.
Первая и третья концепции основывались на этом стиле, различаясь только оформлением меню. В первом случае мы предложили выделить треть экрана под скользящее меню сайта. Это было оригинальное решение, но в итоге от него отказались, так как клиенту было бы сложно обслуживать такой сайт в будущем. Мы выбрали третью концепцию: минимализм и простота.
Клиент хотел тёмный сайт, что необычно для компаний, работающих с кабельной продукцией. Фирменный оранжевый цвет компании мы решили сохранить, чтобы была преемственность, но предложили изменить его оттенок, так как предыдущий выглядел дёшево и неопрятно.
Клиент хотел тёмный сайт, что необычно для компаний, работающих с кабельной продукцией. Фирменный оранжевый цвет компании мы решили сохранить, чтобы была преемственность, но предложили изменить его оттенок, так как предыдущий выглядел дёшево и неопрятно.
В итоге мы выбрали два оттенка, которые хорошо сочетаются с тёмным фоном и соответствуют специфике отрасли.
Сложность заключалась в отсутствии качественных изображений. У заказчика их было недостаточно, а на стоках трудно найти подходящие фотографии кабелей. Однако мы нашли подходящую подборку изображений и использовали их в проекте. Мы следовали цветовой гамме сайта и выбирали изображения чёрных, красных и жёлтых (медных) проводов, чтобы избежать стандартных синих и белых оттенков.
Мы предложили несколько вариантов оформления главной страницы:
Клиент выбрал третий вариант, и в этом случае мы частично вернулись к стилю «метро». Кроме того, было решено использовать много вертикальных линий для чёткого разделения экрана на секции.
Дизайн блока с карточками разделов вызвал разногласия. Мы хотели отойти от простого списка и создать премиальный визуальный образ с использованием фотографий. Однако качество фотографий оставляло желать лучшего, и размещение их в карточках могло ухудшить общее впечатление.
Вместо этого мы решили использовать векторные иллюстрации вместо части фотографий, что облегчило блок и добавило премиальности общему дизайну страницы. В результате получился лёгкий, чистый и информативный блок, который легко воспринимается пользователями.
Вместо этого мы решили использовать векторные иллюстрации вместо части фотографий, что облегчило блок и добавило премиальности общему дизайну страницы. В результате получился лёгкий, чистый и информативный блок, который легко воспринимается пользователями.
В дизайне мы применили оригинальный стиль слайдеров, который удобен, но выглядит более интересно и креативно по сравнению с традиционными вариантами.
В рамках проекта мы создали UI-kit, включающий все элементы дизайна сайта: от стилей полей до оформления контентных блоков и прочих компонентов.
Одной из трудных задач было создание справочника кабельной продукции с удобной навигацией. Часто у других компаний такой справочник представляет собой огромный текстовый блок, в котором сложно разобраться. Мы решили разделить информацию на разделы по алфавиту для упрощения поиска.
Для удобства навигации по большим блокам контента мы структурировали разделы.
Чтобы представить информацию о партнёрах, мы разработали оригинальную идею: плавно разворачивающийся блок, доступный по нажатию на логотип. В этом блоке размещаются все данные: текст, фотографии, сертификаты и лицензии. Важная особенность этого решения заключается в том, что визуальное оформление блока остаётся элегантным и лёгким, не теряя своего привлекательного вида.
Блок новостей оформлен в две колонки. Мы отказались от использования больших фотографий, поскольку в новостях компании обычно размещается информация о поступлении кабелей на склад, красивых фото, чтобы показать это – не было, да и вообще они здесь не нужны. Список новостей стал более структурированным и удобным для чтения.
Разделы с заголовками мы обозначили тонкими горизонтальными линиями. Множество линий на странице выполняют как функциональную, так и концептуальную роль. С одной стороны, они разделяют информацию на отдельные блоки и позволяют читать её порциями, а с другой — линии в дизайне символизируют кабели, словно провода тянутся через весь сайт.
Особое внимание мы уделили оформлению карточки товара. Обычно карточки в каталоге содержат крупные квадратные фотографии по три-четыре штуки в ряд с указанием названия продукта. Однако в этой категории товаров не требуется крупное подробное изображение, так как кабели выглядят практически одинаково, и покупатель не будет выбирать товар по картинке. Тем не менее, мы решили оставить фотографии, чтобы избежать длинных громоздких списков товаров, как у конкурентов.
Пользователи выбирают кабели, ориентируясь на название и маркировку, поэтому именно эта информация находится на первом месте в карточке товара. Благодаря такому подходу мы смогли разместить в превью карточки большое количество полезной и необходимой информации о продукте.
Особое внимание мы уделили оформлению карточки товара. Обычно карточки в каталоге содержат крупные квадратные фотографии по три-четыре штуки в ряд с указанием названия продукта. Однако в этой категории товаров не требуется крупное подробное изображение, так как кабели выглядят практически одинаково, и покупатель не будет выбирать товар по картинке. Тем не менее, мы решили оставить фотографии, чтобы избежать длинных громоздких списков товаров, как у конкурентов.
Пользователи выбирают кабели, ориентируясь на название и маркировку, поэтому именно эта информация находится на первом месте в карточке товара. Благодаря такому подходу мы смогли разместить в превью карточки большое количество полезной и необходимой информации о продукте.
Мы продумали дизайн карточки, чтобы она была максимально информативной, структурированной и легко читаемой.
Вёрстка
Согласно ТЗ, мы должны были верстать сайт с использованием контейнеров, то есть размещать контент в фиксированной ширине экрана. Однако после завершения работы заказчик посмотрел на готовый продукт на широкоформатном мониторе и решил внести изменения.
Для устранения боковых «ушей» мы предложили перейти на резиновую вёрстку, чтобы контент адаптировался к различным размерам экрана пользователей. Для того чтобы уложиться в установленные сроки, нам пришлось ускориться и адаптировать стили под новые требования.
Для устранения боковых «ушей» мы предложили перейти на резиновую вёрстку, чтобы контент адаптировался к различным размерам экрана пользователей. Для того чтобы уложиться в установленные сроки, нам пришлось ускориться и адаптировать стили под новые требования.
Для упрощения разработки на этапе создания административной панели, сокращения сроков выполнения работ, экономии бюджета заказчика и улучшения качества кода, мы применили шаблонизатор Pug и миксины. Pug даёт возможность создавать гибкие модульные шаблоны, а миксины облегчают повторное использование кода и упрощают его поддержку.
Благодаря этому решению, мы быстро установили готовую вёрстку на WordPress, разработали административную панель и загрузили контент из базы данных без существенного изменения HTML-кода страниц.
В проекте использованы оригинальные анимационные решения для придания сайту запоминающегося вида и улучшения пользовательского опыта.
Нестандартная анимация фото на обложке главной страницы делает сайт более привлекательным и интересным для посетителей:
Благодаря этому решению, мы быстро установили готовую вёрстку на WordPress, разработали административную панель и загрузили контент из базы данных без существенного изменения HTML-кода страниц.
В проекте использованы оригинальные анимационные решения для придания сайту запоминающегося вида и улучшения пользовательского опыта.
Нестандартная анимация фото на обложке главной страницы делает сайт более привлекательным и интересным для посетителей:
Прозрачные кнопки с анимацией обводки, которая при наведении мыши имитирует движение электрического тока по проводам:
© WebValley Studio 2024
Made in: https://web-valley.ru
Education: https://web-valley.ru/academy
Instagram: @alexwhite_mzk
VK: vk.com/webvalley
Telegram news: @webvalley_news
Telegram community: @webvalley_community
Education: https://web-valley.ru/academy
Instagram: @alexwhite_mzk
VK: vk.com/webvalley
Telegram news: @webvalley_news
Telegram community: @webvalley_community
↑ Ready to make a great project :)
