8 modi per progettare siti più velocemente in Photoshop
Come web designer, è difficile rimanere organizzati. Non solo stai bilanciando più progetti contemporaneamente, ma probabilmente stai anche affrontando scadenze ravvicinate e clienti difficili. Potresti anche rimbalzare da un marchio all'altro e dover costantemente imparare nuove linee guida e stili del marchio.
Fortunatamente, esistono molti modi per rendere più efficiente il tuo flusso di lavoro. Per dare una mano, ho messo insieme questi otto suggerimenti per mantenerti sano di mente nella tua carriera nel web design
1. Mantieni i tuoi file organizzati
Una delle cose più facili che puoi fare per mantenere la tua sanità mentale è mantenere i tuoi file organizzati. La creazione e il mantenimento di una struttura di cartelle coerente renderanno i tuoi file un gioco da ragazzi. I problemi sorgono quando si struttura una cartella in modo diverso rispetto a un'altra, rendendo difficile trovare il file Final-Final-logo.ai .
Le convenzioni di denominazione dei file coerenti sono essenziali per l'organizzazione dei file. È qui che entra in gioco la versione. Alcuni progettisti usano le date, altri usano i numeri di versione e alcuni usano i giri. Ciò dipenderà dal tuo settore e dalle tue preferenze personali, ma è una buona pratica. Grazie al controllo delle versioni, puoi facilmente rintracciare quale file è il più aggiornato, soprattutto se hai vecchie versioni salvate come riferimento.
Generalmente conservo da due a tre vecchie versioni nel caso in cui il cliente voglia tornare alla strategia dell'eroe da Round One, o preferisce il trattamento mobile dal secondo round. Al fine di evitare la mentalità del pacchetto, è bene archiviare o eliminare i file più vecchi per impedire che il disco rigido si impantanasse.
Ecco una struttura di esempio che uso su Clearlink.
La combinazione di una struttura di cartelle coerente e convenzioni di denominazione con il controllo delle versioni aiuterà anche la ricerca. Ad esempio, se si avviano tutti i nomi dei file da un marchio con il nome del marchio o l'abbreviazione, è possibile filtrare le risorse per quel marchio più facilmente. Questo aiuterà a differenziare "ATT-logo-final.ai" da quello che potenzialmente potrebbe essere un mare di "logo-final.ai's".
2. Comprendi la tua struttura
Una cosa che non ho imparato fino a diversi anni nella mia carriera di designer è come utilizzare correttamente una struttura esistente. I due forti battitori nel mondo quadro sono attualmente bootstrap e Fondazione , ma di Google materializzarsi sicuramente darò loro una corsa per i loro soldi nel prossimo futuro. La società per cui lavoro utilizza Foundation per la maggior parte dei siti di marca.
La fondazione è dotata di una griglia reattiva incorporata, insieme a uno stile per pulsanti, campi, tipografia, navigazione, ecc. Tra molte altre cose per semplificarti la vita. Utilizzando la griglia incorporata di Foundation all'interno dei tuoi PSD, renderà più facile allo sviluppatore implementare i tuoi progetti in un modo più perfetto dei pixel rispetto a se stessi facendo la tua stessa cosa. Photoshop ha questo ingegnoso strumento di layout di guida che non solo rende la creazione di griglie un gioco da ragazzi, ma li attacca anche alla scheda grafica per semplificare la ristrutturazione e il movimento dei file.
Screenshot dal Cheat Sheet della Fondazione
I framework forniscono anche un buon punto di partenza per lo stile dei pulsanti, i moduli, ecc. E aiutano a mostrare le possibilità e i limiti delle strategie di progettazione che è possibile implementare. Questo non solo ti darà un ottimo punto di partenza per il tuo design, ma aiuterà a promuovere una collaborazione più amichevole con il tuo sviluppatore.
3. Organizza i tuoi livelli per sezione dei contenuti
Quando hai a che fare con PSD complessi di progettazione web con così tante cartelle, livelli, oggetti intelligenti, ecc., È facile che le cose si complichino. Una volta che il livello 2.455 arriva, inizi a capire che hai bisogno di una sorta di organizzazione all'interno del tuo PSD. Questo è il motivo per cui ti consiglio di organizzare il tuo PSD per sezioni.
I miei sono generalmente costituiti da cartelle che includono Nav, Hero, Intro, Pacchetti, Benefici, Piè di pagina, ecc. Colorando anche queste cartelle in modo arcobaleno, sono facili da navigare. Questo rende l'aggiornamento delle sezioni e rielaborazione del PSD un gioco da ragazzi.
Organizzo il mio file in cartelle di sezione codificate con colori arcobaleno per una facile scansione.
Ad esempio, se è necessario ingrandire la sezione dell'eroe, è possibile trascinare facilmente tutte le cartelle sottostanti come un'unica unità (tenendo premuto il comando) e quindi trascinarle indietro dopo aver effettuato l'aggiornamento. Questa strategia aiuta anche gli sviluppatori e altri progettisti a navigare facilmente nel tuo file. Usando nomi comprensibili come "Hero" e "Nav", un nuovo designer può facilmente entrare nella cartella e apportare i cambiamenti di cui ha bisogno.
Alcuni progettisti potranno anche nominare i singoli livelli, il che può anche essere incredibilmente vantaggioso ma può richiedere un po 'di tempo. Poiché i livelli sono facili da trovare tramite lo strumento di selezione automatica quando è impostato su "livello", è facile arrivare ai singoli livelli in questi giorni, quindi spetta al singolo designer come desidera organizzare i propri livelli. Il punto è che hai finito.
4. Memorizza tutte le scorciatoie da tastiera che usi normalmente
Questo è un grande entusiasmo per l'efficienza. Se ti trovi a dover utilizzare regolarmente un comando specifico, memorizzalo. Aumenterai la tua efficienza in modo esponenziale se hai tutte le scorciatoie da tastiera principali verso il basso.
Alcuni di quelli importanti sono il risparmio, la dimensione e la direzione dei caratteri, l'ordinamento dei livelli, il salvataggio per il Web e l'opacità tra molti altri. Photoshop ti dà anche la possibilità di creare scorciatoie personalizzate. Nel mio libro, il comando più importante da memorizzare è il salvataggio del file. A causa dei crash casuali di Adobe, è bene sbagliare dal punto di vista del salvataggio piuttosto che rischiare di perdere nessuno dei tuoi progressi.
Adobe ti offre la possibilità di personalizzare le scorciatoie da tastiera in Modifica> Scelte rapide da tastiera
Le scorciatoie si associano anche all'organizzazione dei livelli per cartelle della sezione contenuto (come menzionato sopra). È più facile portare i livelli nella parte superiore e inferiore di una cartella utilizzando le scorciatoie da tastiera rispetto al riordino dei livelli in un file non organizzato. È qui che entra in gioco l'organizzazione del file mentre progetta. Memorizzare le scorciatoie da tastiera usate frequentemente e mantenere organizzati i livelli migliorerà notevolmente la tua efficienza e aiuterà gli altri progettisti a lavorare con i tuoi file.
5. Utilizzare le librerie CC
Una delle migliori cose che Adobe ha aggiunto da quando ha creato CC sono le librerie. Se non ne hai mai sentito parlare, devi dare un'occhiata a questo fantastico tutorial su come usarli
Mi sento come se ogni team di progettazione dovesse utilizzare questa fantastica funzionalità. Le librerie ti consentono di creare una libreria di marchi con risorse come colori, stili di carattere, foto, icone e simboli (come intestazioni e piè di pagina). Grazie alle librerie, puoi collaborare facilmente con le creatività di più organizzazioni utilizzando una libreria con un unico marchio.
Le librerie semplificano la modifica dei colori e l'aggiornamento degli stili di testo con il semplice clic di un pulsante. Aiutano anche a memorizzare le icone dei marchi che possono essere facilmente aggiornate in un unico posto con gli aggiornamenti riflessi rapidamente tra i PSD. Questo è incredibilmente utile per intestazioni e piè di pagina per il tuo sito, dove è probabile che tu faccia piccoli aggiornamenti per tutto il progetto.
Io uso anche le librerie CC per lo stile dei font in tutto il mio design. Preparerò stili per eroe, titoli, sottotitoli, copia del corpo, disclaimer, ecc. Per applicazioni desktop, tablet e mobili. Per quanto riguarda l'attivazione della visualizzazione, mi trovo a utilizzare il formato elenco più della visualizzazione a riquadri a causa della sua facilità di scansione.
Elementi della libreria visti come un collaboratore
Le librerie sono ottime anche per la collaborazione di gruppo. Puoi scegliere di collaborare con altre creatività in modo che possano modificarle e aggiungerle alla libreria, oppure puoi condividere il link della biblioteca per un facile accesso. Hanno anche una funzione "Crea nuova libreria dal documento", ma preferisco creare la libreria da sola, quindi rimane organizzata e ha solo le risorse più rilevanti.
Sfortunatamente, ci sono alcuni aspetti negativi delle librerie, una delle quali è la mancanza di caratteri separati e stili di paragrafo per il testo. Lavoro su questo aspetto applicando il mio stile di carattere in una casella separata e incollando quindi diversi stili in una scatola per rendere più semplici le caselle di testo all'interno del file. Un altro svantaggio è che al momento non è possibile aggiornare uno stile di carattere a livello globale. Al momento, non esistono abilità organizzative all'interno della libreria per creare sottocartelle all'interno delle categorie (colore, stili di caratteri, ecc.), Ma si spera che Adobe stia lavorando anche su questo.
Il modo attuale in cui funzionano le librerie CC è che l'asset aggiornato / aggiunto più recente verrà visualizzato in alto. I colori della Libreria CC non possono essere applicati a singoli testi all'interno di caselle di testo e sono facilmente applicabili a forme e intere caselle di testo. Sono sicuro che Adobe è al lavoro per risolvere questi problemi, quindi non sono troppo preoccupato, soprattutto perché i professionisti superano decisamente gli svantaggi.
6. Mantieni immagini e vettori in formato oggetto intelligente
Anche se renderà il file più grande, mantenendo immagini e vettori in formato oggetto intelligente, sarà più facile per i futuri progettisti modificare i tuoi PSD. Immagina questo: il cliente torna con delle modifiche che includono ritagliare una foto di eroe e apportare piccole modifiche a un'icona vettoriale. Questo è più semplice se la PSD include la foto a piena risoluzione piuttosto che una versione rasterizzata più piccola. I vettori sono anche facili da modificare quando sono oggetti intelligenti di Illustrator piuttosto che grafici rasterizzati.
Un altro vantaggio di avere foto nel formato di oggetti smart arriva quando li salvi come PSD e li inserisci nel tuo file come oggetto intelligente. L'utilizzo di una foto PSD posizionata semplifica l'aggiunta di livelli di regolazione e modifiche all'interno di un file fotografico separato e contenuto, piuttosto che ingombrare il file sorgente. L'utilizzo di oggetti intelligenti come grafica di libreria ti offre ancora più combinazioni vincenti. Non solo è possibile modificare facilmente gli oggetti vettoriali, ma la grafica della libreria si aggiornerà su tutte le applicazioni.
La grafica "Hero Illustration" può essere modificata in un PSD separato per ridurre al minimo l'ingombro del file principale.
7. Creare una guida di stile e attenersi ad essa
Molti marchi avranno una guida generale di stile da seguire quando si tratta di caratteri, colori, foto, icone, illustrazioni, ecc. Questo è utile come risorsa ma non ti manterrà sempre coerente sullo stile del tuo sito web . Ho notevolmente migliorato la mia efficienza creando guide di stile web per ogni sito specifico su cui lavoro.
A volte i marchi hanno più siti con stili diversi, quindi mi assicuro di averne uno per ogni sito, così posso rimanere coerente mentre disegno. Questo crea anche una semplice risorsa drag-and-drop quando ho bisogno di pulsanti, icone, illustrazioni, foto, ecc. Non solo questo ti renderà più efficiente come designer, ma ti aiuterà a rimanere coerente nello stile del tuo sito.
Quale spaziatura utilizzo tra le sezioni? Guarda la guida allo stile! Qual è stato il colore del pulsante principale e il riempimento di nuovo? Prendilo dalla guida allo stile! Ciò aiuterà anche altri progettisti a saltare facilmente sul design del sito con facilità ed efficienza. Se unisci le librerie CC con la guida di stile, sei ancora più avanti al gioco.
Creo una guida in stile PSD per tutti i diversi marchi su cui lavoro, così posso facilmente prendere elementi come pulsanti e icone.
Molti designer sono tentati di aggiungere nuovi stili ogni volta che affrontano un nuovo problema all'interno del design. Per coerenza, è meglio evitarlo e attenersi sempre agli standard stabiliti nella guida allo stile. Se aggiungi nuovi livelli e stili, assicurati che vengano applicati su tutto il sito.
Più nuovi stili vengono creati, più complessi saranno i progetti futuri e più difficile sarà per i nuovi progettisti saltare sui progetti e mantenere coerenti i progetti. In molti casi, la coerenza è più importante dell'innovazione costante quando si tratta dell'esperienza utente. Anche se potrebbe richiedere più tempo per creare la guida allo stile Web all'inizio di un progetto, aumenterà l'efficienza per tutte le pagine future.
Una buona pratica che ho imparato da Brad Frost è di fare un inventario delle interfacce durante il processo di progettazione o su un sito esistente su cui lavorerai. Un inventario di interfaccia consiste nel raccogliere tutti i diversi stili di testo, stili di pulsanti, ecc. Tramite screenshot e compilarli per trovare incongruenze. È quindi possibile presentare i risultati al cliente per proporre aggiornamenti e miglioramenti.
Poiché i siti web toccano più designer sul caso della loro esistenza, le cose possono diventare piuttosto pelose nel reparto di coerenza. Una volta trovato uno stile di progettazione unificato per gli elementi nella pagina, assicurati di aggiornare la guida allo stile in modo che tutti siano aggiornati.
Screenshot dell'inventario dell'interfaccia da http://bradfrost.com/blog/post/interface-inventory/
8. Favorire la collaborazione interdipartimentale
Un sacco di persone che perseguono carriere nella produzione di marketing (designer, sviluppatori, copywriter, ecc.) Tendono ad essere introversi, quindi è difficile uscire dalla tua zona di comfort quando si tratta di collaborazione. È anche difficile lasciare la bolla della tua esperienza, soprattutto quando è più facile relazionarsi con le persone nel tuo campo. Anche se a volte può essere imbarazzante o scomodo, lasciare la tua bolla e collaborare regolarmente con persone di altri dipartimenti può migliorare notevolmente la qualità dei tuoi progetti insieme alla tua efficienza.
Un primo esempio di questo è quando designer e sviluppatori collaborano a una riprogettazione. Dovresti incontrare in anticipo lo sviluppatore per esaminare il quadro che stanno utilizzando, istruirti sul sistema della rete e valutarne le possibilità. Una volta completato il lavoro di progettazione, assicurati di condividere la tua Libreria Photoshop, in modo che lo sviluppatore possa accedere facilmente alla tavolozza dei colori, agli stili dei caratteri, ecc. È anche utile condividere la guida allo stile in anticipo, insieme ai componenti che hai progettato per dare loro un buon vantaggio.
La collaborazione con altri progettisti del tuo team che utilizza Librerie ti aiuterà anche a rimanere coerente ed essere più efficiente. Assegnare la responsabilità dell'Art Director o della Senior Designer rispetto a Library e gli aggiornamenti delle guide di stile eliminerà la confusione e manterrà il marchio coerente. Assicurati che ci sia una linea di comunicazione quando vengono fatti gli aggiornamenti, in modo che tutti siano sulla stessa pagina.
Rimani sano di mente
Il web design può essere travolgente e impegnativo a volte. Non deve essere sempre così. Seguendo questi semplici suggerimenti sull'efficienza di Photoshop, puoi alleviare una buona parte del tuo stress. Questo non solo migliorerà il tuo benessere, ma i manager e i direttori, sia dal punto di vista commerciale che creativo, apprezzeranno davvero il tuo duro lavoro e ti lodano per questo. Dopotutto, tutti sono bravi con un design più coerente, efficiente e ben realizzato.