Mafiko

Сайт проекта

Погружение в задачу и поиск стиля

Сейчас проект находится на этапе редизайна и смены стека. Задача лендинга Mafiko (чат-игра по мотивам классической «Мафии» в киберпанк-сеттинге) — органично объединить совершенно разные настроения.

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

Визуальный язык и метафоры

Цветовая база макетов построена на сочетании глубокого темно-синего и яркого неонового розового. Чтобы добиться нужной загадочности и нуарного напряжения, я использовал много абстракции и размытия. В дизайне нет лиц персонажей, что усиливает ощущение неизвестности, характерной для самой игры. Яркие цветовые акценты специально зарезервированы для кнопок «Начать игру», которые интегрированы почти в каждый блок — они выступают своего рода психологическим внушением для пользователя, мотивируя его войти в игру.

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

Сторителлинг и логика повествования

Структура самого сайта выстроена как процесс прохождения партии. Сценарий захватывает пользователя с самого старта (даже в шапке запускается таймер зависимый от скролла):

• Hero block: раздача ролей игрокам и погружение в атмосферу.
• Первая ночь: блок, объясняющий фундаментальные правила — игрок как бы остается в темноте со своей карточкой и получает первые знания.
• Первый день: сайт выходит из «темноты», правила объяснены светлым и структурным дневным языком (с отсылками к понятным формам из комиксов). Здесь я подчеркиваю разницу между странным/темным ночным этапом и четким днем.
• «Вы умерли!»: затем происходит резкий скролл-прыжок назад в ночную стилистику с заявлением о смерти игрока. Это провокация, которая закрывает самую главную боль этой игры — вопрос: «а что делать, если меня убили в первую ночь и играть дальше не имеет смысла?». В финале этот интерактивный опыт органично подводит зрителя к регистрации в бета-тесте.

Работа с композицией, ритмом и скроллом

У лендинга спонтанная и смелая композиция, однако я сохранил четкое понимание UX-законов, чтобы нестандартное решение не вызывало желания закрыть вкладку.

Ведущее правило: как бы хаотично визуально ни разворачивались элементы (будь то уход блоков в бок или перевороты), главный пользовательский путь движения мышкой «свайп вниз — значит дальше» никогда не ломается. Горизонтально скроллящийся контент на сайте применяется ровно в одном месте, но это решение не выглядит чужеродным, так как к нему есть плавная визуальная подводка.

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