UT1 — Planificación de interfaces gráficas¶

Índice¶

1. Elementos del diseño: percepción visual
2. Color, tipografía, iconos
3. Interacción persona-ordenador
4. Interpretación de guías de estilo. Elementos
5. Generación de documentos y sitios web
6. Componentes de una interfaz web
7. Tecnologías para el diseño de documentos web
8. Mapa de navegación. Prototipos
9. Maquetación web. Elementos de ordenación
10. Plantilla de diseño
11. Glosario rápido
12. Repaso: preguntas para autoevaluarte
13. De dónde sale esto (fuentes de la carpeta)
14. Avisos

De qué va esta unidad¶

Antes de escribir una sola línea de HTML o CSS, alguien tiene que decidir cómo se va a ver una página web: qué colores usará, qué tipografía, dónde irá el menú, cómo se llegará desde la portada hasta el formulario de contacto... Eso es planificar una interfaz. Y no es un capricho estético: una web mal planificada se nota enseguida, aunque el código por debajo sea perfecto.

En esta unidad vas a aprender el vocabulario y las herramientas mentales que usa cualquier diseñador o desarrollador web antes de ponerse a maquetar: qué es el diseño y cómo lo percibimos, qué papel juegan el color, la tipografía y los iconos, qué es eso de la "interacción persona-ordenador", para qué sirve (de verdad) una guía de estilo, cómo se organiza un sitio en páginas y secciones, y cómo se plasma todo eso en un boceto o prototipo antes de picar código.

Imagina que trabajas en una pequeña consultora de desarrollo web y te llega un cliente nuevo: el "Café Central", un negocio de barrio que quiere una web sencilla con su carta, horarios y un formulario de reservas. Antes de abrir el editor de código, tendrás que responder preguntas como: ¿qué colores transmiten el ambiente del local?, ¿qué tipografía se lee bien en una carta de bebidas?, ¿cuántas páginas necesita el sitio?, ¿cómo se navega entre ellas? Esta unidad te da el marco teórico para responder a todo eso, y lo aplicarás en la práctica UT01TE01 (guía de estilo y prototipo de la web del Café Central).

Qué deberías saber hacer al terminar (resultados de aprendizaje)¶

El resultado de aprendizaje de esta unidad es el RA1: Planifica la creación de una interfaz web valorando y aplicando especificaciones de diseño. En plata: al acabar la unidad deberías ser capaz de sentarte delante de un encargo nuevo y planificarlo con criterio, antes de maquetar nada.

En concreto, al terminar sabrás:

• Reconocer por qué la comunicación visual importa y cuáles son sus principios básicos (percepción, elementos del diseño).
• Analizar y elegir colores y tipografías pensados para verse bien en una pantalla, no en papel.
• Comparar distintas formas de presentar la información en un documento web y justificar cuál conviene en cada caso.
• Explicar por qué merece la pena definir (y de verdad aplicar) una guía de estilo en un proyecto web.
• Conocer y valorar distintas tecnologías y herramientas para diseñar documentos web.
• Crear y aprovechar plantillas de diseño en lugar de reinventar la rueda en cada proyecto.

1. Elementos del diseño: percepción visual¶

Qué es "diseñar"¶

El PDF 2-Planificación de Interfaces gráficas.pdf (la fuente más actual y concisa de la carpeta) define el diseño como "el proceso previo de configuración mental, 'pre-figuración', en la búsqueda de una solución en cualquier campo". Es un término que se usa en industria, arquitectura, ingeniería o comunicación, y no depende solo del gusto estético: quien diseña también tiene que pensar en la función y en la técnica. Diseñar implica investigar, analizar, modelar, ajustar... antes de dar por bueno un resultado.

Cómo percibimos¶

Para diseñar algo que otras personas van a "leer" con la vista, conviene entender primero cómo funciona la percepción. La percepción es el proceso de recogida y tratamiento de la información sensorial: recibimos, a través de los sentidos, imágenes, sonidos o sensaciones, y las interpretamos. No es un proceso pasivo — percibir implica buscar, seleccionar, relacionar, recordar e interpretar.

Detrás de buena parte de lo que sabemos sobre percepción visual está la psicología de la Gestalt, que estudia cómo nuestro cerebro organiza la información que le llega a través de los sentidos (o de la memoria) siguiendo ciertas "leyes" de agrupación. Estas leyes son enormemente útiles para el diseño de interfaces, porque explican por qué el ojo agrupa unos elementos y separa otros sin que nadie se lo diga explícitamente. Algunos de sus principios más citados son:

• Proximidad: agrupamos mentalmente los elementos que están cerca entre sí. Por eso, si quieres que el usuario perciba varios enlaces como un mismo bloque de menú, basta con acercarlos.
• Semejanza: agrupamos lo que se parece en forma, color o tamaño, aunque esté separado.
• Simetría y continuidad: tendemos a percibir como un único elemento lo que está dispuesto simétricamente, o a "completar" mentalmente una línea aunque esté interrumpida.
• Cierre: percibimos figuras completas aunque su contorno esté incompleto.
• Área o tamaño relativo y figura-fondo: el objeto más pequeño de dos que se superponen se percibe como figura, y el mayor como fondo.
• Ley de simplicidad (pregnancia o "buena forma"): la mente tiende a percibir las formas más simples, lo que facilita recordarlas.

Figura: distintas agrupaciones de puntos percibidas por proximidad (filas, columnas, bloques). Origen: DIW01.pdf.

Los cuatro grupos de elementos del diseño¶

Tanto DIW01.pdf como el capítulo de muestra de Sintesis - Diseño de interfaces web coinciden (lo cual es una buena señal de que es contenido consolidado, no una peculiaridad de un solo libro) en organizar el vocabulario del diseño gráfico en cuatro grandes categorías:

Un ejemplo del propio material: un punto indica posición pero no tiene largo, ancho ni ocupa espacio; una línea es el resultado de mover un punto y tiene largo y dirección; un plano es una línea que se desplaza y añade ancho; y un volumen es un plano que se desplaza y añade profundidad (en un diseño bidimensional como una pantalla, ese volumen es siempre "ilusorio", una simulación).

Ejemplo actual — iconos que "flotan". Cuando una app como Figma o Notion usa sombras suaves para dar sensación de profundidad a una tarjeta o a un botón, está jugando con el elemento de relación "espacio" y con el elemento visual "textura" para sugerir volumen en una pantalla que, en realidad, es completamente plana.

En las noticias — accesibilidad y percepción del color. En los últimos años varias marcas y aplicaciones (según se ha informado, entre ellas juegos y apps de uso masivo) han incorporado modos específicos para personas con daltonismo, ajustando paletas de color para que el contraste y el significado de la información no dependan solo de distinguir tonos. Es una aplicación directa de que la percepción visual no es igual para todo el mundo.

Ideas clave de esta sección¶

• Diseñar no es solo "que quede bonito": implica función, técnica y comunicación.
• Percibir es un proceso activo de interpretación, no una simple recepción de estímulos.
• La psicología de la Gestalt explica por qué agrupamos visualmente elementos cercanos, parecidos, simétricos o cerrados, y esos principios se aplican directamente al diseño de interfaces.
• El vocabulario del diseño se organiza en elementos conceptuales, visuales, de relación y prácticos.

2. Color, tipografía, iconos¶

El color: RGB, matiz, saturación y brillo¶

El ojo humano percibe tres colores llamados aditivos: rojo, verde y azul (de ahí el nombre RGB, Red-Green-Blue). Combinándolos en distintas proporciones se obtiene el resto de la gama cromática, y ese es precisamente el sistema que usan las pantallas de ordenador.

Cada uno de los tres colores se codifica con 8 bits, lo que da 256 valores posibles por canal (de 0 a 255, o de 00 a FF en hexadecimal). El número total de combinaciones sale de multiplicar 256 × 256 × 256, es decir, 16.777.216 colores (el llamado color verdadero o true color). Por ejemplo, el amarillo puro se forma con rojo al máximo, verde al máximo y azul a cero: #FFFF00.

Figura: al superponer los tres colores aditivos (rojo, verde, azul) se generan magenta, cian, amarillo y, en el centro, blanco. Origen: Sintesis - Diseño de interfaces web (muestra).pdf.

Más allá del valor de cada canal, un color se puede describir por tres propiedades:

• Matiz: lo que distingue un color de otro (rojo, verde, azul...); los colores opuestos en el círculo cromático son complementarios.
• Saturación: la intensidad del color; cuanto más gris tiene, menos saturado (y menos intenso) resulta.
• Brillo: la cantidad de luz del color, es decir, lo claro u oscuro que resulta frente a su tono puro.

La rueda de color de doce colores (tres primarios, tres secundarios y seis terciarios) es la herramienta clásica para construir combinaciones: colores complementarios (opuestos, para generar contraste), análogos (vecinos, para generar armonía) o monocromáticos (tonos de un mismo color).

Figura: rueda de doce colores usada para elegir combinaciones complementarias, análogas o monocromáticas. Origen: DIW01.pdf.

Un aspecto a tener en cuenta, aunque hoy sea menos crítico que hace años, son los colores seguros o web-safe colors: los que se representan igual en cualquier navegador, dispositivo o sistema operativo, para garantizar que todo el mundo vea la misma experiencia cromática. Se consiguen combinando únicamente los valores hexadecimales 00, 33, 66, 99, CC y FF en cada canal RGB, lo que da 6 × 6 × 6 = 216 colores seguros. (Nota: Sintesis - Diseño de interfaces web (muestra).pdf incluye por error un séptimo valor —AA— en la lista, sin citar en ningún momento el total de 216 combinaciones; nos quedamos con los seis valores clásicos porque son los que cita DIW01.pdf y los que cuadran con la aritmética 6³ = 216).

Figura: ejemplos de colores seguros, formados solo con combinaciones de 00, 33, 66, 99, CC y FF. Origen: Sintesis - Diseño de interfaces web (muestra).pdf.

Tipografía¶

A la hora de elegir la tipografía de un sitio hay que decidir, como mínimo, cuatro cosas: la fuente en sí (no todas se ven igual de bien en todas las plataformas: una fuente muy extendida y segura es Arial), el estilo (cursiva, negrita, subrayado — cuidado con abusar del subrayado, porque el usuario lo asocia automáticamente a un enlace), el tamaño (distinto según sea un titular o un párrafo) y el color respecto al fondo (se lee mejor un texto oscuro sobre fondo claro, y mejor sobre un fondo liso que sobre una imagen o textura). Como norma general de una guía de estilo, no suelen ser necesarias más de tres fuentes distintas en un mismo sitio.

Iconografía¶

Un icono es, según la RAE, "un signo que mantiene una relación de semejanza con el objeto representado"; en términos informáticos, un pequeño gráfico que identifica un objeto o una acción mediante un simbolismo reconocible. Un buen icono aplica los tres elementos prácticos del diseño que vimos en el apartado anterior: es representativo (se parece a algo del mundo real), tiene significado (genera una imagen conceptual en la mente del usuario) y cumple una función (ahorra al usuario tener que leer el texto). Por eso conviene usar iconos que el usuario ya reconozca — un carrito de la compra, una lupa para buscar, un sobre para contacto — en lugar de inventar símbolos nuevos que nadie entienda a la primera.

Figura: iconos habituales en tiendas online — tarjetas, monedas, carrito de la compra — de uso reconocible para el usuario. Origen: DIW01.pdf.

Ejemplo actual — modo oscuro. Casi cualquier app o web moderna (YouTube, Twitter/X, Gmail, los propios sistemas operativos) ofrece hoy un "modo oscuro" como alternativa de color. No es solo estética: cambia el brillo y el contraste de toda la interfaz y hay que revisar que iconos, textos y estados (como los enlaces visitados) sigan siendo legibles en ambos modos. Es justo lo que se pide en la práctica de mejora UT01PO01 del Café Central ("modo oscuro").

En las noticias — tipografías de marca. En los últimos años varias marcas conocidas han rediseñado su tipografía corporativa para mejorar la legibilidad en pantallas pequeñas (móviles) frente a los soportes impresos tradicionales; es un ejemplo de cómo la tipografía "para pantalla" tiene requisitos distintos a la tipografía "para papel".

Ideas clave de esta sección¶

• El sistema RGB codifica cada color con 8 bits por canal (256 valores), dando 16.777.216 colores posibles combinando rojo, verde y azul.
• Matiz, saturación y brillo son las tres propiedades que describen un color más allá de su valor RGB.
• Los colores seguros (216, combinando 00/33/66/99/CC/FF) garantizan que un color se vea igual en cualquier dispositivo.
• Una buena tipografía web se elige pensando en legibilidad en pantalla, no solo en estética.
• Un icono debe ser reconocible y aportar significado real, no ser un simple adorno.

3. Interacción persona-ordenador¶

Mira a tu alrededor: estamos rodeados de interfaces. El botón del ascensor, la llave de tu casa, el grifo del agua... todos son medios para conseguir un objetivo (llegar a un piso, abrir una puerta, calmar la sed). Con el ordenador ocurre lo mismo: nos comunicamos con él sobre todo a través de la vista, el oído y el tacto.

La Interacción Persona-Ordenador (IPO), o HCI por sus siglas en inglés (Human-Computer Interaction), es, según la definición que recoge DIW01.pdf de la ACM (Association for Computer Machinery) y su grupo SIGCHI (Special Interest Group on Computer-Human Interaction), "la disciplina relacionada con el diseño, evaluación e implementación de sistemas informáticos interactivos para ser usados por personas, y con el estudio de los fenómenos más importantes que están relacionados". Dicho de forma más sencilla: la IPO estudia cómo se intercambia información entre las personas y los ordenadores, y busca que ese intercambio sea lo más eficiente y satisfactorio posible.

Por qué importa esto para un desarrollador: la mayoría de los sistemas informáticos actuales son interactivos, y su éxito o fracaso depende en gran medida de cómo está diseñada la interfaz, no solo de que el código funcione. Cada vez hay más gente usando ordenadores, móviles y tablets, con distintos niveles de experiencia y distintas expectativas — por eso diseñar pensando "solo en mí" es un error habitual de quien empieza en esto.

Ejemplo actual — asistentes de voz y pantallas táctiles. Cuando le hablas a un asistente como Siri, Alexa o el Asistente de Google, o cuando deslizas el dedo en el móvil para dar "me gusta", estás interactuando con el ordenador a través de canales muy distintos al teclado y el ratón clásicos. La IPO también estudia estas interfaces de voz, gestos o realidad aumentada, no solo la interacción "de toda la vida" con pantalla y ratón.

En las noticias — IA generativa en el diseño de interfaces. En los últimos cursos, herramientas de diseño como Figma han incorporado funciones de inteligencia artificial para generar variantes de interfaz a partir de una descripción en texto. Según se ha informado, esto no elimina la necesidad de entender IPO y usabilidad: alguien tiene que seguir decidiendo si esas propuestas automáticas son realmente usables para las personas que van a usarlas.

Ideas clave de esta sección¶

• La IPO (o HCI) es la disciplina que estudia cómo interactúan las personas con los sistemas informáticos, con el objetivo de que ese intercambio sea eficiente y satisfactorio.
• El éxito de una aplicación interactiva depende en gran medida de su interfaz, no solo de su funcionalidad interna.
• Cada persona usuaria llega con un nivel de preparación y unas expectativas distintas: hay que diseñar pensando en ella, no en quien diseña.

4. Interpretación de guías de estilo. Elementos¶

Qué es (y qué no es) una guía de estilo¶

Una guía de estilo es un documento que recoge las normativas y patrones básicos relacionados con el aspecto de una interfaz, para aplicarlos de forma coherente en el desarrollo de nuevas pantallas dentro de un mismo entorno: colores, tipografías, medidas en píxeles... Es importante no confundirla con un manual de usabilidad, que describe cómo se usa la aplicación (el comportamiento), no cómo se ve. El material lo resume con un ejemplo muy gráfico: pedir "un coche rojo" (diseño/aspecto) no es lo mismo que preguntar "¿para qué lo quieres, carretera o montaña?" (usabilidad/comportamiento).

Características de una guía de estilo útil¶

Tanto 2-Planificación de Interfaces gráficas.pdf como DIW01.pdf coinciden en que una buena guía de estilo debería ser:

• Usable: debe integrarse en el proceso de trabajo real de quien desarrolla, no ser un documento aparte que nadie consulta.
• Visual: cuanto más basada en ejemplos gráficos y menos en texto, mejor — un documento solo de texto tiende a quedar desactualizado y a no usarse.
• Educativa: rica en ejemplos aplicables que ayuden a desarrollar criterio, no solo normas sueltas.
• Actualizada: con ejemplos y materiales vigentes, no una foto fija del primer día del proyecto.

Por qué tantas guías de estilo acaban criando polvo¶

El material es bastante honesto sobre esto: la experiencia demuestra que los equipos de desarrollo casi nunca se apoyan en las guías de estilo para trabajar. Entre las razones que da 2-Planificación de Interfaces gráficas.pdf:

• Se crean desde áreas de marketing o negocio que no conocen el día a día de quien desarrolla.
• No se adaptan al método de trabajo real (son demasiado largas o vienen en un formato poco práctico).
• Se detienen en detalles excesivos (píxeles exactos, valores hexadecimales) en vez de dar criterios generales.
• Nadie las mantiene actualizadas tras la primera versión.
• Se publican sin ninguna acción de formación o apoyo, así que caducan por desuso.
• No fomentan la reutilización de soluciones entre equipos.

Puntos que debe cubrir una guía de estilo¶

Combinando los dos PDF más completos en este punto, una guía de estilo debería recoger, como mínimo:

1. Paleta de color: los tonos elegidos y sus combinaciones (en hexadecimal y decimal).
2. Tipografías: qué fuentes se usan, en qué casos, con qué tamaños y estilos.
3. Cuadrícula y maquetación: cómo se distribuyen los elementos en la página.
4. Estructura de navegación: el mapa de contenidos del sitio (lo veremos en el apartado 8).
5. Textos: los contenidos clave, incluida información de contacto.
6. Imágenes: formato y tamaño (ancho × alto en píxeles) de fotos y logotipos según dónde se vayan a usar.
7. Elementos gráficos e iconografía: cuándo y cómo se incorporan logotipo e iconos.

Ejemplo actual — sistemas de diseño (design systems). Lo que antes se llamaba "guía de estilo" hoy suele vivir como un design system vivo dentro de Figma, con componentes reutilizables, tokens de color y tipografía versionados en un repositorio. Empresas como Google (Material Design) o Atlassian publican sus sistemas de diseño en abierto: son la evolución moderna de exactamente lo que describe este apartado.

En las noticias — rediseños corporativos. Cuando una marca conocida cambia de logotipo o de paleta de color (algo que ocurre de vez en cuando con marcas de gran consumo o entidades públicas), suele publicar también una guía de identidad visual con las variantes permitidas del logo, los colores exactos y la tipografía oficial, precisamente para que cualquier equipo que trabaje con esa marca sea consistente.

Ideas clave de esta sección¶

• Una guía de estilo regula el aspecto de la interfaz; un manual de usabilidad regula su comportamiento. Son cosas distintas.
• Para que una guía de estilo se use de verdad, debe ser práctica, visual y estar viva (actualizada), no un documento que se escribe una vez y se olvida.
• Como mínimo debe cubrir color, tipografía, maquetación, navegación, textos, imágenes e iconografía.

5. Generación de documentos y sitios web¶

Crear un sitio web, como cualquier proyecto de software, pasa por una serie de fases que se solapan más de lo que parece a simple vista:

• Análisis: se recaba información, se definen los requisitos, el sistema de navegación y la funcionalidad, y se eligen herramientas y lenguajes. Aquí es donde se empiezan a fijar las pautas (tipografía, colores, iconografía, distribución) que luego recogerá la guía de estilo.
• Desarrollo: se implementa el sitio con las herramientas y pautas elegidas.
• Pruebas y depuración: se comprueba, en paralelo al desarrollo, que todos los enlaces funcionan y que la interacción es correcta — especialmente importante en sitios grandes.
• Documentación: también en paralelo a las demás fases. Incluye documentar los requisitos, comentar el código para facilitar el mantenimiento futuro y, sobre todo, mantener la guía de estilo que servirá de referencia durante todo el ciclo de vida del sitio.

Este es uno de los contenidos donde el material disponible en la carpeta es más escueto: solo DIW01.pdf (de 2013) lo trata de forma explícita, así que lo presentamos tal cual aparece, sin poder contrastarlo con una fuente más reciente. La idea de fondo — que un sitio web no "se escribe" sin más, sino que pasa por análisis, desarrollo, pruebas y documentación en paralelo — sigue siendo válida hoy, aunque las herramientas concretas hayan cambiado mucho (ver apartado 7).

Ejemplo actual — control de versiones y documentación viva. Hoy, la fase de "documentación" de un proyecto web se apoya en herramientas como Git y GitHub (historial de cambios, pull requests, issues) y en documentación colaborativa (wikis, Notion, Confluence) en lugar de en un único documento estático. La lógica de fondo —dejar constancia de las decisiones de diseño para el futuro— es la misma que describe el material de esta unidad.

Ideas clave de esta sección¶

• Generar un sitio web implica análisis, desarrollo, pruebas y documentación, y estas fases se solapan en el tiempo, no van estrictamente una detrás de otra.
• La guía de estilo nace en la fase de análisis, pero se mantiene (o debería mantenerse) durante todo el proyecto.

6. Componentes de una interfaz web¶

Antes de maquetar nada, conviene tener claro qué "piezas" puede tener una interfaz web. El material coincide en distinguir cuatro grandes tipos de elementos:

• Elementos de identificación: dejan claro a quién pertenece el sitio (logotipo, nombre de la organización, título de la pestaña del navegador...).
• Elementos de navegación: presentes en todas las pantallas, permiten moverse por el sitio y volver a la portada.
• Elementos de contenidos: la zona donde se muestra la información relevante de cada página (título del contenido + contenido en sí).
• Elementos de interacción: las zonas donde el usuario puede hacer algo — botones, áreas de texto, botones de opción, casillas de verificación, buscadores, selectores de idioma...

Sobre esa base de cuatro tipos de elementos, cuando se traduce a un diseño real de página, suelen aparecer cuatro bloques o zonas físicas:

• Cabecera / header: identifica el sitio; suele repetirse en todas las páginas y, si el sitio no es muy complejo, puede incluir también navegación o buscador.
• Sistema de navegación: normalmente debajo de la cabecera (aunque también es habitual verlo en un lateral), con el nombre de las secciones del sitio.
• Cuerpo: la parte central, donde se muestra el contenido propiamente dicho; conviene mantener aquí un diseño uniforme entre páginas.
• Pie / footer: la zona inferior, con información secundaria (enlaces legales, mapa del sitio, contacto) que se repite en todas las páginas pero con menos protagonismo visual que la cabecera.

Figura 2.1 del libro: ejemplo real de una página con la cabecera, el sistema de navegación, el cuerpo y el pie señalados. Origen: Sintesis - Diseño de interfaces web (muestra).pdf.

Dentro de la zona de navegación conviene que existan, como mínimo, tres cosas: un elemento para volver a la portada (normalmente el logotipo, enlazado), un menú de secciones bien visible, e información de dónde está el usuario dentro del sitio (el material propone una línea de texto con el camino recorrido desde la portada; hoy esto se conoce habitualmente como "ruta de migas de pan" — ejemplo propio: Inicio > Carta > Cafés).

Ejemplo actual — la web del Café Central. En la práctica UT01TE01 tendrás que decidir tú mismo/a estos cuatro bloques para una cafetería: por ejemplo, cabecera con el logotipo y el horario, navegación con Inicio/Carta/Reservas/Contacto, cuerpo con la carta o el formulario según la página, y pie con la dirección, redes sociales y aviso legal.

En las noticias — rediseños de navegación. Cuando una gran plataforma (por ejemplo, una red social o un servicio de streaming) cambia la posición de su menú principal —de arriba a un lateral, o a una barra inferior en móvil—, suele generar debate entre sus usuarios habituales. Es una prueba de lo importante que es para la gente reconocer dónde está la "zona de navegación" de un sitio que usa a diario.

Ideas clave de esta sección¶

• Los elementos de una interfaz web se agrupan en identificación, navegación, contenidos e interacción.
• Visualmente, esos elementos casi siempre se organizan en cuatro bloques: cabecera, sistema de navegación, cuerpo y pie.
• El usuario necesita saber siempre tres cosas al navegar: dónde está, cómo volver, y qué otras opciones tiene disponibles.

7. Tecnologías para el diseño de documentos web¶

Para llevar a la práctica todo lo anterior hacen falta herramientas y lenguajes. El material más antiguo de la carpeta (DIW01.pdf, de 2013) lista programas como Adobe Dreamweaver, Microsoft Expression Web o BlueVoda Website Builder como editores de páginas web: son un buen contexto histórico, pero hoy están claramente desactualizados como recomendación práctica (la mayoría ya no se mantienen o han sido sustituidos).

Lo que sí sigue vigente son los lenguajes de marcas en los que se apoya la web:

• HTML (HyperText Markup Language, Lenguaje de Marcado de Hipertexto): el lenguaje predominante para describir la estructura y el contenido de una página web, mediante etiquetas de apertura y cierre.
• XML (eXtensible Markup Language, Lenguaje de Marcas Extensible): un metalenguaje del W3C (World Wide Web Consortium) pensado para el intercambio de información estructurada entre plataformas distintas, mucho más estricto que HTML en cuanto a sintaxis.
• XHTML (eXtensible HyperText Markup Language): usa las mismas etiquetas y atributos que HTML, pero aplicando las reglas de sintaxis, más rígidas, de XML.

Ejemplo actual — el kit de herramientas de hoy. Donde DIW01.pdf recomendaba Dreamweaver, un perfil de desarrollo web en 2026 trabaja más bien con editores de código como Visual Studio Code, sistemas de maquetación con Bootstrap o Tailwind CSS (que verás en la UT2), y herramientas de diseño de interfaz como Figma o Adobe XD para el prototipado antes de programar. También son habituales los generadores de sitios sin código como WordPress, Webflow o Wix para proyectos sencillos, similares en espíritu al Café Central.

En las noticias — HTML sigue vivo. Aunque HTML nació en los años 90, sigue siendo la base de prácticamente toda la web actual: los grandes frameworks modernos de JavaScript (React, Vue, Angular...) generan HTML final para el navegador. Entender bien las etiquetas y la semántica de HTML sigue siendo una habilidad imprescindible, no un conocimiento "antiguo" que haya quedado obsoleto.

Ideas clave de esta sección¶

• Las herramientas concretas de edición cambian con rapidez; lo que se mantiene estable son los lenguajes de marcas sobre los que se construye la web.
• HTML describe estructura y contenido; XML es un metalenguaje para intercambiar datos estructurados; XHTML combina las etiquetas de HTML con la sintaxis estricta de XML.

8. Mapa de navegación. Prototipos¶

El mapa de navegación¶

Un mapa de navegación (o mapa del sitio) es un esquema que muestra todas las secciones o páginas de un sitio web y la relación que existe entre ellas. Cuanto más grande y complejo es un sitio, más falta hace: si tu web tiene una sola página con enlaces externos, no necesitas mapa; si tiene portada con secciones divididas en subsecciones, sí conviene tenerlo (y, a menudo, enlazarlo desde la cabecera o el pie).

Nielsen (citado en el material a partir de su libro Designing Web Usability) propone tres preguntas que cualquier sistema de navegación bien diseñado debería responder en todo momento:

1. ¿Dónde estoy? El usuario debe saber en qué parte del sitio se encuentra (por ejemplo, resaltando la sección activa en el menú).
2. ¿Dónde he estado? Suele resolverse cambiando de color los enlaces ya visitados.
3. ¿Dónde puedo ir? Deben mostrarse siempre los enlaces disponibles para seguir navegando.

Las estructuras típicas de un mapa de sitio¶

Según cómo se relacionen las páginas entre sí, el mapa de un sitio suele adoptar una de estas cuatro estructuras:

• Lineal: páginas que se leen en secuencia, como un libro (se avanza y se retrocede una página cada vez). Útil para contenidos que hay que seguir en orden.
• Reticular: todas las páginas están conectadas entre sí. Funciona en sitios pequeños, pero en sitios grandes el usuario puede perderse con facilidad.
• Jerárquica: la más habitual; hay varias secciones diferenciadas y no hace falta navegar de una a otra directamente (se pasa por un nivel superior).
• Lineal jerárquica: mezcla de las dos anteriores — útil cuando cada sección tiene mucho contenido que se lee de forma secuencial, pero además se puede saltar entre secciones.

Figura: representación esquemática de las cuatro estructuras típicas de un mapa de navegación. Origen: DIW01.pdf.

Prototipos¶

Antes de maquetar de verdad, conviene tener un prototipo o boceto previo que recoja los requisitos del sitio: qué elementos tendrá, cuántas páginas y cómo se distribuirán. Es la misma lógica que seguirías si fueras a construir una casa: primero un plano sencillo con el reparto de espacios, y solo después los detalles de materiales y acabados. El material de la carpeta no profundiza mucho más en herramientas concretas de prototipado (queda como pregunta abierta si se usará papel y lápiz, una herramienta como Figma, o un simple esquema en un documento), así que en la práctica del Café Central tendrás libertad para elegir cómo representar tu propio prototipo.

Ejemplo actual — prototipado en Figma. Hoy es habitual bocetar un prototipo navegable directamente en Figma: se dibujan las pantallas y se enlazan entre sí con flechas, de forma que un cliente puede "clicar" por una maqueta interactiva antes de que exista ni una línea de código. Es una forma moderna de resolver exactamente el mismo problema que plantea este apartado: validar el mapa de navegación antes de construir.

En las noticias — mapas del sitio para buscadores. Además del mapa de navegación pensado para las personas, existe el archivo técnico sitemap.xml, que ayuda a buscadores como Google a rastrear todas las páginas de un sitio. Son conceptos relacionados pero no idénticos: uno organiza la experiencia del usuario, el otro facilita el rastreo automático.

Ideas clave de esta sección¶

• El mapa de navegación debe responder siempre a "¿dónde estoy?", "¿dónde he estado?" y "¿dónde puedo ir?".
• Existen cuatro estructuras típicas de mapa de sitio: lineal, reticular, jerárquica y lineal jerárquica; cada una encaja mejor con un tipo de contenido distinto.
• Un prototipo es el boceto previo que valida la estructura del sitio antes de maquetarlo de verdad.

9. Maquetación web. Elementos de ordenación¶

Antes de maquetar una web conviene tener una maqueta: según la definición de la RAE que recoge DIW01.pdf, una maqueta es "un boceto previo de la composición de un texto que se va a publicar, usado para determinar sus características definitivas". Antes de escribir código, conviene pensar en el sitio como si fuera una obra: primero el reparto de espacios, después los detalles.

A la hora de maquetar, tanto DIW01.pdf como el capítulo de muestra de la editorial Síntesis coinciden en que hay que responder a tres preguntas fundamentales:

1. ¿Qué elementos va a tener el sitio web?
2. ¿Cuántas páginas va a contener?
3. ¿Cómo se van a distribuir los elementos dentro de cada página?

A partir de ahí se definen los elementos de ordenación: los grandes bloques en los que se reparte el espacio disponible (la ventana del navegador), que ya conoces del apartado 6 (cabecera, navegación, cuerpo y pie). Lo importante aquí es la consistencia: esos bloques deben mantener la misma disposición en todas las páginas del sitio, para que el usuario no tenga que volver a orientarse cada vez que cambia de página.

Figura: esquema de "elementos de ordenación" de una página — encabezado, navegación, contenido y pie dentro de un bloque contenedor general. Origen: DIW01.pdf.

El material insiste, además, en una idea que se suele olvidar: los espacios en blanco también son diseño. Igual que los silencios en una partitura o en una obra de teatro, los huecos entre elementos actúan como refuerzo comunicativo: evitan agrupamientos indeseados (por los principios de proximidad o semejanza que vimos en el apartado 1) y facilitan la lectura.

Ejemplo actual — maquetación con CSS Grid y Flexbox. Antiguamente, la maquetación se resolvía con tablas HTML anidadas (una técnica que verás mencionada como contexto histórico en el apartado 7); hoy se resuelve con CSS Grid y Flexbox, que permiten definir cabecera, navegación, cuerpo y pie como una cuadrícula flexible que además se adapta a distintos tamaños de pantalla (diseño responsive). Profundizarás en esto en la UT2.

Ideas clave de esta sección¶

• Maquetar es planificar la distribución de los elementos de una página antes de programarla.
• Toda maquetación debe responder a qué elementos, cuántas páginas y cómo se distribuyen.
• Los bloques de ordenación (cabecera, navegación, cuerpo, pie) deben repetirse de forma consistente en todas las páginas del sitio.
• Los espacios en blanco no son "espacio desperdiciado": son una herramienta de diseño más.

10. Plantilla de diseño¶

Una plantilla de diseño web es un sitio web prediseñado que se puede tomar como base y adaptar a las necesidades concretas de un proyecto, ahorrando tiempo (y dinero) frente a diseñar todo desde cero. La idea de fondo es la reutilización: si una distribución de bloques ya funciona y es habitual verla en muchos sitios, no tiene sentido reinventarla cada vez. El propio material lo resume con un ejemplo llamativo (aunque hoy los tiempos y las herramientas concretas hayan cambiado bastante): es posible montar una página completa a partir de una plantilla en cuestión de minutos.

Ejemplo actual — plantillas por todas partes. Los temas (themes) de WordPress, las plantillas de Wix o Squarespace, los starter kits de Tailwind CSS o las plantillas de componentes de Bootstrap son la versión actual de exactamente esta misma idea: partir de algo ya maquetado y probado, y personalizarlo, en lugar de empezar de una página en blanco. Es también lo que se espera que hagas en la práctica del Café Central: usar tu guía de estilo y tu prototipo como plantilla de partida para las siguientes unidades del módulo.

En las noticias — plantillas y accesibilidad. El uso masivo de una misma plantilla en miles de sitios (por ejemplo, un tema de WordPress muy popular) tiene una ventaja poco comentada: si esa plantilla corrige un problema de accesibilidad o de rendimiento, la mejora llega de golpe a todos los sitios que la usan. Es una razón más, además del ahorro de tiempo, para no despreciar las plantillas de diseño como recurso profesional.

Ideas clave de esta sección¶

• Una plantilla de diseño es un punto de partida reutilizable, no un diseño definitivo cerrado.
• Usar plantillas ahorra tiempo y dinero, y es una práctica habitual y respetada en el desarrollo web profesional, no un "atajo" de baja calidad.

Glosario rápido¶

Repaso: preguntas para autoevaluarte¶

1. ¿Qué diferencia hay entre los elementos conceptuales y los elementos visuales del diseño?
2. ¿Por qué el ojo humano solo necesita tres colores (RGB) para representar millones de tonos en una pantalla?
3. ¿Qué combinación hexadecimal en cada canal RGB da lugar a los 216 colores seguros?
4. ¿Cuál es la diferencia entre una guía de estilo y un manual de usabilidad?
5. Cita al menos tres razones por las que, según el material, "nadie lee" las guías de estilo.
6. ¿Qué disciplina estudia el intercambio de información entre personas y ordenadores, y qué siglas se usan para nombrarla?
7. ¿Qué tres preguntas debería responder siempre un buen sistema de navegación, según Nielsen?
8. ¿Cuál es la diferencia entre una estructura de navegación jerárquica y una reticular?
9. ¿Qué tres preguntas hay que hacerse antes de maquetar un sitio web?
10. ¿Por qué usar una plantilla de diseño no es "hacer trampa" en un proyecto profesional?

De dónde sale esto (fuentes de la carpeta)¶

• 2-Planificación de Interfaces gráficas.pdf — fuente más reciente y concisa; percepción, elementos del diseño, qué es una interfaz web, errores frecuentes de diseño web y guías de estilo (definición, características, problemas y puntos a preparar).
• DIW01.pdf (2013) — la fuente más extensa de la carpeta; cubre casi todos los contenidos de la unidad con detalle (elementos del diseño, IPO, componentes de interfaz, maquetación, mapa de navegación y prototipos, detección de patrones/Gestalt, color, guías de estilo, tecnologías de la época y plantillas de diseño). Es de 2013, así que sus ejemplos de herramientas y de código (tablas y marcos HTML) se presentan como contexto histórico, no como recomendación actual.
• Sintesis - Diseño de interfaces web (muestra).pdf (2019) — capítulo de muestra centrado en componentes de interfaz, maquetación, mapa de navegación y color (sistema RGB, matiz, saturación, brillo, colores seguros); no incluye en esta muestra el capítulo 1 completo (interacción persona-ordenador, prototipos), solo su índice.

Avisos¶

• El contenido UT1-5 "Generación de documentos y sitios web" solo aparece desarrollado en DIW01.pdf (2013); no hay una fuente más reciente en la carpeta que lo actualice, así que se presenta con esa salvedad.
• El contenido UT1-8 "Prototipos" está tratado de forma breve en el material (se define el concepto y su función, pero no se detallan herramientas o técnicas concretas de prototipado); se ha dejado constancia de ello en el propio apartado en vez de inventar contenido no presente en los PDF.
• Se detectó una posible errata en Sintesis - Diseño de interfaces web (muestra).pdf respecto a los valores hexadecimales de los colores seguros (incluye un séptimo valor, AA, sin citar en ningún momento el total de 216 combinaciones); se ha optado por los seis valores clásicos (00, 33, 66, 99, CC, FF) que sí son consistentes con DIW01.pdf (que cita explícitamente la cifra de 216) y con la aritmética (6³ = 216).
• Las herramientas de edición web y los ejemplos de código (tablas/marcos) de DIW01.pdf están desactualizados (2013); se han señalado como contexto histórico y se han complementado con herramientas actuales en los recuadros de "Ejemplo actual".