Elementos del diseño gráfico: los siete que sostienen una pieza

Por el equipo creativo de Virtalio, una agencia creativa con más de 15 años construyendo identidades y piezas de marca para empresas de Latinoamérica. Última revisión: noviembre de 2026.

Los elementos del diseño gráfico son siete: línea, forma, color, valor, espacio, textura y tipografía. Cada uno decide algo concreto en la pieza —por dónde entra la mirada, qué se lee primero, cuánto aire separa un bloque de otro, si el texto aguanta una pantalla al sol— y juntos explican por qué una pieza se entiende en dos segundos y otra obliga a detenerse. Abajo está qué carga cada elemento, en qué orden se resuelven y cómo revisarlos en un archivo ya exportado.

Por qué se cuentan siete y no cinco ni doce

Los manuales no coinciden en el número porque algunos funden forma y línea en un solo término, o meten el valor dentro del color. En producción conviene separarlos: son decisiones distintas y se corrigen con instrucciones distintas. Una pieza puede tener buen color y mal valor —se ve gris en el teléfono— y eso no se arregla cambiando la paleta, se arregla subiendo el contraste.

Los siete se ordenan en dos grupos. Línea, forma, espacio y textura construyen. Color, valor y tipografía comunican. Cuando una pieza no funciona, casi siempre falla uno de los tres del segundo grupo, y el arreglo está en el primero.

Los siete elementos, uno por uno

Línea

La línea separa, guía y agrupa. Un filete de 1 píxel entre dos bloques dice «esto es otra cosa»; una línea de 6 píxeles debajo del titular dice «empieza por aquí». El error habitual es usarla como decoración: subrayados que compiten con el botón, marcos que encierran todo y no dejan descansar la vista. Si una línea no separa ni dirige, sobra.

Forma

La forma es el contorno de cada objeto: rectángulo, círculo, polígono, silueta orgánica. Decide el tono antes que el color. Un botón de esquinas vivas se lee técnico; uno de esquinas muy redondeadas se lee amable. La consistencia pesa más que la elección: si la tarjeta tiene radio 8 y el botón radio 24, la pieza parece armada por dos personas.

Color

El color orienta y clasifica: dice qué es enlace, qué es alerta y qué es marca. Su trabajo práctico es distinguir estados, no decorar fondos. Cuando se usa para todo —cinco colores en una pieza de tres bloques— deja de orientar. La regla que aguanta en la mayoría de los sistemas: un color de marca, un color de acción y neutros para el resto.

Valor

El valor es qué tan claro u oscuro es algo, sin importar el tono. Es el elemento que sobrevive al brillo bajo, al proyector y a la impresión en blanco y negro. Casi todo lo que llamamos «contraste» vive aquí. Antes de aprobar una pieza, conviértela a escala de grises: si la jerarquía desaparece, el problema es de valor, no de color.

Espacio

El espacio es la distancia entre los elementos y el margen que los separa del borde. Es el primero que se recorta cuando alguien pide «aprovechar el formato», y el que más rápido delata una pieza apretada. Un margen mínimo consistente en los cuatro lados y una separación mayor entre bloques que dentro de ellos bastan para que la pieza respire. El espacio también jerarquiza: lo que está solo, se ve primero.

Textura

La textura es la superficie: grano, patrón, trama, papel, desenfoque. Se juzga al 100 % de zoom, no en la miniatura. Un patrón sutil que se ve elegante en la vista general puede volverse ruido detrás del texto cuando el archivo se comprime para redes. Si compite con la lectura, baja su opacidad o quítala.

Tipografía

La tipografía carga más peso que ningún otro elemento: casi todo lo que una marca dice, lo dice escrita. Elegir una familia agradable resuelve poco; lo que sostiene la pieza es una escala de roles —titular, subtítulo, cuerpo, etiqueta— con tamaños, pesos e interlineado definidos. Material Design 3 lo resuelve con una escala que va de display a label y tokens separados para tamaño, interlineado, tracking y peso: la lógica es que cada rol tenga un valor asignado y no se improvise en cada pieza.

Cómo se leen juntos: una pieza de principio a fin

Ejemplo concreto, sin cliente de por medio: un anuncio vertical de 1080 × 1350 para una cafetería de barrio. El orden de resolución importa más que el gusto.

1. Espacio. Margen de 72 píxeles en los cuatro lados. Sin eso, cualquier ajuste posterior se pelea con el borde.
2. Valor. Se decide qué es lo más oscuro de la pieza: el nombre del local. Todo lo demás baja un escalón. Cuando el valor está resuelto, la pieza se entiende en miniatura.
3. Tipografía. Tres roles y no más: nombre en titular, una línea de producto en subtítulo, dirección y horario en cuerpo. Un paso de escala entre titular y subtítulo; dos entre subtítulo y cuerpo.
4. Forma. Un botón con el mismo radio que el resto del sistema, y una tarjeta que agrupa horario y dirección para que se lean como un bloque.
5. Color. Entra al final y con dos decisiones: el color de marca en el nombre y un color de acción en el botón. Si entra primero, termina mandando sobre la jerarquía.
6. Línea. Un filete de 2 píxeles separa la zona de producto del pie. Nada más.
7. Textura. Un grano suave al 4 % para que el fondo plano no se sienta de plantilla. Se revisa al 100 % y se ajusta o se quita.

Ese orden tiene una consecuencia práctica: cuando llega un comentario, ya sabes qué elemento toca. «Se ve plano» es valor o textura. «No sé dónde hacer clic» es color o forma. «No se lee» es tipografía o contraste. Y si lo que estás armando es una pieza publicitaria, el soporte manda antes que el gusto: cada formato pide una pieza distinta, como se ve en qué pieza pide cada soporte.

Los tres fallos que aparecen en piezas ya aprobadas

1. Contraste por debajo del umbral

WCAG 2.2 fija el mínimo en 4.5:1 para texto normal y 3:1 para texto grande, entendido como 18 puntos (unos 24 píxeles) o 14 puntos en negrita (unos 18.5 píxeles). Los elementos no textuales que comunican información —íconos, bordes de campos, indicadores— tienen su propio mínimo de 3:1. Una pieza puede verse bien en el monitor del diseñador y fallar en el teléfono de un cliente a plena luz. La comprobación es numérica, no visual: se mide con un contrast checker antes de aprobar.

2. Línea demasiado larga

La longitud de línea se mide en caracteres, no en centímetros. La referencia de Butterick's Practical Typography pide entre 45 y 90 caracteres por línea, con espacios incluidos, el equivalente a dos o tres alfabetos completos. En web el fallo es frecuente porque el ancho lo decide el contenedor y nadie lo revisa: un párrafo a 1,400 píxeles de ancho puede pasar de 120 caracteres y cansa aunque la tipografía sea correcta.

3. Espacio recortado para aprovechar el formato

Cuando una pieza «no cabe», casi siempre sobra contenido, no margen. Recortar el aire para meter un cuarto dato deja una pieza que se lee peor y no se recuerda. La secuencia correcta es quitar texto, después bajar un paso la escala y solo entonces ajustar márgenes, nunca por debajo del mínimo del sistema. Los fallos de este tipo se repiten cuando el equipo salta de disciplina en disciplina: los tipos de diseño gráfico tienen exigencias distintas de espacio y de lectura.

Pedir cambios con vocabulario de elementos

La mayor parte del tiempo perdido en una revisión no viene del diseño, viene de la instrucción. Traducir el comentario a un elemento y a una dirección concreta ahorra rondas:

En vez de…	Pide…
«Hazlo más bonito»	«Sube el contraste del titular a 4.5:1 y baja un paso el cuerpo»
«No se lee»	«La línea mide 120 caracteres; ciérrala a 70»
«Se ve vacío»	«El espacio entre bloques es de 8 píxeles; súbelo a 24»
«No resalta el botón»	«El botón y el fondo están a 1.8:1; necesito 4.5:1»
«Hay mucho texto»	«Recorta a 40 palabras y sube el cuerpo un paso de la escala»

Checklist de siete puntos antes de aprobar

1. Contraste medido: cuerpo igual o mayor a 4.5:1, texto grande igual o mayor a 3:1, íconos y bordes igual o mayor a 3:1.
2. Pieza en escala de grises: la jerarquía sigue visible sin color.
3. Longitud de línea entre 45 y 90 caracteres en los párrafos.
4. Un solo punto focal por pieza. Si hay dos, la mirada no entra.
5. Escala tipográfica con roles definidos y sin tamaños improvisados.
6. Márgenes consistentes en los cuatro lados, con más separación entre bloques que dentro de ellos.
7. Textura y patrón revisados al 100 % de zoom, detrás del texto y en el archivo final comprimido.

El equipo de diseño de Virtalio trabaja con brief, rondas de revisión incluidas y primera entrega en menos de 48 horas en la mayoría de las piezas; el branding completo va en 3 a 5 días. Si tu equipo aprueba piezas sin una lista como esta, el cuello de botella está en la revisión: diseño y branding empieza por el sistema, no por la pieza suelta. El sistema completo —paleta, tipografía, usos y archivos— es lo que queda documentado en un brand kit, y es la razón por la que una identidad bien construida se sostiene sin su diseñador original: qué incluye una identidad corporativa. Si trabajas dentro de una agencia, el equipo completo está en nuestro equipo.

Preguntas frecuentes

¿Cuántos elementos del diseño gráfico hay?

Siete en la práctica de producción: línea, forma, color, valor, espacio, textura y tipografía. Algunos manuales los agrupan en cinco o seis —unir forma y línea, o meter valor dentro de color— y otros añaden imagen o movimiento. El número importa menos que revisar cada decisión por separado: cada una se corrige con una instrucción distinta.

¿La tipografía es un elemento o un principio del diseño?

Depende de la escuela. En diseño gráfico se trata como elemento porque tiene decisiones propias —familia, escala, peso, interlineado, longitud de línea— y se corrige igual que el color. Los principios, como equilibrio, jerarquía, ritmo y contraste, son el criterio con el que se combinan los elementos.

¿Estos elementos aplican igual a impresión y a redes?

Sí, con dos diferencias. En impresión el color se revisa en el archivo final y en tinta, no en pantalla. En redes el archivo se comprime y tanto la textura como el contraste cambian respecto al original. La jerarquía, el espacio y la tipografía se juzgan igual en ambos casos.

¿Puedo revisar una pieza sin ser diseñador?

Con el checklist de siete puntos, sí para todo lo comprobable: contraste medido, jerarquía en gris, longitud de línea, márgenes y zoom al 100 %. Lo que pide criterio es la dirección de arte —qué debe sentirse— y eso se define en el brief, no en la revisión.

Fuentes

• W3C — WCAG 2.2, criterio 1.4.3 Contraste (mínimo)
• W3C WAI — Understanding SC 1.4.3: umbrales 4.5:1 y 3:1 y definición de texto grande
• W3C — WCAG 2.2, criterio 1.4.11 Contraste de elementos no textuales
• Butterick's Practical Typography — Line length (45–90 caracteres, 2–3 alfabetos)
• Material Design 3 — Type scale tokens