Сайт агенції архітектурного та інтер’єрного дизайну
Компанія, що займається архітектурним проєктуванням і дизайном інтер’єру, як усталено, повинна мати стильний сайт. Просто тому, що негоже кравцю подертий жупан носити. Виправити це прикре непорозуміння випало команді Webnauts. Як відбувався процес розробки та чи вдалося нам вразити дизайном клієнта, який з дизайном на «ти» — читайте в нашому новому кейсі.
Завдання проєкту
Сучасний промосайт з нескладним функціоналом, індивідуальним дизайном і захопливою анімацією доцільно розробляти на WordPress. Попри те, що популярна платформа має безліч готових тем, вона чудово вживається з унікальним дизайном і може задовольнити нестандартні потреби клієнта, зокрема в анімації. Головне — грамотно імплементувати верстку макетів на гнучку та зручну CMS.
Разом з новим сайтом клієнт потребував нового логотипа — елементу айдентики, без якого не обходиться жодний вебпроєкт. У нашій історії завдяки зусиллям графічного та моушн-дизайнера, та ще й у зв’язці з фронтенд-розробником, він став мало не найунікальнішим аспектом дизайну.
Розробка та анімація логотипа
Вирішальне значення у дизайні логотипа має… комунікація. Заповнений на початку співпраці бриф допомагає зрозуміти, чого саме хоче клієнт. Однак перед нами постала задача із зірочкою, оскільки мала відразу декілька умов.
По-перше, нашими клієнтами були відразу два дизайнери, щоправда, у сфері нерухомості. По-друге, здавалося б, хто зрозуміє дизайнерів краще за самого дизайнера? Проте задовольнити потреби клієнтів виявилося не так-то просто: кожен мав своє, подекуди суперечливе розуміння концепції майбутнього логотипа. Так, спочатку клієнти бачили його об’ємним, а потім лінійним; затишним, але без скруглених кутів; абстрактним, але зрозумілим.
Навздогін і на додачу ми отримали приклади логотипів, які клієнти вважають вдалими для створення бажаного образу бренду:
На основі зібраної інформації ми запропонували 3 варіанти логотипа:
Було б наївно вважати, що перша партія логотипів одразу знайшла відгук у клієнтів, а тому ми продовжили пошуки консенсусу. Зловити одну хвилю дало змогу єдине на двох архітектурних дизайнерів бажання — лінійна анімація. Саме це дало змогу визначитися з тим, що лого точно має бути контурним.
Невдовзі ми запропонували клієнтам 3 мінімалістичні рішення, після яких було ще з п’ять десятків варіантів:
Врешті-решт ми досягли ідеального результату — спочатку закарбували логотип у символі, потім додали до нього текстову частину та згодом оживили:
Особливості UI/UX дизайну
Якщо в офлайні SPACE2HOME справляє враження на клієнтів з порогу фірми, то в онлайні — з першого екрану. Для цього ми з самого початку забезпечили цікавий досвід взаємодії з брендом, і ще виграли трохи часу на завантаження сайту через ефектний прелоадер. Спочатку лінійна анімація, в якій оживають міста, натякає на сферу, де працює фірма, і врешті перетворюється на логотип, розпочинаючи знайомство з брендом і його цінностями.
Перший екран конкретизує головну місію SPACE2HOME за допомогою слогану — «Конвертуємо простори в елегантні домівки». Нескладне меню ховається за анімованим бургером і має вигляд вишуканого сайд-бару, що вигідно контрастує за кольором із затемненою фотообкладинкою.
Далі подорож продовжується лаконічною презентацією компанії, що відповідає на запитання «Хто ми?» та «Що вміємо?», а потім підкріплює ці слова винятковим фото реалізованого проєкту. Відразу ж на фоні можемо побачити ледь помітні обриси мінімалістичного логотипа, що вдало підтримує загальну стилістику сайту.
Одним з найоригінальніших блоків є перелік послуг, організований на кшталт книжок на полиці. Клік на «корінець» наче розгортає «книгу» та розкриває зміст послуги.
Ну і найважливіший блок «Портфоліо», без якого сайт дизайн-агенції був би марним. Фото реалізованих об’єктів нерухомості SPACE2HOME самодостатні самі собою, тому в дизайні сайту ми поставили їх на чільне місце — розтягнули на весь екран і надали користувачу можливість або подивитися «Всі проєкти», або «Відкрити» для себе той, який сподобався найбільше.
Розділ «Проєкти» являє собою реалізовані дизайнерські рішення, зібрані за назвами та категоріями кімнат. Останній блок демонструє різні типи кімнат у режимі каруселі, а наведення курсора «знімає» ефект віньєтки та чітко окреслює контури зображення. Клік на категорію переносить користувача на сторінку з портфоліо кімнат, а клік на фото — з проєктом, в рамках якого була реалізована ця сама кімната.
Крім масивних фото, сторінка проєкту містить ще один цікавий слайдер — фотокарусель з ефектом «До та після».
Якщо відвідувач сайту не «провалився» в раздел «Портфоліо» та продовжив свій шлях головною сторінкою, після перегляду розкішних фото може з’явитися тільки одне запитання «Як тут зв’язатися з цими чарівниками?». Тому за реалізованними проектами відразу слідує доречний блок із контактною формою, що є частиною «підвалу» сайту.
Між іншим, функціональний і напрочуд гармонійний футер заслуговує окремої уваги. Акцентна кнопка форми з ховер-ефектом, важлива контактна інформація й акуратна навігація сайту з іконками соцмереж — кожен елемент «підвалу» знає своє місце, має свою вагу та виконує свою функцію, на кшталт елементів архітектури та інтер’єру, які створюють наші клієнти.
Досягти ідеального балансу нам вдалося завдяки обрисам створеного в перспективі логотипа, що вдало завершує композицію та немовби нагадує штаб-квартиру фірми на одній з амстердамських вулиць.
Верстка макетів і втілення анімацій
Спочатку історія SPACE2HOME, «розказана» дизайнером, була «перекладена» мовами HTML5, CSS і JavaScript, а згодом — опублікована в інтернеті на сторінках промосайту.
Завдяки естетично реалізованому на CSS і JS прелоадеру очікування завантаження сайту ще ніколи не було таким приємним:
Сайт агенції з плавним скролом, наповнений цікавими слайдерами та ефектами наведення, забезпечує позитивний досвід і справжнє візуальне захоплення. В цьому, крім чистого JavaScript, нам допомогли js-бібліотеки Swiper, Scroll Lock і Lenis.
Деякі проєкти SPACE2HOME мають відеоогляд інтер’єру готових об’єктів, і тому ми інтегрували сторінки портфоліо з відеоплатформою Vimeo шляхом вбудовування HTML-коду на сайт:
Для автоматизації розробки та збирання готового проєкту ми використали незамінний інструмент Gulp.js, а перед самим продакшном потурбувалися про задоволення потреб широкого кола користувачів. Аби сайт коректно відображався навіть у застарілих браузерах, ми модернізували вихідний код за допомогою Babel.js, а також адаптували інтерфейс під мобільні пристрої:
Розробка сайту на WordPress
Настав час переходити від «красивого» фронтенду до «розумного» бекенду, себто розробки внутрішньої логіки сайту. Ми заклали зверстаний дизайн і нескладний функціонал на популярну платформу WordPress, а саме:
- реалізували зручну адмін-панель для простого керування сайтом за допомогою плагіну Advanced Custom Fields (ACF);
- створили контактні форми для збору запитів на послуги за допомогою плагіну Contact Form 7 (CF7);
- налаштували мультимовність сайту: переклали контент українською та датською мовами за допомогою плагіну Polylang і рядки інтерфейсу адмінки WordPress — за допомогою Loco Translate.
Завдяки гнучкості, великій кількості плагінів і можливості сервісних інтеграцій CMS WordPress у майбутньому сайт зможе нарощувати функції паралельно з потребами дизайн-агенції.
Результат
Чи вдалося нам передати історію клієнта на вебсторінках так само добре як SPACE2HOME розповідає історію кожного будинку на квадратних метрах? Вирішувати вам 👉 .
Зі свого боку наша команда доклала максимум зусиль, аби витиснути максимум результату:
- створила мінімалістичний анімований логотип,
- розробила стильний і зручний дизайн сторінок,
- зверстала макети та реалізувала захопливі ефекти,
- запрограмувала сайт на безперебійну роботу двома мовами.
Крім того, що адаптивний сайт агенції на WordPress враховує потреби сучасних користувачів, він інтуїтивно зрозумілий і простий в адмініструванні.
Все це допомогло зробити сайт не тільки «розумним» і «красивим», а й ефективним.
Комментарии