Appearance
DRevent — ТЗ для дизайнера (развёрнутая версия)
Prod: drevent.app
Бренд: DeaR event / DRevent
Поддержка: support@drevent.app
Языки: русский + английский (i18n в продукте)
Краткая версия: 11-design-brief-short.md
1. Что это за проект
DRevent (в коде — EventPass) — веб-сервис общего фото/видео-альбома на мероприятии.
Организатор создаёт альбом за минуту, получает ссылку и QR-код, показывает гостям — они без приложения и без регистрации смотрят и загружают фото/видео с телефона. Всё собирается в одном месте; организатор может скачать архив, модерировать, брендировать альбом, вывести слайдшоу на экран (проектор/TV).
Главный принцип UX: гостей никогда не заставляем регистрироваться. Аккаунт — только у организатора и команды события.
Типичные события: свадьбы, дни рождения, корпоративы, конференции, частные праздники.
Слоган (из продукта): «Дорогое событие — общий альбом для всех».
2. Для кого (персоны)
| Персона | Кто | Аккаунт | Главная задача |
|---|---|---|---|
| Гость | Пришёл на событие | не нужен | Отсканировать QR → посмотреть/загрузить фото |
| Организатор (OWNER) | Жених/невеста, HR, ведущий | email + пароль / OAuth | Создать альбом, раздать QR, собрать и скачать всё |
| Модератор | Помощник организатора | по приглашению OWNER | Одобрять/отклонять загрузки |
| Участник (MEMBER) | Приглашённый в закрытый альбом | по invite-ссылке | Загружать в private-событие |
| SUPER_ADMIN | Команда платформы | seed/ручная выдача | /admin/* — пользователи, события, тарифы |
3. Ключевое ценностное предложение
- Без приложения — только браузер на телефоне
- Без регистрации для гостей — минимум трения в день события
- QR + короткая ссылка — например
drevent.app/svadba-anna-x7k2 - Live-альбом — новые фото появляются без перезагрузки (SSE)
- Wall (слайдшоу) — отдельный URL для экрана на площадке
- ZIP одним кликом — скачать все материалы после события
- Resumable upload (TUS) — загрузка переживает обрыв сети (важно для плохого Wi‑Fi на площадке)
- Freemium — бесплатный старт, платные тарифы для больших событий
4. Функции (что уже есть в продукте)
4.1 Для гостя (без логина)
- Альбом: сетка фото/видео, лайтбокс (PhotoSwipe)
- Загрузка с телефона (TUS, докачка при обрыве)
- Опциональное имя гостя перед загрузкой (localStorage)
- Лайки (если включены организатором)
- Страница Share: QR-код, ссылки (альбом / wall / админка), copy/download
- Wall: полноэкранное слайдшоу с автообновлением новых кадров
4.2 Для организатора (с аккаунтом)
- Регистрация / вход: email + пароль, OAuth (Google, VK, Yandex)
- Личный кабинет:
/account— дашборд, статистика;/my-events— список - Manage (
/:id/manage): все загрузки, удаление, ZIP (все / выбранные) - Settings (
/:id/settings): доступ, тип медиа, лимиты, модерация, брендинг - Members (
/:id/members): модераторы, участники, invite-ссылки - Moderate (
/:id/moderate): очередь PENDING → Approve/Reject - Profile: имя, пароль, сессии, выход на других устройствах
- Email-уведомления организатору о новых фото (instant + digest)
4.3 Маркетинг и legal
- Лендинг: hero + CreateEventForm + «как работает» + pricing + FAQ + social proof
/pricing— сравнение тарифов- Legal:
/terms,/privacy,/cookies+ cookie consent banner - Legal mini-footer на event/account layouts
4.4 Тарифы (FREE / BASE / PRO)
| Лимит | FREE | BASE | PRO |
|---|---|---|---|
| Событий на аккаунт | 3 | 10 | ∞ |
| Файлов в событии | 100 | 1 000 | ∞ |
| Хранение | 7 дней | 30 дней | 90 дней |
| Видео: макс. длина | 30 сек | 2 мин | 10 мин |
| Макс. размер файла | 50 МБ | 100 МБ | 500 МБ |
| Модерация | ❌ | ✅ | ✅ |
| Брендинг (лого, фон, цвет) | ❌ | ✅ | ✅ |
| Закрытый QR / private events | ❌ | ✅ | ✅ |
(Онлайн-оплата / апгрейд в UI пока заглушка — «связаться с нами» на support@drevent.app)
Подробнее: 07-limits-and-plans.md.
5. Карта экранов
5.1 Маркетинг (layout: landing)
| URL | Экран | Блоки |
|---|---|---|
/ | Лендинг | hero, CreateEventForm, how it works, pricing, FAQ, social proof |
/pricing | Тарифы | PricingPlanCard × 3 |
/terms, /privacy, /cookies | Legal | LegalPageShell + HTML-контент |
5.2 Гостевая зона (layout: default)
| URL | Экран | Блоки |
|---|---|---|
/:id | Альбом | EventPageNav, upload FAB, MediaGrid, лайтбокс |
/:id/share | QR + ссылки | QrShare, ShareLinks |
/:id/wall | Слайдшоу | SlideshowPlayer (fullscreen) |
/:id/join | Вступление MEMBER | join по токену |
5.3 Кабинет организатора (layout: cabinet, AdminSidebar)
| URL | Экран | Доступ |
|---|---|---|
/account | Дашборд | auth |
/my-events | Список событий | auth |
/profile | Профиль | auth |
/:id/manage | Управление медиа | MODERATOR / OWNER |
/:id/settings | Настройки | OWNER |
/:id/members | Команда | MODERATOR / OWNER |
/:id/moderate | Модерация | MODERATOR / OWNER |
5.4 Платформа (/admin/*, SUPER_ADMIN)
Users, events, plans — внутренний инструмент, приоритет P2.
5.5 Глобальные элементы (на всех страницах)
| Элемент | Компонент |
|---|---|
| Auth-модалка | AuthModal.vue — login / register / forgot / reset |
| Toast | UiToastContainer.vue |
| Cookie banner | CookieConsentBanner.vue |
| Inline errors | UiPageError.vue |
Подробнее: 08-screens-and-layouts.md · 02-frontend-map.md.
6. Ключевые user flow
mermaid
flowchart LR
A[Лендинг] --> B[Регистрация]
B --> C[Создать событие]
C --> D["/share — QR"]
D --> E[Гость сканирует QR]
E --> F[Альбом + upload]
F --> G[Wall на экране]
C --> H[Manage → ZIP]| # | Сценарий | Кто |
|---|---|---|
| S1 | QR → альбом → лайтбокс | Гость |
| S2 | Upload фото с телефона | Гость / MEMBER |
| S3 | Wall на проекторе | Гость / организатор |
| S4 | Лендинг → auth → create → share | OWNER |
| S5 | ZIP всех фото | OWNER / кто разрешено settings |
| S6 | Moderate approve/reject | MODERATOR |
| S7 | Invite moderaтор / MEMBER | OWNER |
| S8 | Закрытое событие по join-link | MEMBER |
Диаграммы: 05-user-flows.md.
7. Текущий UI-стек (ограничения)
| Аспект | Значение |
|---|---|
| Подход | SCSS + CSS-переменные, без Tailwind |
| Тема prod | Светлая — белый фон #ffffff, акцент #e63e5b, текст #1a1a1d |
| Тёмная тема | Tokens [data-theme='dark'] в коде, не включена в UI |
| Mobile-first | ~80% гостей с телефона |
| Брейкпоинты | 480 / 768 / 1024 px |
| Иконки | Lucide |
| UI-kit | components/ui/*, dev-стенд /dev/ui-kit (локально) |
| Брендинг события | CSS-переменные из EventSettings → альбом + wall |
Для дизайнера: живой prod drevent.app — это текущий «дизайн», не отдельный Figma-макет.
Документация UI-kit: ../09-ui-kit.md · ../ui-kit/.
8. Референсы и конкуренты
Похожие по модели (QR → guest upload → gallery → slideshow).
Главный конкурент на RU-сегменте (свадьбы, семейные праздники): Tamadoba — ориентир по продукту, тарифам, legal и guest UX для России.
| Сервис | Сегмент | Ссылка | Что взять за образец |
|---|---|---|---|
| Tamadoba | RU, primary | tamadoba.tech | RU-first лендинг и кабинет, FREE-тариф, QR/wedding flow, legal (terms/privacy/refund), структура футера и pricing |
| GuestPix | global | guestpix.com | QR-first, wedding UX, slideshow, guestbook |
| Kululu | global | kululu.com | Event photo collection, простой guest flow, settings UX |
| POV | global | pov.camera | Минималистичный mobile upload |
| Our Event Album | global | oureventalbum.com | Pricing, live demo, wedding positioning |
| Cluster | global | cluster.co | Альбомы, sharing (шире, не только events) |
| Wedbox | global | wedbox.com | Wedding QR photo sharing |
Косвенные референсы UX:
- Google Photos shared album — сетка, лайтбокс
- Instagram grid — плотность карточек на mobile
- Notion / Linear — чистый cabinet/sidebar для админки
Чем DRevent отличается (в т.ч. от Tamadoba):
- Бесплатный старт без оплаты до апгрейда (как у Tamadoba FREE — не копировать paywall слепо)
- RU-first: язык, OAuth VK/Yandex, compliance (152-ФЗ UI) — наравне с Tamadoba, не уступать
- Resumable upload (TUS) — важно для плохого Wi‑Fi на площадке
- Роли OWNER / MODERATOR / MEMBER, модерация, настройки QR-доступа — глубже, чем у типичного RU QR-альбома
- Нет AI-фильтров / photobook / face scan (backlog; у Tamadoba AI уже в продукте)
9. Приоритеты для дизайна
P0 — must have
- Лендинг — конверсия в «создать альбом»
- Альбом гостя (mobile) — upload FAB, сетка, пустое состояние
- Share / QR — макеты для печати (визитка, A6, табличка)
- Wall — fullscreen slideshow, читаемость с расстояния
- Auth-модалка — login / register / forgot password
P1 — important
- Cabinet: dashboard, manage, settings
- Тарифы (comparison table / cards)
- Moderate queue
- Error states: 404, offline, «нет доступа», пустой альбом
P2 — later
- Platform admin (
/admin/*) - Email-шаблоны (reset password, verify, new media)
- Print templates для QR (заготовки уже в коде)
10. Tone & visual direction
| Аспект | Направление |
|---|---|
| Tone | Тёплый, праздничный, но не «свадебный cliché» — подходит и для корпоратива |
| Аудитория RU | Свадьбы и семейные праздники — primary; B2B events — secondary |
| Доверие | Legal footer, privacy, cookies; визуально — «серьёзный SaaS» |
| Mobile guest UX | Крупные touch-targets, FAB upload, минимум текста |
| Organizer UX | Dashboard как у SaaS: sidebar, таблицы, настройки секциями |
| Wall | Контраст и читаемость с расстояния; учесть проектор/TV |
11. Что отдать (deliverables)
- Дизайн-система — эволюция текущего UI-kit или редизайн с нуля (согласовать с prod на drevent.app)
- Wireframes — P0 экраны (mobile + desktop)
- High-fidelity mockups — лендинг, альбом, share/QR, wall, auth modal, cabinet (manage + settings)
- Состояния UI — загрузка, пусто, ошибка, success toast
- QR print kit — 2–3 шаблона для печати (A6, визитка, табличка 10×15)
- Компоненты — кнопки, inputs, cards, modal, media grid, sidebar (Figma library)
- Прототип — guest flow: QR → upload → альбом (mobile)
Формат: Figma, auto-layout, варианты (variants) для mobile/tablet/desktop.
12. Публикация документации на сайте
Markdown из docs/product/ можно выложить как сайт с sidebar и поиском:
| Вариант | Инструмент | URL (пример) |
|---|---|---|
| A | VitePress в docs-site/ | docs.drevent.app |
| B | Тот же VitePress | dev.drevent.app |
| C | Nuxt Content в основном фронте | drevent.app/docs |
Рекомендация: отдельный CF Pages-проект (или второй custom domain на том же аккаунте) + VitePress. Деплой из GitHub Actions, ~1–2 часа настройки.
Подробнее: PRODUCT-GUIDE-PLAN.md § A.6 «VitePress».
13. Поддомен dev.drevent.app
Да, можно. Cloudflare DNS уже на drevent.app — добавляется CNAME:
dev → drevent.pages.dev (или отдельный Pages-проект)| Назначение | Что висит на dev.drevent.app |
|---|---|
| Документация | VitePress (product docs, design brief) |
| Staging | Preview-деплой фронта (ветка dev → другой API при желании) |
| UI-kit | Статический стенд компонентов |
Не путать:
drevent.app— prodapi.drevent.app— API (Fly)docs.drevent.app— логичнее для доки (привычнее, чемdev)dev.drevent.app— логичнее для staging/preview приложения
Оба поддомена — бесплатно на CF Pages Free (несколько custom domains на проект или два проекта).
14. Вне scope (не рисовать как MVP)
- Нативные iOS/Android приложения
- AI-фильтры, photobook, face recognition (Waldo)
- Онлайн-оплата / billing UI
- Чат между гостями
- Папки участников (MEMBER folders — backlog)
- Platform admin — P2
15. Доступ и материалы
| Ресурс | URL / путь |
|---|---|
| Prod | drevent.app |
| Demo (локально) | demo-event после npm run dev |
| Обзор продукта | 00-product-overview.md |
| Экраны | 08-screens-and-layouts.md |
| User flows | 05-user-flows.md |
| Роли | 04-roles-and-access.md |
| UI-kit | ../09-ui-kit.md |
16. Открытые вопросы к дизайнеру
- Редизайн с нуля или эволюция текущего prod? (светлая тема, акцент
#e63e5b— см. drevent.app) - Нужна ли тёмная тема как опция (tokens уже частично готовы)?
- Wall — светлый/тёмный фон для проектора; контраст с mobile-альбомом
- QR-материалы — neutral vs wedding-themed variants?
- Как показывать брендинг организатора без потери узнаваемости DRevent?
- Отдельный visual language для FREE vs PRO (брендинг как upsell)?