Diseño gráfico impreso vs digital: 15 diferencias vitales que necesitas conocer

69-IMPRESO-VS-LAWEB

Impresión y web: dos caras de la misma moneda.

Aunque los diseñadores digitales y de impresión tienen mucho en común, existen variaciones que la gente (tanto fuera como dentro de la industria) no siempre comprende; que van desde el flujo de trabajo y los formatos de archivo hasta las herramientas y la terminología. A pesar de no ser tan extensa, la siguiente guía ofrece un breve panorama de algunas de las diferencias más grandes (y ocasionalmente confusas) entre ambas disciplinas.

01. Método de visualización: ¿Cómo se acercan los usuarios a tu diseño?

Una de las mayores diferencias entre los diseños impresos y digitales es la manera en que la gente los ve. Sostener algo tangible en la mano –como un pedazo de papel, un folleto, un libro– es una experiencia muy diferente a la de ver algo en un monitor. Existe algún cruce, tal es el caso de las revistas digitales, cuyo contenido se distribuye de la misma manera que sus contrapartes impresas, pero generalmente, la experiencia física vs. digital divide claramente el diseño impreso del diseño digital. El dónde y cómo se aprecian los diseños juega un papel muy importante en las decisiones que toman los diseñadores.

02. Experiencia: ¿Cómo tus diseños atraen los sentidos del usuario?

La experiencia que el diseño produce en los usuarios se relaciona con la presentación del mismo. Tanto el impreso como el digital tienen una cualidad visual en común: el diseño necesita causar una buena impresión en el usuario sin importar cuál sea el producto final. Para este componente visual, el diseño impreso añade una experiencia táctil que puede incluir textura, forma, o efectos de impresión como tipografía, estampado o serigrafía. La experiencia del diseño electrónico añade la posibilidad de utilizar elementos audiovisuales u otras opciones interactivas (hablaremos más de esto en el #3).

Por ejemplo, veamos los libros. A muchos lectores les gusta el peso de un libro en sus manos, con la textura, el sonido e incluso el aroma de las hojas; esas son cualidades que no se pueden reproducir en ninguna forma digital. En cambio, los libros electrónicos tienen sus propias cualidades que no existen de forma impresa: un libro electrónico infantil puede tener ilustraciones animadas, o un libro de texto digital puede tener enlaces a otros recursos.

Ambos enfoques tienen su propio valor y apelación.

03. Estático vs. interactivo: El ciclo de vida del diseño y cómo los usuarios se conectan con un proyecto

Una vez que un diseño se va a la impresora, no va a cambiar (a menos que se decida rediseñar y reimprimir, lo cual cuesta tiempo y dinero). En cambio, el diseño digital puede ser ajustado, cambiado, o completamente rediseñado en cualquier momento. Muchos sitios web, especialmente los que cambian frecuentemente su contenido –por ejemplo, un noticiero en línea–, lucen diferente cada día. Imágenes diferentes, textos diferentes; están creados para cambiar.

Esto quiere decir que (a diferencia de los diseñadores de impresión, que generalmente envían su trabajo a una impresora y lo dan por terminado), los diseñadores digitales deben considerar la funcionalidad continua de un proyecto. Los elementos como botones, enlaces, efectos al pasar el ratón, formas o encuestas, videos, y otras opciones interactivas deben funcionar correctamente. No hay manera más rápida de perder a un usuario que cuando algo no funciona como se espera. El diseño digital destaca del impreso en que su calidad interactiva y dinámica requiere usualmente un tipo de esfuerzo invertido por el usuario, como dar clics, teclear, etc., lo que nos lleva al siguiente punto…

04. Usabilidad y navegación: Haciendo intuitivos tus diseños

Ya que el diseño impreso está atado a la forma física y el tamaño de la superficie u objeto, la navegación usualmente se limita a voltear o desplegar una página. En la red, no es tan directo. Los usuarios pueden encontrar diferentes distribuciones de contenido en una página y deben encontrar la manera de llegar al que buscan. Ahí es donde entran los menús. Ellos se han convertido en el núcleo para la navegación de sitios, y deben estar en lugar que el usuario pueda encontrar con facilidad.

Con la reciente creación de diferentes dispositivos y herramientas con acceso a la red, hay un creciente interés en cómo se proyectan los sitios web en varios dispositivos y pantallas, lo que nos ha llevado a enfocarnos en el diseño sensible, o en los diseños que se adapten a varios métodos de visualización. Los diseñadores digitales deben considerar, no sólo cómo se ve su diseño en diferentes dispositivos, sino que además deben saber qué pasa (y cómo cambia el diseño) cuando los usuarios desplazan, acercan, alejan o realizan otras acciones. El diseño y la navegación móvil se han vuelto consideraciones enormes. ¿Cómo la facilidad de lectura y de navegación necesitan cambiar para satisfacer mejor dichos formatos y crear buenas experiencias para el usuario?

05. Compatibilidad: Probando tus diseños web

Para los diseñadores digitales, la compatibilidad es un componente clave para crear una gran experiencia para el usuario. Cualquier diseño digital, –incluyendo sitios web, correos y boletines electrónicos, y otros formatos– necesita visualizarse y operar correctamente en diferentes navegadores, y con distintos sistemas operativos. Esto puede complicarse, ya que estas plataformas tienen sus propias limitaciones. Por ejemplo, iOS, el sistema operativo móvil de Apple, no mostrará ningún diseño basado en Flash, e Internet Explorer (desde la versión 8 y anteriores) no puede mostrar SVGs (gráficos de vector escalable, por sus siglas en inglés). Los diseñadores digitales tienen que tener todos estos problemas en mente para hacer que sus diseños sean tan intuitivos para el usuario como sea posible.

06. Distribución: Cómo acomodas tu contenido

El diseño impreso y el digital tienen muchos elementos en común: tipografía, imágenes/gráficos, formas, líneas, color, etcétera. Así que muchas de las mejores prácticas aplican para ambos.

Cada método tiene también sus propios requerimientos de distribución. Para la impresión, toda la información debe presentarse dentro de los límites de la superficie de impresión, mientras que, en línea, los diseñadores tienen una libertad casi ilimitada para organizar, acomodar y filtrar información.

Los proyectos impresos deben cumplir con ciertas reglas, usando parámetros como márgenes y sangrados, mientras que los sitios web buscan una experiencia consistente entre diferentes métodos de visualización, tanto para web como para móvil. Debido a que los navegadores pueden cambiar la distribución original de un diseño, lograr la funcionalidad óptima requiere probar con diferentes navegadores y sistemas operativos.

07. Tamaño: Dando buen uso a tu espacio de diseño

El tamaño y la distribución van de la mano. Para el diseño impreso, el tamaño de la superficie de impresión es uno de los mayores factores decisivos para saber cómo el diseñador hará uso de dicho espacio; qué elementos de diseño utilizará, la cantidad y el tamaño del texto, etc. Aunque existen tamaños estándar para diversos proyectos (cartas, tarjetas de presentación, carteles, fotos), las posibilidades son virtualmente ilimitadas, ya que el papel u otras superficies de impresión pueden cortarse a la forma y medida.

Para la red, el “tamaño” es más abstracto. Los tamaños de visualización de diseños tienden a limitarse a un cierto número de dispositivos que estén disponibles al momento –desde monitores hasta tabletas y smartphones–, pero ese contenido debe, idealmente, ajustarse a cada dispositivo. Esa adaptabilidad, conocida como diseño sensible, crece a medida que los hábitos de navegación web de la gente se mueven en dirección a lo móvil.

08. Resolución, parte 1: Resumen y DPI (Asegurándote que tus diseños luzcan lo mejor posible)

Es importante entender lo básico en cuanto a resolución para lo impreso y lo digital, pues la resolución determina la calidad de la imagen; qué tan bien se verán las fotos y los gráficos en tu diseño final. Habiendo dicho eso, discúlpenme; vamos a ponernos algo técnicos.

Seguido escucharán referirse a la resolución usando dos términos: DPI o PPI (puntos por pulgada o pixeles por pulgada, respectivamente, por sus siglas en inglés). Erróneamente, mucha gente utiliza estos de forma intercambiable, pero en realidad, son dos cosas distintas (incluso los desarrolladores de software deberían saber la diferencia –incluido Adobe– ya que, a veces, los han etiquetado mal).

El DPI entra en juego en los actuales procesos de impresión; es la densidad de los puntos de tinta impresos en una pulgada de superficie de impresión.

El equipo que esté configurado para imprimir a un mayor DPI tiende a reproducir imágenes de mayor calidad. Pero, a diferencia del PPI, el DPI no tiene nada que ver con el tamaño de una impresión. Tiene que ver con las capacidades del equipo de imprenta que se esté utilizando –algo donde la mayoría de los diseñadores no tienen control. Asimismo, el DPI es irrelevante para el diseño web, ya que involucra específicamente cuánta tinta se imprime en una superficie. Sólo ten en mente que mucha gente utiliza “DPI” como un término general para referirse a la resolución en cualquier contexto de diseño.

09. Resolución, parte 2: PPI (Asegurándote que tus diseños luzcan lo mejor posible)

El PPI involucra el número de pixeles (los fundamentales componentes cuadrados de una imagen digital) que se muestran en un espacio.

Entre más pixeles por pulgada, mayor será la calidad de la imagen, ya que será más clara y definida. El pixelado (imagen borrosa, distorsiones, pérdida de calidad) ocurre cuando el PPI no es suficiente para la impresión o cuando una imagen digital es de mayor tamaño a comparación de sus dimensiones originales.

Las pantallas de los dispositivos que usamos hoy tienen resoluciones predeterminadas. Para el trabajo digital, el estándar general para las imágenes de calidad aceptable es de 72 PPI, aunque eso puede estar cambiando, a medida que se produzcan más dispositivos con pantallas de alta resolución. Sebastien Gabriel, diseñador para Google Chrome, nos explica: “Las computadoras con Windows tienen una resolución por defecto de 96 PPI. Mac usa 72, aunque este valor no ha sido preciso desde los ochentas. Los ordenadores regulares, sin pantalla Retina (Macs incluidas) tienen una resolución de 72 PPI como mínimo, hasta un máximo de 120. Diseñar con un PPI de entre 72 y 120 asegura que tu trabajo tendrá más o menos las mismas proporciones en todos lados.”

Al preparar una imagen digital (medida en pixeles) para impresión (medida en pulgadas, centímetros u otras unidades), usualmente comienzan a surgir confusiones. Si los pixeles representan espacio de pantalla, ¿cómo se reproducirá el diseño en papel? Un recurso oficial del gobierno americano, que aconseja a los museos sobre cómo conservar mejor sus fotografías y otros recursos, sugiere que el PPI y el tamaño de la impresión tienen una relación inversamente proporcional. Esto es, un valor mayor de PPI (más pixeles por pulgada) condensa o reduce el tamaño físico de la impresión, pero incrementa la calidad. Esto quiere decir que, dependiendo de las características de un proyecto en específico, los diseñadores necesitan ajustar el PPI del archivo para producir la combinación apropiada entre tamaño y calidad:

“La cantidad aceptable de PPI necesaria para una impresión de calidad depende del tamaño de esta. Por lo general, las impresiones grandes se aprecian desde lejos que las pequeñas, así que un número menor de PPI será, general y visualmente aceptable…

Sin ampliación, el ojo humano no puede distinguir detalles en una impresión mayor a 300 PPI. Dependiendo de la impresora, el estándar general de hoy requiere 300 PPI para una impresión de calidad.”

Seguido escucharás que los grabadores (e incluso diseñadores) expresan la necesidad de guardar un archivo en 300 DPI. En realidad, quieren decir 300 PPI.

10. Tipos de documento: ¿Cómo elegir el formato correcto para tu diseño?

Los diseñadores tienen muchísimos tipos de documento de dónde elegir. Pero ¿cuáles son los adecuados para cada situación? ¿Hay algunos que son más apropiados para la red que para imprimir, y viceversa? Aunque todos esos acrónimos pueden llegar a ser un poco confusos, nos ayuda a entender que cada formato cae en una de dos categorías básicas: trama o vector. Las imágenes de trama se componen de pixeles –un ejemplo son las fotos digitales– y su calidad depende de su resolución (que acabamos de discutir en el punto anterior). Se pueden distorsionar fácilmente si se agranda más allá de lo que permite su resolución (medida en pixeles por pulgada). Por otra parte, las imágenes de vector no están limitadas por pixeles. Sin usar tecnicismos, los vectores son gráficos que se definen por ecuaciones matemáticas, permitiendo escalarlos a cualquier tamaño sin perder calidad.

Aquí hay una breve descripción de algunos formatos comunes, sus características, y el tipo de proyectos donde los puedes usar:

Impreso y digital:

  • JPG (o JPEG): La mayoría de la gente lo conoce, ya que es el formato por defecto de muchas cámaras digitales. Los JPGs deben guardarse con una resolución apropiada y en el modelo de color correcto (CMYK para impresiones y RGB para la red; veremos más de esto en el siguiente punto).
  • PDF: Usado ampliamente; preserva el contenido y la apariencia original de un archivo sin importar dónde o cómo se visualice.
  • EPS: Es comúnmente usado para guardar gráficos de vector para preservar su escalabilidad; no son siempre legibles en ordenadores.
  • PNG: Imagen de alta calidad; soporta transparencias/opacidades.

Sólo impreso:

  • TIFF: Gran calidad de imagen y tamaño de archivo (a diferencia de los JPG, comprimir la imagen no reduce la calidad); compatible con Mac y PC, y es comúnmente usado en el documento final que se envía a la impresora.

Sólo digital:

  • GIF: Soporta gráficos animados y/o efectos de transparencia; la capacidad de color no es tan buena como los JPG (256 colores o menos, así que no es apropiado para fotografías); es ideal para gráficos simples en la red, ya que su tamaño de archivo no afecta negativamente la velocidad de carga de las páginas.
  • SVG: Formato vectorial que se puede escalar a cualquier tamaño sin perder calidad.

Por Software:

  • PSD: Una trama editable creada en Photoshop.
  • AI: Un vector editable creado en Adobe Illustrator.

Canva: PNG o JPG

Con tantas opciones ahí fuera, Canva simplifica la selección para los proyectos impresos o digitales.

Si tu diseño es digital, siempre elige “como imagen”, o si es impreso, selecciona “PDF”.

11. Color, parte 1: Resumen y CMYK (¿Qué tipo de color se usa para la impresión?)

El color es muy distinto cuando está impreso en papel que cuando está en una pantalla, porque involucra diferentes espacios de color: CYMK es para lo impreso y RGB es para la red. Si se usan ambos métodos para un proyecto –digamos, ayudando a un negocio a crear un logotipo para su sitio web y tarjetas de presentación–, el diseñador deberá asegurarse que los colores aparezcan consistentemente entre los distintos productos.

¿Cómo se logra esto? La forma más común es por medio del Pantone Matching System. Determina colores equivalentes para web e impresiones, así como para diferentes superficies de impresión. Los colores Pantone tienen sus propios números de referencia, diferentes de los códigos de color asociados con CMYK y RGB. El sistema Pantone facilita la colaboración entre diseñadores, clientes e impresoras, y se asegura que el producto final luzca como se debe.

Ahora, vamos al grano. ¿Qué es CMYK? Son las siglas de las cuatro tintas que utilizan todas las impresoras: cian, magenta, amarillo y negro. Los diseñadores identifican los colores individuales que quieren usar para un proyecto impreso con códigos que dan porcentajes de cada tipo de tinta requeridos para formar colores específicos. Por ejemplo, si quisieras usar el mismo azul que Twitter usa para su logotipo, la guía de estilo de la compañía dice que el código CMYK del “azul Twitter” es 70/10/0/0; eso es 70% de tinta cian, 10% de tinta magenta, y nada de amarilla o negra. Entonces podrías introducir dicho código a tu software de diseño y usar el mismo color que Twitter usa.

Cuando se diseña usando el modelo CMYK, es importante tener en cuenta que los colores en la pantalla no representan fielmente la impresión. Llevar un proceso de verificación es necesario para asegurarte de pasar correctamente el color de la pantalla al papel.

12. Color, parte 2: RGB (¿Qué tipo de color usar para la web?)

RGB se refiere a los colores que vemos al mirar un monitor; puntos de luz roja, verde, y azul combinados para crear colores visibles en tu televisión o monitor.

Lograr la consistencia en los colores para la red puede ser complejo, pues las capacidades de exhibición varían de monitor a monitor, y los colores lucirán distintos dependiendo de los ajustes de brillo, contraste y demás. Idealmente, los usuarios calibrarán su pantalla para asegurar una precisa representación de color (tanto Mac como Windows tienen herramientas preestablecidas que puedes utilizar para calibrar tu laptop o monitor externo).

Los colores RGB se representan en tres conjuntos de números (que van desde un mínimo hasta un máximo, usualmente de 0 a 255) que indican la cantidad de luz roja, verde y azul que emite un cierto color. Para continuar con el ejemplo de Twitter, el valor RGB del “azul Twitter” es 85/172/238, siendo 238 el valor de luz azul, que es el que predomina. Los códigos de seis dígitos conocidos como valores hexadecimales (comúnmente llamados códigos hexadecimales) son otra forma de etiquetar los colores RGB. Son usados específicamente para identificar y representar el color cuando se hace un diseño con HTML y CSS.

Ya que el espacio de color RGB utiliza un espectro de color más grande que CMYK, vale la pena señalar que algunos diseñadores crean un proyecto de impresión en RGB para tener más opciones de color, y después convierten el diseño final a CMYK antes de imprimir.

Así es como los profesionales del diseño piensan sobre el color. Si te estás sintiendo un poco abrumado, estarás feliz de saber que Canva optimiza automáticamente tus diseños digitales o de impresión.

Elige tus colores de la rueda de color arrastrando tu ratón alrededor del espectro circular. Cuando estés listo para descargar tu diseño, tendrás dos opciones: guardarlo como imagen, o como PDF.

Si tu diseño es digital, siempre elige la opción “como imagen”, o si es impreso, selecciona “PDF”.

13. Tipografía: Cómo elegir y usar las fuentes correctas para el diseño correcto

Si alguna vez has comprado una fuente o descargado en línea una fuente gratuita para un proyecto de diseño, probablemente has notado que vienen en dos categorías: fuentes de escritorio y fuentes web. Estos términos tienen que ver con la licencia; las cuestiones legales y de derechos de autor que indican el dónde, cómo, y cuántas veces puede usarse una fuente. En general, las fuentes de escritorio autorizan que un solo usuario las instale en su computadora, y las use de varias formas (generalmente se usan para el diseño impreso). Por otro lado, las fuentes web han sido creadas y optimizadas específicamente para su uso en sitios web que usen CSS. Las opciones de fuentes web solían ser muy limitadas, pero los recursos como Google Fonts (gratis) y TypeKit (opciones gratuitas limitadas; existe suscripción de paga) están cambiando eso.

Aparte de los recursos actuales que los diseñadores utilizan para manipular la tipografía, el método para modificar la letra difiere entre los proyectos impresos y digitales. Para lo impreso, aparte de las mejores prácticas comunes, depende en gran medida de los proyectos específicos, y los diseñadores tienen control completo para determinar cómo luce la tipografía.

Sin embargo, para la red se priorizan las fuentes que se muestran de forma limpia y las que son fáciles de leer (regularmente son fuentes sans-serif, o una serif sin adornos). Aquí los diseñadores tienen menos control del cómo se muestran las fuentes en varios dispositivos, así que mejorar la legibilidad (tanto como se pueda) es clave; por este motivo, el contenido en línea regularmente tiene párrafos cortos y un amplio espaciado entre líneas.

El paquete de fuentes de Canva fue cuidadosamente organizado para ti y contiene más de 140 fuentes gratuitas para que uses en tus diseños. Si eres un principiante que apenas empieza a trabajar con las fuentes, la guía completa sobre los errores tipográficos más comunes es definitivamente digna de un marcador.

14. Control: Limitaciones del diseño y cuánto dura el proceso

La tipografía no es la única cosa donde los diseñadores tienen un control limitado. El diseño digital es una plataforma interesante donde el diseñador determina la apariencia inicial de un proyecto, pero un usuario puede modificar estas decisiones, cambiando el tamaño de la ventana del navegador, acercando o alejando, o ajustando la configuración del navegador como la elección de fuente y tamaño del texto.

Los diseñadores de impresión tienen mayor o menor control sobre sus proyectos, ya que pueden personalizar, cambiar o corregir algo hasta la hora de la impresión. En lugar de que los usuarios determinen cómo lucirá el producto final, los diseñadores de impresión toman las decisiones exactas sobre la apariencia de un diseño, y luego encuentran una impresora para satisfacer sus necesidades.

Sin embargo, una vez que el diseño sale de la impresora, es todo. Por otra parte, los diseñadores digitales tienen más control continuo. Si un diseñador quiere corregir un error, cambiar un cierto elemento de una página web, o modernizar todo el diseño, es una opción.

15. Construcción: Cómo varían los métodos de los diseñadores y cuándo importa

Cada diseñador tiene su propio proceso; sus métodos favoritos y flujo de trabajo para armar un diseño. Para el diseño digital, ese proceso puede tener más impacto en el producto final que un diseño de impresión. Verás, los diseñadores de impresión reconocen que hay más de una forma de hacer las cosas. En muchos casos, siempre y cuando el diseño se vea bien, no importa cómo se hizo. Un diseñador puede haber pirateado su camino a través de un proyecto, pero el espectador que está viendo el diseño no tiene forma de saberlo.

Para el diseño digital, es un poco más complicado. La creación de un sitio influye en el producto final, incluyendo la usabilidad (cuántos visitantes son capaces de encontrar las cosas en el sitio, la velocidad de carga de la página) y la visibilidad en los motores de búsqueda.

Bueno, ¡lo lograste! Si seguiste leyendo hasta aquí, te aplaudo. Espero que hayas aprendido algo nuevo y/o comprendido las diferencias entre el diseño impreso y digital. Si logras recordar otras diferencias (o similitudes) interesantes, háznoslo saber acá abajo en los comentarios.

¿Estás planeando un nuevo proyecto de diseño? También puede gustarte:

La mejor herramienta para crear diseños increíbles