Этот веб-сайт использует файлы cookie, чтобы обеспечить вам максимальное удобство.
OK

редизайн сайта

по теме резки

керамогранита

и обработки

редизайн сайта по

теме резки

керамической плитки

и обработки

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

Компания Гранитериум специализируется на услугах по резке и обработке керамической плитки и керамогранита. За более чем 20 лет присутствия на рынке стала одними из лидеров в своем сегменте.

сроки разработки:
2 месяца

1. Переработка смысловой структуры и редизайн основных страниц в Figma (без верстки) с адаптациями под все устройства;
2. Удобное, проработанное до мелочей меню;
3. Обновленная главная страница;
4. Продающие карточки товара и услуги;
5. Удобный каталог готовых изделий с фильтрами;
6. Стильная страница “О компании”;

особенности проекта:

7. Переработанные страницы с услугами и разделами услуг;
8. Лаконичная страница с контактами;
9. Продающая страница-портфолио с подробной информацией по каждому проекту;
10. UI-кит под новую версию дизайна;
11. Открытый квиз на главной странице для повышения конверсии.

о проекте:

Рассказываю о проекте в двух словах:

1) Это был уже второй сайт для этого заказчика. В первый раз мы с ними работали над другим проектом — сайтом для компании “Линкер” (подробнее об этом кейсе). “Линкер” — это оптовый поставщик керамогранита и керамической плитки, а “Гранитериум” больше специализируется на услуге резки и обработки керамогранита и керамической плитки.

Мы отлично сработались с заказчиком на первом проекте, поэтому они также решили заказать у меня редизайн для “Гранитериума”. Задачей было сделать редизайн старого сайта, так как он был сделан по шаблону и имел не очень представительный вид. Необходимо было сделать уникальный, современный дизайн в Figma, который затем технический специалист сверстает на коде.

Вот так выглядел сайт до редизайна:

4) Мы детально проработали меню. На старом меню все было в кучу, ничего не понятно. Сейчас меню выглядит лаконично, читабельно, и посетителям сайта понятно, куда смотреть и куда нажимать. Выделили номер телефона, мессенджер WhatsApp, кнопку "Оставить заявку", добавили кнопку «Избранные». Также выделили поиск, потому что поиск — очень важная деталь на многостраничных сайтах с каталогами. Таким образом, меню стало аккуратным и интуитивно понятным.

5) Главная страница — это лицо сайта, это первое, что видит человек. На ней мы выделили отзывы клиентов, чтобы подчеркнуть репутацию компании. У Гранитериума как раз было огромное количество отзывов на 5 звезд. Разместили оффер, который объясняет, для кого подходят услуги резки, с акцентом на целевые аудитории: дизайнеры и архитектурные бюро, застройщики и проектные организации, строительные компании и производители. Добавили две кнопки — «Перейти в каталог» и «Получить консультацию» — помогают пользователям сразу выбрать нужное действие.

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

6) Преобразили визуально карточку товара, она стала более понятной, читабельной. Добавили туда внутренние фильтры для товара (выбор материала, насечки, размеры, количество изделий). Разместили кнопки “Заказать” и “Рассчитать стоимость”. Калькулятор рассчитывает необходимое количество плитки, исходя из площади, характеристик и других параметров.

7) В карточку услуг добавили скидку от объема, кнопки “Заказать” и “Получить оптовые цены”. В описании разместили таблицу с размерами ступней и керамогранита с расчетом за штуку, чтобы визуально было понятно, из чего складывается стоимость.

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

9)В каталог готовых изделий добавили удобные фильтры по дизайну, поверхности, цвету, размеру и цене. Выделили цветом кнопки “Заказать”.

10) Старая страница “О компании” состояла в основном из текста с размытыми формулировками, например, “дружная команда”, “большой опыт”, широкий ассортимент” и т.д. Мы добавили четких фактов с цифрами: “более 20 лет работаем с керамогранитом”, “более 6000 довольных клиентов”, “более 100 000 м2 керамогранита в наличии”, “скидки от объема до -50%”. Также помимо проработки смысловой составляющей, мы добавили графические элементы и видео о процессе работы. Добавили блоки “Нам доверяют” и “Наши партнеры”, где разместили логотипы крупных заказчиков и партнеров компании. Выделили преимущества и добавили формы для заявок.

11) На странице услуг по резке в карточки услуг мы добавили кнопки “Заказать” и “Подробнее”, разместили видео о том, как происходит резка, добавили формы для заявок и блок “Наши партнеры”.

12) На странице с разделом услуг добавили продающих смыслов: “60 минут минимальное время заказа”, “10 станков для абразивной и 3D резки”, “более 6000 довольных клиентов”. Возле услуги разместили кнопки “Читать подробнее”, “Оставить заявку” и “Получить оптовые цены”. Выделили информацию о скидке за объем, добавили призыв к действию “Получить расчет и скидку!”, а также разместили ответы на часто задаваемые вопросы.

13) На странице с контактами добавили кликабельную кнопку “Написать в Whatsapp”, чтобы у человека была возможность связаться не только по телефону. Добавили на страницу блок “Наши партнеры” для повышения лояльности аудитории, так как компания сотрудничает с крупными партнерами.

14) Параллельно с тем, как создавался дизайн, заказчик оставлял комментарии в макете Figma, а мы вносили по ним корректировки. Заказчику очень понравилась работа, он отдал сайт на верстку. Проект классно завершился, и заказчик остался очень доволен.

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

Сайт достаточно большой, поэтому мы решили обновить 8 основных страниц: главная страница, каталог готовых изделий, карточка товара, страницы с услугами, страница о компании, портфолио и контакты. Я подобрала референсы для вдохновения, согласовала их с заказчиком, мы обсудили, что нравится, а что нет. И далее перешли к смысловой структуре. Мы переработали тексты и смыслы на всех страницах сайта.

3) После этого дизайнер приступил к созданию дизайна сайта с готовыми референсами и текстами. UI-кит был полностью создан под новую версию дизайна, мы полностью ушли из шаблонного варианта в уникализированный. UI-кит подробно определяет все элементы дизайна: кнопки, иконки, меню, поп-апы, квизы, шрифты, размеры, цветовые решения, формы для заявок. Он показывает, как элементы выглядят в статике, при наведении, при клике, с адаптациями под разные устройства. Создание UI-кита облегчает дальнейшую верстку и гарантирует, что после после верстки сайт будет выглядеть так, как он задумывался на этапе дизайна.

главная страница:

страница товара:

страница
с разделом услуг

страница о компании:

страница
о компании: