Cesar Mendivil 91a09df7ab Unify ui-components into avanza-ui; remove ui-components package; fix type issues and studio-panel wrappers

2025-11-11 18:14:02 -07:00

8.0 KiB

Raw Permalink Blame History

✅ Jerarquía clara mediante tamaños y pesos tipográficos
✅ Accesibilidad bien implementada
✅ Feedback visual inmediato en interacciones
✅ Espaciado generoso para respiración visual
✅ Componentes consistentes y reutilizables

Para Avanza-UI: Adoptar estos principios garantizará una interfaz profesional, moderna y fácil de usar similar a StreamYard, manteniendo nuestra propia identidad visual.

PRÓXIMOS PASOS

Actualizar design tokens en Avanza-UI basándose en este análisis
Crear componentes StudioButton, StudioInput, StudioCard
Implementar tema oscuro por defecto
Documentar patrones de uso
Crear Storybook con ejemplos visuales

Análisis UI/UX de StreamYard Studio

Fecha de Análisis

11 de Noviembre de 2025

URL Analizada

https://streamyard.com/j9smzza87q

1. PALETA DE COLORES

Colores Principales Observados:

Fondo Principal: Gris muy oscuro/Negro (#1a1a1a aproximadamente)
Superficies Elevadas: Gris oscuro (#2a2a2a - #353535)
Texto Primario: Blanco (#ffffff)
Texto Secundario: Gris claro (#b0b0b0)
Accent/Primary: Azul (#4a90e2 aproximadamente)
Botón Primario: Color vibrante para CTAs principales

Esquema de Color:

Tema: Oscuro (Dark Mode nativo)
Contraste: Alto contraste para legibilidad
Jerarquía Visual: Clara diferenciación entre elementos mediante tonos de gris

2. TIPOGRAFÍA

Características:

Familia: Sans-serif moderna (probablemente system font o similar a Inter/Roboto)
Pesos Observados:
- Regular (400) para texto normal
- Medium (500) para labels
- Semi-bold (600) para headings
Tamaños:
- Headings: ~20-24px
- Body text: ~14-16px
- Secondary text: ~12-14px

Jerarquía Tipográfica:

H3 "Configura tu estudio": Claro, prominente
Párrafos informativos: Tamaño moderado, buen espaciado
Labels de botones: Legibles, peso adecuado

3. COMPONENTES UI PRINCIPALES

3.1 Header/Banner

Características:
  - Logo: Alineado a la izquierda
  - Altura: ~60-80px
  - Fondo: Sólido oscuro
  - Contenido: Logo + botón "Skip to content" (accesibilidad)

3.2 Cards/Superficies

Características:
  - Bordes: Redondeados (border-radius: 8-12px)
  - Sombras: Sutiles (box-shadow suave)
  - Padding: Generoso (~20-30px)
  - Fondo: Gris oscuro elevado

3.3 Botones

Botón Primario ("Entrar al estudio"):

Características:
  - Tamaño: Grande, prominente
  - Color: Accent color vibrante
  - Border-radius: ~8px
  - Padding: Vertical ~12-16px, Horizontal ~24-32px
  - Hover: Efecto de brillo/elevación
  - Font-weight: Medium/Semi-bold

Botones Secundarios:

Características:
  - Color: Outline o ghost style
  - Border: 1-2px sólido
  - Fondo: Transparente o semi-transparente
  - Hover: Cambio sutil de fondo

Botones de Acción (Iconos):

Características:
  - Forma: Circular o redondeada
  - Tamaño: ~40-48px
  - Iconos: SVG, monocromáticos
  - Hover: Feedback visual inmediato

3.4 Inputs/Form Fields

Características del TextBox "Nombre para mostrar":
  - Background: Gris oscuro (#2a2a2a)
  - Border: 1-2px, color sutil (#404040)
  - Border-radius: ~6-8px
  - Padding: ~12-16px
  - Font-size: ~14-16px
  - Focus state: Border accent color
  - Placeholder: Gris medio (#808080)

3.5 Secciones de Configuración

Audio/Video Setup:
  - Layout: Vertical stack
  - Spacing: Consistente (~16-24px)
  - Iconografía: Clara y funcional
  - Estados:
    - Activo: Color accent
    - Inactivo: Gris
    - Hover: Feedback visual

4. LAYOUT Y ESPACIADO

Grid System:

Tipo: Flexible, centrado
Max-width: ~1200-1400px para contenido principal
Gaps: Consistentes (16px, 24px, 32px)

Spacing Scale (estimado):

--spacing-xs: 4px;
--spacing-sm: 8px;
--spacing-md: 16px;
--spacing-lg: 24px;
--spacing-xl: 32px;
--spacing-2xl: 48px;

Padding/Margin:

Cards: 20-30px padding interno
Buttons: 12-16px vertical, 24-32px horizontal
Form fields: 12-16px padding
Between sections: 24-48px

5. ICONOGRAFÍA

Estilo de Iconos:

Tipo: Outline/Line icons
Tamaño: 20-24px típicamente
Color: Monocromático (hereda del texto o tiene color propio)
Stroke-width: ~2px

Ubicaciones:

Botones de configuración
Estados de micrófono/cámara
Acciones secundarias
Información/tooltips (ícono "i")

6. ESTADOS INTERACTIVOS

Hover Effects:

Botones:
  - Transition: smooth (~200ms)
  - Transform: subtle scale o elevation
  - Color: brightness aumentado

Links/Cards:
  - Cursor: pointer
  - Background: ligero cambio
  - Border/Shadow: reforzado

Focus States:

Accessibility:
  - Outline: Visible en elementos interactivos
  - Color: Accent color
  - Width: 2-3px
  - Offset: 2-4px

Active/Pressed:

Feedback:
  - Transform: scale(0.98)
  - Brightness: reducida
  - Duration: ~100ms

7. ACCESIBILIDAD

Características Observadas:

Botón "Skip to content": Presente para navegación por teclado
Contraste: Alto contraste texto/fondo
Labels: Textos descriptivos en elementos de forma
Estructura semántica: Headers, buttons correctamente etiquetados
Focus visible: Estados de foco claros

8. MICROINTERACCIONES

Animaciones Sutiles:

Transiciones: Suaves (200-300ms)
Easing: cubic-bezier ease-out
Elementos animados:
- Hover en botones
- Focus rings
- Carga de componentes (fade-in)

9. RESPONSIVE/ADAPTIVE DESIGN

Consideraciones:

Mobile-first approach probable
Breakpoints estimados:
- Mobile: < 768px
- Tablet: 768px - 1024px
- Desktop: > 1024px

10. COMPONENTES ESPECÍFICOS DE VIDEO STUDIO

Avatar/Profile Display:

Características:
  - Forma: Circular
  - Tamaño: Variable según contexto
  - Border: Sutil
  - Placeholder: Ícono de usuario cuando no hay imagen

Device Selectors (Mic/Camera):

Características:
  - Dropdown style
  - Iconos descriptivos
  - Estados visuales claros (muted/active)
  - Feedback inmediato de cambios

Settings Button:

Características:
  - Ícono de engranaje/configuración
  - Posición: Accesible pero no intrusiva
  - Hover: Efecto de rotación sutil (opcional)

11. RECOMENDACIONES PARA AVANZA-UI

Para Implementar en Avanza-UI:

Sistema de Design Tokens:

// colors.ts
export const colors = {
  background: {
    primary: '#1a1a1a',
    secondary: '#2a2a2a',
    elevated: '#353535',
  },
  text: {
    primary: '#ffffff',
    secondary: '#b0b0b0',
    muted: '#808080',
  },
  accent: {
    primary: '#4a90e2',
    hover: '#5a9ff2',
  },
  border: {
    default: '#404040',
    focus: '#4a90e2',
  }
};

// spacing.ts
export const spacing = {
  xs: '4px',
  sm: '8px',
  md: '16px',
  lg: '24px',
  xl: '32px',
  '2xl': '48px',
};

// typography.ts
export const typography = {
  fontFamily: 'system-ui, -apple-system, sans-serif',
  fontSize: {
    xs: '12px',
    sm: '14px',
    base: '16px',
    lg: '18px',
    xl: '20px',
    '2xl': '24px',
  },
  fontWeight: {
    regular: 400,
    medium: 500,
    semibold: 600,
    bold: 700,
  },
};

// borderRadius.ts
export const borderRadius = {
  sm: '4px',
  md: '8px',
  lg: '12px',
  full: '9999px',
};

Componentes Base Mejorados:
- <Button /> con variants: primary, secondary, ghost, icon
- <Input /> con estados focus/error mejorados
- <Card /> con elevación consistente
- <Avatar /> circular con placeholders
- <IconButton /> para acciones rápidas
Theme Provider:
- Soporte para Dark/Light mode
- Variables CSS para cambios dinámicos
- Context API para tematización
Animaciones Consistentes:
- Librería de transiciones reutilizables
- Timing functions estandarizadas
- Micro-interacciones predefinidas

CONCLUSIÓN

StreamYard utiliza un diseño oscuro, minimalista y funcional que prioriza:

✅ Claridad visual con alto contraste

8.0 KiB Raw Permalink Blame History