Etichetta di Photoshop per un web design reattivo

Sono passati quasi cinque anni dal lancio di Photoshop Etiquette, che lo rende ufficialmente una reliquia sul web. Molte cose possono succedere sul web in pochi anni e questi ultimi cinque lo hanno dimostrato meglio della maggior parte.

Nel 2011, tutti si stavano solo bagnando i piedi con il design web reattivo. Il tradizionale flusso di lavoro da comp a HTML stava appena iniziando a essere criticato e da allora abbiamo visto una miriade di alternative. Riquadri di stile, prototipi di stile, inventari visivi, collage di elementi, guide di stile e persino la progettazione nel browser sono stati tutti approcci adatti alla progettazione multi-dispositivo. Con il passaggio dalla progettazione basata su pagine alla creazione di un sistema di progettazione, è davvero un momento emozionante.

Ulteriori letture su SmashingMag:

• Progettare per Retina in Photoshop
• Animazioni avanzate in Photoshop
• Flusso di lavoro delle risorse Photoshop Retina
• Generatore di punti di interruzione immagine reattiva

C'è stata anche un'esplosione di strumenti che hanno tentato di rendere più efficiente un flusso di lavoro reattivo. Applicazioni come Webflow e Macaw hanno reso la visualizzazione dei punti di interruzione digeribile per gli avversi al codice. Molti designer sono passati da Photoshop come cavallo di battaglia a Sketch, Affinity Designer o simili. Altri hanno adottato app come Keynote per la prototipazione.

L'"etichetta" è ancora rilevante?

Con le alternative al pesante Photoshopping con cui potremmo avere familiarità, è lecito chiedersi se abbiamo ancora bisogno dell'etichetta. Per il bene di questo articolo, definiremo l'etichetta come il trasferimento di file in modo organizzato, chiaro e distinguibile. Il design reattivo in genere viene fornito con molti pezzi in movimento, da immagini @2x, file CSS concatenati e altro ancora. Con apparentemente più da fare per pubblicare un sito Web, essere efficienti è senza dubbio una priorità assoluta, se vogliamo essere redditizi.

Spesso mascherati da efficienza, scarsa organizzazione e comunicazione sono prodotti della fretta di spedire un progetto. Con Photoshop che assume ruoli diversi nei nostri flussi di lavoro, i livelli e i file esportati sono facili bersagli per tagliare gli angoli. Resta il fatto: tutto ciò che vale la pena fare vale la pena farlo bene.

Se vogliamo risparmiare tempo, dobbiamo investire un po' in anticipo per rimanere organizzati e chiari. L'inefficienza è ereditare un file da un collega e dedicare tempo prezioso a cercare di capire da dove cominciare perché non è chiaramente etichettato. È necessario correggere le immagini che sono già state esportate. Nel peggiore dei casi, in primo luogo non è in grado di trovare il file di cui hai bisogno.

Cosa c'è di nuovo nell'etichetta di Photoshop?

Photoshop Etiquette ha ricevuto una nuova mano di vernice da Adjacent, uno studio di design a Syracuse, New York. Per chi è nuovo al concetto, Photoshop Etiquette è una guida alle migliori pratiche che promuove l'efficienza attraverso la chiarezza nel web design. Sebbene progettati per Photoshop, molti di questi principi si applicano a Sketch e strumenti di progettazione simili basati su livelli.

La guida è suddivisa nelle seguenti sezioni:

• Organizzazione dei file
• Struttura a strati
• Esportazione delle risorse
• Digitare esecuzione
• Applicazione dell'effetto
• Controllo di qualità

Coloro che hanno familiarità con il sito vedranno molte linee guida familiari, come suggerimenti per eccellenza come "Dai un nome ai tuoi livelli" e "Nomina i file con precisione", ognuno un tentativo di liberare la terra da pratiche come "Copia di livello 5" e "client- final-v3.psd', rispettivamente. Se scavi un po' più a fondo, troverai un eccesso di risorse reattive allegate a varie linee guida e alcuni suggerimenti per la progettazione per più dispositivi.

1. Consolida i tuoi PSD

Se stai creando più composizioni per più pagine, Photoshop ora dispone di tavole da disegno che possono aiutarti a restare fedele a un singolo documento. Questo aiuta a eliminare la confusione su quale PSD sia il PSD giusto .

2. Lavorare in modo collaborativo

Con l'aggiunta di Creative Cloud Libraries e Linked Smart Objects, i designer possono condividere le risorse abbastanza facilmente. Ad esempio, se stai creando un modello o una guida ai componenti in Photoshop, un designer può lavorare su un componente mentre un altro designer lavora contemporaneamente su uno diverso. Questi componenti possono essere condivisi all'interno di una libreria o come oggetti avanzati collegati che vengono inseriti in un PSD master.

3. Non progettare sul dispositivo

Questo può essere obiettato, ma se il design reattivo riguarda l'adozione di tutti i dispositivi, forse non dovremmo usare i più diffusi preset dei dispositivi Apple come dimensioni dei documenti in Photoshop. Consenti invece al tuo progetto di dettare punti di interruzione a causa dello stress del layout, ovunque cada. L'eccezione è se stai progettando un dispositivo o un'app specifica per piattaforma, dove il targeting di tali preimpostazioni è utile.

4. Sii non distruttivo

Con la crescente implementazione e supporto per SVG, è importante che i designer supportino le risorse vettoriali in Photoshop e non le appiattiscano. Photoshop ora ti consente di salvare gli SVG, dandoci un motivo in più per non essere distruttivi con i nostri pixel.

5. Fai attenzione alla risoluzione dello schermo

Parlando di SVG, è davvero diventato un ottimo approccio per servire una risorsa che può adattarsi a qualsiasi dimensione e non perdere la fedeltà. Avere un flusso di lavoro di risorse Retina, sia che si tratti di immagini SVG o @2x/@3x, è diventato parte del flusso di lavoro di un professionista reattivo.

6. Comprimi

Le prestazioni sono una causa degna, non solo per uno sviluppatore ma per un designer. Ho spesso razionalizzato il fatto che se voglio includere font Web pesanti e le loro funzionalità Open Type nei miei progetti, dovrò compensare la differenza comprimendo in modo aggressivo le mie immagini per rimanere all'interno di un budget di prestazioni. Strumenti di terze parti come TinyPNG hanno reso la compressione delle immagini un gioco da ragazzi.

Poiché i nostri flussi di lavoro di progettazione web e l'uso di Photoshop continuano a cambiare, cambierà anche il sito. Sebbene comprenda un flusso di lavoro incentrato su Photoshop, ci sono anche alcuni suggerimenti per quelli in cui Photoshop viene utilizzato con parsimonia. La guida sostiene solo che se e quando utilizzi Photoshop, comunichi il tuo intento il più chiaramente possibile.

Alimentato dalla comunità

Uno degli obiettivi principali di Photoshop Etiquette è la crescita, che si manifesta in più linee guida, più risorse e più prospettive. È stata aggiunta una funzionalità al sito che fornisce un accesso più semplice per inviare una nuova linea guida per la revisione, cosa che centinaia di designer e sviluppatori hanno fatto nel corso degli anni rintracciandomi su Twitter o dando la caccia a un indirizzo e-mail.

Sulla scia delle imprecisioni di Google Translate, c'è anche un appello aperto per traduzioni da parte di volontari della comunità.

È emozionante vedere come Photoshop Etiquette abbia risuonato con così tante organizzazioni e individui. Come può aiutare te e il tuo team?