Оставить заявку
Оставить заявку
Свяжитесь с нами!
Свяжитесь с нами!
Для улучшения работы сайта, мы используем файлы cookie :)
Как сделать сайт, который зацепит зумеров: секреты эмоционального дизайна
Всем привет, на связи «Панки», и у нас для вас одна новость и один разбор на тему поколения Z.
Новость — зумеры пролистывают сайты, как только ощущают фальшь на страницах. Разбор — как сделать так, чтобы вместо холодного интерфейса они встречали живой опыт, хотели кликать дальше и — внезапно — приносить бизнесу деньги, а не только статистику просмотров.
Поколение Z не делит сайты на «серьезные» и «для развлечения», оно делит их на «настоящие» и «искусственные». Угадали, что работает? Правильно, искренность, упакованная в удобный, легкий и эмоциональный дизайн. Спойлер: эмоция — это не просто украшение, а инструмент, влияющий на поведение пользователя.
Сегодня разложим по полочкам, как мы это делаем в агентстве, без сухой теории и с двумя интересными кейсами — Estory и «Меньше чем три».
Новость — зумеры пролистывают сайты, как только ощущают фальшь на страницах. Разбор — как сделать так, чтобы вместо холодного интерфейса они встречали живой опыт, хотели кликать дальше и — внезапно — приносить бизнесу деньги, а не только статистику просмотров.
Поколение Z не делит сайты на «серьезные» и «для развлечения», оно делит их на «настоящие» и «искусственные». Угадали, что работает? Правильно, искренность, упакованная в удобный, легкий и эмоциональный дизайн. Спойлер: эмоция — это не просто украшение, а инструмент, влияющий на поведение пользователя.
Сегодня разложим по полочкам, как мы это делаем в агентстве, без сухой теории и с двумя интересными кейсами — Estory и «Меньше чем три».
Когда бренд не слышит зумеров: основные ошибки
Традиционный сайт говорит на языке «стандартов и технических требований». А поколению Z хочется чувств, узнаваемого тона, тонких метафор. Они ищут резонирующий опыт, чтобы было ощущение «это про меня».
Проблема чаще всего кроется в подаче эмоций: бренд либо боится их, либо заменяет их на клише. В результате интерфейс остается стерильным, не вызывая реакции. Парадоксально, но факт: идеальный с точки зрения гайдлайнов сайт может быть пустым для восприятия.
Проблема чаще всего кроется в подаче эмоций: бренд либо боится их, либо заменяет их на клише. В результате интерфейс остается стерильным, не вызывая реакции. Парадоксально, но факт: идеальный с точки зрения гайдлайнов сайт может быть пустым для восприятия.
Как эмоция становится управляемой
Наша команда применяет три уровня восприятия по Дональду Норману и связывает каждый уровень с конкретными решениями.
Первый уровень — визуальный, когда важно сразу вызвать эмоцию у пользователя. Второй уровень — поведенческий, он связан с удобством нахождения на сайте. Третий — рефлексивный, благодаря ему формируется связь с брендом. Каждый из этих уровней мы включаем в наши проекты и создаем настоящую магию между пользователем и брендом.
А теперь разберем на примерах. К кейсам!
Первый уровень — визуальный, когда важно сразу вызвать эмоцию у пользователя. Второй уровень — поведенческий, он связан с удобством нахождения на сайте. Третий — рефлексивный, благодаря ему формируется связь с брендом. Каждый из этих уровней мы включаем в наши проекты и создаем настоящую магию между пользователем и брендом.
А теперь разберем на примерах. К кейсам!
Estory: разные поколения — одна эмоция
Эта история началась с редизайна сайта гастромолла Estory в Екатеринбурге. Первая версия сайта делала ставку на еду. Все было логично, пока не выяснилось: люди идут в Estory не только поесть. Они встречаются, слушают музыку, гуляют, ловят вайб. Настоящее назначение места — атмосфера.
Встала задача придумать способ перенести дух площадки в онлайн. Мы заметили, что у гастромолла были забавные иллюстрированные персонажи на баннерах — живые, слегка дерзкие и с характером. Не долго думая, решили внедрить в интерфейс те самые оффлайн-эмоции. И не просто бездумно перерисовать их в веб, а оживить. После проделанной работы онлайн-персонажи начали двигаться, перешептываться с пользователем, подсказывать ему и шутить. Получился мостик между экраном и реальным пространством.
Встала задача придумать способ перенести дух площадки в онлайн. Мы заметили, что у гастромолла были забавные иллюстрированные персонажи на баннерах — живые, слегка дерзкие и с характером. Не долго думая, решили внедрить в интерфейс те самые оффлайн-эмоции. И не просто бездумно перерисовать их в веб, а оживить. После проделанной работы онлайн-персонажи начали двигаться, перешептываться с пользователем, подсказывать ему и шутить. Получился мостик между экраном и реальным пространством.
«Мы не просто рассказали про атмосферу Estory — мы вживили ее в интерфейс сайта.
Главной целью для себя поставили удобство и интерес: человек
должен прочувствовать место.Объединили оффлайн с онлайном через знакомых гостям героев.
Добавили реакции при наведении курсора: например, у логотипа появляется
кот и машет — за счет таких деталей сайт кажется живым.»
Андрей Кищин, Арт-директор агентства «Панки»
Ключевой эффект — совпадение онлайн-опыта с оффлайном. Пользователь видит персонажей на сайте, приходит в гастромолл и встречает их на реальных вывесках. Возникает «сквозной» нарратив: бренд ведет себя последовательно, не изображает эмоцию, а проживает ее. А для зумеров это сигнал: доверять можно. Для владельца магазина кабинет постепенно превращается в аналитический центр. Видно все: кто покупает часто, кто исчез, кто стабильно оставляет объемные чеки, кто реагирует на акции.
Можно отслеживать путь клиента. Что он берет первым, чем дополняет заказ, через какой промежуток возвращается. И строить промо на основе реальных паттернов, без интуитивных догадок.
Еще одна неочевидная, но мощная выгода — разгрузка поддержки. Когда клиент видит статусы, сумму, детали заказа и базовые FAQ, он перестает атаковать менеджеров однотипными вопросами. Команда может заняться другими важными задачами — от разбора обратной связи до обработки крупных клиентов.
Можно отслеживать путь клиента. Что он берет первым, чем дополняет заказ, через какой промежуток возвращается. И строить промо на основе реальных паттернов, без интуитивных догадок.
Еще одна неочевидная, но мощная выгода — разгрузка поддержки. Когда клиент видит статусы, сумму, детали заказа и базовые FAQ, он перестает атаковать менеджеров однотипными вопросами. Команда может заняться другими важными задачами — от разбора обратной связи до обработки крупных клиентов.
И самое главное — все эти сценарии людям очень понятны. Маркетплейсы приучили пользователей к такому уровню шоппинга, и отставать от него не стоит.
Главная страница сайта Estory
Согласно уже известным уровням Нормана:
Первый уровень вызывает азарт и улыбку с первого взгляда. Второй — проводит по нужным сценариям: понятная навигация, логичные кнопки, предсказуемые реакции интерфейса. Третий — формирует связь «я понял это место, оно про меня».
Чтобы удержать баланс, мы смягчили визуал, использовав скругление шрифта и дружелюбные микротексты, убрали декоративный шум и добавили интерактив, помогающий вовлекаться.
Отдельный лайфхак — карта фудкорта с отметкой «Ты здесь». Мелочь, но оказавшись на незнакомой площадке фудкорта пользователь чувствует заботу. Внизу страницы — легкие анимации, всплывающие реплики персонажей, чуть-чуть юмора. Ровно столько, чтобы добавить жизни.
В итоге сайт стал частью экосистемы Estory. Молодая аудитория чувствует «свое», более взрослая — удобство и ясность.
Первый уровень вызывает азарт и улыбку с первого взгляда. Второй — проводит по нужным сценариям: понятная навигация, логичные кнопки, предсказуемые реакции интерфейса. Третий — формирует связь «я понял это место, оно про меня».
Чтобы удержать баланс, мы смягчили визуал, использовав скругление шрифта и дружелюбные микротексты, убрали декоративный шум и добавили интерактив, помогающий вовлекаться.
Отдельный лайфхак — карта фудкорта с отметкой «Ты здесь». Мелочь, но оказавшись на незнакомой площадке фудкорта пользователь чувствует заботу. Внизу страницы — легкие анимации, всплывающие реплики персонажей, чуть-чуть юмора. Ровно столько, чтобы добавить жизни.
В итоге сайт стал частью экосистемы Estory. Молодая аудитория чувствует «свое», более взрослая — удобство и ясность.
«Меньше чем три»: стать своим
Второй кейс — поп-ап «Меньше чем три» (<3) для проекта Егора Крида внутри сайта гастромолла «Главный». Аудитория — только поколение Z. Бриф звучал классически: «Нужна страница под дроп мерча». Но мы быстро поняли: сделать формальный лендинг — значит потерять эмоциональный контакт с зумерами, а значит, и сделать проект впустую.
Мы начали с изучения языка аудитории. Залезли в Telegram-каналы и соцсети фанатов: короткие реплики, самоирония, мемы — все это сложило тональность. Дальше — визуал. Мы смешали панк-готические акценты с инфантильными деталями: тяжелые гротески рядом с розовыми пузырями и облаками, чуть неловкие эффекты, будто сайт собирали в спешке «на коленке». Нам это и требовалось — ощущение самодельного перформанса. Композиция местами нарочно неровная, элементы как будто спорят друг с другом.
Мы начали с изучения языка аудитории. Залезли в Telegram-каналы и соцсети фанатов: короткие реплики, самоирония, мемы — все это сложило тональность. Дальше — визуал. Мы смешали панк-готические акценты с инфантильными деталями: тяжелые гротески рядом с розовыми пузырями и облаками, чуть неловкие эффекты, будто сайт собирали в спешке «на коленке». Нам это и требовалось — ощущение самодельного перформанса. Композиция местами нарочно неровная, элементы как будто спорят друг с другом.
Главная страница поп-апа внутри сайта гастромолла «Главный»
Что же с юзабилити? На месте. Просто оно не выпячивается: тайминги, кнопки, навигация работают безупречно, хотя визуальная оболочка кричит: «Анархия!». Получается парадокс — и именно в нем энергия.
По Норману здесь акцент смещен:
Первый уровень, эмоциональный — ты влетаешь на страницу и сразу чувствуешь энергию. Второй, поведенческий — незаметен, но интуитивен. Третий, рефлексивный — «я часть движения, я понимаю шутки, мне сюда».
По традиционным стандартам такой проект не оценить. Его нужно прожить, и тут как раз включается поколение Z.
По Норману здесь акцент смещен:
Первый уровень, эмоциональный — ты влетаешь на страницу и сразу чувствуешь энергию. Второй, поведенческий — незаметен, но интуитивен. Третий, рефлексивный — «я часть движения, я понимаю шутки, мне сюда».
По традиционным стандартам такой проект не оценить. Его нужно прожить, и тут как раз включается поколение Z.
Два разных подхода — одна философия
Estory — мягкий, объединяющий, уютный. Эмоция встроена в удобство. «Меньше чем три» — резкий, дерзкий, иногда граничит с кринжом. Эмоция там стоит выше удобства. Полярные эстетики — единая логика: люди чаще возвращаются, делятся ссылками, задерживаются на страницах, лучше запоминают бренд. Потому что честно.
Практические выводы для бизнеса
Первое, что важно понять: сайт должен быть не просто еще одной страницей. Он должен быть частью опыта вашего бренда. Важно создать эмоции и узнаваемые детали, которые покажут, кто вы есть и что для вас важно. Универсальных решений нет, и не может быть. Иначе ваш сайт рискует стать шаблонным и не попасть в сердца людей.
Эмоция на сайте — это не просто украшение, а инструмент, который может стать основой продаж. Поколение Z покупает ощущение, атмосферу, вайб. Так что важно сделать так, чтобы ваш дизайн, тексты, анимации и даже навигация вызывали отклик.
Не забывайте о мобильной версии сайта. Для зумеров телефон — это главный инструмент взаимодействия. Поэтому стоит уделить внимание тому, как ваш сайт будет выглядеть и работать на смартфонах, не забывая про все то же внимание к деталям.
И наконец, помните, что искренность — это главное.
Эмоция на сайте — это не просто украшение, а инструмент, который может стать основой продаж. Поколение Z покупает ощущение, атмосферу, вайб. Так что важно сделать так, чтобы ваш дизайн, тексты, анимации и даже навигация вызывали отклик.
Не забывайте о мобильной версии сайта. Для зумеров телефон — это главный инструмент взаимодействия. Поэтому стоит уделить внимание тому, как ваш сайт будет выглядеть и работать на смартфонах, не забывая про все то же внимание к деталям.
И наконец, помните, что искренность — это главное.
Зумеры несложные, зумеры — настоящие
В завершение хотим сказать всем фаундерам и маркетологам: поколение Z не такое сложное, как кажется. Начните изучать, как думают зумеры, чтобы заговорить на их языке. Если вы это сделаете, ваш сайт обязательно станет их любимчиком.
