Parcial N.º 1 · Ingeniería Web · UTP
Técnica de diseño
El sitio se diseñó con wireframes de baja fidelidad y, sobre ellos, un mockup de alta fidelidad. Este documento recoge los dos, más la retícula, la paleta y la tipografía que salieron de ese trabajo.
Paso 1
Por qué wireframe y no cardsorting
El cardsorting sirve para descubrir cómo agrupa la gente unos contenidos que ya existen. Aquí el problema era el contrario: los contenidos había que escribirlos, y la duda no era cómo agruparlos sino cuánto espacio dar a cada cosa —texto largo, figuras numeradas, notas al margen y cuatro aparatos interactivos— dentro de una misma retícula.
Por eso se empezó por wireframes: cajas grises, sin color y sin tipografía definitiva, solo jerarquía y proporción. Cuando la proporción funcionó, se pasó al mockup, que ya fija colores, tipos y comportamiento. El sitio final respeta esos bocetos casi caja por caja.
Paso 2 · Wireframes de baja fidelidad
Cuatro plantillas para siete páginas
Todo el sitio se resuelve con cuatro plantillas. Las tramas diagonales marcan bloques de contenido; las líneas horizontales, texto corrido; el bloque negro, la única sección impresa en huecograbado; el borde rojo, los elementos interactivos.
+ regla de temperatura
(canvas 3D)
Paso 3 · Retícula
Doce columnas, y el texto ocupa siete
La columna de lectura va de la columna 2 a la 8 (marcada en rojo) y mide entre 62 y 68 caracteres, que es la medida a la que se lee cómodo un texto largo. Las notas al margen ocupan de la 10 a la 12. Las figuras, las tablas y las escenas llegan hasta la 9, y solo el vídeo, la separata y la tira de contactos se van a sangre. En pantallas de menos de 62 rem todo colapsa a una sola columna.
Dos piezas usan ese mismo reparto sin salirse de él. En las fotografías grandes la imagen se queda de la columna 2 a la 9 y el pie se compone en la pista de las notas, de la 10 a la 12, alineado al canto inferior de la imagen, que es como se compone un pie en una revista impresa. La figura de aparato del criostato deja la escena en la columna de lectura y lleva los mandos, la lectura de etapas y el pie a la 9-12, para que el instrumento y su panel se vean a la vez. Lo que no es texto corrido —el formulario, la bibliografía y los glosarios anchos— se compone a dos columnas: la medida de lectura protege la prosa, no las listas. Y Fundamentos, La máquina, Aplicaciones y Acerca de cierran con una separata en huecograbado a sangre, una sola por documento; el Laboratorio y el Contacto, que son cortos, no la llevan.
Paso 4 · Paleta
Dos tintas, un metal y una señal roja
Los colores no se eligieron en una rueda cromática: salen de materiales reales. Papel offset, tinta de imprenta, azul de plano técnico, cobre del criostato y el lápiz rojo del corrector. El rojo nunca pasa del 3 % de la pantalla, y el cobre no se usa jamás para texto de lectura porque su contraste sobre papel es de 4,0:1.
Papel hueso#F2EFE6
Fondo de todo el sitio
Papel vitela#E7E1D1
Bandas y tablas
Tinta grafito#17181B
Texto · 15:1
Azul Prusia#1C3A5B
Segunda tinta · 10:1
Rojo cinabrio#BE3A26
Señal · 4,8:1
Cobre recocido#A9632A
Material y rótulos, nunca lectura
Gris plomo#6E6C66
Pies y metadatos · 4,6:1
Negro huecograbado#0E1013
El vídeo y la separata
Paso 5 · Tipografía
Tres familias con licencia abierta
Bodoni Moda
Titulares. Es una didona real con eje de tamaño óptico: en cuerpos grandes los trazos finos se afilan y los gruesos pesan. Es la letra de la ciencia impresa desde el siglo XVIII, no una tipografía «tecnológica».
Source Serif 4 — con cursiva verdadera
Texto corrido. Está dibujada por Adobe para leer en pantalla y tiene cursiva de verdad, que hacía falta para las notas al margen y los nombres de magnitudes. Una grotesca cansaría en capítulos de dos mil palabras.
IBM Plex Mono · 10 mK · T2 ≤ 2·T1 · |ψ⟩
Datos, temperaturas, etiquetas de cúbit y mandos de los aparatos. Nunca prosa: la monoespaciada rotula lo que dice la máquina, y la prosa es voz de los autores. Las tres familias están autoalojadas en fuentes/ para que el sitio funcione sin conexión.
Paso 6 · Reglas de movimiento
Solo se mueve lo que todavía no se ha medido
La regla que gobierna la interacción es una sola frase: el papel está quieto, lo cuántico fluctúa, la atención del lector mide. En la práctica significa que no hay parallax en el texto, que nada rebota, que nada brilla por su cuenta y que ninguna animación es decorativa.
- Dos velocidades: 180 ms para lo que responde al dedo y 420 ms para los cambios de estado. Una sola curva.
- Los botones llevan un duplicado fantasma en azul desplazado 2 px, como un registro de imprenta mal calado, que colapsa al pasar el ratón.
- Las figuras se imprimen con un barrido de máscara, nunca aparecen con un fundido.
- El texto se revela por línea; jamás letra a letra.
- Una cifra editorial puede contar hacia arriba; una lectura de aparato salta, como un display de siete segmentos.
- El scroll solo conduce dos cosas: el vídeo del héroe y la cámara de las piezas 3D.
- El audio está apagado por defecto y el sitio se entiende entero en silencio.