Los elementos del diseño gráfico son las piezas con las que se construye cualquier composición. Los básicos son punto, línea, forma, color, textura, tipografía, imagen y espacio. La ley española también define el diseño por rasgos visuales como las líneas y los colores.
Los elementos de un vistazo.
| Elemento | Qué es | Para qué lo usas | Error habitual |
|---|---|---|---|
| Punto | La unidad visual más pequeña | Llamar la atención sobre un lugar | Repartir puntos sin intención |
| Línea | Un punto en movimiento | Separar, guiar la mirada, subrayar | Demasiadas líneas que compiten |
| Forma | Una superficie con contorno | Crear iconos, botones, fondos | Formas que no se distinguen entre sí |
| Color | Tono, saturación y luminosidad | Identificar la marca y jerarquizar | Confiar solo en el color para avisar |
| Textura | El aspecto de la superficie | Dar cercanía o carácter | Texturas bajo el texto que lo ensucian |
| Tipografía | La forma de las letras | Dar voz a la marca y hacer legible el texto | Mezclar muchas familias |
| Imagen | Fotografía o ilustración | Mostrar el producto o contar algo | Fotos de banco que no dicen nada |
| Espacio | El vacío entre elementos | Agrupar y dar aire | Llenar cada hueco |
Ningún elemento funciona solo. Un mismo color puede ser elegante o ilegible según la forma, el tamaño y el fondo que lo acompañen.
Punto, línea y forma.
El punto marca un lugar. En una pieza real casi nunca es un punto literal, sino un detalle pequeño que atrae la vista, como un icono o una cifra destacada.
La línea dirige. Una línea horizontal separa secciones de un folleto y una diagonal da sensación de movimiento. También existen las líneas implícitas, como la que forman varios elementos alineados.
La forma resulta de cerrar una línea o de rellenar una superficie. Las formas geométricas transmiten orden. Las orgánicas, más irregulares, transmiten cercanía. Un logotipo suele apoyarse en una forma muy simple para que se reconozca a cualquier tamaño.
Color.
El color identifica la marca antes que el nombre. También ordena la información, por ejemplo con un color para lo urgente y otro para lo completado.
Tiene un límite que conviene recordar. Las pautas WCAG del W3C piden que el color no sea el único medio para transmitir una información. Un formulario que marca en rojo los campos con error debería añadir un icono o un texto, porque no todo el mundo distingue el rojo.
El contraste entre texto y fondo es la otra regla. Las mismas pautas fijan un mínimo de 4,5:1 para el texto normal y de 3:1 para el texto grande. Cualquier editor de color o comprobador gratuito calcula esa proporción en segundos.
Tipografía.
La tipografía es la voz escrita de la marca. Una letra con remates suena más clásica. Una de palo seco suena más directa y suele leerse mejor en pantalla.
Para que un texto se lea, importan el tamaño, el interlineado y la longitud de línea. Las WCAG consideran texto grande el de al menos 18 puntos, o 14 puntos en negrita. Además, piden que el contenido siga funcionando con un interlineado de 1,5 veces el tamaño de la letra.
Una regla práctica nuestra es usar dos familias como mucho. Una para titulares y otra para el texto, o una sola con varios pesos.
Imagen y textura.
La imagen muestra lo que el texto tardaría en explicar. Una foto real del producto o del local transmite más confianza que una genérica de banco. La ilustración permite explicar procesos o crear un estilo propio que nadie más tiene.
La textura da sensación de material, como papel, tela o grano de fotografía. Usada con medida aporta carácter. Debajo de un texto, casi siempre lo empeora.
Espacio y retícula.
El espacio vacío también es un elemento. Separa lo que no tiene relación y agrupa lo que sí la tiene. Una carta de restaurante con aire entre secciones se lee mucho mejor que una que aprovecha cada centímetro.
La retícula es la estructura invisible de columnas y márgenes que ordena la página. Permite que un catálogo de muchas páginas parezca coherente y que una web se adapte bien del ordenador al móvil.
Cómo se relacionan los elementos.
Los elementos cobran sentido cuando se combinan. Estas son las relaciones que más usamos en el día a día:
- Jerarquía. Lo más importante es lo más grande o lo más contrastado.
- Alineación. Todo elemento debe estar alineado con algo, aunque no se vea la línea.
- Proximidad. Lo que está cerca se entiende como un grupo.
- Repetición. Repetir colores y estilos da unidad a un documento largo.
- Contraste. Las diferencias claras de tamaño, peso o color guían la lectura.
La clasificación clásica en cuatro grupos.
En muchas escuelas se enseña una clasificación que divulgó el diseñador Wucius Wong en su libro sobre fundamentos del diseño. Agrupa los elementos en cuatro familias.
- Conceptuales. Punto, línea, plano y volumen, que existen como idea antes de dibujarse.
- Visuales. Forma, medida, color y textura, lo que de verdad vemos.
- De relación. Dirección, posición, espacio y gravedad, es decir, cómo se colocan.
- Prácticos. Representación, significado y función, lo que la pieza dice y para qué sirve.
Es útil para aprender a mirar. En un encargo real, lo que importa es si la combinación cumple su objetivo.
Cómo revisar una pieza elemento por elemento.
- Mira la pieza de lejos y comprueba qué ves primero.
- Comprueba el contraste de cada texto con su fondo.
- Cuenta las familias tipográficas y los colores.
- Busca información que dependa solo del color.
- Revisa si hay espacio suficiente entre bloques.
Si tienes dudas sobre la base, empieza por qué es el diseño gráfico. Para ver hacia dónde va el oficio, repasa las tendencias de diseño gráfico. En una web, estos elementos se reparten en sus partes principales.
En OverFuture aplicamos esta revisión a logotipos, catálogos y pantallas de software. Puedes verlo en diseño gráfico para empresas o en diseño gráfico en Teruel.
Preguntas frecuentes.
Punto, línea, forma, color, textura, tipografía, imagen y espacio. Se combinan con reglas como la jerarquía o el contraste.
Son punto, línea, plano y volumen. Se llaman así porque existen como idea antes de dibujarse, según la clasificación de Wucius Wong.
Al menos 4,5:1 con su fondo si es texto normal, y 3:1 si es texto grande, según las WCAG 2.2.
No hay un límite oficial. Nosotros recomendamos dos familias como mucho para que la pieza no parezca desordenada.
