Навигация через предметы
Монитор ведёт к подключению, телефон — к тарифам, доска — к объяснениям, уголок помощи — к вопросам. Обычная навигация доступна параллельно.
Интерактивный веб / SplashVPN
Pixel World
Сайт, который можно исследовать.
ФорматЛокальный прототип
Версияv11.3
ТехнологииHTML / CSS / JavaScript
Разработано NEFORM · оригинальные материалы проекта
Задача
Превратить знакомство с сервисом в последовательное путешествие по комнате персонажей. Сохранить понятный путь к подключению, тарифам и помощи на большом и маленьком экране.
Реализованные решения
Оригинальные персонажи
Утверждённые изображения Пикселя и Кэша, смена эмоций и плавные переходы между позами. Кнопки реагируют на действия посетителя.
Сцена на разных экранах
Отдельная мобильная композиция, адаптивные слои комнаты и элементы управления. Есть отключение анимации и поддержка reduced motion.
Как устроено
Оригинальные иллюстрацииСостояния JavaScriptCSS-анимацияАдаптивный HTML
HTMLCSSJavaScriptWebP / PNGResponsive UI
Интерфейс проекта
Развитие проекта
Сохранённая версия v11.3 объединяет комнату, монитор подключения, доску, телефон с тарифами и уголок поддержки. Старые HTML-версии и оригинальные ассеты остались в исходном проекте без изменений.