Создание сайта «Орешник» — промосайт с анимированным интро и переходами

Используемые навыки Веб-разработка Графический дизайн Дизайн интерфейсов Дизайн сайтов Сайт "под ключ"

Описание

«Орешник» — PR-спецпроект агентства «Взрывной PR». Мы создали сайт под ключ в формате интерактивной презентации: от вступления и предложения — к программе кампании, примеру Klatz, команде и обращению в агентство.

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

Решение

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

Содержание распределили по последовательным экранам. Верхнее меню позволяет перейти к выбранной теме без прохождения всей презентации. Финальный раздел объединяет обращение, контакты и графику вокруг действия «обсудить проект».

При разработке сайта отдельно обработали колесо мыши и touch-жесты. Эти способы управления дают разные сигналы, поэтому переходами управляет система состояний: один жест не должен случайно перескакивать через несколько разделов.

На мобильных экранах перестроили карточки, текст и навигацию с сохранением порядка рассказа. Использовали HTML, CSS и JavaScript, адаптивную вёрстку, видео в маске и анимированные переходы. Типографическая система основана на Roboto Flex и Roboto Condensed.

Результат

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

Создание сайта объединило структуру презентации, дизайн сайта и программное управление переходами. Польза этой связки — в согласованном рассказе: графика, текст и движение ведут посетителя по одному сценарию.