1. Principios Fundamentales
Balance
Distribución equilibrada de elementos visuales
- Simetría vs. Asimetría
- Peso visual
- Espacio negativo
Jerarquía
Organización y priorización de contenido
- Tamaños de texto
- Contraste visual
- Espaciado
Énfasis
Destacar elementos importantes
- Color y contraste
- Escala
- Posicionamiento
Ritmo
Patrones y repetición visual
- Espaciado consistente
- Elementos repetitivos
- Grids y alineación
2. Teoría del Color
Primario
Acción principal
Éxito
Confirmación
Error
Alertas
Advertencia
Precaución
Pro Tip: Usa el contraste de color para guiar la atención del usuario y mejorar la
legibilidad.
3. Tipografía
Sans-serif
The quick brown fox jumps over the lazy dog
Ideal para interfaces y texto en pantalla
Ejemplos: SF Pro, Inter, Roboto
Serif
The quick brown fox jumps over the lazy dog
Mejor para textos largos y títulos elegantes
Ejemplos: Georgia, Merriweather
Monospace
The quick brown fox jumps over the lazy dog
Perfecta para código y datos técnicos
Ejemplos: SF Mono, Fira Code
4. Layout y Composición
Grid Layout
1
2
3
4
Flexbox Layout
1
2
3
5. Diseño Responsive
↔️ Redimensiona para ver el comportamiento responsive
1
2
3
4
/* Mobile First */
@media (min-width: 768px) {
.container {
max-width: 720px;
}
}
@media (min-width: 1024px) {
.container {
max-width: 960px;
}
}
6. Accesibilidad
Contraste de Color
❌ Mal contraste
✅ Buen contraste
Pro Tip: Asegúrate de que el contraste entre texto y fondo cumpla con WCAG 2.1
AA (4.5:1 para texto normal).
7. Animaciones y Transiciones
Hover sobre el cuadrado:
.elemento {
transition: all 0.3s ease;
}
.elemento:hover {
transform: translateX(100px);
}
8. Mejores Prácticas
Mobile First
Diseña primero para móviles y expande para pantallas más grandes
Accesibilidad
Asegura que tu diseño sea usable por todos
Performance
Optimiza imágenes y recursos para carga rápida
Consistencia
Mantén un diseño coherente en toda la interfaz