Dirección de arte y puntuación de diseño

Una dirección de arte da a tu sitio un universo completo: paleta, tipografía de títulos, tamaño de los títulos, esquinas, composición del banner y maquetación de los puntos fuertes. Esta lección te enseña a elegir entre las 12 direcciones, a ajustarlas, a pedirle tres a la IA y a apuntar a 100 en la puntuación de diseño, con Atelier Nova como ejemplo.

Tema o dirección de arte: qué cambia

Un tema cambia sobre todo los colores; una dirección de arte cambia todo el universo, a partir de una idea concreta: la ciudad de noche, el taller de cerámica, el diario de la mañana. El HTML, en cambio, no se mueve: las URL y los datos estructurados siguen idénticos.

Las 12 direcciones y su universo

Para Atelier Nova, Arcilla parece hecha a medida: fondo arena, acento terracota, tipografía Young Serif, tarjetas con sombra y banner «Editorial: imagen vertical». No te quedes en el nombre: Riviera o Prensa también encajan, según el tono que busques.

¿Cómo elegir y ajustar una dirección de arte?

1. Abre Ajustes › Apariencia y, en Estilo del sitio, elige Dirección de arte.
2. Haz clic en una de las 12 tarjetas: la vista previa en directo muestra tu sitio real, en Ordenador o en Móvil.
3. Despliega Ajustar la dirección: colores, tipografías, maquetación y cambia lo que quieras. La vista previa sigue cada cambio.
4. Haz clic en Guardar. Hasta entonces no se publica nada.

Cada una de las 18 tipografías de títulos tiene su personalidad. Con serifa: Bodoni Moda, Cormorant Garamond, DM Serif Display, Young Serif, Gloock, Libre Caslon Display, Newsreader. Egipcia: Zilla Slab. Sin serifa: Bricolage Grotesque, Schibsted Grotesk, Familjen Grotesk, Archivo Black, Syne, Unbounded, Sora. Condensadas: Big Shoulders Display, Barlow Condensed. Redondeada: Fredoka.

Contraste y velocidad: lo que Éclair garantiza

Siempre legible: sean cuales sean los colores elegidos, por ti o por la IA, Éclair ajusta el texto para alcanzar un contraste de 7:1 sobre el fondo, y el texto secundario, los enlaces y los botones para alcanzar 4,5:1, también sobre los fondos tintados con el color de acento (etiquetas, menú, resaltado). Este cálculo se ha verificado con 20.000 paletas generadas al azar.

Siempre rápido: tu servidor descarga una sola vez la tipografía de los títulos, de 12 a 27 KB, desde Fontsource (licencia SIL Open Font License), la guarda en media/fonts/ y después la sirve tu propio sitio, precargada. Tus visitantes no llaman a ningún servicio de terceros y la maquetación no salta. Solo se insertan en la página las reglas CSS que necesita tu dirección. Medido con Lighthouse: 100 en las cuatro categorías con Nocturno, Riviera, Prensa y Cartel.

Imagina mi dirección con la IA

Cuando el asistente IA está activado, el campo Imagina mi dirección con la IA aparece debajo de las tarjetas. Describe tu actividad, tu público y el ambiente que buscas en una o dos frases y haz clic en Proponer 3 direcciones. Esta es la descripción de Atelier Nova:

Taller de cerámica en Lyon, clases para adultos principiantes y piezas por encargo.
Ambiente tranquilo y luminoso, entre la materia en bruto y los gestos precisos.

La IA lee también la presentación de tu sitio y tu perfil editorial, y sigue el método de Impeccable:

1. partir del mundo concreto de la actividad: lugares, materiales, objetos, luz;
2. dar a cada propuesta una referencia precisa;
3. proponer tres direcciones realmente distintas;
4. evitar los clichés de la categoría y los tics del «diseño generado por IA».

Las tres propuestas se añaden al principio de las tarjetas, marcadas con ✦: haz clic para verlas en la vista previa, ajústalas y guarda la que te guste. La IA solo elige entre los ajustes de Éclair y nunca escribe CSS: cada propuesta se comprueba y sus contrastes se corrigen. El coste orientativo aparece junto al campo, unos 0,03 $ con Claude Sonnet 5.5, y se descuenta del presupuesto del asistente.

¿Cómo conseguir 100 en la puntuación de diseño?

En el editor, la pestaña Análisis muestra un tercer anillo, Diseño, junto al SEO y al GEO. Comprueba que la página se sostiene a nivel visual. La nota de la pestaña es la media de los tres anillos, y la lista muestra primero los puntos en rojo.

Las fórmulas huecas son los superlativos vagos y la jerga publicitaria que el análisis detecta en el idioma de la página: sustitúyelas por un hecho concreto. Para los puntos fuertes, elige emojis que tengan un icono dibujado: un emoji sin equivalente no muestra nada, y el análisis te lo señala.

Ejemplo: con Arcilla, el inicio de Atelier Nova muestra el aviso «Añade una imagen al banner: la composición de tu dirección de arte la necesita». La composición editorial espera una foto vertical: en cuanto añades la de un torno de alfarero, el punto se pone en verde.

El método y las salvaguardas de la puntuación de diseño, igual que los de las propuestas de la IA, están adaptados de Impeccable, de Paul Bakaus, publicado con licencia Apache 2.0.

Para recordar

• Una dirección de arte cambia el universo completo del sitio, sin tocar el HTML.
• Las 12 direcciones se pueden ajustar: 5 colores, 18 tipografías de títulos, composiciones de banner y de puntos fuertes.
• Los contrastes están garantizados: 7:1 para el texto, 4,5:1 para el resto.
• Tu servidor descarga la tipografía una sola vez y después la sirve tu propio sitio.
• La puntuación de diseño se consulta en la pestaña Análisis: corrige primero los puntos en rojo.

Para saber más

• Elegir un tema y ajustar la apariencia: los ajustes comunes, como la cabecera, las listas, el logo y el pie de página.
• El CSS personalizado: retocar un detalle que los ajustes de la dirección no cubren.
• Rendimiento: mantener 100 sobre 100: el peso de las tipografías y del CSS, medido y explicado.
• Fuentes: el método Impeccable de Paul Bakaus y el catálogo Fontsource, de donde vienen las tipografías.

Todas las lecciones de la ruta