Skip to content

design_guidelines.md

Latest commit

 

History

History
146 lines (116 loc) · 5.27 KB

design_guidelines.md

File metadata and controls

146 lines (116 loc) · 5.27 KB
Raw

Guía de Diseño: Storyboard Studio Pro

Enfoque de Diseño

Aproximación Híbrida: Sistema profesional con elementos visuales impactantes

  • Base: Linear + Notion (UI limpia y organizada)
  • Inspiración visual: Runway ML + Frame.io (herramientas creativas de IA)
  • Principio: Funcionalidad primero, pero con estética moderna de herramientas generativas

Paleta de Color

Modo Oscuro (Principal)

  • Background Primary: 12 8% 8% (gris carbón profundo)
  • Background Secondary: 12 8% 12% (panels elevados)
  • Background Tertiary: 12 8% 16% (cards y contenedores)
  • Accent Primary: 260 95% 65% (púrpura vibrante para IA/generación)
  • Accent Secondary: 180 85% 55% (cyan para estados activos)
  • Success: 142 76% 45% (verde para créditos disponibles)
  • Warning: 38 92% 50% (ámbar para límites cercanos)
  • Error: 0 84% 60% (rojo para errores de generación)
  • Text Primary: 0 0% 98%
  • Text Secondary: 0 0% 65%
  • Text Tertiary: 0 0% 45%

Modo Claro (Opcional)

  • Background: 0 0% 98%
  • Panels: 0 0% 100%
  • Mismos accents con ajustes de luminosidad

Tipografía

Fuentes

  • Primary: Inter (títulos, UI, botones)
  • Monospace: JetBrains Mono (códigos, IDs, metadatos técnicos)

Escala

  • Hero/Display: text-4xl font-bold (project titles)
  • Headings: text-2xl font-semibold (section titles)
  • Subheadings: text-lg font-medium (card headers)
  • Body: text-base (descriptions, prompts)
  • Small: text-sm (metadata, timestamps)
  • Tiny: text-xs (labels, badges)

Sistema de Espaciado

Primitivos Tailwind Consistentes: 2, 3, 4, 6, 8, 12, 16

  • Micro spacing: p-2, gap-2 (botones, badges)
  • Component spacing: p-4, gap-4 (cards internos)
  • Section spacing: p-6, gap-6 (panels)
  • Layout spacing: p-8, gap-8 (main containers)
  • Major sections: py-12, py-16 (separación entre áreas principales)

Componentes Principales

1. Storyboard Card (Dual Frame)

  • Layout: Grid 2 columnas (Start Frame | End Frame)
  • Cada frame: Aspect ratio 16:9, rounded-lg overflow-hidden
  • Overlay controls: Absolute positioned con backdrop-blur-md
  • Metadata bar: Bottom sticky con provider badge, timestamp, prompt preview
  • Estado de generación: Loading skeleton con shimmer effect
  • Hover state: Border glow con accent color, scale-105 transition

2. Provider Selector

  • Design: Pills horizontales con scroll-x-auto
  • Cada pill: Icon + Name + Credits badge
  • Estados: Available (accent border), Limited (warning), Unavailable (grayed)
  • Active: Background accent-primary/20, border-2 accent-primary
  • Credit indicator: Circular progress ring dentro del pill

3. Asset Browser (Locaciones/Props/Arte)

  • Layout: Masonry grid (grid-cols-2 md:grid-cols-3 lg:grid-cols-4)
  • Cards: Hover lift effect, quick preview on click
  • Categories: Tab navigation superior con counts
  • Search: Sticky top con filtros desplegables
  • Selection: Checkbox overlay top-right con checkmark animation

4. Timeline View

  • Structure: Horizontal scroll con snap-x-mandatory
  • Panels: Width fijo, representan scenes
  • Connecting lines: SVG paths entre panels
  • Playhead: Absolute positioned vertical line con drag handle
  • Mini previews: Thumbnails 16:9 con scene numbers

5. Generation Queue

  • Position: Fixed bottom-right, expandible drawer
  • Items: Stack vertical con task status (pending, processing, complete, error)
  • Progress: Linear progress bar con estimated time
  • Notifications: Toast system para completions/errors
  • Batch actions: Cancel all, retry failed

Interacciones y Animaciones

Transiciones Sutiles

  • Hover: transition-all duration-200 ease-in-out
  • Page transitions: Fade + slide-up (50ms delay)
  • Modal/drawer: Backdrop fade + content slide (300ms)
  • Loading states: Skeleton shimmer sin spinners excesivos

Micro-interacciones

  • Button press: scale-95 active state
  • Success feedback: Checkmark scale-in + green flash
  • Drag/drop: Ghost preview con opacity-50

Layout Principal

Sidebar Navigation (Left, 240px)

  • Logo top
  • Primary nav (Projects, Assets, History)
  • Provider status indicators
  • Credits summary bottom

Main Canvas (Center, flex-1)

  • Top bar: Project title, view switcher (Cards/Timeline), actions
  • Content area: Scrollable storyboard workspace
  • Floating action button: "+ New Panel" bottom-right

Inspector Panel (Right, 320px, collapsible)

  • Active selection details
  • Prompt editor con syntax highlighting
  • Technical parameters (shot type, camera, etc.)
  • Quick asset additions

Casos Especiales

Empty States

  • Illustrated placeholders con onboarding CTAs
  • "Start your first scene" con quick templates

Error States

  • Provider fallback UI: "X failed, trying Y..."
  • Retry button prominente con alternative providers list

Success Patterns

  • Confetti animation en first generation
  • Progress celebrations en milestones (10 panels, 100 generations)

Imágenes

Hero Dashboard (si aplica landing interna)

  • Abstract AI-generated storyboard collage como background
  • Gradient overlay para legibilidad
  • CTA destacado con glass-morphism card

Provider Logos

  • Integrate official brand marks en selector
  • Monochrome en inactive, full color en active/hover