Gabitex

Задачи и концепция

Официальный сайт для фабрики дверей “Gabitex”, которая является одним из лидеров российского рынка межкомнатных скрытых дверных систем. Компания специализируется на индивидуальном производстве по собственным технологиях и чертежам с применением комплектующих материалов из Италии.
Задача

Разработка многостраничного официального сайта дверной фабрики “Gabitex”, который должен полноценно представлять её и её продукцию в Интернете. Кроме того, на нём должны быть предусмотрены возможности для подбора пользователем нужной конфигурации системы и её заказа. Он должен заинтересовывать посетителя и вызывать у него желание приобрести по-настоящему качественные двери для своего жилья.

Решение

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

Этапы
  • UX-дизайн
  • Проектирование и дизайн
  • Desktop- & Mobile-версии
  • Анимация
  • Разработка конфигуратора
  • Работа с контентом
  • Тестирование и релиз

Дизайн

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

Мы попытались создать ощущение мягкости и природности, сделать интерфейс схожим со сложной фактурой дерева.

22 уникальных блока
40 состояний и поп-апов
3 размера экрана
Дизайн страниц Gabitex

Типографика и цветовая схема

Open Sans
  • Ab
  • Black
  • Bold
  • Ab
  • Regular
  • Light
  • #3A3230
  • #AB7948

Варианты первого экрана

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

Страница каталога дверей

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

Карточка двери

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

Результат

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

Сокращена нагрузка на менеджеров, поскольку покупатель видит предлагаемые ему возможности сам.

Mobile версия

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

Результаты порадовали и нас и нашего заказчика. На смартфонах сайт выглядит превосходно, а пользоваться им – одно удовольствие!

Планшет

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

Прототипы

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

Компьютер

Прототипы страниц проекта Gabitex
Прототипы страниц проекта Gabitex

Планшет

Прототипы страниц проекта Gabitex
Прототипы страниц проекта Gabitex
Прототипы страниц проекта Gabitex

Мобильная версия

Прототипы страниц проекта Gabitex
Прототипы страниц проекта Gabitex
Прототипы страниц проекта Gabitex
Прототипы страниц проекта Gabitex

Нужна сильная команда?

Выберите интересующую вас услугу

Следующий проект

Смотреть проект
Kolorika