Разработке дизайна

ВВЕДЕНИЕ
Главной задачей в разработке дизайна в данном проекте является передача ощущения инновационности и современности продукта.
С помощью дизайна и анимаций перед нами стоит задача избежать “шаблонного” представления инновационности и передать в простой и лаконичной форме основные УТП продукта.
Простота. Лаконичность. Инновационность.
https://www.apple.com/ru/airpods-max/

ЭЛЕМЕНТЫ
Основная концепция проекта строится вокруг элементов дизайна, которые будут служить каркасом для сайта и анимации, которые будут дополнять его.
Одним из базовых элементов, который будет “собирать” контент на сайте, является градиентная рамка, которая реагирует на прокрутку сайта и меняется по мере прокрутки.
Рамка позволяет эффектно выделять контент внутри и создает необходимый эффект инновационности и легкости всего проекта.
Градиент является одним из последних и актуальных трендов в веб-дизайне.
Пример анимации: https://codepen.io/rubaaa/pen/PowNKax?css-preprocessor=scss
https://codepen.io/P1N2O/embed/pyBNzX?default-tab=css%2Cresult&theme-id=0

ЭЛЕМЕНТЫ / ШРИФТЫ
Сегодня представить сайт без шрифтовых решений невозможно. Крупные шрифтовые композиции позволяют пользователю с легкостью понимать на каком этаже сайта он находится и подчеркивают какое УТП описывается в данном разделе сайта.
В проекте второстепенными композициями будут являться контурные шрифты. На основных экранах будут использоваться крупные и простые шрифты.

ЭЛЕМЕНТЫ / ПРОДУКТ
Главный герой проекта – продукт. Весь контент строится вокруг него. Продукт прикручен к прокрутке по сайту и крутится вокруг собственной оси по мере прокрутки, позволяя пользователю рассмотреть продукт с разных сторон.
Подобная анимация нравится пользователям, поскольку находится на стыке геймификации и развлекает пользователя в простой форме.

ЭЛЕМЕНТЫ / ОСНОВНОЙ БЛОК
Основной блок проекта представлен темно-серой подложкой, в которой располагаются все элементы сайта.
По мере прокрутке сайта контент плавно сменяет друг друга. На каждом этаже есть возможность получить дополнительную информацию по продукту, не уводя пользователя на дополнительные экраны – большинство информации появляется с помощью всплывающих окон.
Разного уровня важности шрифты позволяют выделить необходимые элементы на странице.

ЭЛЕМЕНТЫ / МОЛЕКУЛЫ
Изображение молекул используется на фонах в основном блоке, а анимация молекул используется на фоне, там где это необходимо.

ЭЛЕМЕНТЫ
Основными базовыми константами, на которых строится дизайн:
Градиентная неоновая рамка, реагирующая на изменение контента
Основное поле для работы с контентом
Продукт и шрифтовые решения
Анимации
Изображения молекул

Меню аккуратно и нативно располагается в хедере проекта, позволяя легко найти необходимую информацию – меню всегда в поле зрения пользователя.
Каждому этажу сайта соответствует его номер, позволяя пользователю легко и просто перемещаться по сайту.
Ссылки на социальные сети позволяют добавить графичности всему сайту и находятся в заметном месте.
Для удобства пользователя есть кнопка, которая сразу позволяет отправить запрос на получение информации по продукту или его приобретении

Логотип бренда всегда в поле видимости и никогда не исчезает.
Дополнительные УТП продукта, при нажатии на которые появляется информация во всплывающих окнах.

По фону располагаются элементы молекул. Для оптимизации и высокой скорости работы всего сайта подобную анимацию предполагается использовать только на некоторых этажах.
Пример анимации:
https://codepen.io/VincentGarreau/pen/pnlso

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

По фону используется фирменная фотография молекул.

Для экономии пространства и создания компактной навигации фотографии используются в качестве фона для каждой статьи.
Пользователь с легкостью может вернуться на предыдущую страницу

Статья в блоге представлена фотографией и текстовым наполнением, которые создают понятную структуру для восприятия контента
Пользователь с легкостью может вернуться на предыдущую страницу
Удобный и нативный скрол позволяет ориентироваться на какой части статьи находится пользователь

В разделе Как работает пользователь может найти всю дополнительную информацию по работе средства, включая полную информацию по каждому УТП продукта.

Раздел WebAR представлен короткой инструкцией по пользованию – крупный QR код позволяет с легкостью его считать и открыть необходимую ссылку для активации опыта.
Минимализм и просто дают необходимое ощущение легкости и понятности в получении информации.

На финальном экране сайта фон сменяется на черный и создается эффект неонового свечения.