Разработка сайта · Солнечногорск
Сайт кровли и фасадов, который вращается вокруг дома
«Орвис — строительные системы» с 2010 года продаёт и монтирует кровлю, фасады, водостоки, дренаж и профнастил: две площадки продаж в Солнечногорском округе, доставка и замер по всей Московской области. Команда студии разработала для компании сайт в своём стиле — «Орбита»: красный дом и серая орбита из логотипа стали языком всего сайта.
Потяните орбиту или нажмите на страницу
Задача
Дорогой и живой сайт — в своём стиле
Компании нужен был современный сайт, который выглядит дорого, удивляет с первого экрана и при этом приводит к главному — звонку и выезду замерщика. Кровлю и фасады здесь не кладут в корзину: их подбирают, считают и монтируют. Стиль не брали из шаблонов — его подсказал логотип: красный дом в перспективе и серая орбита вокруг него.
- 2010
- на рынке кровли и фасадов с этого года
- 2
- площадки продаж: Коньково и Жилино
- МО
- доставка и замер по всей области
- 9–19
- ежедневно, без выходных
-
1
Стиль из логотипа
Красный дом и серая орбита из знака стали языком сайта: орбиты в шапках страниц, на радаре доставки, в подвале и на странице 404.
-
2
Показать, а не рассказать
Из чего состоит крыша — видно по слоям, куда возят — по лучу радара, как монтируют — по фото с объектов.
-
3
Всё ведёт к замеру
Продажа и монтаж идут через разговор, поэтому кнопка «Вызвать замерщика» и телефоны всегда под рукой.
Фирменный язык
Знак, разобранный на детали
Логотип «Орвиса» — дом в перспективе: тёмная и яркая красные грани, серая крыша-уголок и орбита, которая его облетает. Мы разобрали знак на части, и каждая получила работу на сайте. Наведите на деталь — она подсветится в знаке.
#121417
#f2f0ec
#c4221f
#a3a8af
Первый экран сайта
Материалы на орбите
На первом экране — дом в сумерках, а вокруг него по эллипсу облетают названия материалов: металлочерепица, фальц, сайдинг, водостоки. Они уходят за дом и выходят из-за него, год «2010» досчитывается. Картинка дома нарисована для сайта — это иллюстрация, а не фото объекта. Потяните ползунок, чтобы пройти первые секунды.
- 0,4 сПоднимаются строки заголовка
- 1,4 сМатериалы выходят на орбиту, год досчитывается
- 3 сНазвания уходят за дом и выходят из-за него
- 6 сОрбита крутится, экран готов
Кровельный пирог
Крыша собирается, пока вы листаете
Покрытие — только верхний слой. На главной шесть слоёв крыши садятся на место по мере прокрутки, а рядом загорается подпись: что это и зачем. Здесь то же самое — на настоящих кадрах сайта.
- 01Стропильная система
- 02Пароизоляция
- 03Утеплитель
- 04Гидроизоляционная мембрана
- 05Контробрешётка и обрешётка
- 06Кровельное покрытие
Главная
Десять блоков — одна дорога
Главная ведёт от первого впечатления к делу: материалы, каталог, как устроена крыша, настоящие объекты, шаги работы, доставка и замер. Слева — вся главная целиком: тяните рамку или выбирайте блок, окно поедет следом.
Каталог
Четыре направления — и расчёт
Кровля, фасады, дренаж и профнастил — крупными картинками с подразделами. Картинки разделов нарисованы для сайта в одном стиле, это иллюстрации. Продают здесь через разговор, поэтому раздел без товаров не пустой: в нём приглашение подобрать материал и посчитать объём с кнопкой замера и телефоном.
Наши работы
Настоящие объекты — крупно
Здесь только настоящие фото — с объектов, которые смонтировали бригады компании: заборы, фасады, кровля — 44 фото в трёх работах. На главной у каждой работы — большое фото и лента снимков, на странице работы — галерея, которая открывается на весь экран и листается стрелками и пальцем.
- 01Строительство заборов4 фото
- 02Монтаж фасадов21 фото
- 03Монтаж кровли19 фото
Доставка
Луч, который зажигает города
Вместо списка городов — радар: в центре знак компании и Солнечногорск, луч идёт по кругу и по очереди зажигает Зеленоград, Истру, Клин, Химки, Лобню, Дмитров, Высоковск и Москву. Сразу видно: возят по всей области. Нажмите на город — луч остановится на нём.
Привезём «Газелью» или манипулятором, замерщик выезжает по всей Московской области.
Страница 404
Страница сошла с орбиты
Даже ошибка говорит на языке сайта: вокруг «404» — та же орбита, что и в логотипе, рядом каталог, работы и телефон, чтобы посетитель не ушёл. Окно заявки, плашка cookie, подвал и шаги работы — в той же системе.
Страницы
У каждой страницы — своя орбита
«О компании», «Доставка и оплата», «Контакты», разделы каталога, новости и корзина получили общую тёмную шапку с орбитами, карточки фактов и призыв к замеру внизу. Наведите на окно — страница прокрутится, нажмите — откроется целиком.
На телефоне
Орбита — в кармане
На телефоне материалы облетают дом над заголовком, кровельный пирог собирается без липкого блока, меню открывается шторкой с разделами и телефонами, а кнопки «Позвонить» и «Замер» всегда под пальцем. Нажмите на телефон, чтобы остановить прокрутку.
Как шла работа
Восемь шагов — один круг
Над сайтом работала команда студии: разбор, концепция, фирменный язык, главная, шапка и подвал, каталог и работы, страницы и проверка каждого экрана на компьютере и телефоне. Шаги идут по кругу — как всё на этом сайте.
- 01РазборПрошли путь клиента на компьютере и телефоне: как он ищет материал, где звонит, что хочет увидеть до замера.
- 02КонцепцияНашли стиль в самом логотипе: красный дом и серая орбита вокруг него — так появилась «Орбита».
- 03Фирменный языкГрафит и бетон, красный логотипа, шрифты Geologica и Onest, знак дома, который оживает при наведении.
- 04ГлавнаяОрбита материалов, ленты, каталог, кровельный пирог, работы, этапы, радар доставки.
- 05Шапка и подвалПанель каталога, телефоны и режим работы, «Вызвать замерщика»; площадки продаж и карта.
- 06Каталог и работыШапки разделов с орбитами, блок расчёта вместо пустой витрины, работы с галереей.
- 07Страницы«О компании», доставка, контакты, новости, корзина, окно заявки, cookie и страница 404.
- 08ПроверкаКаждую страницу проверили на компьютере и телефоне: вид, анимация, ошибки и рамка фокуса для клавиатуры.
Итог
Компания, которую узнают по орбите
Главная с орбитой материалов, кровельным пирогом, работами, этапами и радаром доставки, каталог с шапками разделов и блоком расчёта, работы с галереей, «О компании», доставка, контакты с картой, новости, корзина, окно заявки, cookie и страница 404 — всё в одном стиле, выросшем из логотипа компании.