Ejercicios y práctica · Diseño de Interfaces Web · DAW

Qué deberías ser capaz de hacer

Errores frecuentes que la práctica debería detectar

• Falta de jerarquía visual: El usuario no sabe qué información es la más relevante. Causa: No se ha priorizado el contenido. Corrección: Utilizar tamaños, pesos y colores de fuente para establecer una clara jerarquía.
• Contraste insuficiente entre texto y fondo: Dificulta la lectura, especialmente para usuarios con deficiencias visuales. Causa: Selección de colores sin considerar la accesibilidad. Corrección: Emplear herramientas de verificación de contraste (ej. WebAIM Contrast Checker) para cumplir con los estándares WCAG.
• Elementos visuales desalineados o distribuidos aleatoriamente: Genera una sensación de desorden y falta de profesionalidad. Causa: Diseño sin una estructura de rejilla o sin aplicar principios de alineación. Corrección: Utilizar sistemas de rejilla (CSS Grid, Flexbox) para organizar los elementos de forma consistente.
• Paletas de color inconsistentes o con demasiados colores: la interfaz carece de coherencia visual y puede resultar abrumadora. Causa: selección de colores sin una estrategia definida. Corrección: establecer una paleta principal y secundaria limitada y aplicarla de forma consistente.
• Contraste de color insuficiente entre texto y fondo: dificulta la lectura y el acceso a la información, especialmente para usuarios con deficiencias visuales. Causa: desconocimiento de criterios de accesibilidad. Corrección: utilizar herramientas de verificación de contraste para acercarse a los ratios de referencia de WCAG.
• Uso de demasiadas tipografías o tipografías poco legibles para el cuerpo de texto: compromete la lectura y la profesionalidad del diseño. Causa: falta de conocimiento sobre combinación de fuentes y lecturabilidad en pantalla. Corrección: limitarse a 2-3 familias tipográficas bien elegidas, priorizando sans-serif para el cuerpo de texto.
• Confundir legibilidad (nivel de carácter) con lecturabilidad (nivel de bloque de texto): lleva a decisiones tipográficas incoherentes. Causa: falta de precisión terminológica en el proceso de diseño. Corrección: evaluar ambos criterios de forma independiente antes de seleccionar una tipografía.
• Uso de tablas HTML para la maquetación general de la página: dificulta la accesibilidad, el mantenimiento y la adaptación a distintos dispositivos. Causa: adopción de prácticas obsoletas heredadas de la redacción original del CE (2010). Corrección: reservar tablas exclusivamente para datos tabulares y usar CSS Grid/Flexbox para maquetar.
• Diseños rígidos que no se adaptan a diferentes tamaños de pantalla: la interfaz se visualiza mal en móviles o resoluciones variadas. Causa: no implementar principios de diseño responsive. Corrección: aplicar media queries y usar CSS Grid/Flexbox para diseños fluidos.
• `z-index` aplicado sin efecto visible: el elemento no cambia su orden de apilamiento. Causa: el elemento no tiene definida una propiedad `position` distinta de `static`. Corrección: asignar `position: relative`, `absolute`, `fixed` o `sticky` antes de usar `z-index`.
• Problemas de superposición de elementos o elementos importantes ocultos: la interfaz resulta confusa. Causa: mal uso de `position` y `z-index` sin planificar el contexto de apilamiento. Corrección: documentar y asignar valores de `z-index` de forma lógica y jerárquica.
• Inconsistencia en el diseño de la interfaz: Diferentes secciones de la web tienen apariencias o comportamientos distintos. Causa: Ausencia o incumplimiento de una guía de estilo. Corrección: Desarrollar una guía de estilo detallada y asegurar su aplicación rigurosa en todo el proyecto.
• Duplicación de código y esfuerzo en el desarrollo de nuevas páginas: Ralentiza el proceso y aumenta la probabilidad de errores. Causa: No utilizar plantillas o componentes reutilizables. Corrección: Identificar patrones de diseño comunes y crear plantillas o componentes modulares para su reutilización.
• Plantillas de diseño rígidas o difíciles de personalizar: Las plantillas no cumplen su función de agilizar el trabajo si requieren mucho esfuerzo para adaptarse. Causa: Diseño de la plantilla sin considerar la flexibilidad. Corrección: Diseñar plantillas con puntos de extensión claros y opciones de personalización (ej. variables CSS, slots).
• Saltarse la fase de prototipado interactivo: Descubrir problemas de usabilidad o diseño en etapas avanzadas de desarrollo, lo que resulta costoso de corregir. Causa: Subestimar el valor del prototipado. Corrección: Utilizar herramientas de prototipado (Figma, Adobe XD) para validar el diseño y las interacciones antes de la codificación.
• Dependencia exclusiva de una única herramienta sin considerar alternativas: Limita las capacidades del diseñador y la eficiencia del equipo. Causa: Falta de conocimiento sobre el ecosistema de herramientas. Corrección: Explorar y valorar diferentes herramientas para seleccionar la más adecuada según el proyecto y las necesidades del equipo.
• Falta de un flujo de trabajo claro entre diseño y desarrollo: Genera ineficiencias, malentendidos y errores en la implementación. Causa: Desorganización en el proceso. Corrección: Establecer un flujo de trabajo definido que integre las herramientas de diseño (ej. Figma con su función de 'Inspect') y las de desarrollo (ej. VS Code, Git).
• Abuso de estilos en línea: Causa: Facilidad inicial, desconocimiento de alternativas. Corrección: Priorizar hojas de estilo para mantener la coherencia y facilitar el mantenimiento.