Facade Library

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

«Библиотека фасадов» – строительное бюро, которое оказывает услуги по монтажу фасадов любого типа и любой сложности.
Задача

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

Решение

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

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

Дизайн

При разработке дизайна было принято решение акцентировать внимание на деталях.

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

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

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

Segoe UI
  • Ab
  • Black
  • Bold
  • Ab
  • Regular
  • Light
  • #81A000
  • #A89D8E
  • #F90F0F
  • #DFDFDF

Страница материала Cedral

Страница материала Cedral

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

Путь пользователя на сайте чётко определён:

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

Акцент на изображения:

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

Первый экран, вариант 1

Первый экран, вариант 1

Задача первого экрана – сразу же завлечь посетителя. Мы разработали два варианта макетов, оба – с кликабельными блоками информации о том или ином элементе фасада.

Первый вариант был основан на изображении крупного плана террасы, которое наглядно показывало результат облицовки стен и пола.

Первый экран, вариант 2

Первый экран, вариант 2

Второй – более масштабный: здесь уже можно узнать не только о работе со стенами, но и о монтаже заборов и веранд.

Страница монтажа фасадов Cedral

Страница монтажа фасадов Cedral

Mobile версия

В основе адаптации лежит понимание того, что восприятие сайта с мобильного устройства отличается от восприятия с полной настольной версии.
Mobile first

Мобильная версия отличается от настольной своею простотой. Было принято решение отказаться от некоторых элементов дизайна в пользу удобства и легкости просмотра на мобильном устройстве.

Планшет

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

Прототипы

Все элементы дизайна и анимация были изначально отображены в прототипах сайта. На этапе проектирования была проделана колоссальная работа по разработке концепции, её согласованию с заказчиком и доведению всех нюансов до совершенства. Прототипирование – это самый творческий этап разработки сайта. Именно благодаря подробным макетам мы реализовали этот сложный проект. Результат – яркий и интересный сайт, которым доволен не только владелец, но и пользователи!

Компьютер

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

Планшет

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

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

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

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

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