1 nov 2026 · 12 min de lectura

Ejercicio independiente · No afiliado a la Fundación Wikimedia

Tipo

Concepto de portafolio, sin encargo

Alcance

Inicio, Artículo y Resultados

Disciplinas

Dirección de arte, UI, sistema, interacción, front-end

Stack

HTML, CSS y JS planos, sin build

01Contexto y desafío

Wikipedia es uno de los sitios más usados del mundo y uno de los más probados. Su interfaz carga con años de decisiones de una comunidad enorme, y funciona: se encuentra lo que se busca, se lee con comodidad y se confía en lo que se lee. Por eso se eligió como objeto de estudio. Con un producto así de consolidado, el reto no era descubrir qué necesita la gente, sino resolver un problema de diseño acotado.

Ese problema se planteó así: la experiencia actual es eficiente pero fría. Transmite rigor, pero no invita a quedarse ni deja ver que detrás hay personas escribiendo y corrigiendo. El desafío consistía en sumar calidez y jerarquía editorial, como las de una buena revista, sin sacrificar lo que hace valioso al original: densidad de información, neutralidad y confianza.

Al ser un ejercicio, se fijaron reglas antes de empezar:

• Sin logotipo ni wordmark original. En su lugar se usa un placeholder, «Encyclopedia concept».
• Etiqueta visible «Concept redesign – not affiliated» en cada dirección y en cada página.
• Contenido de ejemplo real, tomado de la portada de Wikipedia en español con atribución CC BY-SA 4.0. Todo lo demás son textos de muestra marcados como tales.
• Evitar los patrones genéricos del «diseño hecho por IA»: degradados sin propósito, tarjetas idénticas en cuadrícula, sombras por defecto, íconos decorativos sin función.

02Objetivos y principios de diseño

03Alcance, rol y herramientas

• Alcance: portada, página de artículo y página de resultados de búsqueda. Tres páginas, sin planes de ampliarlas.
• Rol: investigación del sitio de referencia, dirección de arte, exploración y diseño de interfaz, sistema de diseño, interacción y desarrollo front-end, a cargo de El Plomo Labs.
• Herramientas: Claude (lienzo de diseño con panel de tweaks) para explorar y prototipar; Claude Code para el desarrollo; Impeccable para la revisión y el pulido de diseño; HTML, CSS y JavaScript planos, sin build; Playwright para comprobar el render.

04Proceso

Una referencia ajena a propósito

Antes de dibujar nada se eligió una referencia visual: Piccalilli en su versión oscura, un sitio editorial sobre desarrollo web con carácter cálido, tipografía con personalidad y una voz cercana. Tiene poco que ver con una enciclopedia, en público y en estética, y eso era lo buscado. Si la referencia hubiera sido otra enciclopedia o un portal de noticias, el resultado habría tendido a parecerse a lo que ya existe. Una sensibilidad ajena obligaba a traducir, no a copiar: tomar la temperatura, el ritmo y la seguridad tipográfica de un sitio editorial y ver qué sobrevivía en un contexto de consulta.

Divergir antes de decidir

En vez de iterar sobre una sola idea, se abrieron seis direcciones para la portada, cada una con una tesis distinta y defendible por sí sola. La idea era explorar el espacio completo antes de cerrar: qué pasa si el protagonista es el buscador, si es el artículo del día, si son los temas, si es la noche, si es el silencio o si es la tipografía. Todas usan el mismo contenido real del día, así que comparan solo decisiones de diseño.

Converger combinando

Ninguna dirección ganó entera. Cada una resolvía bien una parte y fallaba en otra, así que se tomó lo mejor de tres y se armó una síntesis, la dirección G.

Refinar con parámetros, no con redibujos

Sobre la síntesis se trabajó con un panel de tweaks: cada decisión del sistema (navegación, botones, tarjetas, hero, escala, cuerpo de texto, bordes, radio, densidad, padding, imágenes, columnas, CTA, íconos, fondos y acentos) pasó a ser una variable que se podía alternar en vivo. Esto permitió comparar, por ejemplo, tres densidades o cuatro estilos de tarjeta sobre la misma página, en segundos y sin redibujar. Así salió G2, con una configuración cerrada.

Movimiento como capa separada

La interacción se diseñó después, como una capa encima de G2 que no tocaba su estructura (G3). Separarla así evitó que el movimiento condicionara el layout y permitió apagarla por completo para quien lo prefiera.

Mismo sistema, más páginas

Con G3 bloqueada, el artículo y los resultados se diseñaron con las mismas piezas, sin abrir una nueva dirección visual. Fue la primera prueba real del sistema: si había que inventar componentes nuevos para cada página, el sistema no estaba completo.

Del lienzo al código

Finalmente se exportó el prototipo como sitio estático y se continuó en Claude Code, donde se ordenó el código, se revisaron accesibilidad y responsive, y se hicieron las pasadas de pulido con Impeccable (detalle más abajo).

05Exploración: seis direcciones

Seis tesis para una misma portada, con el mismo contenido del día. Cada miniatura lleva a su dirección.

APregunta BPortada CMapa DNoche EÍndice FCapítulos

APregunta

Tesis: el buscador es la puerta de entrada; todo lo demás es secundario.

Serif con contraste, fondo crema, acento terracota y un titular con voz propia: «Pregunta lo que sea. Alguien ya lo escribió.». Incluye sugerencias bajo el buscador y un bloque que explica por qué fiarse del sitio («Por qué puedes fiarte (y por qué debes dudar)»).

Qué dejó: la paleta más cálida y equilibrada de la serie, y la idea de hacer explícito el modelo de confianza. El bloque de confianza llegó hasta la versión final.

BPortada

Tesis: la portada de una enciclopedia puede funcionar como la de un diario.

Cabecera tipo periódico, artículo destacado con capitular y dos columnas, barra lateral de noticias y fallecimientos, una fila de tres módulos y efemérides con años grandes.

Qué dejó: la estructura más clara para mucha información. La jerarquía se entiende de un vistazo y la densidad se mantiene.

CMapa

Tesis: el conocimiento es un territorio; los temas son el mapa.

Tipografía sans, buscador arriba y un mosaico bento de ocho temas, cada uno con un glifo geométrico propio y sus subtemas.

Qué dejó: la mejor forma de mostrar los temas. El mosaico ofrece entradas visuales sin recurrir a fotos, y los glifos dan identidad a cada área. La paleta multicolor, en cambio, competía con el contenido.

DNoche

Tesis: leer de noche merece una experiencia propia.

Modo oscuro, ilustración protagonista (un sol sobre dunas), acento amarillo y las efemérides como línea de tiempo.

Qué dejó: el motivo del sol, que terminó en el emblema, y la confirmación de que la ilustración geométrica puede aportar calidez sin usar fotos. Como dirección principal pesaba demasiado para una obra de consulta.

EÍndice

Tesis: la calma es la mejor forma de respeto por el lector.

Minimalismo, tipografía mono para metadatos y el contenido del día como un índice numerado.

Qué dejó: la prueba de que una lista bien ordenada se escanea muy rápido. Pero la calma extrema se volvía fría, justo lo que se quería corregir.

FCapítulos

Tesis: la tipografía puede ser la ilustración.

Titulares enormes, la portada organizada en «capítulos», bloques de color plano y los temas escritos como una sola frase.

Qué dejó: mucha personalidad y la idea del resaltador bajo una palabra, que reapareció como marcador en los títulos. A esa escala la densidad se pierde y los temas en párrafo cuestan de escanear.

06Decisión: A + B + C

La síntesis (G) combinó tres piezas que se complementaban:

• Paleta de A. Crema, tinta casi negra y terracota daban la calidez buscada sin perder seriedad, y eran la mejor traducción de la referencia editorial.
• Estructura de B. El esquema de diario (destacado con capitular, columnas, barra lateral, fila de módulos, efemérides) era el que mejor sostenía la densidad de la portada original.
• Bento de C. El mosaico de temas resolvía la navegación por áreas de forma visual y escaneable, algo que la portada original resuelve con una lista.

Se descartaron, como direcciones completas, el modo oscuro (D), el minimalismo (E) y la tipografía expresiva (F). Algunos rasgos sobrevivieron: el sol, el marcador y la explicación explícita de por qué fiarse del sitio.

07Refinamiento con tweaks (G2)

G todavía arrastraba ruido: el mosaico de temas con colores saturados, la cabecera de diario muy alta y una serif que, junto a tanta información, se sentía pesada. Con el panel de tweaks se probaron alternativas para cada decisión y se cerró esta configuración:

08Capa de interacción (G3)

Sobre G2 se agregaron microinteracciones con una regla: ninguna cambia la estructura y todas pueden desaparecer. La mayoría son sutiles y algunas son distintivas, para darle personalidad al concepto:

• Sutiles: pulsación que «hunde» los botones, regla que se dibuja bajo la navegación, contorno de acento al pasar sobre tarjetas, glifos de las teselas que giran y crecen un poco, capas de las ilustraciones que se desplazan, aparición suave al hacer scroll, reglas de sección que se dibujan y halo de foco en el buscador.
• Distintivas: demo de escritura en el buscador con sugerencias, el «¿Sabías que…?» que rota al tocarlo, el sol del emblema y el dado de «Al azar».

Los efectos de scroll usan animaciones CSS ligadas al scroll (animation-timeline: view()) dentro de @supports: si el navegador no las soporta, el contenido simplemente aparece. Con prefers-reduced-motion se anula todo el movimiento.

09Sistema de diseño resultante

El sistema se documentó bajo una idea rectora, «Papel y Regla»: la disciplina de la imprenta aplicada a una enciclopedia en pantalla.

Paleta. Papel blanco (#FFFFFF), tinta cálida (#1C1917) y tinta suave (#44403C) para lo secundario. Un solo acento en dos temperaturas: terracota (#C23714) para texto y acciones, con contraste AA sobre papel, y brasa (#F05A28) solo para rellenos, reglas, foco y el sol del emblema, nunca como texto sobre papel. La calidez vive en superficies arena, en las ilustraciones y en el acento, no en el fondo.

Tipografía. Inter en todo. Peso 700 con tracking negativo para titulares, 400 para el cuerpo y cursiva regular como «segunda voz» en la segunda parte de los títulos. La escala grande se reserva para el título de la página que se está leyendo.

Forma. Esquinas de 4 px, bordes de 1 px y reglas de tinta de 2 px para la estructura. Sin sombras en reposo: solo flotan el desplegable de sugerencias y el panel de lectura. Ilustraciones geométricas propias (sol, arcos, dunas, laguna), sin fotografía.

Ritmo. Contenedor de 1240 px, márgenes fluidos de 16 a 40 px, 17 px entre piezas y 25 px de relleno de sección.

Interacción. Salidas suaves, sin rebotes. El hover se señala con contorno de acento, no con elevación ni desplazamiento. Los estados activos se basan en atributos ARIA (aria-pressed, aria-selected, aria-current), no en clases.

10Páginas finales

Inicio

La portada mantiene el orden y la cantidad de contenido de la original, pero con jerarquía editorial. Arriba, una franja de bienvenida con el sol del emblema y accesos rápidos. Debajo, el artículo destacado con capitular junto a la barra de noticias y fallecimientos. Luego el mosaico «Explora por tema», la fila de recurso del día, artículo bueno y «¿Sabías que…?», y las efemérides. Cierra una banda de tinta a todo el ancho, «Por qué puedes fiarte (y por qué debes dudar)», que explica el modelo de confianza en tres puntos: licencia libre, escrita por personas y sin fines de lucro. Es el momento de mayor contraste de la página y el único que rompe el contenedor.

Artículo

La página de artículo está pensada para leer largo. Tiene ruta de navegación, pestañas Leer / Discusión / Editar / Historial (que mantienen a la vista que el texto es colaborativo), índice lateral, ficha de datos y un panel «Lectura» para ajustar tamaño de texto (A− A A+) y ancho de columna (estrecho, normal, ancho). «Copiar cita» responde a un uso muy frecuente del sitio: citarlo. La medida de lectura por defecto es de 42 em con interlineado 1,65. Cuando la barra lateral no cabe, pasa bajo el texto.

Resultados

En resultados lo importante es decidir rápido. Arriba hay un campo de búsqueda grande que repite la consulta y pestañas por tipo (artículos, imágenes, citas, diccionario). Debajo, filtros por tema, orden por relevancia o alfabético y un contador de resultados. A la derecha, un panel de resumen con los datos clave del resultado principal y un bloque de desambiguación («¿Buscabas algo distinto?»), porque una consulta como «la malinche» puede referirse a una persona, a un volcán o a un término. Abajo, paginación.

En móvil

Las tres páginas se revisaron desde 390 px. La barra lateral pasa bajo el contenido, el buscador ocupa todo el ancho y las pestañas se reorganizan en varias líneas.

11Del prototipo al código

Exportación. El prototipo salió del lienzo de diseño como un sitio estático en HTML, CSS y JavaScript planos, sin build ni dependencias, con un README y un CLAUDE.md que documentan el sistema, las interacciones y las reglas del proyecto (diseño cerrado, etiqueta de no afiliación, atribución, prefers-reduced-motion). Esa documentación permitió seguir en Claude Code sin perder decisiones.

Orden y endurecimiento en Claude Code. El primer trabajo fue estructural y sin cambios visibles:

• Se extrajeron los estilos en línea a una sola hoja con tokens en :root y capas @layer (base, interacción, componentes, utilidades) que reproducen la precedencia original.
• Se revisó la accesibilidad: contraste AA, foco visible, pestañas ARIA navegables con flechas, Inicio y Fin, regiones aria-live para el contador y «Copiar cita», y áreas de toque de al menos 36 px.
• Se revisó el responsive en 390, 600, 900, 1024 y 1440 px, y se comprobó el render con Playwright.

Pulido con Impeccable. Después se hicieron pasadas de crítica y ajuste:

• Más calma («quieter»). El fondo pasó de crema (#FBF7F0) a blanco puro y la calidez quedó en las superficies arena, las ilustraciones y el acento. El resaltador se limitó al título principal de cada página. Los años de las efemérides y los numerales pasaron a tinta, las reglas internas bajaron a 1 px y el movimiento perdió rebotes y recorrido.
• Más contraste donde importa («bolder»). El bloque de confianza se convirtió en una banda de tinta a todo el ancho, con «(y por qué debes dudar)» en cursiva con resaltador. A la vez, el título del artículo destacado se hizo más discreto para no competir con el saludo de portada.
• Documentación. El sistema se registró en un DESIGN.md con reglas con nombre («Two Fires», «Paper», «Earned Scale», «One Highlighter», «Flat Paper») para que cualquier cambio futuro se pueda evaluar contra algo concreto.

Antes de Impeccable

Después

12Resultados

Qué quedó

• Tres páginas navegables y enlazadas entre sí (Inicio, Artículo y Resultados), en HTML, CSS y JS planos, sin dependencias.
• Un sistema de diseño documentado (tokens, reglas con nombre, componentes) que sostuvo dos páginas nuevas sin abrir otra dirección visual.
• Una capa de interacción que se desactiva por completo con prefers-reduced-motion y degrada limpio en navegadores sin soporte de animaciones ligadas al scroll.
• Seis direcciones exploradas y documentadas, con el razonamiento de por qué se combinaron tres.

Qué se puede afirmar

• El contraste de texto cumple WCAG AA según la revisión hecha en el proyecto.
• Las tres páginas se revisaron en cinco anchos, de 390 a 1440 px.
• Las pestañas siguen el patrón ARIA y se navegan con teclado.
• La portada mantiene los mismos bloques de contenido que la original.

Qué no se puede afirmar

• No hay pruebas con usuarios. No se puede decir que el rediseño sea más fácil de usar, más claro o más confiable que el original.
• No hay métricas medidas de rendimiento, tiempo de tarea ni comprensión.
• No se probó con lector de pantalla real; la accesibilidad está revisada, no validada.
• No hay pruebas automáticas, y la cabecera y el pie se repiten en cada página porque no hay plantillas.
• Parte del contenido (resultados, resumen rápido, referencias, recepción) es de muestra y no es dato verificado.

Cómo se podría medir

• Test de 5 segundos con la portada actual y la del concepto: qué recuerda la gente y qué percibe del sitio (confiable, cálido, denso).
• Test de tareas moderado (5 a 8 personas): encontrar un artículo por tema, ajustar la lectura, distinguir entre resultados homónimos. Se mediría tasa de éxito, tiempo y errores, comparando con el sitio actual.
• Lighthouse o WebPageTest para rendimiento (LCP, CLS, peso total), comparando con la portada original.
• Auditoría con axe y recorrido con VoiceOver y NVDA para validar la accesibilidad.

13Próximos pasos

• Validar con personas: test de 5 segundos y test de tareas comparado con el sitio actual.
• Pasar las tres páginas por un lector de pantalla real y una auditoría automática.
• Componentizar cabecera y pie (por ejemplo, con Eleventy o Astro) manteniendo el HTML limpio.
• Explorar un modo oscuro derivado del sistema, retomando lo que dejó la dirección D.
• Medir rendimiento y publicar los resultados junto a este case study.

14Créditos, atribución y descargo

• Diseño, dirección y desarrollo: El Plomo Labs.
• Herramientas: Claude, Claude Code, Impeccable, Playwright.
• Tipografía: Inter (Rasmus Andersson, SIL Open Font License).
• Referencia visual: Piccalilli, usada como inspiración de tono; no se reutilizó material del sitio.
• Contenido de ejemplo: textos derivados de la portada de Wikipedia en español, disponibles bajo la licencia Creative Commons Atribución-CompartirIgual 4.0 (CC BY-SA 4.0). Los textos fueron adaptados y resumidos para la maqueta. El resto del contenido es de muestra y está marcado como tal.