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

Перейти на сайт

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

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

01 Про клієнта

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

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

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

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

03 Рішення

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

Кольори

Шрифти

Cormorant Garamond Semi Bold
Cormorant Garamond Medium
Cormorant Garamond Regular

Фото деяких секцій
Фото сайту Shavarska - 1
Фото сайту Shavarska - 2
Фото сайту Shavarska - 3
Фото сайту Shavarska - 4
Важливі сторінки сайту

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

Фото сайту Shavarska - 1
Фото сайту Shavarska - 2
Фото сайту Shavarska - 3
Інтерактив з плануванням квартири

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

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

Фото мобільної версії Shavarska 1
Фото мобільної версії Shavarska 1
Фото мобільної версії Shavarska 2
Фото мобільної версії Shavarska 2
Фото мобільної версії Shavarska 3
Фото мобільної версії Shavarska 3
Фото мобільної версії Shavarska 4
Фото мобільної версії Shavarska 4
Фото мобільної версії Shavarska 5
Фото мобільної версії Shavarska 5

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

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

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

CTO | Senior Front-end dev.

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

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

Робота з Google Map API

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

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

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

Back-end

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

Senior Web dev.

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

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

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

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

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

Фото Shavarska 1

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

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

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

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

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

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

jQuery
Modx Revolution
Gulp
Figma
MySQL
PHP
LESS
Telegram API

05 Результат

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

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

CTO | Senior Front-end dev.

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

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

Атвор відгуку: Шаварська Ольга
Шаварська Ольга

Співзасновниця

Сподобався цей проект?
Тоді поставте йому оцінку!

Інші проекти

Картинка AgentGo - 1

SaaS продукт

AgentGo

Картинка Baza Drov - 1

Виробник твердого палива

Baza Drov

Хочете створити сайт портфоліо?

Ми знаємо, який сайт вразить Ваших потенційних клієнтів!