Разработка сайта архитектурной студии «HOMESPRO»
Сделали редизайн действующего корпоративного сайта архитектурной студии, специализирующейся
на проектировании оригинальной недвижимости и воплотили его в реальность. Концепция выделяется
современным дизайном с простотой и удобством для различных категорий пользователей. Акцент сделан на
имидже компании и разнообразии проектов разрабатываемых командой.
О проекте
«HOMESPRO» — это сильная команда дизайнеров, архитекторов, инженеров с большим опытом архитектурной работы и технического проектирования современных индивидуальных жилых домов.
Основное направление — продуманный и комфортный для жизни дизайн дома, созвучный духу времени и подходящий для интеграции с современными технологиями.
- Менеджер проектов
- Аналитик
- Дизайнер
- Frontend-разработчик
- Backend-разработчик
- QA
- Figma
- HTML
- JS
- Laravel
Задачи
Обновить существующий сайт, проведя полный аудит, исправив стилистические ошибки и проблемы взаимодействия пользователя с интерфейсами. Доработать визуальную составляющую, чтобы оживить сайт и поставить его на один уровень с основными конкурентами. Среди конкретных шагов в процессе разработки можно выделить:
- всесторонний ux/ui-аудит;
- тесный контакт с клиентом для выбора правильных, подходящих и ему, и потенциальным пользователям решений;
- проработка всех необходимых деталей на уровне дизайна и разработки, внедрение индивидуальных решений, где это уместно;
- качественная проработка активностей и микроанимацией на этапе frontend-разработки;
- дальнейшая поддержка проекта для добавление нового функционала.
Кроме упомянутых выше аспектов были сразу запланированы дополнительные работы по магазину готовых проектов, организация обучающего проекта для архитекторов, проработка светлой темы главного сайта и другое.
«Данный проект интересен как своим позиционированием, так и вносимыми изменениями. Предварительный анализ показал необходимость существенных изменений в дизайне существовавшего на тот момент сайта и в его структуре.
Благодаря тесному сотрудничеству удалось совместить современные тенденции в дизайне и опыте использования интерфейсов сайта с видением и пожеланиями заказчика. А также учесть будущие изменения, такие как: добавление новых разделов сайта, использование нескольких доменов под региональные настройки, объединение с сопутствующим проектом по обучению архитекторов».
Детали дизайна
и разработки
Прежде чем начать работу над дизайном, мы проанализировали конкурентов заказчика и не только. Выделили плюсы и минусы разных подходов, провели полномасштабный аудит.
После сверки выводов с клиентом и прихода к обоснованному компромиссу там, где это было необходимо, наш дизайнер приступил к работе.
Создали подходящую главную страницу
и проработали требуемые аспекты
Тёмная тема, мультиязычность, полноценное меню на весь экран и на мобильных устройствах, и в десктопной версии. Все базовые элементы в актуальном виде, адаптивность и функционал были учтены и внедрены.
Проработка фильтров и блоков проектов с учётом всех возможных взаимодействий, состояний и размеров контента.
Наглядно показали все детали
и нюансы
Показали все важные части портфолио и фильтрации, важных составляющих индивидуальных проектов, страницы услуг, магазина проектов и многого другого.
Проработка фильтров и блоков проектов с учётом всех возможных взаимодействий, состояний и размеров контента.
Итерационный подход на пути к оптимальному виду
В процессе работы многие части были адаптированы под пожелания клиента и доработаны с точки зрения
улучшения пользовательского опыта.
Некоторые блоки в процессе радикально перерабатывали. От других отказались вообще ради большего визуального единообразия или улучшения UX.
Постепенно добавляли дополнительные страницы
и функционал
Когда базовые страницы были идеально оптимизированы, мы взялись за дополнительные возможности
и реализовали все требуемые аспекты.
Процесс работы
1. Глубокий аудит и анализ конкурентов
Описание работы:
Проанализировали старую версию сайта и приведённых клиентом в пример конкурентов.
- Нашли общие паттерны, положительно влияющие на привлечение крупных заказчиков через сайт
- Подготовили подробную документацию и презентовали её клиенту. Обосновали необходимость проработки каждого элемента
- В процессе коммуникации нашли единое решение, подходящее как с точки зрения UX/UI, так и пожеланий по визуалу и логике
2. Дизайн сайта и элементов
Описание работы:
В работе над дизайном мы учитывали и старые наработки, и тенденции рынка, и пожелания клиента:
- Проработали первую версию дизайна главной и внутренних страниц и презентовали их с обоснованием подхода
- Постепенно приводили страницы к финальному виду, который соответствовал требованиям UX и подходил клиенту
- Проработали 6 вариантов главной страницы, 3 вида страницы услуг, постепенно добавили нужные блоки о компании, чтобы информация выстраивалась в единую гармоничную структуру
- Добавили раздел с книгами основателя «HOMESPRO», которые были бы полезны как начинающим, так и продвинутым архитекторам, а также каждому, кто собирается построить свой частный дом
- Где необходимо, нарисовали уникальные векторные иллюстрации и в дальнейшем их анимировали
- Адаптировали изображения на сайте под тёмную тему
- Продумали 2 варианта фильтров для индивидуальных проектов и магазина готовых проектов
Тезисно о дизайне:
- 01 Постепенная проработка всех страниц, дополнительного функционала и адаптива под мобильные устройства
- 02 Проектирование с учётом возможного добавления дополнительных блоков и модулей на страницы
- 03 Подготовка страницы магазина готовых проектов и раздела с продажей книг за авторством основателя архитектурной студии
3. Разработка, тестирование, расширение
Описание работы:
Постепенно внедрили страницы и разделы, добавили большое количество аккуратных микроанимаций, максимально учли пожелания заказчика:
- Проработали уникальную структуру некоторых блоков
- На основе дизайна создали современные микроанимации
- На некоторых страницах добавили якорные элементы для улучшения навигации по сайту в десктопной и мобильной версиях
- Постепенно разработали все требуемые и подходящие блоки
- Для разработки сайта использовали фреймворк Laravel
- Ускорили работу сайта
- Подготовили к поддержке многоязычности (русский, английский, китайский и арабский языки)
Тезисно о разработке и расширении:
- 01 Уникальная структура некоторых элементов
- 02 Большое количество качественных современных анимаций
- 03 Использование фреймворка Laravel
- 04 Ускорение работы
- 05 Многоязычность
Итоги работы
Запуск сайта в новом виде с актуальной презентацией индивидуальных проектов, услуг, магазина проектов и другим.
Логичная и наглядная проработка фильтрации для улучшения взаимодействия. Современные микроанимации.
Функциональная база с возможностью расширения и добавления недостающей информации по необходимости.
Отзыв клиента
«Команда Promicom показала высокий уровень компетентности и готовности помочь в решении любых задач.
Особенно хочется отметить их внимательное отношение к клиентам и стремление к совершенству. Все проекты выполняются в срок и с высоким качеством. Благодаря их решениям и индивидуальному подходу, мы смогли значительно улучшить наши бизнес-процессы и повысить эффективность работы, улучшить узнаваемость компании и её презентационных материалов.
Мы очень довольны нашим сотрудничеством и с уверенностью рекомендуем компанию Promicom как надежного и профессионального партнера».