Formatos y Composición en el Diseño Gráfico-Web

¿Por qué es importante la composición en el diseño?

Cuando hablamos de composición, nos referimos a organizar elementos del diseño como textos, imágenes, vídeos o iconos en un formato determinado. Dicho formato puede ser una publicación para Instagram, una tarjeta de visita, un folleto, una web, una app o cualquier otro material de marketing.

La composición en el diseño gráfico web nos ayuda a:

• Ordenar o desordenar la información
• Mejorar la legibilidad
• Representar ideas
• Reforzar significados
• Mejorar la funcionalidad del diseño
• Generar ritmo
• Reforzar el storytelling o la consecución de ideas
• Guiar al usuario en apps o webs

Formatos y tamaños de impresión

Antes de ponernos a diseñar nada debemos saber el tamaño y las características que deben tener los archivos para ser impresos. Para ir sobre seguro, os recomendamos llamar a vuestra imprenta o proveedor de confianza y preguntar. Así podréis empezar con buen pie.

El standard DIN

Los tamaños DIN son estándares y suelen ser mucho más económicos. Una vez elegido el formato, deberemos aprovechar al máximo el tamaño de papel que hayamos elegido.

Entre los tamaños DIN más populares encontraremos:

• DIN A4, el tipo folio de toda la vida
• DIN A5, que es la mitad de un A4
• DIN A3, que se suele utilizar para carteles

Diseño de la papelería de empresa (stationery)

La papelería de empresa es una de las aplicaciones más importantes a la hora de construir o aplicar una marca. Todas las piezas han de poder identificarse con la empresa: papel de carta, diseño de sobres, carpetas, tarjetas de visita, facturas y presupuestos…

Para que además esta papelería sea eficaz, deberíamos siempre incluir los datos necesarios para que a los usuarios les sea fácil contactar con nosotros:

• Logotipo
• Dirección Postal
• Datos telefónicos
• Direcciones de Email
• Web
• Redes Sociales

Si no incluimos alguno de estos elementos estaremos perdiendo una buenísima oportunidad de que nuestros clientes contacten con nosotros por alguno de los canales que tenemos abiertos.

Papel de carta

En Europa, el tamaño de papel de carta estándar es el DIN A4 (210×297 mm). En EEUU, México y Canadá es de 8.5×11 pulgadas (216x279mm).

Diseño de tarjetas de visita

Una buena tarjeta de visita es aquella que además de comunicar de manera eficaz, provoca al receptor ganas de guardarla y conservarla. El tamaño estándar es de 5.5cm x 8.5cm. Hemos de tener en cuenta también si vamos a imprimir las tarjetas a doble cara.

Diseño de folletos

El folleto es una pieza clásica del diseño gráfico. Puede contar una historia, transmitir la información de una empresa, proporcionar instrucciones precisas, dar a conocer un nuevo producto o servicio, etc.

Tipos de folleto según su formato:

• Si el folleto va a ser enviado por correo postal tenemos que saber que el tamaño de un sobre estándar es de 11x21cm.
• Las octavillas o panfletos son ideales para el buzoneo.
• Los conocidos como “Flyer” suelen tener una medida DIN A6. Pueden imprimirse a una o dos caras.
• Los dípticos suelen ir a una sola hoja plegada en una sola doblez.
• Los trípticos tienen 3 caras interiores y 3 caras exteriores. Suelen ser tamaño DIN A4, cerrados tienen una medida de 9.9×21 cm. Se pueden plegar en acordeón o en envolvente.

Diseño de carteles

Antes de empezar a diseñar el cartel es importante tener el concepto claro, saber qué es lo que se va a comunicar y simplificarlo al máximo posible. El cartel se suele utilizar para la promoción de productos o servicios, utilizando composiciones llamativas, comprensibles y persuasivas. Un cartel debe informar, pero también invitar a que los usuarios realicen una determinada acción.

Formatos y tamaños más comunes:

• 50×70 cm
• DIN A3 (29.7×42 cm)
• DIN A2 (42×59.4 cm)
• DIN A1 (59.4×84 cm)
• 70×100 cm
• 100×140 cm

En sus inicios, el cartel se pintaba a mano o se imprimía con técnicas serigráficas. Ahora normalmente los carteles se imprimen con sistemas tipo Offset o en imprentas digitales así que son a todo color. Aquí tenéis un ejemplo: Carteles de San Fermin desde 1846

Diseño en artículos promocionales

No solamente se diseña para papel o pantallas, sino que también se pueden utilizar diferentes soportes promocionales. Estos soportes suelen ser pequeños “regalos” que la empresa da a sus clientes. A esta técnica se le llama merchandising.

Antes de diseñar cualquier artículo promocional es muy importante que nos pongamos en contacto con el proveedor para ver en qué formatos y tamaños necesita los diseños.

Templates y blueprints de vehículos

Si se va a diseñar la rotulación de un vehículo, el proveedor debería ser capaz de enviar una plantilla con base de dibujo técnico que muestre todas las molduras y características del mismo. En ocasiones, son los mismos concesionarios los que proporcionan estos dibujos.

Diseño para soportes publicitarios en medios exteriores

Normalmente se encuentran en lugares públicos como calles, plazas, estadios, congresos, etc. Antes se imprimían pero ahora ya se pueden utilizar inmensas pantallas led para incluir vídeos.

Entre ellos encontramos:

• Cartelería de gran formato
• Valla publicitaria o Billboard
• Banderolas
• Displays o lonas roll-up
• Totems
• Photocalls

Antes de empezar a componer:

• Se han de emplear las tipografías y los colores de la marca.
• Deberemos preparar los contenidos: textos, imágenes, etc.
• Se ha de comprobar previamente (y si se puede varias veces) que los textos están correctamente escritos y que no tienen faltas de ortografía.
• Se ha de pensar cómo comunicar el contenido, y la jerarquía visual de los elementos: qué frases o imágenes son más importantes.

Formatos y tamaños web

Lo primero que tendremos en cuenta para componer cualquier material de marketing es el canal y el formato que vamos a utilizar. No tenemos el mismo espacio de diseño en una publicación para LinkedIn que en una miniatura de YouTube por lo que no podremos realizar una misma composición.

Optimización para medios digitales

La tendencia a día de hoy es crear imágenes que sean legibles tanto en pantallas gigantes como en dispositivos móviles. La nueva realidad multipantalla ha hecho que un mismo diseño tenga que adaptarse a distintos formatos. 

El tamaño dependerá del canal que vayáis a utilizar: vuestra web, una app, YouTube, LinkedIn, Instagram… Cada canal tiene unos tamaños distintos y deberéis investigarlos antes de poneros a diseñar.

¿Cuál es el problema más habitual de diseñar una página web? Pues que en diseño gráfico sabemos de antemano a qué tamaño el usuario va a ver nuestro diseño pero en diseño web no es así. Los usuarios pueden entrar a nuestra web desde su ordenador, tablet, smartphone o televisión. Es decir, que tendremos que crear una web responsive o un diseño de app que se adapte bien a todos estos dispositivos.

Normalmente en diseño gráfico tu diseñas tus tarjetas de visita, las imprimes y a otra cosa. Pero el diseño de una web nunca se termina. Siempre lo podremos mejorar. La razón principal es que podemos conseguir métricas que nos indiquen cómo mejorar de manera constante ese diseño, ya sea de una web, una app, del diseño de un banner para una campaña o cualquier otro material.

Tamaños web más comunes

Normalmente, las imágenes en Internet se miden en pixeles. 1 píxel equivale a 0,04 cm en una resolución de 72ppp. Es muy común encontrarlos como «px» y son una unidad de medida comúnmente utilizada en Diseño Gráfico Web.

Las resoluciones de pantalla más populares han sido:

• HVGA (320×480 píxeles)
• WVGA (800×480 píxeles)
• HD (1280×720 píxeles)
• Full HD (1920×1080 píxeles)
• 4K (4096 x 2160 píxeles)

Las resoluciones se han ido adaptando a las necesidades de las pantallas de cada dispositivo. La tendencia es además que las pantallas tengan cada vez mayor resolución, permitiendo mejor calidad de imagen.

Los tamaños más comunes en webs responsive

Algunas de los tamaños web más comunes son las siguientes:

• Móviles pequeños: 360×640 píxeles
• Móviles medianos: 375×667 píxeles
• Móviles grandes: 414×736 píxeles
• Tablets: 768×1024 píxeles
• Ordenadores portátiles: 1366×768 píxeles
• Escritorios: 1440×900 píxeles
• Escritorios grandes: 1920×1080 píxeles

Para comprobar si el diseño de vuestra web se adapta correctamente a los distintos dispositivos podéis utilizar las herramientas para desarrolladores de Google Chrome:

Los tamaños más comunes en anuncios de Google

En la red de display podemos hacer distintos tipos de anuncios que se adaptan al dispositivo que esté viendo el usuario. Los tamaños más comunes en teléfonos móviles son:

• 300×200
• 300×50
• 300×100
• 250×250
• 200×200

En ordenadores son:

• 300×250
• 336×280
• 728×90
• 970×90
• 468×60
• 300×600
• 160×600
• 250×250
• 200×200

Los tamaños más comunes en anuncios de Facebook

De nuevo el tamaño dependerá del tipo de anuncio que estemos creando. Por ejemplo, en los anuncios por secuencia se suele utilizar anuncios de 1080×1080 píxeles mientras que si queremos promocionar stories necesitaremos utilizar un formato de 1080×1920.

Gestionar tamaños de manera eficaz

Como véis todo esto de los tamaños es un lío terrible ya que con tanto formato tienes que estar generando imágenes de distintos tamaños cada 2 por 3. Cada red social y cada web tiene sus necesidades así que ¿Cómo podemos hacer para gestionar el tema tamaños de manera eficaz?

El primer truco sería utilizar Canva, que dispone de todos los formatos posibles a la hora de publicar o hacer anuncios en redes sociales. Podéis ver un tutorial completo de esta herramienta en el siguiente enlace.

La función pro dispone de una herramienta para redimensionar cualquier publicación de manera automática. Eso sí, hay que pagarla. No obstante, si dedicamos mucho tiempo a redimensionar imágenes puede ser una buena inversión ¡El tiempo es oro!

En Photoshop e Illustrator podéis utilizar la funcionalidad “mesas de trabajo” pero deberéis crearlas vosotros desde 0. Eso sí, una vez tengáis vuestras mesas de trabajo terminada podréis ya realizar el mismo proceso que con Canva.

Unir el mundo Offline con el mundo Online

Empieza a ser bastante frecuente encontrar tarjetas de visita, etiquetas u otros diseños con códigos QR, que permitan al receptor acceder directamente al contenido que interese al emisor. Esta acción se suele llevar a cabo con smartphones o tablets por lo que es importante que nuestra Web se adapte a todos los dispositivos (que sea responsive).

Diseños con y sin retícula

Trabajar con una estructura previa de página y utilizarla como guía para colocar distintos elementos suele ser una práctica recomendable a la hora de crear diseños coherentes. No obstante, todo depende del proyecto al que nos enfrentemos.

La retícula o grid divide el área disponible para texto o imágenes en módulos proporcionales que ofrecen una estructura coherente para crear el diseño. La retícula no será visible por el usuario final, pero sí que creará un diseño ordenado.

Los diseños que utilizan retícula suelen dar sensación de orden y equilibrio:

Las retículas pueden ser más o menos evidentes en el diseño final:

Los diseños sin retícula suelen ser mucho más dinámicos.

Márgenes

Los márgenes son el espacio entre el contenido principal de una página y los bordes de la misma. Uno de los errores que más cometen los alumnos a la hora de diseñar es no dejar suficiente margen o ninguno.

En impresión es un problema, ya que si ajustamos los elementos de diseño al borde del papel pueden quedar cortados a la hora de imprimir. En páginas web también utilizamos márgenes para dar espacio a la composición y evitar que el diseño final “agobie”.

Jerarquía de la información

Hay que tener en cuenta cuál es la información más importante en el diseño que estamos creando. La jerarquía de la información se puede organizar utilizando los siguientes elementos:

• El orden de los elementos: En occidente se lee de izquierda a derecha, por lo que lo que esté más a la izquierda, se leerá antes. En occidente se lee de arriba a abajo, por lo que lo que esté más arriba, se leerá antes.
• El tamaño de la tipografía: A más grande sea la tipografía, más importante.
• El tratamiento de las imágenes y los gráficos.
• La selección de color.

Pongamos el ejemplo de una entrada de blog. El título de la misma será el elemento más importante y los subtítulos guiarán al usuario por la información:

Interlineado y alineación

El interlineado determina la cantidad de espacio en sentido vertical entre las líneas de texto de un mismo párrafo.

La alineación distribuye las líneas que lo componen respecto a los márgenes del cuadro del texto. La alineación de los párrafos puede ser izquierda, derecha, centrada o justificada.

Maquetación, Lorem Ipsum y contenidos

Cuando estamos diseñando, en ocasiones no tenemos los textos o las imágenes preparadas para poder empezar. Si os encontráis en esa situación podéis utilizar un texto Lorem Ipsum. Este texto se utiliza habitualmente en borradores para probar el diseño antes de insertar el texto final.

Retículas y Guías en Photoshop e Illustrator

Tanto Photoshop como Illustrator disponen de varios sistemas de retículas y guías que os pueden ayudar a crear vuestros diseños.

La composición en WordPress: Plantillas y editores visuales

La composición en WordPress se genera primero seleccionando una plantilla y después utilizando un editor visual a la hora de crear entradas o páginas. Tanto plantillas como editores visuales las hay de dos tipos: gratuitas o de pago. Las plantillas de pago permiten muchísimas opciones de diseño por precios muy razonables pero con las plantillas gratuitas se pueden conseguir similares resultados si el contenido es de calidad.
Con respecto a los editores visuales hemos probado tanto gratuitos como de pago y finalmente hemos llegado a la conclusión de que Guttemberg, que es el editor nativo de WordPress es el mejor de todos.

Es muy importante seleccionar una buena plantilla y editor visual desde el principio ya que de ellos depende enormemente la velocidad de nuestra instalación de WordPress.

Hablaremos largo y tendido de ellas en el curso de WordPress.

Bibliografía recomendada

Estos libros os ayudarán a aprender más sobre composición:

• Curso diseño gráfico. Fundamentos y técnicas. Anna María López López. Editorial Anaya Multimedia.
• Manual de edición y autoedición. José Martínez Sousa. Editorial Pirámide.
• Sistemas de retículas / Sistemas de grelhas: Un manual para diseñadores gráficos. Josef Müller-Brockmann. Editorial Gustavo Gili.
• Diseño Inteligente.100 cosas sobre la gente que cada diseñador debe saber. Susan M. Weinschenk. Editorial Anaya Multimedia. Espacio de diseño.
• Versión actualizada de Diseño Inteligente.

Si tenéis alguna duda o aportación extra para esta entrada os recomendamos escribirnos en la sección de comentarios. ¡Os contestaremos lo antes posible!