Как сделать сайт, который зацепит зумеров: секреты эмоционального дизайна

Поколение Z не делит сайты на «серьезные» и «для развлечения», оно делит их на «настоящие» и «искусственные». Угадали, что работает? Правильно, искренность, упакованная в удобный, легкий и эмоциональный дизайн. Спойлер: эмоция — это не просто украшение, а инструмент, влияющий на поведение пользователя.

Сегодня разложим по полочкам, как мы это делаем в агентстве, без сухой теории и с двумя интересными кейсами — Estory и «Меньше чем три».

Традиционный сайт говорит на языке «стандартов и технических требований». А поколению Z хочется чувств, узнаваемого тона, тонких метафор. Они ищут резонирующий опыт, чтобы было ощущение «это про меня».

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

Наша команда применяет три уровня восприятия по Дональду Норману и связывает каждый уровень с конкретными решениями.

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

А теперь разберем на примерах. К кейсам!

Эта история началась с редизайна сайта гастромолла Estory в Екатеринбурге. Первая версия сайта делала ставку на еду. Все было логично, пока не выяснилось: люди идут в Estory не только поесть. Они встречаются, слушают музыку, гуляют, ловят вайб. Настоящее назначение места — атмосфера.

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

«Мы не просто рассказали про атмосферу Estory — мы вживили ее в интерфейс сайта. Главной целью для себя поставили удобство и интерес: человек должен прочувствовать место.

Объединили оффлайн с онлайном через знакомых гостям героев. Добавили реакции при наведении курсора: например, у логотипа появляется кот и машет — за счет таких деталей сайт кажется живым.»

Андрей Кищин, Арт-директор агентства «Панки»

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

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

Еще одна неочевидная, но мощная выгода — разгрузка поддержки. Когда клиент видит статусы, сумму, детали заказа и базовые FAQ, он перестает атаковать менеджеров однотипными вопросами. Команда может заняться другими важными задачами — от разбора обратной связи до обработки крупных клиентов.

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

Согласно уже известным уровням Нормана:

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

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

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

В итоге сайт стал частью экосистемы Estory. Молодая аудитория чувствует «свое», более взрослая — удобство и ясность.

Второй кейс — поп-ап «Меньше чем три» (<3) для проекта Егора Крида внутри сайта гастромолла «Главный». Аудитория — только поколение Z. Бриф звучал классически: «Нужна страница под дроп мерча». Но мы быстро поняли: сделать формальный лендинг — значит потерять эмоциональный контакт с зумерами, а значит, и сделать проект впустую.

Мы начали с изучения языка аудитории. Залезли в Telegram-каналы и соцсети фанатов: короткие реплики, самоирония, мемы — все это сложило тональность. Дальше — визуал. Мы смешали панк-готические акценты с инфантильными деталями: тяжелые гротески рядом с розовыми пузырями и облаками, чуть неловкие эффекты, будто сайт собирали в спешке «на коленке». Нам это и требовалось — ощущение самодельного перформанса. Композиция местами нарочно неровная, элементы как будто спорят друг с другом.

Что же с юзабилити? На месте. Просто оно не выпячивается: тайминги, кнопки, навигация работают безупречно, хотя визуальная оболочка кричит: «Анархия!». Получается парадокс — и именно в нем энергия.

По Норману здесь акцент смещен:

Первый уровень, эмоциональный — ты влетаешь на страницу и сразу чувствуешь энергию. Второй, поведенческий — незаметен, но интуитивен. Третий, рефлексивный — «я часть движения, я понимаю шутки, мне сюда».

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

Estory — мягкий, объединяющий, уютный. Эмоция встроена в удобство. «Меньше чем три» — резкий, дерзкий, иногда граничит с кринжом. Эмоция там стоит выше удобства. Полярные эстетики — единая логика: люди чаще возвращаются, делятся ссылками, задерживаются на страницах, лучше запоминают бренд. Потому что честно.

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

Эмоция на сайте — это не просто украшение, а инструмент, который может стать основой продаж. Поколение Z покупает ощущение, атмосферу, вайб. Так что важно сделать так, чтобы ваш дизайн, тексты, анимации и даже навигация вызывали отклик.

Не забывайте о мобильной версии сайта. Для зумеров телефон — это главный инструмент взаимодействия. Поэтому стоит уделить внимание тому, как ваш сайт будет выглядеть и работать на смартфонах, не забывая про все то же внимание к деталям.

И наконец, помните, что искренность — это главное.

В завершение хотим сказать всем фаундерам и маркетологам: поколение Z не такое сложное, как кажется. Начните изучать, как думают зумеры, чтобы заговорить на их языке. Если вы это сделаете, ваш сайт обязательно станет их любимчиком.