El proceso gráfico en web

Tras hablar del proceso gráfico tradicional y sus fases, os traigo el proceso gráfico en entorno web; que como veremos a continuación tiene bastantes peculiaridades que hay que tener en cuenta a nivel de fases, soportes y sobretodo en el flujo de trabajo. ¿empezamos?

Fases del proceso gráfico en web

Cuando escribí acerca del proceso gráfico tradicional, ya decía que cambiaba mucho en función del soporte final en el que se está. En este caso hablamos de un proceso en el que el destino del arte final no es un soporte impreso, y por lo tanto perderemos algunas fases (impresión y post-impresión) y ganaremos otras (programación). No obstante la única fase que se mantendrá siempre será la del diseño (pues en muchas ocasiones no será necesario programar ni hacer preimpresión ya que el diseño podría ocuparse de ello)

Diseño gráfico en web

Una de las fases que más cambia en el proceso, es el diseño gráfico, ¿por qué?, porque trabajamos para pantalla, por lo tanto no trabajamos con líneas por pulgada sino con píxeles por pulgada. A continuación os enuncio algunas peculiaridades que tiene el entorno web para el diseñador gráfico.

Algunas diferencias entre el diseño gráfico tradicional y el diseño gráfico en web

Teniendo claro que trabajamos para cualquier clase de pantalla, lo siguiente que hay que entender es que hay tipografías que funcionan mejor que otras en pantalla (de hecho algunas se crearon específicamente para este fin). Y también que los productos en pantalla tienen muchas más variedades ya que cada diseño puede tener dos versiones en una tablet, y otras dos en el mobile además de la pantalla del ordenador.

No puedo dejar de mencionar el tema de los colores ya que es importante, si en el proceso gráfico tradicional usábamos CMYK, aquí en cambio usaremos RGB y el modo hexadecimal para la programación (es muy recomendable conocer los distintos modos de color existentes porque sabiéndolos desde la creación, nos ahorraremos muchos quebraderos de cabeza a la hora de compatibilizar los colores en el diseño gráfico y en la parte de programación)

¿Y la navegación y categorización? hemos pasado del papel a la pantalla, lo que supone muchas más opciones pero también quebraderos de cabeza. La filosofía es la misma, sea en web, en publicación electrónica o en una aplicación: el usuario debe saber dónde está pero la dificultad aumenta considerablemente porque todo debería poder ser ‘clickable’. Y es que la interactividad es la base de todo esto.

Otra de las cuestiones que está generando más debate en la parte web es el tema de los diseños de páginas. ¿Usamos el famoso diseño responsive, un adaptative o nos vamos a first-mobile? yo ya me posicioné pero una cosa es la teoría y otra muy distinta la práctica y lo que el cliente esté dispuesto a gastarse porque al fin y al cabo, es su presupuesto.

El diseñador gráfico en web debe conocer mejor que nadie cómo es el proceso gráfico en entorno web dado que aunque con código se puede programar prácticamente todo, los costes de hacerlo y sobretodo los tiempos de ejecución pueden ser extremadamente amplios. Es por ello que el uso de templates ya creados para vectorización de archivos (como vecteezy), bancos de imágenes como (fotolia), templates de webs, y otros productos gráficos online (forecast) asi como widgets y plugins deben saber usarse en la medida de lo posible para agilizar desde la creación el proceso gráfico. No obstante las fases siguen siendo dos:

1. Orientar el proyecto del cliente.
2. Planificar y crear el diseño.

Preimpresión digital

La fase de preimpresión cambia considerablemente, seguimos tratando textos e imágenes pero trabajando para pantalla y no para papel (el peso final de los archivos importa mucho más), se trabaja el color en síntesis aditiva (los ajustes de color cambiarán parámetros), las resoluciones serán de 72 a 96 píxeles por pulgada, los formatos de archivo serán en muchos casos otros (no usamos TIFF ni EPS como formato final, sino SVG, PNG, CSV, XML, GIF y JPEG). A continuación os dejo un cuadro muy ilustrativo de los archivos que se manejan en artes gráficas.

Las fases serían:

1. Digitalización de originales
2. Tratamientos
3. Pruebas

Como podéis apreciar, hemos perdido las fases de maquetación (normalmente y salvo que el diseñador o preimpresor sepan hacerlo, se ocupará de ello el programador) las de imposición y las de obtención de la forma impresora (pues lógicamente no existe)

Programación y desarrollo web

En el proceso gráfico en web aparece una tercera fase que no existía en el proceso gráfico tradicional: la programación. Es importante entender que una cosa es el diseño web y otra el diseño gráfico para web. La necesidad de la programación es simple de entender; si diseñamos para web tiene que haber alguien que haga visible esos diseños a los distintos navegadores y sistemas operativos. En esta fase mediante código informático (CSS, o HTML5 entre otros) se hace legible nuestro diseño gráfico (ya optimizado para la web)

Como siempre decimos, prácticamente se puede programar todo, pero hay cosas para las que es mejor coger templates por dos razones:

• Ahorro de tiempo.
• Son versiones probadas y optimizadas.

Programar desde cero te aporta la capacidad de poder crear un sistema propio idóneo para ti, pero en muchos casos es hasta probable ver que un template optimiza mejor los elementos de lo que lo puede hacer un diseño web propio, sobretodo si los recursos son limitados. En mi opinión la mejor opción es siempre que se pueda optar por un template (forecast es un gran sitio para ello) y retocar el código para adaptarlo a nuestras necesidades.

Las fases de esta fase serían:

1. Maquetación.
2. Programación (en el caso en el que se requiera).
3. Pruebas de comprobación.

Es importante mencionar que cuando se requiere de hacer programación, incurriremos en la necesidad de tener un servidor web para poder alojar todo el arte final salvo que el cliente nos proporcione uno.

---

Algunas fuentes consultadas

• Manual de producción gráfica recetas, capítulos 04, 05, 07  “Kaj Johansson”
• Imágenes de F. Javier Sánchez Bosch (profesor de AG en IES Puerta Bonita)