logo

Веб-сайты

Концепт-сайт Azerçay со scroll-историей

01

О проекте

Этот сайт для Azerçay — внутренний концепт-проект NS Studio: это не заказ клиента и не официальный сайт. Мы хотели рассказать историю известного чайного бренда — путь стакана чая от листа до стакана — через сцены, которые раскрываются при прокрутке.

В Азербайджане чай — не просто напиток, а культура застолья. Поэтому в основе сайта — ритм заваривания: посетитель неспешно проходит путь от почвы Ленкорани и Астары к листу, от обработки к завариванию и столу.

В итоге получился интерактивный сайт с сортами чая, корзиной, таймером заваривания и звуковыми эффектами. Концепт показывает подход NS Studio к брендовым сайтам в рамках направления разработка сайтов. Товарный знак Azerçay принадлежит Azersun Holding; концепт не связан с Azersun.

02

От листа до стакана: ритм истории и UX/UI дизайн

История состоит из семи сцен: Почва, Лист, Обработка, Упаковка, Сорта, Заварка и Стол. Каждая сцена открывается своим цветом — от зелени чайной плантации до тёмно-красного цвета заварки.

  • Сцена обработки: завяливание, скручивание, ферментация и сушка — шаг за шагом показано, как зелёный лист становится чёрным чаем.
  • Сорта и корзина: карточки Buket, с бергамотом, Xalça и зелёного чая, жестяная банка в форме стакана армуду и добавление в корзину (в режиме концепта).
  • Таймер заваривания: сцена «Не торопите заварку» с 7–8 минутами заваривания и цветовой шкалой: светлый, янтарный, тёмно-красный.
  • Визуальный язык: тёмно-красный фон, золотые акценты, классический шрифт с засечками, ковровый орнамент и стакан армуду.

Финальная сцена «Buyurun, çaya!» — стол с сахаром, лимоном и вареньем — завершает историю азербайджанской чайной культурой.

03

Техническая часть: сцены на прокрутке и мобильная версия

Каждая сцена построена в коде и движется вместе с прокруткой: чай наливается, поднимается пар, сцены плавно переходят друг в друга. Пока сцены загружаются, показывается экран загрузки, а звук включается по желанию.

Сайт плавно работает и на компьютере, и на телефоне — в мобильной версии сцены адаптированы под вертикальный экран. Поскольку это не официальный сайт, концепт скрыт от поисковых систем (noindex).

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

Связанная услуга

Хотите похожий проект?

Разработка сайтов в Баку: корпоративные сайты, интернет-магазины и лендинги. Уникальный дизайн, адаптивность и готовность к SEO. Бесплатная консультация.

Другие проекты

Все проекты