El proceso del diseño web a través de los años

Photoshop fue una herramienta útil e indispensable durante mi primera década como diseñadora web, me permitió hacer que el proceso de trabajo sea una experiencia cómoda, práctica.

El proceso de diseño web involucraba una serie de pasos en el momento de trabajar un proyecto, diseñar cada detalle antes de enviar el prototipo inicial al cliente para luego pasar por una serie de revisiones hasta la aprobación final. Photoshop, me dió esa oportunidad, la de trabajar sobre composiciones muy parecidas a la versión final del diseño que mostraríamos luego en el navegador, fue fabuloso.

El Responsive Web Design fue el responsable de hacer imperfecto a éste proceso de trabajo. El responsive design permine que el diseño sea flexible y se adecue a la resolución de pantalla donde se muestra, el mismo sitio puede verse diferente en un monitor grande que en una pantalla móvil.

Cómo el responsive design afectó mi proceso de trabajo?.

Resulta que para mostrar el producto al cliente necesito hacer diferentes versiones del mismo diseño, en diferentes resoluciones.Esto no representa el fin del mundo, solo necesito invertir umpoco más de tiempo y trabajar con un poco más de esfuerzo (seguramente el cliente me lo recompensará 😛 ). Los dolores de cabeza empiezan durante la ola de revisiones y ajustes, si el cliente decide eliminar cualquier elemento o funcionalidad en el diseño, debo entrar a modificar todas las versiones de las diferentes composiciones!. Una pesadilla!.

No existen estándares en los rangos de las resoluciones, conocemos la resolución exacta que tiene la pantalla del iPhone 5 ahora, pero ésta cambiará apenas Apple anuncie su nuevo producto. Mientras tanto, además, hay que resolver como se verá el diseño en otros cientos de dispositivos nuevos ahora disponibles en el mercado, los cuales desconozco su resolución, solo conozco el comportamiento que debería tener mi nuevo diseño en ellos.

Entonces, cuál es la nueva metodología y proceso de trabajo?.

Los diseñadores necesitamos encontrar un proceso de trabajo más flexibles, modularizables, el nuevo proceso de trabajo se divide ahora en tres secciones lógicas, Wireframing,  Aspecto, Prototipo.

Procesos modulares, diseños modulares. Vectores?. Illustrator?

Apple fue la primera industria en introducirnos através del Retina Display a las pantallas de alta densidad (hi-pixel-density). Diseñadores de todo el mundo gruñimos con horror al ver como nuestros diseños se mostraban bochornosamente pixelados como si fueran viejos escombros en este nuevo tipo de monitor.

Este fue tan solo otro ejemplo de como nuestros diseños se comportan de una manera inesperada, más evidencia que mientras diseñamos debemos mantenernos tan agnósticos como sea posible.

Al menos los navegadores son amables manejando vectores en estos nuevos tiempos, podemos usar SVG el cual nos permite embeber en nuestro código y luego tener una salida directa en cualquier navegador.

Es decir, en determinadas circunstancias, un archivo SVG podemos manipularlo desde un editor de texto.

El diseño debe ser autónomo e independiente en relación a la resolución

Para inmunizar al diseño de las variaciones de la densidad por píxel debemos confiar en el generador de gráficos de los navegadores tanto como sea posible. Cortar bitmaps para completar los detalles visuales de nuestro sitio ya no tiene sentido. Felizmente, CSS recorrió un largo camino en los últimos años y ahora nos permite agregar bordes redondeados, doble bordes, múltiples fondos, degradados, incluso patrones y texturas así que ya los bitmaps no son tan imprescindibles como lo eran entonces.

Querés dejar un comentario?