El rol de Photoshop en un flujo de trabajo de diseño web

La web ha experimentado serios cambios en los últimos años y la forma en que está diseñada está cambiando junto con ella. Es posible que Photoshop siga siendo la herramienta "de referencia" para muchos diseñadores web, pero para algunos, Photoshop ya no es el rey. En este artículo, Ian Yates, editor de Webdesigntuts+ explicará cómo se usó Photoshop en el pasado, cómo se puede usar en el futuro y por qué.

¿Para qué sirve?

Técnicamente hablando, Photoshop es una aplicación para manipular imágenes (perdóname por decir lo obvio), pero también está repleto de herramientas para crear gráficos desde cero. Formas, vectores, fuentes, rellenos y efectos, todos estos (y más) se prestan muy bien para construir diseños gráficos.

No hace mucho, los navegadores web eran incapaces de generar directamente este tipo de efectos por sí mismos, pero podían mostrar imágenes de mapa de bits perfectamente. Para explorar el diseño gráfico dentro de un navegador, era lógico utilizar Photoshop, crear tu contenido visual, guardarlas como imágenes y usarlas dentro de una página web.

Degradados, sombras, patrones, ángulos; todo fácil de crear con las herramientas de Photoshop, no demasiado fácil de crear con cualquier otra cosa.

La creación para la web también era relativamente compleja (mucho menos simplificada que en la actualidad), por lo que crear un diseño en Photoshop siempre sería más fácil y rápido que luchar con Dreamweaver. ¿Por qué no diseñarías en una aplicación gráfica, obtendrías la aprobación del cliente y luego construirías para la web? Los diseñadores de hoy han crecido usando Photoshop porque ofrecía la forma más rápida de visualizar un concepto de diseño de alta fidelidad.

El legado del diseño de impresión

Cuando la web era un medio emergente, no había "agencias web", por lo que la tarea de crearla recayó en los diseñadores de impresión. Estos chicos hicieron lo que era lógico; tomaron su experiencia en diseño de impresión digital, valores, técnicas, procesos y herramientas, y luego los aplicaron a este nuevo mundo feliz. Llevaron efectivamente el diseño de impresión a la pantalla, por lo que el flujo de trabajo ya existía:

Todo lo que se necesitaba alterar era el resultado final. Como tal, Photoshop fue testigo de los cambios y siguió adelante, enraizándose aún más como el mejor amigo del diseñador gráfico.

¿Cuáles son sus limitaciones?

Los tiempos están cambiando (como dijo Bob Dylan). La web es un lugar diferente en estos días y el papel de Photoshop en el proceso de diseño para esa web también está cambiando. ¿Por qué?

Una gran parte del problema radica en los avances tecnológicos que han impulsado un gran cambio en el diseño web en los últimos años. Hemos visto crecer a Internet de una biblioteca de documentos estáticos a un grupo interactivo de servicios y aplicaciones. Los proveedores de red han extendido sus dedos a casi todos los rincones del mundo, el ancho de banda y la velocidad han aumentado a niveles similares a los de la ciencia ficción. Los dispositivos habilitados para Internet, como teléfonos inteligentes, tabletas e incluso relojes, se fabrican de manera económica y rápida. Todo esto ha revolucionado la forma en que usamos la web y ha alterado drásticamente nuestra percepción de cómo deberíamos diseñar para ella.

Una web fluida

Los diseñadores de impresión comienzan con restricciones (las dimensiones fijas de una página) y luego diseñan dentro de ellas. Al diseñar por primera vez para la web, este también fue un punto de partida lógico; establecer un lienzo fijo y trabajar hacia adentro. Para averiguar cuáles deberían ser esas dimensiones fijas, los diseñadores tuvieron que hacer suposiciones sobre los tamaños de pantalla del usuario final. Muy al principio, 800x600px era lo más común. Más tarde, 1024x800px fue la norma. Trabajar con una cuadrícula de 960px tenía sentido porque se ajustaba a la mayoría de las pantallas (las pantallas más grandes eran raras, los propietarios de pantallas más pequeñas simplemente tendrían que actualizarlas eventualmente) y era divisible por un rango de anchos de columna.

Estas suposiciones eran erróneas entonces (¿obligando a un usuario a ajustar su navegación a tu diseño?) Y lo son aún más en estos días. ¿Qué tan grande es una página web hoy?

En mayo de 2010, un tipo llamado Ethan Marcotte escribió sobre una idea brillante que había concebido. Tomando tecnologías y métodos existentes, propuso un enfoque de "Diseño web adaptable" que utilizaba diseños fluidos (no fijos), imágenes flexibles (que crecen y se encogen con el diseño) y Media Queries de CSS (que permiten que los diseños cambien según el tamaño de la pantalla y otros factores).

Con estas ideas la web cambió de manera irreversible.

Gracias a los conceptos de Ethan, los diseñadores web se han dado cuenta de que deberían pensar desde el contenido hacia afuera, no desde los límites de la página hacia adentro (aunque debe tenerse en cuenta que este enfoque no es obligatorio). No sabemos qué tan grande es una página web, por lo que debemos diseñar nuestro contenido para que se ajuste a los límites a los que se enfrenta. Piensa en el contenido web como algo líquido; capaz de ser vertido en todo tipo de recipientes.

Aquí radica un problema para Photoshop. Photoshop trabaja intrínsecamente con límites fijos. Las formas, el tipo y los objetos dentro de sus diseños son fijos, mientras que las páginas web cada vez más no lo son. La producción de una composición para presentarla a un cliente solía lograrse rápidamente en Photoshop, pero ¿cómo se puede presentar de manera efectiva un diseño fluido como una instantánea estática?

El problema de los píxeles - I

La tipografía es otro gran ejemplo de los diseñadores de impresión que intentan imponer restricciones a los usuarios finales. El navegador de cada usuario les da el poder de establecer su tamaño de letra predeterminado; después de todo, algunas personas prefieren letras más pequeñas, mientras que otras prefieren una experiencia de lectura más fácil con letras más grandes. De forma predeterminada, los navegadores generalmente establecen la fuente en 16px, por lo que, a menos que un diseñador indique lo contrario, o que un usuario altere el valor predeterminado, así será el cuerpo del texto.

Los diseñadores de impresión, sin embargo, tienen dificultades reales para renunciar a este control. "¡¿Cómo puedes dejar que el usuario defina el tamaño de la fuente?! ¿Tienes alguna idea de lo que afectará al resto del diseño?"

Bloquear el tamaño de fuente dentro de un diseño web (a través de CSS) ayudará en gran medida a evitar que suceda algo impredecible, pero difícilmente es fácil de usar. En estos días, se considera una buena práctica cambiar el tamaño de los elementos de la página y la tipografía utilizando ems en lugar de píxeles; unidades de medida relativas que se basan en el tamaño de fuente predeterminado. Por lo tanto, si un navegador tiene un tamaño de fuente predeterminado diferente, todo el diseño puede flexionarse en respuesta a eso.

Esta flexibilidad, nuevamente, resalta las limitaciones de diseñar composiciones estáticas en Photoshop.

El problema de los píxeles - II

Los navegadores se están desarrollando muy rápidamente en estos días y las imágenes ya no son necesarias para muchos efectos en la web. CSS es capaz de producir gradientes precisos, curvas, objetos sesgados, sombras, transparencia alfa (la lista continúa) y esto es gracias al nacimiento de las pantallas Retina. Las pantallas Retina (o más exactamente: pantallas de alta densidad de píxeles) realmente han puesto un freno a los diseñadores web. Las pantallas Retina tienen el doble de píxeles que las pantallas normales, lo que les permite el lujo de hacer que todo sea súper nítido. Cualquier cosa basada en píxeles, sin embargo, simplemente se amplía dos veces más ancho, dos veces más alto, lo que resulta en una calidad comparativamente más baja.

Para que los sitios web conserven su nitidez, los diseñadores deben confiar tanto como sea posible en lo que el navegador puede representar. De hecho, la reciente tendencia hacia el "diseño plano" es (en parte) una reacción a este diseño web puramente basado en CSS.

Todo esto elimina una gran parte de lo que hace Photoshop (producir mapas de bits) de la ecuación.

Diseño basado en rendimiento

Como hemos mencionado, la web se ha vuelto verdaderamente global gracias a la expansión de los dispositivos móviles. Nos obliga a darnos cuenta de que no podemos conocer las circunstancias en las que se accede a nuestro contenido. No sabemos si nuestro usuario final está sentado en el sofá con un Kindle, volando en parapente con un iPhone o corriendo por el desierto de Gobi con una MacBook Pro. No sabemos qué tan grande es su pantalla, cómo es su procesador e, igualmente, no podemos asumir que sabemos qué tan rápida es su conexión.

Estamos empezando a darnos cuenta de que el rendimiento es una parte fundamental del diseño para la web. Nuevamente, las imágenes juegan un papel en esto. Cada recurso individual (ya sea una imagen, un script, un documento, lo que sea) que se extrae de un servidor web es costoso.

En lugar de guardar archivos como imágenes y fuentes en una carpeta llamada "assets", cambiaré el nombre de la carpeta por "liabilities".

— Jeremy Keith (@adactio) 18 de febrero de 2013

No solo deben optimizarse para que sean lo más pequeños posible, sino que también deben ser lo menos posible. Los navegadores están limitados en la cantidad de recursos que pueden descargar simultáneamente, a menudo a solo dos en un momento dado. Si tu página web contiene cientos de imágenes individuales, formarán un cuello de botella y, en última instancia, brindarán una experiencia negativa al usuario final.

Esto se puede ayudar combinando archivos de imagen en sprites individuales, pero (nuevamente) las pantallas de retina fuerzan algún tipo de plan de respaldo.

En cambio, los efectos se logran mejor con CSS, los iconos se pueden incrustar a través de fuentes web, los logotipos se pueden implementar como gráficos vectoriales escalables, todo lo cual significa el final de la herramienta de corte.

Duplicación de esfuerzos

Cuando el flujo de trabajo del diseñador web era efectivamente el mismo que imprimir con Internet al final, crera diseños en Photoshop era una parte integral del proceso:

• Las herramientas familiares significaban diseños relativamente rápidos.
• Presentar composiciones estáticas al cliente era muy similar a presentar diseños de impresión.
• La precisión de píxeles significaba que las mediciones se podían aplicar directamente al equivalente del navegador.
• Los recursos reales se separaron de las composiciones de diseño para su uso en la página web.

En estos días, con menos del resultado final que depende de los recursos integrados en una aplicación de gráficos, crear un diseño completo en Photoshop significa efectivamente duplicar tus esfuerzos. Constrúyelo una vez para tener una idea de cómo se verá, luego constrúyelo de verdad. Luego, desecha el PSD porque no le sirve a nadie.

Agregando al kit de herramientas

Adobe se resistía al cambio o simplemente intentaba adaptarse cuando introdujo algunas características de diseño web en CS6. El panel de salida CSS similar a CSSHat te permite tomar código de los elementos de tu página creados visualmente. También hicieron posible pegar un color hexadecimal (copiado del navegador), incluido un hashtag (#ffffff, por ejemplo) en el selector de color de Photoshop sin arrojar un error.

Se introdujeron estilos de párrafo (un poco como en InDesign) para brindar un control más global sobre la tipografía. Lorem Ipsum se abrió camino como una característica estándar ¡y ahora puedes incluso elegir dimensiones de dispositivo comunes como ajustes preestablecidos en los pre-ajustes!.

Pero estamos en negación aquí: hay un gran elefante azul parado en la esquina de la habitación.

Es hora de un flujo de trabajo modular y flexible

Lo que realmente estamos viendo aquí no es una aplicación que no se ajusta al diseño web, sino un flujo de trabajo que ya no es apropiado. De hecho, incluso antes de que la web se volviera fluida y blanda, había fallas fundamentales en el proceso de diseño web de Photoshop como lo hemos descrito. Había una tendencia a crear representaciones perfectas en píxeles de páginas web antes de que pudieras comenzar la construcción. Y luego, debido a la obsesión por lograr que todo sea 100% perfecto en Photoshop, habría un fanatismo similar por lograr resultados idénticos en todos los navegadores. ¡Nos ha llevado mucho tiempo darnos cuenta de que las páginas web no tienen que ser idénticas en todos los navegadores!

Un problema serio con el objetivo de la perfección en Photoshop surge cuando el cliente se involucra. Este flujo de trabajo hace que sea muy fácil quedarse atascado en un bucle infinito de clientes que hacen sugerencias de empuje de píxeles, perdiendo inevitablemente de vista el panorama general.

Lo que se necesita es un enfoque más modular para el diseño web y Photoshop absolutamente puede jugar un papel en eso. Considera primero la etapa de planificación; recopilación de información y contenido, bocetos de relaciones entre áreas del sitio web en su conjunto – una parte crucial de este proceso modular, pero es mejor llevarlo a cabo fuera de Photoshop.

El Wireframing lleva el proceso más allá; trazando elementos rudimentarios de interfaz, estableciendo relaciones visuales, jerarquías e interacciones básicas. Nuevamente, esta no es una tarea que Photoshop lleve a cabo muy bien, sino que abre paso a aplicaciones como Omnigraffle y Balsamiq, incluso Illustrator (y hay muchas más).

Photoshop se presta mucho mejor a la estética. No puede describir diseños con fluidez, pero puede explorar colores, texturas, estilos de elementos individuales, tipografía, atmósfera y estados de ánimo. Style Tiles es un concepto sugerido por Samantha Warren. Básicamente son paneles de estilo de Photoshop, pero destacan una forma de aislar y presentar la fase estética al cliente.

El siguiente módulo de este flujo de trabajo es la creación de prototipos; la creación de diseños básicos pero funcionales para el navegador. Y no, esta tampoco es la taza de té de Photoshop. De hecho, Adobe está trabajando intensamente en una línea alternativa de aplicaciones para ayudar aquí. Sus herramientas conocidas como "Edge Tools" tienen como objetivo ofrecer una interfaz de lienzo familiar, que genera resultados fluidos para el navegador; ideal para la creación rápida de prototipos, pero todavía es un trabajo en progreso.

Cada una de estas etapas modulares toma un aspecto del proceso de diseño, lo aísla e involucra en gran medida al cliente, brindándote muchas oportunidades para firmar cada etapa sin afectar a las demás.

Ten en cuenta que este es un flujo de trabajo sugerido, nada está escrito en piedra en lo que respecta al diseño y, a menudo, hay más implicaciones que estas etapas generales. Lo que me lleva a mi punto final.

¡Lo que sea que funcione!

Cualquier proceso de diseño es extremadamente personal y lo que funciona para otra persona no necesariamente funcionará para ti. Hay muchas personas que piden el fin del diseño web en Photoshop y, en su lugar, hacen campaña por un flujo de trabajo basado en el navegador. El hecho es que, si Photoshop funciona para ti, ¡utilízalo! Al final del día, somos diseñadores: si queremos pasar cientos de horas hombre empujando píxeles y puliendo nuestro portafolio de Dribbble, ¡permitámonos deleitarnos con eso!

Lectura adicional

¿Estás interesado en aprender más sobre Photoshop y su relación con el diseño web? Echa un vistazo a los artículos a continuación.

• Reutilizar Photoshop para la web por Dan Rose.
• Participa en esta encuesta Modelando el futuro del diseño web, en la web.
• Diseñar en el navegador no es la respuesta por Andy Budd
• Entregables responsivos por Dave Rupert
• Elementos de Collage por Dan Mall
• ¿Photoshop está muerto? por Javier Ghaemi