RA1 · verificado

RA1 de Diseño de Interfaces Web · DAW

Planifica la creación de una interfaz web valorando y aplicando especificaciones de diseño.

Contenido verificado asociado a este RA

Principios Fundamentales de la Comunicación Visual en Interfaces Web

Esta unidad explora la importancia de la comunicación visual en el diseño web, cubriendo sus principios básicos como la jerarquía, el contraste, la alineación, la proximidad y la repetición. Se explica cómo estos principios influyen en la usabilidad y la experiencia del usuario, y cómo aplicarlos para crear interfaces efectaces y atractivas.

Selección y Aplicación de Color y Tipografía para Pantalla

Esta unidad profundiza en la selección estratégica de colores y tipografías para su visualización en pantalla, considerando su impacto psicológico, la legibilidad y lecturabilidad, y la accesibilidad. Se exploran principios de teoría del color, criterios de contraste, herramientas de mercado para construir paletas y elegir familias tipográficas, y buenas prácticas para reforzar la identidad de marca y mejorar la experiencia del usuario, en el marco de la comunicación visual aplicada al diseño de interfaces web.

Estructura y Presentación de la Información en Documentos Web: de las Técnicas Clásicas a CSS Grid y Flexbox

Esta unidad analiza las distintas alternativas históricas y actuales para organizar y presentar la información en documentos web, tal como recoge el CE_c del RA1 (análisis de alternativas de presentación) y el CE_f (uso de marcos, tablas y capas). Se estudia la evolución desde las tablas HTML y los marcos (frameset), técnicas contempladas en la redacción original del currículo (2010), hasta las soluciones actuales recomendadas por la industria: CSS Grid y Flexbox para maquetación, y el posicionamiento CSS (position, z-index) como interpretación moderna del concepto de 'capas'. Se distingue explícitamente qué es exigencia normativa de análisis/uso comparativo y qué es buena práctica técnica actual, evitando presentar recomendaciones de la industria como obligación curricular.

Guías de Estilo y Plantillas de Diseño para la Coherencia Web

Esta unidad subraya la importancia de las guías de estilo y las plantillas de diseño para asegurar la coherencia visual y funcional en el desarrollo de aplicaciones web. Se explican los componentes de una guía de estilo, cómo se crean y utilizan las plantillas, y su impacto en la eficiencia del desarrollo y la experiencia del usuario.

Herramientas para el Diseño y Prototipado de Documentos Web

Esta unidad presenta y valora diversas aplicaciones de software utilizadas en el proceso de diseño y prototipado de interfaces web. Se cubren herramientas de diseño gráfico, prototipado interactivo y edición de código, destacando sus funcionalidades clave y cómo se integran en el flujo de trabajo profesional.

Conceptos clave

Comunicación visualJerarquía visualContrasteAlineaciónProximidadRepeticiónUsabilidadExperiencia de usuario (UX)Psicología del colorTeoría del colorPaleta de coloresContraste de colorAccesibilidad (WCAG)TipografíaLegibilidadLecturabilidadJerarquía tipográficaFuentes web

Errores que conviene evitar

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.

Qué se evalúa en este RA

CE a

Se ha reconocido la importancia de la comunicación visual y sus principios básicos.

CE b

Se han analizado y seleccionado los colores y tipografías adecuados para su visualización en pantalla.

CE c

Se han analizado alternativas para la presentación de la información en documentos Web.

CE d

Se ha valorado la importancia de definir y aplicar la guía de estilo en el desarrollo de una aplicación Web.

CE e

Se han utilizado y valorado distintas aplicaciones para el diseño de documentos Web.

CE f

Se han utilizado marcos, tablas y capas para presentar la información de manera ordenada.

CE g

Se han creado y utilizado plantillas de diseño.