← 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
Соцсети агентства — только в футере, без акцента
03
Демонстрация · 1440px
Главная
Мы
Кейсы
Услуги
Статьи
Контакты
Участник команды
Кейсы / направление
Страница кейса
Страница услуги
Статья
наведи на страницу
наведи на
страницу
vagabondagency.com/
Главная /
Международное агентство
стратегического дизайна
Брендинг, айдентика, коммуникации для сетевых брендов и франшиз
ИЗБРАННЫЕ КЕЙСЫ
Мы /about/
Мы
Международное агентство стратегического дизайна и коммуникаций. Специализируемся на сетевых брендах и франшизах.
Основаны в 2022. Первые клиенты — рестораны, сервисы доставки, маркетплейсы.
ПОЧЕМУ VAGABOND?
Гибкость без офиса, экспертиза без ограничений
История названия и философия агентства. Vagabond — потому что мы работаем отовсюду.
НАША СИЛА
Учились на ошибках и знаем, как их не повторять
12 лет в Dodo Brands. Сотни запусков. Понимание что работает в сетевом бизнесе.
КОМАНДА
ЦЕННОСТИ
01
Партнёрство
Работаем как часть команды клиента, а не как подрядчик
02
Искренность
Говорим прямо, даже если это неудобно
03
Открытость
Делимся знаниями и процессом без секретов
04
Экспертность
Двенадцать лет в индустрии — это не слова
05
Человечность
За каждым проектом — живые люди с настоящими целями
КЛИЕНТЫ
Готовы работать вместе?
Расскажите о проекте — начнём диалог
Участник команды /about/[slug]/
КОМАНДА
Имя Фамилия
Роль в агентстве
О СЕБЕ

Краткий рассказ участника о себе, опыте и специализации. Как пришёл в дизайн, что умеет лучше всего.

Дополнительный контекст — ключевые достижения, подход к работе.

КЕЙСЫ
Хотите работать с нами?
Расскажите о проекте
Кейсы /cases/
Кейсы
Кейсы / направление /cases/[direction]/
НАПРАВЛЕНИЕ
Брендинг
Краткое описание направления — что делаем, для кого, какие задачи решаем.
Нужен брендинг?
Обсудим ваш проект
Страница кейса /cases/[slug]/
БРЕНДИНГ
Название проекта
КЛИЕНТИмя клиента
ГОД2024
УСЛУГАБрендинг, айдентика
ЗАДАЧА
Заголовок задачи

Описание задачи клиента. Что нужно было сделать, в каком контексте, какие были ограничения.

РЕШЕНИЕ
Заголовок решения

Описание подхода и процесса. Что придумали, как реализовали, ключевые решения.

«Цитата клиента о работе с агентством»
Имя, должность в компании
РЕЗУЛЬТАТ
Что получилось
+40%
описание метрики
×2
описание метрики
3 мес
срок проекта
ПОХОЖИЕ КЕЙСЫ
Похожая задача?
Обсудим ваш проект
Услуги /services/
Услуги
Что мы делаем и как можем помочь вашему бренду вырасти.
КОМПЕТЕНЦИИ
Креатив
Планы, идеи, брейншторминг
Сопровождение
Арт-дирекшен, оптимизация
Копирайтинг
Тексты, сценарии, локализация
Графический дизайн
Макеты, фирменный стиль, упаковка
Моушен-дизайн
2D/3D-анимация
Веб
Дизайн, UX, разработка
Фото
Съёмка, ретушь, стайлинг
Видео
Ролики, монтаж, цветокоррекция
Аудио
Озвучка, саунд-дизайн, джинглы
Консультации /services/consulting/
УСЛУГА
Консультации
Одна или несколько встреч с экспертами агентства. Разбираем задачи по стратегии, дизайну и найму команды.
КОМУ ПОДОЙДЁТ
Компаниям и командам, которым нужна экспертиза без длительного проекта. Подходит для точечных вопросов по стратегии бренда, позиционированию или выбору подрядчика.
КАК РАБОТАЕМ
Согласовываем формат и тему заранее. Проводим встречу, фиксируем выводы и рекомендации. По итогу — конкретный план действий.
КЕЙСЫ ПО ЭТОЙ УСЛУГЕ
Нужна консультация?
Опишите задачу — подберём формат
Дизайн-аудит /services/audit/
УСЛУГА
Дизайн-аудит
Комплексная оценка дизайна и коммуникаций бренда. Находим слабые места и даём конкретные рекомендации.
КОМУ ПОДОЙДЁТ
Бизнесу, который хочет понять, почему дизайн не работает на рост. Подходит перед редизайном, ребрендингом или сменой агентства.
КАК РАБОТАЕМ
Анализируем все точки контакта: сайт, соцсети, материалы, упаковку. Оцениваем консистентность и соответствие аудитории. Готовим отчёт с приоритизированными рекомендациями.
КЕЙСЫ ПО ЭТОЙ УСЛУГЕ
Хотите аудит бренда?
Расскажите о задаче — обсудим формат
Проекты /services/projects/
УСЛУГА
Проекты
Брендинг, айдентика, креатив и коммуникации. Разрабатываем фирменный стиль для сетевых брендов и франшиз.
КОМУ ПОДОЙДЁТ
Компаниям, запускающим новый бренд или обновляющим существующий. Франшизам, сетям и амбициозным бизнесам, которым важен единый визуальный язык.
КАК РАБОТАЕМ
Погружаемся в бизнес, исследуем рынок и конкурентов. Разрабатываем стратегию и визуальный язык. Доводим до финального гайдлайна и применения на носителях.
КЕЙСЫ ПО ЭТОЙ УСЛУГЕ
Нужен проект?
Обсудим задачу и подберём формат
Дизайн-поддержка /services/support/
УСЛУГА
Дизайн-поддержка
Подбираем дизайнеров под задачу или формируем команду под проект. Без найма в штат.
КОМУ ПОДОЙДЁТ
Командам, которым нужен дизайнер под конкретную задачу или на постоянной основе. Компаниям без внутреннего дизайн-отдела или с перегруженной командой.
КАК РАБОТАЕМ
Берём бриф и подбираем специалиста из нашей сети. Берём на себя управление и контроль качества. Работаем в вашем ритме и процессах.
КЕЙСЫ ПО ЭТОЙ УСЛУГЕ
Нужна дизайн-поддержка?
Расскажите о задаче — подберём специалиста
Запуск в LATAM /services/latam/
УСЛУГА
Запуск в LATAM
Помогаем брендам выйти на рынок Латинской Америки. Исследование, адаптация и запуск с учётом культурного контекста.
КОМУ ПОДОЙДЁТ
Российским и европейским брендам, планирующим выход на рынок Латинской Америки. Тем, кто хочет избежать культурных ошибок и выстроить локальное доверие.
КАК РАБОТАЕМ
Исследуем целевой рынок и аудиторию. Адаптируем бренд, коммуникации и материалы под местный контекст. Сопровождаем на первых этапах запуска.
КЕЙСЫ ПО ЭТОЙ УСЛУГЕ
Планируете выход в LATAM?
Расскажите о бренде — обсудим стратегию
Статьи /blog/
Статьи
Экспертный контент: разборы, кейсы в формате лонгрида, мнения команды.
БРЕНДИНГ · 15 мая 2026
Заголовок статьи о брендинге для сетевых кафе
Краткое описание — о чём статья и почему стоит прочитать.
АЙДЕНТИКА · 3 мая 2026
Как мы разрабатываем айдентику для франшиз
Краткое описание — о чём статья и почему стоит прочитать.
ПРОЦЕСС · 20 апр 2026
Почему мы не берём проекты без брифа
Краткое описание — о чём статья и почему стоит прочитать.
Статья /blog/[slug]/
Заголовок статьи

Вводный абзац. О чём статья, почему это важно для тех, кто строит сетевой бизнес.

Основной текст. Аргументы, примеры, детали.

Продолжение. Ещё один смысловой блок с примером из практики агентства.

Заключение. Вывод и следующий шаг.

РЕЛЕВАНТНЫЕ КЕЙСЫ
Есть похожая задача?
Обсудим ваш проект
Контакты /contact/
Обсудить проект
Напишите нам в Телеграм — расскажите о задаче, и мы ответим в течение дня.