READY GO — Сайт агентства, где заголовок и есть шоурил
READY GO — диджитал-агентство. Его сайт должен был за первые три секунды доказать широту возможностей, поэтому демонстрацией стал сам заголовок: фраза не меняется, а последнее слово в ней — постоянно.
Задача
Каждое агентство заявляет о широте возможностей, и каждое делает это абзацем текста. Доказательством должна быть сама работа, а не слова, — но главная страница всё равно обязана прямо сказать, чем занимается компания, иначе она превращается в портфолио, которое никто не может отнести ни к какой категории.
Подход
Заголовок называет факт — диджитал-агентство, — а последнее слово в нём перебирает услуги: продакшен, стратегия, мерч, креатив. Утверждение и доказательство живут в одной фразе, а изображения кейсов разбросаны вокруг неё, а не выстроены сеткой ниже.
Заголовок, который работает на сцене
«Мы — диджитал-агентство. К нам приходят за…» — и последнее слово меняется. Каждый вариант нарисован как авторский леттеринг, а не набран шрифтом, поэтому каждое состояние фразы — отдельная типографическая работа.
Первая строка отвечает на вопрос, что это за компания, вторая показывает широту возможностей — и всё это без единой фразы о себе.
Леттеринг как фирменный стиль
Акцидентные слова — это векторная графика, а не шрифт. Поэтому у каждого варианта свой вес и свои искажения, и заголовок воспринимается как спроектированный объект, а не как анимация, наложенная на текст.
Это осознанный компромисс, и о нём стоит сказать прямо: слова — это контуры, то есть изображения, а не выделяемый текст, поэтому для всего, что читает страницу программно, смысл передаёт окружающий текст.
Работы в свободной раскладке, а не в сетке
Изображения кейсов разного размера и под разными углами парят по краям заголовка и сменяются вместе с фразой. Обычная сетка сказала бы «шаблон агентства»; свободная раскладка говорит, что макет сделан под этот контент.
Сдержанность во всём остальном
Навигация — три простые ссылки. Нет видео на первом экране, нет индикатора прокрутки, нет навязчивого баннера cookie, который спорил бы с заголовком. Всё, что сайт может потратить на внимание, потрачено в одном месте.
Разработка
Next.js за nginx. Меняющийся заголовок заранее загружает графику следующего слова, поэтому при смене никогда не бывает пустого кадра.
Что сделали
- Меняющийся заголовок с отдельным леттерингом для каждого варианта
- Изображения кейсов, которые сменяются вместе с заголовком
- Навигация из трёх ссылок без конкурирующих элементов на первом экране
- Сборка на Next.js и Tailwind CSS на собственном сервере Node.js
Частые вопросы
Потому что агентству нужно доказать широту возможностей, а не заявить о ней. Когда в неизменной фразе меняется последнее слово, одна строка одновременно говорит, чем занимается компания, и показывает работу.
Каждый вариант нарисован отдельно, чтобы у него был свой вес и свои искажения. Цена этого решения — такие слова являются изображениями, а не выделяемым текстом, поэтому для всего, что читает страницу программно, смысл передаёт окружающий текст.
Next.js и React с Tailwind CSS на собственном сервере Node.js.
Как устроен сайт
«Нам хотелось, чтобы сайт сам показывал, на что способно наше агентство, и Sakura отлично это воплотила. Движущаяся типографика и вся компоновка придают сайту яркий характер и при этом не запутывают.»