- ✅ **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 1. Actualizar design tokens en Avanza-UI basándose en este análisis 2. Crear componentes StudioButton, StudioInput, StudioCard 3. Implementar tema oscuro por defecto 4. Documentar patrones de uso 5. 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 ```yaml 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 ```yaml 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"): ```yaml 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: ```yaml 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): ```yaml Características: - Forma: Circular o redondeada - Tamaño: ~40-48px - Iconos: SVG, monocromáticos - Hover: Feedback visual inmediato ``` ### 3.4 Inputs/Form Fields ```yaml 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 ```yaml 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): ```css --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: ```yaml Botones: - Transition: smooth (~200ms) - Transform: subtle scale o elevation - Color: brightness aumentado Links/Cards: - Cursor: pointer - Background: ligero cambio - Border/Shadow: reforzado ``` ### Focus States: ```yaml Accessibility: - Outline: Visible en elementos interactivos - Color: Accent color - Width: 2-3px - Offset: 2-4px ``` ### Active/Pressed: ```yaml Feedback: - Transform: scale(0.98) - Brightness: reducida - Duration: ~100ms ``` --- ## 7. ACCESIBILIDAD ### Características Observadas: 1. **Botón "Skip to content"**: Presente para navegación por teclado 2. **Contraste**: Alto contraste texto/fondo 3. **Labels**: Textos descriptivos en elementos de forma 4. **Estructura semántica**: Headers, buttons correctamente etiquetados 5. **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: ```yaml Características: - Forma: Circular - Tamaño: Variable según contexto - Border: Sutil - Placeholder: Ícono de usuario cuando no hay imagen ``` ### Device Selectors (Mic/Camera): ```yaml Características: - Dropdown style - Iconos descriptivos - Estados visuales claros (muted/active) - Feedback inmediato de cambios ``` ### Settings Button: ```yaml 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: 1. **Sistema de Design Tokens**: ```typescript // 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', }; ``` 2. **Componentes Base Mejorados**: - `