Etiqueta de Photoshop para diseño web receptivo

Han pasado casi cinco años desde que se lanzó Photoshop Etiquette, lo que oficialmente lo convierte en una reliquia en la web. Pueden pasar muchas cosas en la web en unos pocos años, y estos últimos cinco lo han ilustrado mejor que la mayoría.

En 2011, todo el mundo se estaba empezando a mojar los pies con el diseño web receptivo. El flujo de trabajo tradicional de compilación a HTML recién comenzaba a ser criticado y, desde entonces, hemos visto una gran cantidad de alternativas. Los mosaicos de estilo, los prototipos de estilo, los inventarios visuales, los collages de elementos, las guías de estilo e incluso el diseño en el navegador han sido enfoques adecuados para el diseño de dispositivos múltiples. Con un cambio del diseño basado en páginas a la creación de un sistema de diseño, es realmente un momento emocionante.

Lectura adicional en SmashingMag:

• Diseño para Retina en Photoshop
• Animaciones avanzadas en Photoshop
• Flujo de trabajo de recursos de Photoshop Retina
• Generador de puntos de interrupción de imagen receptiva

También ha habido una explosión de herramientas que intentan hacer que un flujo de trabajo receptivo sea más eficiente. Aplicaciones como Webflow y Macaw han hecho que la visualización de puntos de interrupción sea digerible para los reacios al código. Muchos diseñadores han pasado de Photoshop como su caballo de batalla a Sketch, Affinity Designer o similar. Otros han adoptado aplicaciones como Keynote para la creación de prototipos.

¿Sigue siendo relevante la 'etiqueta'?

Con alternativas al intenso Photoshop con el que podemos estar familiarizados, es justo preguntarse si todavía necesitamos etiqueta. Por el bien de este artículo, definiremos la etiqueta como la transferencia de archivos de una manera organizada, clara y perceptible. El diseño receptivo generalmente viene con muchas piezas en movimiento, desde imágenes @2x, archivos CSS concatenados y más. Con aparentemente más que hacer para publicar un sitio web, ser eficiente es sin duda una alta prioridad, si queremos ser rentables.

A menudo enmascarados como eficiencia, la mala organización y comunicación son productos de la prisa por enviar un proyecto. Con Photoshop asumiendo diferentes roles en nuestros flujos de trabajo, las capas y los archivos exportados son objetivos fáciles para tomar atajos. El hecho permanece: todo lo que vale la pena hacer, vale la pena hacerlo bien.

Si queremos ahorrar tiempo, debemos invertir un poco por adelantado para mantenernos organizados y claros. La ineficiencia es heredar un archivo de un compañero de trabajo y gastar un tiempo valioso tratando de averiguar por dónde empezar porque no está claramente etiquetado. Es tener que arreglar imágenes que ya han sido exportadas. En el peor de los casos, no puede encontrar el archivo que necesita en primer lugar.

¿Qué hay de nuevo en la etiqueta de Photoshop?

Photoshop Etiquette recibió una nueva capa de pintura de Adjacent, un estudio de diseño en Syracuse, NY. Para aquellos nuevos en el concepto, Photoshop Etiquette es una guía de mejores prácticas que promueve la eficiencia a través de la claridad en el diseño web. Aunque está diseñado para Photoshop, muchos de estos principios se aplican a Sketch y herramientas de diseño similares basadas en capas.

La guía se divide en las siguientes secciones:

• Organización de archivos
• Estructura de capas
• Exportación de activos
• Tipo de ejecución
• Aplicación de efectos
• Control de calidad

Quienes estén familiarizados con el sitio verán muchas pautas familiares, como consejos por excelencia como 'Nombra tus capas' y 'Nombra archivos con precisión', cada uno de los cuales es un intento de librar a la tierra de prácticas como 'Copia de capa, copia 5' y 'Cliente- final-v3.psd', respectivamente. Si profundiza un poco más, encontrará una gran cantidad de recursos receptivos adjuntos a varias pautas y algunos consejos para diseñar para múltiples dispositivos.

1. Consolide sus PSD

Si está creando varias composiciones para varias páginas, Photoshop ahora tiene mesas de trabajo que pueden ayudarlo a ceñirse a un solo documento. Esto ayuda a eliminar la confusión sobre qué PSD es el PSD correcto .

2. Trabajar en colaboración

Con la adición de Creative Cloud Libraries y Linked Smart Objects, los diseñadores pueden compartir activos con bastante facilidad. Por ejemplo, si está creando una guía de patrones o componentes en Photoshop, un diseñador puede estar trabajando en un componente mientras otro diseñador trabaja simultáneamente en uno diferente. Estos componentes se pueden compartir dentro de una biblioteca o como objetos inteligentes vinculados que se extraen en un PSD maestro.

3. No diseñe para el dispositivo

Esto puede discutirse, pero si el diseño receptivo se trata de abarcar todos los dispositivos, tal vez no deberíamos usar ajustes preestablecidos de dispositivos populares de Apple como tamaños de documentos en Photoshop. En su lugar, permita que su diseño dicte puntos de interrupción debido a la tensión del diseño, donde sea que se encuentre. La excepción es si está diseñando una aplicación específica para un dispositivo o una plataforma, donde resulta útil orientar dichos ajustes preestablecidos.

4. Sea no destructivo

Con la creciente implementación y compatibilidad con SVG, es importante que los diseñadores mantengan los activos vectoriales en Photoshop y no los aplanen. Photoshop ahora le permite guardar archivos SVG, lo que nos da una razón más para no ser destructivos con nuestros píxeles.

5. Tenga en cuenta la resolución de la pantalla

Hablando de SVG, realmente se ha convertido en un gran enfoque para servir un activo que puede adaptarse a cualquier tamaño y no perder fidelidad. Tener un flujo de trabajo de activos Retina, ya sea imágenes SVG o @2x/@3x, se ha convertido en parte del flujo de trabajo de un profesional receptivo.

6. Comprimir

El rendimiento es una buena causa, no solo para un desarrollador sino también para un diseñador. A menudo he pensado que si quiero incluir fuentes web pesadas y sus características Open Type en mis proyectos, tendré que compensar la diferencia comprimiendo agresivamente mis imágenes para mantenerme dentro de un presupuesto de rendimiento. Las herramientas de terceros como TinyPNG han hecho que la compresión de imágenes sea muy sencilla.

A medida que nuestros flujos de trabajo de diseño web y el uso de Photoshop continúan cambiando, también lo hará el sitio. Si bien abarca un flujo de trabajo centrado en Photoshop, también hay algunos consejos para aquellos en los que Photoshop se usa con moderación. La guía solo recomienda que, si usa Photoshop y cuando lo haga, comunique su intención con la mayor claridad posible.

Impulsado por la comunidad

Uno de los enfoques principales de Photoshop Etiquette es el crecimiento, que se manifiesta en más pautas, más recursos y más perspectivas. Se agregó una función al sitio que brinda un acceso más fácil para enviar una nueva guía para su revisión, algo que cientos de diseñadores y desarrolladores hicieron a lo largo de los años al rastrearme en Twitter o buscar una dirección de correo electrónico.

A raíz de las imprecisiones de Google Translate, también hay una convocatoria abierta para traducciones por parte de voluntarios de la comunidad.

Es emocionante ver cómo Photoshop Etiquette ha resonado en tantas organizaciones e individuos. ¿Cómo puede ayudarte a ti y a tu equipo?