Октябрь 19, 2018

Кейс: редизайн сайта на Битриксе

Кейс: редизайн сайта на Битриксе

E-commerce и веб-разработка развиваются очень быстро, и то, что ещё несколько лет казалось стильным, красивым, удобным, сегодня не вызывает схожих чувств, не обеспечивает желаемого впечатления и конверсии. По этой причине наши клиенты часто сталкиваются с мыслью об редизайне своего сайта/интернет магазина, его обновлении добавления новых, интересных и современных модулей.

С намерением заказать и сделать редизайн сайта на Битрикс к специалистам Webnauts обратилась компания «Оптика Нева» (Санкт-Петербург). Оптовый интернет-магазин этой компании, созданный в конце 2010-х, выглядел архаично и нуждался в визуальном обновлении.

О проекте

Компания Opticaneva.ru работает с 2007 года и занимается оптовой продажей очковой оптики из Китая на российский рынок и страны СНГ. Так как компания довольно крупная и работает уже больше 10 лет, большинство товаров она продает через свой сайт Opticaneva.ru,

С этим клиентом мы уже работали ранее по задаче разработки интерактивной карту доставки для сайта: https://webnauts.pro/blog/razrabotka-interaktivnoj-karty-dostavki-dlya-sajta/. Клиенту понравилась наша работа, и он решил продолжить сотрудничество и освежить дизайн своего сайта без нарушения функционала.

Нам был предоставлен макет главной страницы десктоп версии и макет главной страницы мобильной версии. А вот как выглядел сайт до редизайна:

Кейс: редизайн сайта на Битриксе

Редизайн сайта на Битрикс шаг за шагом

Хедер

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

Кейс: редизайн сайта на Битриксе

Меню

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

Было:

Кейс: редизайн сайта на Битриксе

Стало:

Кейс: редизайн сайта на Битриксе

Баннер

Поместили на главную большой баннер, демонстрирующую продукцию и привлекающий внимание к основным конкурентным преимуществам компании:

Кейс: редизайн сайта на Битриксе

Каталог

Далее мы переработали каталог, привели изображения в соответствие с новым дизайном:

Было:

Кейс: редизайн сайта на Битриксе

Стало:

Кейс: редизайн сайта на Битриксе

Футер

Также был полностью переработан футер (до редизайна там были только ссылки на разделы сайта):

Кейс: редизайн сайта на Битриксе

Прайс-листы

Переработали полностью страницу с прайс-листами, добавили большие блоки-ссылки с красивой анимацией при наведении:

Кейс: редизайн сайта на Битриксе

Формы обращения

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

Было:

Кейс: редизайн сайта на Битриксе

Стало:

Кейс: редизайн сайта на Битриксе

Новостной раздел

Далее мы выполнили редизайн новостного раздела сайта, страницы акции и скидки, добавили красивую анимацию при наведении:

Кейс: редизайн сайта на Битриксе

Корзина

Освежили дизайн стандартной корзины Битрикс в соответствии с общей стилистикой интернет-магазина:

Кейс: редизайн сайта на Битриксе

Слайдеры для мобильного отображения + адаптивный футер

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

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

Кейс: редизайн сайта на Битриксе
Кейс: редизайн сайта на Битриксе
Кейс: редизайн сайта на Битриксе

Адаптивность хедера

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

Кейс: редизайн сайта на Битриксе
Кейс: редизайн сайта на Битриксе

Отображение на планшетах

Все страницы сайта адаптивны, удобны и хорошо читаются на любом из разрешений от 320 до 1920 пикселей. Пример отображения страницы каталога в планшетной версии:

Кейс: редизайн сайта на Битриксе

Результаты

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

Редизайн сайта с сохранением позиций

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

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

Кейс: редизайн сайта на Битриксе

Оставьте комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *


Scroll Up