Preparar el examen · Diseño de Interfaces Web · DAW

Qué puede evaluarse

Trampas habituales antes del examen

• 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.