Создание сайта для застройщика Atrix Group

ЗаказчикAtrix Group начала свою деятельность в 2002 году. Это архитектурно-строительная группа компаний Казахстана. Основная ниша — строительство недвижимости.ЗадачаЦель — разработать полноценный сайт с акцентом на дизайне, чтобы с первых нот становилось понятно — речь идёт о надёжном, серьёзном игроке на рынке строительства.

Старт проекта

Сотрудничество с Atrix Group началось в 2022 году. Необходимо было создать корпоративный имиджевый сайт с красивой анимацией в стиле минимализм. По итогу в нашей работе было выделено три этапа:

• Прототипирование.

• Разработка дизайн-макетов.

• Вёрстка страниц.

Перед началом прототипирования нам предоставили Mind Map — схематичную структуру будущего сайта.

case-qgf7lhowvy.png

Схема сайта

Мы разработали прототипы, основываясь на этой схеме, и создали макеты всех указанных страниц. На этом  этапе продумали, какие блоки должны присутствовать на страницах сайта, их расположение и примерный объем.

Опираясь на опыт, предложили скорректировать структуру сайта, а также представить некоторые страницы в виде блоков, вложенных в отдельные страницы. Например, все уровни, указанные на схеме, под страницей «О компании» были организованы в виде отдельных блоков внутри этой страницы.

case-fcxt21bwnd.png

Прототипы сайта

Что было дальше

После согласования прототипов началась работа над дизайном.

При его разработке мы опирались на предоставленный клиентом гайдлайн компании, в котором были логотип, основные шрифты и цветовая палитра бренда. Ключевыми цветами Atrix являются тёмно-синие, голубые, серые оттенки.

case-os12960dey.png

Мы  же остановили выбор на белом, благодаря чему дизайн получился воздушным, просторным. При этом строгий шрифт, структура расположения блоков придали ему линейность и строгость.

Клиент также выразил желание заполнить весь визуальный контент на сайте своими проектами. Однако у нас были только рендеры по двум проектам, что было недостаточно для создания многостраничного сайта. Поэтому мы решили создать два дизайн-макета главной страницы, чтобы предложить их на выбор. В первом макете мы использовали материалы, предоставленные клиентом, а во втором — фото, которые на наш взгляд лучше подходят по стилю.

case-ictjgzokp0.png

Дизайн главной страницы

Первый вариант сочетал в себе пространство белого цвета и ярких оттенков от рендеров, что придавало сайту живости. Однако он получился более беспорядочным — изображения не всегда получалось скомпоновать друг с другом.

Во втором варианте мы придерживались фирменного стиля. Изображения на них более строгие и лаконичные, продолжают выстроенную линейность. Клиент одобрил второй вариант дизайна.

case-ipzqc7o8rn.png

Мы согласовали главную страницу, на основе которой продемонстрировали дизайн-концепт сайта. Далее дизайнер довольно быстро нарисовал остальные страницы и адаптивы для разных типов устройств.

case-anxlpjfzei.png

На завершающем этапе вёрстки мы оформили анимацию сайта. При верстании страниц не возникло никаких отступлений, как это часто бывает. Сайт адаптируется под все типы устройств, что в дальнейшем создаст удобство для посетителей.

Также на этапе верстки мы уделили внимание оптимизации скорости загрузки страниц. Хотя этот процесс обычно выполняется на этапе программирования и интеграции сайта, мы позаботились об этом заранее.

Проект сейчас

После завершения всех этапов работы, мы передали все макеты и файлы клиенту для проведения интеграции сайта и последующего запуска.

Достигнутый KPI

Мы подготовили продуманные прототипы, лаконичный дизайн и провели успешную вёрстку. В работе мы совместили пожелания клиента с собственным опытом для достижения качественного результата.

Полный текст статьи читайте на CMS Magazine