Дизайн сайта производителя отделочных материалов премиум-класса «ОРТОГРАФ»

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

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

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

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

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

Наглядно сравнить до и после можно ниже 👇 (двигайте ползунок влево-вправо) :

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

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

Еще ранее существовала проблема связанная с тем, что некоторые изображения в каталоге имели несколько цветовых вариаций, которые были «разбросаны» по каталогу. И были ситуации, когда покупателю нравилось изображение, но не нравилось цветовое исполнение, а о наличии других оттенков изображения он знать не мог. Мы реализовали функционал объединения таких изображений в группы, и в листинге у них теперь стоит метка с количеством существующих оттенков.

В карточке изображения мы:

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

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

А еще привели в порядок страницу оформления заказа и упростили этот процесс из двух шагов до одного.

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

Предлагаем и вам оценить результат:

Обе стороны остались довольны результатом: Заказчик согласно своему запросу получил сайт с эстетичным и уютным дизайном, пользоваться которым стало приятнее и проще с любого устройства; а мы получили удовольствие от процесса, оправданных ожиданий нашего давнишнего клиента и продолжаем его получать в рамках текущей работы по SEO-продвижению :)

Сроки: 11 месяцев от начала до релиза, включая разработку дизайна в течение 6 месяцев.