Cайт агентства архитектурного и интерьерного дизайна
Компания, которая занимается архитектурным проектированием и дизайном интерьера, по умолчанию должна иметь стильный сайт. Просто потому, что негоже сапожнику ходить без сапог. Исправить это досадное недоразумение выпало команде 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 учитывает потребности современных пользователей, он интуитивно понятен и прост в администрировании.
Всё это помогло сделать сайт не только «умным» и «красивым», но и эффективным.
Комментарии