Étiquette Photoshop pour une conception Web réactive

Cela fait presque cinq ans que Photoshop Etiquette a été lancé, ce qui en fait officiellement une relique sur le Web. Beaucoup de choses peuvent se passer sur le Web en quelques années, et ces cinq dernières années l'ont mieux illustré que la plupart.

En 2011, tout le monde commençait à se mouiller avec une conception Web réactive. Le flux de travail traditionnel comp-to-HTML commençait seulement à être critiqué, et depuis lors, nous avons vu une myriade d'alternatives. Les mosaïques de style, les prototypes de style, les inventaires visuels, les collages d'éléments, les guides de style et même la conception dans le navigateur ont tous été des approches appropriées pour la conception multi-appareils. Avec le passage de la conception basée sur les pages à la création d'un système de conception, c'est vraiment une période passionnante.

Lectures complémentaires sur SmashingMag :

• Concevoir pour Retina dans Photoshop
• Animations avancées dans Photoshop
• Flux de travail des ressources Photoshop Retina
• Générateur de points d'arrêt d'image réactif

Il y a également eu une explosion d'outils tentant de rendre un flux de travail réactif plus efficace. Des applications telles que Webflow et Macaw ont rendu la visualisation des points d'arrêt digeste pour ceux qui n'aiment pas le code. De nombreux concepteurs sont passés de Photoshop en tant que cheval de bataille à Sketch, Affinity Designer ou similaire. D'autres ont adopté des applications comme Keynote pour le prototypage.

L'étiquette est-elle toujours pertinente ?

Avec des alternatives au lourd Photoshopping que nous connaissons peut-être, il est juste de se demander si nous avons encore besoin de l'étiquette. Pour les besoins de cet article, nous définirons l'étiquette comme le transfert de fichiers de manière organisée, claire et discernable. La conception réactive comprend généralement de nombreuses pièces mobiles, à partir d'images @ 2x, de fichiers CSS concaténés, etc. Avec apparemment plus à faire pour publier un site Web, être efficace est incontestablement une priorité si nous voulons être rentables.

Souvent masqués par l'efficacité, le manque d'organisation et de communication est le produit de la précipitation à expédier un projet. Avec Photoshop jouant différents rôles dans nos flux de travail, les calques et les fichiers exportés sont des cibles faciles pour prendre des raccourcis. Le fait demeure : tout ce qui vaut la peine d'être fait vaut la peine d'être bien fait.

Si nous voulons gagner du temps, nous devons investir un peu dès le départ pour rester organisés et clairs. L'inefficacité, c'est hériter d'un fichier d'un collègue et passer un temps précieux à essayer de savoir par où commencer parce qu'il n'est pas clairement étiqueté. C'est devoir réparer des images qui ont déjà été exportées. Au pire, il ne peut pas trouver le fichier dont vous avez besoin en premier lieu.

Quoi de neuf dans Photoshop Etiquette ?

Photoshop Etiquette a reçu une nouvelle couche de peinture par Adjacent, un studio de design à Syracuse, NY. Pour ceux qui découvrent le concept, Photoshop Etiquette est un guide des meilleures pratiques qui favorise l'efficacité grâce à la clarté de la conception Web. Bien que conçus pour Photoshop, bon nombre de ces principes s'appliquent à Sketch et à des outils de conception similaires basés sur des calques.

Le guide se décompose en les sections suivantes :

• Organisation des fichiers
• Structure des couches
• Exportation d'actifs
• Type d'exécution
• Demande d'effet
• Contrôle qualité

Ceux qui connaissent le site verront de nombreuses directives familières, telles que des conseils par excellence tels que "Nommez vos calques" et "Nommez les fichiers avec précision", chacun une tentative de débarrasser la terre des pratiques telles que "Couche copie copie 5" et "client- final-v3.psd', respectivement. Si vous creusez un peu plus, vous trouverez une surabondance de ressources réactives attachées à diverses directives et quelques conseils pour concevoir pour plusieurs appareils.

1. Consolidez vos PSD

Si vous créez plusieurs compositions pour plusieurs pages, Photoshop propose désormais des plans de travail qui peuvent vous aider à vous en tenir à un seul document. Cela aide à éliminer la confusion quant au PSD qui est le bon PSD.

2. Travailler en collaboration

Avec l'ajout des bibliothèques Creative Cloud et des objets intelligents liés, les concepteurs peuvent partager des ressources assez facilement. Par exemple, si vous créez un motif ou un guide de composants dans Photoshop, un concepteur peut travailler sur un composant pendant qu'un autre concepteur travaille simultanément sur un autre. Ces composants peuvent être partagés au sein d'une bibliothèque ou en tant qu'objets intelligents liés qui sont extraits dans un PSD principal.

3. Ne concevez pas pour l'appareil

Cela peut être argumenté, mais si la conception réactive concerne tous les appareils, nous ne devrions peut-être pas utiliser les préréglages d'appareils Apple populaires comme tailles de document dans Photoshop. Au lieu de cela, permettez à votre conception de dicter des points d'arrêt en raison du stress de mise en page, où qu'il se situe. L'exception est si vous concevez une application spécifique à un appareil ou à une plate-forme, où le ciblage de ces préréglages est utile.

4. Soyez non destructif

Avec l'implémentation et la prise en charge croissantes de SVG, il est important pour les concepteurs de conserver les actifs vectoriels dans Photoshop et de ne pas les aplatir. Photoshop vous permet désormais d'économiser des SVG, ce qui nous donne une raison de plus d'être non destructif avec nos pixels.

5. Soyez conscient de la résolution de l'écran

En parlant de SVG, c'est vraiment devenu une excellente approche pour servir un actif qui peut s'adapter à n'importe quelle taille et ne pas perdre en fidélité. Avoir un flux de travail d'actifs Retina, qu'il s'agisse d'images SVG ou @2x/@3x, fait désormais partie du flux de travail d'un praticien réactif.

6. Compresser

La performance est une noble cause, non seulement pour un développeur mais aussi pour un designer. J'ai souvent expliqué que si je voulais inclure des polices Web lourdes et leurs fonctionnalités Open Type dans mes projets, je devrai compenser la différence en compressant agressivement mes images pour rester dans un budget de performances. Des outils tiers comme TinyPNG ont fait de la compression d'image un jeu d'enfant.

Au fur et à mesure que nos flux de travail de conception Web et l'utilisation de Photoshop continuent d'évoluer, le site changera également. Bien qu'il englobe un flux de travail centré sur Photoshop, il existe également quelques conseils pour ceux où Photoshop est utilisé avec parcimonie. Le guide préconise uniquement que si, et quand, vous utilisez Photoshop, communiquez votre intention aussi clairement que possible.

Alimenté par la communauté

L'un des principaux objectifs de Photoshop Etiquette est la croissance, qui se manifeste par plus de directives, plus de ressources et plus de perspectives. Une fonctionnalité a été ajoutée au site pour faciliter l'accès à la soumission d'une nouvelle directive pour examen, ce que des centaines de concepteurs et de développeurs ont fait au fil des ans en me traquant sur Twitter ou en recherchant une adresse e-mail.

À la suite des inexactitudes de Google Translate, il existe également un appel ouvert à des traductions par des bénévoles de la communauté.

C'est excitant de voir comment Photoshop Etiquette a trouvé un écho auprès de tant d'organisations et d'individus. Comment cela peut-il vous aider, vous et votre équipe ?