1. Diseño no es "Hacerlo Bonito"
El diseño es cómo funciona.
UX (User Experience): Es la sensación, la facilidad de uso, la lógica.
Ejemplo: Que la puerta tenga una manija para jalar y una placa para empujar.
UI (User Interface): Es lo visual. El color de la manija, el material, la
textura.
Una UI hermosa con una mala UX (un botón bonito que no hace nada) no sirve.
2. Empatía por el Usuario
El pecado capital del diseñador: "Yo lo entiendo, así que el usuario lo entenderá". Falso.
Tu usuario puede ser una abuela de 80 años o un niño de 5. O alguien apurado en el metro con
poca señal y mucho sol en la pantalla.
Diseñamos para ELLOS, no para nuestro portafolio.
Evaluación 1: Definiciones
Si una web carga rápido y es fácil de comprar, pero es fea visualmente, ¿qué tiene?
3. Jerarquía Visual
No hagas pensar al usuario. Guía su ojo.
Lo más importante debe ser lo más grande y contrastante.
Si tu título H1, tu subtítulo y tu texto de párrafo tienen el mismo tamaño y color, el
cerebro se abruma (Carga Cognitiva).
Patrón F: En occidente leemos en forma de F. Arriba a la izquierda es el
lugar más valioso (Logo, Título).
4. Teoría del Color: La Regla 60-30-10
Para paletas balanceadas:
- 60% Color Dominante: Neutro (Blanco, gris suave, negro). El fondo.
- 30% Color Secundario: Identidad de marca (Azul corporativo, etc). Encabezados, tarjetas.
- 10% Color Acento: El "Call to Action". Botones de compra, alertas. Debe resaltar.
5. Tipografía y Legibilidad
Evita fuentes cursivas o góticas para textos largos. Usa Sans-Serif (sin
remates) como Inter, Roboto o Helvetica para pantallas.
Tamaño base: 16px. Menos de eso es ilegible para muchos.
Longitud de línea: No hagas líneas de texto de 1000px de ancho. El ojo se
pierde al volver. Mantén 60-80 caracteres por línea.
Evaluación 2: Color
¿Dónde deberías usar tu color más llamativo (Acento)?
6. Espacio en Blanco (White Space)
El espacio vacío no es espacio desperdiciado. Es espacio activo.
Le da elegancia al diseño y agrupa información.
Si comprimes todo para que "quepa en la pantalla", parecerá un volante de supermercado
barato. Dale aire a tus elementos (Margin y Padding).
7. Componentes y Atomic Design
No diseñes páginas. Diseña sistemas.
Átomos: Un botón, un input, un ícono.
Moléculas: Un buscador (Input + Botón).
Organismos: Un Header (Logo + Buscador + Menú).
Así creas consistencia.
8. Accesibilidad (a11y)
Internet es para todos, incluyendo ciegos, daltónicos o personas con problemas motores.
- Usa buen Contraste entre texto y fondo.
- Nunca confíes solo en el color para dar mensajes (ej: Error rojo). Usa también íconos o texto.
- Todas las imágenes deben tener texto alternativo (alt).
Evaluación 3: Inclusión
¿Quién se beneficia de la Accesibilidad?
9. Mobile First
Diseña primero para el celular.
En pantalla pequeña no hay espacio para basura. Te obliga a priorizar qué es realmente
importante.
Luego, cuando escalas a escritorio, añades más detalles (Progressive Enhancement). Es más
fácil que empezar en escritorio y tratar de meter un elefante en una caja de zapatos.
10. Wireframes vs Prototipos
Wireframe (LoFi): Bocetos en blanco y negro, cajas grises. Para discutir
estructura y flujo sin distraerse con colores.
Mockup/Prototipo (HiFi): Diseño final con colores, fotos y, a veces,
interacción clickeable para probar.
11. Herramientas: Figma
El estándar actual. Es colaborativo (como Google Docs), corre en el navegador y es muy
potente.
Otras: Adobe XD, Sketch. Pero Figma domina el mercado hoy. Aprenderlo es esencial para
cualquier Frontend o Diseñador.
¡Mentalidad de Diseñador!
Ahora ves el mundo diferente.
Cada vez que te frustres con una puerta que no abre o una web confusa, no pensarás "soy
tonto". Pensarás "esto tiene mala UX".
Mejorar la experiencia digital es mejorar la vida de las personas.