El problema con Dribbble
Dribbble está lleno de diseños espectaculares que nadie podría usar en la vida real. Textos en gris claro sobre fondo blanco. Navegación escondida detrás de íconos abstractos. Layouts que se rompen con contenido real.
Se ven increíbles en un shot de 800x600. Fallan en producción.
Qué significa diseñar bien
Para nosotros, un buen diseño cumple tres criterios en este orden:
- Funciona — El usuario completa su tarea sin fricción.
- Es claro — No necesita manual ni tooltip para entenderse.
- Se ve bien — Estética que transmite confianza y profesionalismo.
El orden importa. Un diseño hermoso que confunde es peor que uno feo que funciona.
Patrones que funcionan
Jerarquía visual clara
El ojo necesita saber dónde mirar primero. Usamos tamaño, peso, color y espacio para crear una jerarquía obvia:
- Título: grande, bold, alto contraste.
- Subtítulo: mediano, regular, contraste medio.
- Cuerpo: tamaño base, bajo contraste relativo.
- Metadata: pequeño, color muted.
Si todo tiene el mismo peso visual, nada destaca.
Affordance real
Un botón debe parecer un botón. Un link debe parecer un link. Un campo de formulario debe parecer un campo de formulario.
Parece obvio, pero la tendencia al minimalismo extremo ha eliminado señales visuales que los usuarios necesitan. Un botón sin borde, sin fondo y sin underline es texto — no importa que técnicamente sea clickeable.
Feedback inmediato
Cada acción del usuario necesita retroalimentación:
- Click → cambio visual instantáneo
- Envío de formulario → loading state
- Error → mensaje claro junto al campo
- Éxito → confirmación visible
El silencio es el peor feedback. Si el usuario no sabe si su acción funcionó, la repite.
Errores comunes que vemos
Diseñar para pantallas perfectas
El contenido real no es “Lorem ipsum”. Los nombres tienen 3 caracteres o 25. Los títulos tienen una palabra o tres líneas. Las imágenes vienen en cualquier ratio.
Diseñamos con contenido real desde el día uno. Si el diseño se rompe con un título largo, el diseño está incompleto.
Ignorar los estados vacíos
¿Qué ve el usuario cuando no hay datos? ¿Cuando la búsqueda no encuentra nada? ¿Cuando pierde la conexión?
Los empty states, error states y loading states son parte del diseño, no un afterthought.
Accesibilidad como “nice to have”
Contraste mínimo de 4.5:1 para texto. Navegación por teclado. Labels en formularios. Alt text en imágenes.
No es opcional. Es parte del trabajo.
Nuestro proceso
- Entender el problema — Antes de abrir Figma, entendemos qué necesita resolver el usuario.
- Wireframes de baja fidelidad — Estructura y flujo, sin estética.
- Diseño visual — Aplicar el sistema de diseño existente o crear uno nuevo.
- Prototipo interactivo — Validar flujos con interacciones reales.
- Handoff a desarrollo — Con specs claras, tokens definidos y edge cases documentados.
Cada paso tiene feedback. No diseñamos en un silo.
