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