Shavarska – агентство, що дбає про затишок домівок

Інтер’єрне агентство

Тип сайту: корпоративний
Ніша: агентство інтер'єру
Терміни: 16 днів
Статус: Завершено
Зробили: SEO, Ui/Ux, Web dev

01 Про клієнта

Shavarska design & architecture – інтер’єрне агентство для людей, що вимагають візуальної естетики. Працюють не лише у Тернополі, але й по всій Україні

02 Цілі та задачі

Створити сайт, на якому можна буде розміщувати інформацію про наші проекти

Сайт хотіли б бачити у нестандартних та цікавих кольорах
Головну сторінку сайту, зробити з якоюсь фішкою, щоб це не було як у всіх..
Ми не проти бачити якусь цікаву анімацію на сайті
Сайт має бути зручний у користуванні для нашої цільової аудиторії
Окрім розділу з проектами обов’язково має бути присутній розділ вакансій.
У контактах має бути змога зв’язку з нами усіма доступними способами та змога прокласти маршрут до нашого офісу.
Зробити внутрішню SEO оптимізацію сайту, оскільки в майбутньому будемо просувати його.

03 Рішення

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

Дизайн сайту

Кійко Таня

Senior Web Designer | Ui/Ux

Кольори

Шрифти

Cormorant Garamond Semi Bold

Cormorant Garamond Medium

Cormorant Garamond Regular

Фото деяких секцій

Важливі сторінки сайту

Для сторінки одного кейсу та для сторінки проектів, ми хотіли створити якесь цікаве рішення, яке викликатиме певний WoW-ефект. Тому на сторінці одного кейсу ми зробили переключення фотографій згідно обраної користувачем кімнати у плануванні квартири. А на сторінці проектів, попрацювали з кольорами та нестандартною сіткою для певної категорії проекту

Інтерактив з плануванням квартири

Динамічна зміна фото згідно обраного планування

Дизайн мобільної версії сайту

В теперішній час мобільна версія сайту це просто must have. Тому ми не забули про неї, і зробили дизайн мобільної версії для усіх сторінок сайту. Переглянути наш результат можна на фото нижче

Розробка сайту

Особлива увага, перш за все з сторони клієнтського програмування відігравалась у анімації. Ми старались зробити її плавною та щоб мало навантажувала пристрої користувачів

Давидов Андрій

Front-end dev.

Анімація сайту

На сайті можна спостерігати плавну анімацію при прокрутці сторінок та при наведенні на певні елементи. Особливо роль відіграє анімацію на головній сторінці, оскільки реалізована складна прокрутка сайту. Спочатку при прокрутці він гортається у горизонтальному напрямку, на блоках з проектами йде прокрутка сторінки, до якої ми всі звикли, долиставши до блоку з командою, прокрутка змінюється знову на горизонтальну, прокрутивши цей блок до кінця, прокрутка повертається на вертикальну. Як то кажуть, краще один раз подивитись, чим довго розписвати)(

Робота з Google Map API

З картами проводилась робота лише для стилізації її під колір сайту та створення власного маркера для позначки локації офісу

Блок з проектами

Ми не змогли не згадати про нього. На ньому також зроблена прикольна анімація. Полягає вона в плавності заміни заднього фону блоку, появлення фото проекту при наведенні та русі мишки на певній назві проекту. Пропоную подивитись як це виглядає

Back-end

Сайт з точки зору back-end частини не був складним, за виключенням фільтрування фото по категоріям (всі кухні, усі ванни і так далі). Завдяки дуже якісні роботі усієї команди, нам залишилось найлегше.

Зінчук Сергій

Senior Web dev.

Фільтрація фото проектів

Реалізувати можливість виведення фото усіх проектів по категоріям, для прикладу усіх: ванн, вбиральнь, спальнь і т. д.. Все це потрібно було реалізувати без ускладнень в менеджменті проекту через адмін панель.

Інтерактивна карта проекту

Добавлена можливість створення конструктора плану обєкту, із можливістю добавлення інформації до кожної із частини проекту. Для прикладу різних гелерей для: кухонь, спалень та інших.

Редагування плану обєкта в адмін-панелі

Вигляд на сайті

Вакансії компанії

Також було розроблено функціонал для добавлення вакансій компанії, без створень додаткових сторінок на сайті.

Інтеграція Telegram API

Усі дані із форм відправляються у бот в телеграмі, який в свою чергу відправляє їх у групу із менеджерами компанії. Це дозволяє миттєво реагувати на нові заявки, та зв’язуватись із потенційним клієнтом.

04 Технології та інструменти

05 Результат

Даний проект повністю завершений. Ми протестували сайт на коректну роботу, як з сторони користувачів так і з сторони адміністраторів. Наша команда також зробили базове наповнення проектів, відзняла відео-гайд по користуванні з адміністративною панелькою сайту, та передали усі доступи клієнту.

Давидов Андрій

Front-end dev.

06 Слова клієнта про проект

Дуже креативна команда, замовляли розробку сайту для нашої компанії. Головним побажанням перед початком роботи: реалізувати не звичайний сайт на шаблоні, а підійти максимально креативно до вирішення задачі. Це хотілось зробити для того, щоб вирізнятись серед всіх конкурентів. Після завершення роботи, я ніразу не пошкодувала що звернулась саме сюди. Рекомендую!!!