Визуальная концепция цифрового проекта Puppi-du
Puppi-du — концепция онлайн-платформы для тематических встреч и мероприятий. В качестве примера для интерфейса выбрана камерная винная вечеринка.
Моя часть проекта включала анализ аналогов, подбор типографики и визуальное оформление интерфейса. В результате появилась система для десктопной и мобильной версии, афиши и билета.
Задача
Проекту требовался собственный визуальный характер. Интерфейс должен поддерживать атмосферу живого мероприятия, но при этом оставаться удобным для работы с информацией.
Нужно было связать фотографии, типографику, карточки, навигацию и рекламные материалы в одной стилистике.
Моя часть работы
- анализ аналогов;
- поиск визуального направления;
- подбор типографики;
- оформление интерфейса;
- десктопная версия;
- мобильная адаптация.
Из чего складывалась визуальная концепция
До разработки экранов нужно было определить характер проекта, принципы подачи контента и визуальные акценты.
Аналоги
Исследование похожих сервисов помогло увидеть типовые решения и определить направление проекта.
Типографика
Шрифты подбирались с учетом интерфейса, разных размеров экрана и общей эстетики Puppi-du.
Визуал
Изображения и графические элементы поддерживают атмосферу мероприятия и структуру страниц.
Десктопная версия сайта
Для десктопной версии разработаны три экрана. Они показывают основную визуальную систему проекта и разные части пользовательского сценария.
Сайт в мокапе
Готовый дизайн показан на экране ноутбука. Мокап помогает оценить интерфейс уже в контексте реального устройства.
Это не отдельный вариант сайта, а презентация разработанной десктопной версии.
Мобильная версия
Для мобильной версии подготовлены два экрана. Они собраны в одну презентационную композицию.
При адаптации сохраняются типографика, графические акценты и общий характер проекта, но структура перестраивается под узкий экран.
Афиша и входной билет
Визуальная работа не ограничивалась интерфейсом. Для мероприятия подготовлены два самостоятельных материала: афиша и входной билет.
Они продолжают стилистику Puppi-du, но решают уже другие задачи вне сайта.
AI-инструменты в работе над проектом
Нейросети использовались для исследования, поиска визуальных вариантов, подготовки изображений, текстовых элементов и отдельных графических материалов.
Результаты отбирались и дорабатывались, после чего элементы собирались в финальные композиции интерфейса.
Результат
В проект вошли три десктопных экрана сайта, мобильная версия с двумя экранами, один презентационный мокап ноутбука, афиша и входной билет.
Puppi-du показывает работу с визуальным оформлением цифрового проекта сразу в нескольких форматах: от интерфейса до материалов самого мероприятия.