← vagabond agency
ux prototype · v1.0

UX Прототип

UX структура сайта по страницам. Цели, блоки экранов, компоненты, открытые вопросы.

статус: в работе
апр 2026
автор: Anton Kostylev
Интерактивная схема сайта →

Страницы

Нажми на страницу чтобы раскрыть UX структуру. Блоки идут сверху вниз — в том порядке, в котором пользователь видит их на экране.
/
Главная
Первый контакт. Показать кто мы и что делаем — за 3 секунды.
точка входа
БЛОКИ ЭКРАНА
01
Навигация
Логотип, ссылки, «написать нам» → телеграм
02
Герой
Главный месседж + подзаголовок + CTA
03
Избранные кейсы
3–6 карточек. Без фильтрации. Кнопка перехода к полному каталогу.
04
Футер
Навигация, направления, соцсети. Email — текстом без ссылки.
КОМПОНЕНТЫ
nav
hero
case-card
footer
btn-fill
/about/
Мы
Помочь понять — совпадаем ли по ценностям. Основа для доверия.
поддержка
БЛОКИ ЭКРАНА
01
Кто мы
Позиционирование: международное бюро стратегического дизайна и коммуникаций. История команды, опыт.
02
Почему Vagabond?
Расшифровка названия — «бродячий креатив». Подход к работе с глобальными брендами.
03
История
2022 — год основания. Первые партнёры.
04
Наша сила
Философия: чему научил опыт с франшизами и крупными клиентами.
05
Команда
Фото, имя, роль. Только те, кто открыт публично.
06
Ценности
Партнёрство, искренность, открытость опыту, экспертность, человечность.
07
Клиенты
Логотипы ключевых партнёров.
КОМПОНЕНТЫ
nav
rich-text
quote
team-card
values-list
client-logos
footer
/about/[slug]/
Участник команды
Показать человека за работой. Роль, экспертиза, вклад в кейсы.
детальная
БЛОКИ ЭКРАНА
01
Шапка участника
Фото, имя, роль в агентстве
02
О себе
Короткий текст — опыт, интересы, подход к работе
03
Кейсы участника
Проекты в которых участвовал. Карточки с переходом на страницу кейса.
04
CTA
Написать → телеграм
КОМПОНЕНТЫ
nav
member-cover
rich-text
case-card
cta-block
footer
/cases/
Кейсы
Дать возможность найти релевантный опыт быстро. ~40 проектов.
каталог
БЛОКИ ЭКРАНА
01
Заголовок раздела
«Кейсы» + короткий подзаголовок
02
Навигация по направлениям
все · айдентика · брендинг · нейронки · ивенты · креатив · дизайн-поддержка · фото · моушен-дизайн · дизайн презентаций · аудио · веб · иллюстрация · видео. Каждый таб — ссылка на отдельную страницу направления.
03
Сетка кейсов
Карточки: превью, направление, название.
КОМПОНЕНТЫ
nav
direction-header
direction-nav
case-card
footer
/cases/[direction]/
Кейсы по направлению
Отдельная страница-шаблон для каждого из 14 направлений. Показывает только кейсы этого направления.
каталог
БЛОКИ ЭКРАНА
01
Заголовок направления
Название направления + короткое описание что сюда входит
02
Навигация по направлениям
Все 14 направлений — текущее выделено. Каждый таб — ссылка на свою страницу.
03
Сетка кейсов
Только кейсы этого направления. Карточки: превью, название.
04
CTA
Начать диалог по этому направлению → телеграм
КОМПОНЕНТЫ
nav
direction-header
direction-nav
case-card
cta-block
footer
/cases/[slug]/
Страница кейса
Показать задачу, процесс и результат. Дать почувствовать качество работы.
детальная
БЛОКИ ЭКРАНА
01
Обложка кейса
Название, направление, клиент, год
02
Задача
Что стояло перед агентством
03
Решение + визуалы
Процесс и результат. Основной контент страницы.
04
Результат
Цифры, цитата клиента — если есть
05
Похожие кейсы
2–3 карточки по тому же направлению
06
CTA
Начать диалог → телеграм
КОМПОНЕНТЫ
nav
case-cover
rich-text
image-gallery
quote
case-card
cta-block
footer
/services/
Услуги
Показать направления агентства. Помочь выбрать релевантное.
каталог
БЛОКИ ЭКРАНА
01
Заголовок + вводный текст
Короткий tagline + приглашение обсудить задачу → телеграм
02
Карточки услуг
5 карточек: консультации, дизайн-аудит, проекты, дизайн-поддержка, запуск в LATAM. Название + иконка + описание + ссылка на детальную страницу.
03
Компетенции
9 категорий: креатив, сопровождение, копирайтинг, графический дизайн, моушен-дизайн, веб, фото, видео, аудио.
КОМПОНЕНТЫ
nav
service-card
competencies-list
footer
/services/[slug]/
Страница услуги
Что входит, как работаем. Подтвердить экспертизу кейсами.
детальная
БЛОКИ ЭКРАНА
01
Заголовок услуги
Название + короткое описание
02
Что входит
Что входит в услугу — этапы, результаты, формат работы
03
Кейсы по этой услуге
2–4 релевантных кейса
04
CTA
Начать диалог → телеграм
КОМПОНЕНТЫ
nav
rich-text
case-card
cta-block
footer
/blog/
Статьи
Экспертный контент. SEO и канал доверия.
каталог
БЛОКИ ЭКРАНА
01
Заголовок
«Статьи» + подзаголовок
02
Список статей
Карточки: обложка, тема, заголовок, дата
КОМПОНЕНТЫ
nav
post-card
footer
/blog/[slug]/
Статья
Полный материал. Создаёт доверие и ведёт к релевантным кейсам.
детальная
БЛОКИ ЭКРАНА
01
Обложка статьи
Заголовок, тема, дата, автор
02
Текст статьи
Rich text с визуалами
03
Следующая / релевантная статья
Переход к следующей или тематически близкой статье. Присутствует всегда.
04
Релевантные кейсы
2–3 кейса по теме статьи. Опционально — показывается если есть релевантные кейсы.
05
CTA
Начать диалог → телеграм
КОМПОНЕНТЫ
nav
post-cover
rich-text
quote
post-card
case-card
cta-block
footer
/contact/
Контакты
Конечная точка всех сценариев. Убрать барьер для первого контакта.
конверсия
БЛОКИ ЭКРАНА
01
Заголовок
Тёплый, приглашающий. На реальном сайте: «Мы открыты к новым знакомствам».
02
Текст + ссылка на Телеграм
Короткое приглашение обсудить проект или сотрудничество. Прямая ссылка на телеграм-бот. Без формы, без брифа.
КОМПОНЕНТЫ
nav
rich-text
cta-block
footer

Компоненты

Глобальные
nav
Главная навигация — логотип, ссылки, CTA → телеграм
btn-fill
Кнопка с заливкой — основное действие на странице
cta-block
Секция-призыв к действию — кнопка → телеграм. Единственная точка выхода по всему сайту. Нейминг меняется по контексту: «написать нам», «начать диалог», «обсудить проект».
footer
Подвал — навигация, направления, соцсети. Email текстом без ссылки. Соцсети живут только здесь.
Карточки
case-card
Карточка кейса в сетке — превью, направление, название
post-card
Карточка статьи — обложка, тема, заголовок, дата
service-card
Карточка направления — название, короткое описание
team-card
Карточка участника в списке — фото, имя, роль
Обложки детальных страниц
case-cover
Шапка страницы кейса — название, направление, клиент, год
post-cover
Шапка статьи — заголовок, тема, дата, автор
member-cover
Шапка участника команды — фото, имя, роль
Контент
hero
Героблок главной — месседж, подзаголовок, CTA
rich-text
Форматированный текст с визуалами
image-gallery
Галерея изображений — визуалы кейса
quote
Выделенная цитата — клиент, автор, участник команды
Списки
values-list
Список ценностей агентства
competencies-list
Полный список компетенций агентства — 11 категорий с описанием. На странице «Услуги».
client-logos
Логотипы ключевых клиентов — на странице «Мы»
Навигация по направлениям
direction-nav
Табы на /cases/ — ссылки на отдельные страницы направлений, не фильтр
direction-header
Заголовок раздела — на /cases/ общий, на /cases/[direction]/ название и описание направления
Соцсети
social-links
Соцсети агентства — только в футере, без акцента