Сотрудничество с Atrix Group началось в 2022 году. Необходимо было создать корпоративный имиджевый сайт с красивой анимацией в стиле минимализм. По итогу в нашей работе было выделено три этапа:
Перед началом прототипирования нам предоставили Mind Map – схематичную структуру будущего сайта.
Схема сайта
Мы разработали прототипы, основываясь на этой схеме, и создали макеты всех указанных страниц. На этом этапе продумали, какие блоки должны присутствовать на страницах сайта, их расположение и примерный объем.
Опираясь на опыт, предложили скорректировать структуру сайта, а также представить некоторые страницы в виде блоков, вложенных в отдельные страницы. Например, все уровни, указанные на схеме, под страницей «О компании» были организованы в виде отдельных блоков внутри этой страницы.
Прототипы сайта
После согласования прототипов началась работа над дизайном.
При его разработке мы опирались на предоставленный клиентом гайдлайн компании, в котором были логотип, основные шрифты и цветовая палитра бренда. Ключевыми цветами Atrix являются тёмно-синие, голубые, серые оттенки.
Мы же остановили выбор на белом, благодаря чему дизайн получился воздушным, просторным. При этом строгий шрифт, структура расположения блоков придали ему линейность и строгость.
Клиент также выразил желание заполнить весь визуальный контент на сайте своими проектами. Однако у нас были только рендеры по двум проектам, что было недостаточно для создания многостраничного сайта. Поэтому мы решили создать два дизайн-макета главной страницы, чтобы предложить их на выбор. В первом макете мы использовали материалы, предоставленные клиентом, а во втором – фото, которые на наш взгляд лучше подходят по стилю.
Дизайн главной страницы
Первый вариант сочетал в себе пространство белого цвета и ярких оттенков от рендеров, что придавало сайту живости. Однако он получился более беспорядочным – изображения не всегда получалось скомпоновать друг с другом.
Во втором варианте мы придерживались фирменного стиля. Изображения на них более строгие и лаконичные, продолжают выстроенную линейность. Клиент одобрил второй вариант дизайна.
Мы согласовали главную страницу, на основе которой продемонстрировали дизайн-концепт сайта. Далее дизайнер довольно быстро нарисовал остальные страницы и адаптивы для разных типов устройств.
На завершающем этапе вёрстки мы оформили анимацию сайта. При верстании страниц не возникло никаких отступлений, как это часто бывает. Сайт адаптируется под все типы устройств, что в дальнейшем создаст удобство для посетителей.
Также на этапе верстки мы уделили внимание оптимизации скорости загрузки страниц. Хотя этот процесс обычно выполняется на этапе программирования и интеграции сайта, мы позаботились об этом заранее.
После завершения всех этапов работы, мы передали все макеты и файлы клиенту для проведения интеграции сайта и последующего запуска.
Мы подготовили продуманные прототипы, лаконичный дизайн и провели успешную вёрстку. В работе мы совместили пожелания клиента с собственным опытом для достижения качественного результата.