Honk — Мессенджер, который показывает ощущение раньше списка функций
Honk — мессенджер, в котором видно каждое нажатие клавиши в момент набора. Сайт должен был передать это ощущение человеку, который приложением ещё не пользовался, — за те секунды, пока он решает, устанавливать ли его.
Задача
Переписку в реальном времени трудно объяснить одной фразой и невозможно доказать скриншотом настроек. Приложение цепляет динамикой — моментом, когда сообщение появляется буква за буквой, — и статичная маркетинговая страница здесь заведомо в проигрыше.
Подход
Мы поставили в центр страницы экраны самого приложения в размере телефона и окружили их элементами, которые пользователи узнают сразу: пузырями сообщений, реакциями, встроенной игрой. Заголовок формулирует обещание в нескольких словах, строка под ним уточняет его, а всё остальное на первом экране — сам продукт.
Показывать продукт, а не описывать его
Первый экран построен вокруг рамки размером с телефон, в которой работает настоящий интерфейс, а пузыри сообщений и стикеры-реакции выходят за её пределы на фон страницы. Это больше похоже на демонстрацию продукта перед камерой, чем на маркетинговую иллюстрацию.
Текста намеренно мало: короткий заголовок, одна уточняющая строка — дальше всё объясняет продукт.
Цвет, который держит структуру
Сайт построен на насыщенном синем с жёлтыми и зелёными акцентами, взятыми прямо из интерфейса приложения. У сайта и продукта одна палитра, поэтому экраны на странице выглядят её продолжением, а не вклейкой.
Благодаря этому строку анонсов и второстепенные ссылки легко читать без рамок и плашек — их отделяет только цвет.
Анонсы, которые не ломают страницу
Новостям о продукте нужно было место, которое не требует редизайна каждый раз. Анонс в форме плашки встроен в композицию первого экрана, а не висит полосой над ней: он читается как часть макета, и его можно поменять или убрать, не оставив пустоты.
Разработка
Сайт — приложение на Next.js с раздачей через Cloudflare. Экраны интерфейса — самые тяжёлые изображения на странице, поэтому для каждой ширины экрана они подготовлены в своём размере, а не отдаются в одном разрешении с уменьшением в браузере.
Что сделали
- Первый экран построен на живых экранах интерфейса в размере телефона
- Общая цветовая система у приложения и сайта
- Блок анонсов внутри макета, который можно менять без редизайна
- Сборка на Next.js с раздачей через Cloudflare
Частые вопросы
Показывать интерфейс, а не описывать механизм. Страница построена вокруг экранов самого приложения в размере телефона, а узнаваемые элементы — пузыри, реакции, встроенная игра — выходят на фон.
Потому что продукт объясняет себя быстрее, чем абзац. Заголовок формулирует обещание, одна строка его уточняет, а остальное место отдано интерфейсу.
Next.js и React, раздача через Cloudflare.
Как устроен сайт
«Главная сложность была в том, чтобы показать, чем Honk отличается, не объясняя это пять минут. Sakura поставила продукт в центр сайта, и это было абсолютно верное решение.»