374 lines
8.0 KiB
Markdown
374 lines
8.0 KiB
Markdown
- ✅ **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**:
|
|
- `<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
|
|
|
|
3. **Theme Provider**:
|
|
- Soporte para Dark/Light mode
|
|
- Variables CSS para cambios dinámicos
|
|
- Context API para tematización
|
|
|
|
4. **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
|
|
|