Share
Il web ha subito alcuni cambiamenti seri negli ultimi anni e il modo in cui il web è progettato sta cambiando insieme ad esso. Photoshop potrebbe ancora essere lo strumento "go-to" per molti web designer, ma per alcuni Photoshop non è più un re. In questo articolo, Ian Yates, Editor di Webdesigntuts + spiegherà in che modo Photoshop è stato utilizzato in passato, come può essere utilizzato in futuro e perché.
Tecnicamente parlando, Photoshop è un'applicazione per manipolare le immagini (perdonatemi per aver affermato ciò che è ovvio) ma è anche ricca di strumenti per la creazione di grafica da zero. Forma, vettore, tipo, riempimenti ed effetti, tutti questi (e molti altri) si prestano molto bene alla costruzione di layout grafici.
Non molto tempo fa, i browser Web non erano in grado di generare direttamente questi tipi di effetti, ma potevano visualizzare perfettamente le immagini bitmap. Per esplorare il design grafico all'interno di un browser era logico raggiungere Photoshop, creare immagini, salvarle come immagini e usarle all'interno di una pagina Web.
Sfumature, ombre, motivi, angoli; tutto facile da creare con gli strumenti di Photoshop - non troppo facile da creare con qualsiasi altra cosa.
Costruire per il web è stato anche relativamente complesso (molto meno snello di oggi) quindi creare un layout in Photoshop sarebbe stato sempre più facile e veloce rispetto a Dreamweaver. Perché non dovresti progettare in un'applicazione grafica, ottenere l'approvazione dal cliente, poi in realtà costruire per il web? I designer di oggi sono cresciuti usando Photoshop perché offriva il modo più rapido per visualizzare un concetto di design hi-fidelity.
kuhboom.com: i disegni web a trama densa ti faranno raggiungere lo strumento fetta. Quando il web era un mezzo emergente non esistevano "agenzie web", quindi il compito di crearlo è stato affidato ai designer di stampa. Questi ragazzi hanno fatto ciò che era logico; hanno preso la loro esperienza di progettazione di stampa digitale, valori, tecniche, processi e strumenti, quindi li hanno applicati a questo nuovo mondo coraggioso. Hanno effettivamente portato il design della stampa sullo schermo, quindi il flusso di lavoro esisteva già:
Tutto ciò che era necessario modificare era l'output finale. Come tale, Photoshop ha assistito ai cambiamenti e ha proseguito il viaggio, approfondendo se stesso come migliore amica del grafico.
I tempi stanno cambiando "(come diceva Bob Dylan). Al giorno d'oggi il web è un posto diverso e anche il ruolo di Photoshop nel processo di progettazione di quel web sta cambiando. Perché?
Gran parte del problema risiede nei progressi tecnologici che hanno guidato enormi cambiamenti nel web design negli ultimi anni. Abbiamo visto Internet crescere da una libreria di documenti statici a un pool interattivo di servizi e applicazioni. I provider di rete hanno allargato le loro dita in quasi ogni angolo del globo, la larghezza di banda e la velocità sono aumentate fino ai livelli di fantascienza. I dispositivi abilitati a Internet come smartphone, tablet e persino gli orologi sono fabbricati in modo conveniente e rapido. Tutto ciò ha rivoluzionato il modo in cui usiamo il web - ed è drasticamente alterato la nostra percezione di come dovremmo progettare per questo.
I designer di stampa iniziano con i vincoli (le dimensioni fisse di una pagina) quindi progettano al loro interno. Quando si progettava per la prima volta per il web, questo era anche un punto di partenza logico; stabilire una tela fissa e lavorare verso l'interno. Per capire quali dovrebbero essere quelle dimensioni fisse, i progettisti hanno dovuto formulare ipotesi sulle dimensioni dello schermo degli utenti finali. Molto presto su 800x600px era più comune. Più tardi, 1024x800px era la norma. Lavorare su una griglia di 960px aveva senso perché si adattava alla maggior parte degli schermi (gli schermi più grandi erano rari, i proprietari di schermi più piccoli avrebbero dovuto semplicemente aggiornarli alla fine) ed era divisibile per un intervallo di larghezze delle colonne.
Queste ipotesi erano sbagliate allora (costringendo un utente a regolare loro navigando verso il tuo design ?!) e lo sono ancora di più in questi giorni. Quanto è grande una pagina web oggi?
Da Brad Frost's This is the Web Nel maggio 2010 un tizio chiamato Ethan Marcotte ha scritto di una brillante idea che aveva concepito. Prendendo le tecnologie e i metodi esistenti, ha proposto un approccio "Responsive Web Design" che utilizzava layout fluidi (non fissi), immagini flessibili (che crescono e si restringono con il layout) e CSS Media Queries (che consentono di modificare i layout a seconda delle dimensioni dello schermo e altri fattori).
Con queste idee il web è cambiato, in modo irreversibile.
Grazie ai concetti di Ethan, i web designer hanno capito che dovrebbero pensare al contenuto verso l'esterno, non il confini delle pagine verso l'interno (anche se va notato che questo approccio non è obbligatorio). Non sappiamo quanto sia grande una pagina web, quindi abbiamo bisogno di progettare il nostro contenuto per adattarlo a qualsiasi confine sia affrontato. Pensa ai contenuti web come liquidi; capace di essere versato in tutti i tipi di vasi.
Qui sta un problema per Photoshop. Photoshop lavora intrinsecamente a limiti fissi. Forme, tipi e oggetti all'interno dei suoi layout sono fissi, mentre le pagine web non lo sono. Realizzazione di una presentazione da presentare a un cliente utilizzata per essere rapidamente raggiunta in Photoshop, ma come è possibile presentare in modo efficace un layout fluido come un'istantanea statica?
The Next Web presentato da mediaqueri.es La tipografia è un altro grande esempio di designer di stampa che cercano di imporre vincoli agli utenti finali. Il browser di ogni utente dà loro il potere di impostare la dimensione del tipo di default; dopo tutto, alcune persone preferiscono caratteri più piccoli, mentre altri potrebbero preferire un'esperienza di lettura più semplice con caratteri più grandi. Di default, i browser di solito impostano il tipo a 16px, quindi, a meno che un designer non indichi diversamente, o un utente modifichi il valore predefinito, è così che la copia del corpo sarà grande.
I progettisti di stampa, tuttavia, hanno reali difficoltà a rinunciare a questo controllo. "Come puoi lasciare che l'utente definisca la dimensione del tipo? Hai qualche idea su che cosa farà al resto del layout ?!"
Bloccare la dimensione del carattere all'interno di un web design (tramite CSS) farà molto per evitare che qualcosa di imprevedibile accada, ma non è facile da usare. Al giorno d'oggi, è considerata la migliore pratica per ridimensionare gli elementi della pagina e la tipografia ems invece di pixel; unità di misura relative basate sulla dimensione font predefinita. Pertanto, se un browser ha una diversa dimensione del carattere di default, l'intero progetto può flettere in risposta a questo.
Questa flessibilità, ancora una volta, mette in evidenza i limiti della progettazione di composizioni statiche in Photoshop.
I browser si stanno sviluppando molto rapidamente in questi giorni e le immagini non sono più necessarie per molti effetti sul web. Il CSS è in grado di produrre gradienti, curve, oggetti inclinati, ombre, trasparenza alfa (l'elenco continua) e questo è altrettanto positivo dato l'alba degli schermi Retina. I display Retina (o più precisamente: schermi ad alta densità di pixel) hanno davvero gettato uno spanner nei lavori per i web designer. Gli schermi Retina hanno il doppio dei pixel rispetto agli schermi normali, consentendo loro il lusso di rendere tutto super-nitido. Qualunque cosa sia basata su pixel, tuttavia, viene semplicemente ingrandita due volte più larga, due volte più alta, con una qualità relativamente più bassa.
Affinché i siti web mantengano la loro nitidezza, i progettisti devono fare affidamento il più possibile su ciò che il browser può rendere. In effetti, la recente tendenza verso "Flat Design" è (in parte) una reazione a questo progetto web puramente basato su CSS.
Tutto ciò richiede un'enorme quantità di ciò che Photoshop fa (producendo bitmap) dall'equazione.
Kit dell'interfaccia utente Flat di Designmodo Come accennato, il web è diventato veramente globale grazie alla diffusione dei dispositivi mobili. Ci ha costretti a renderci conto che non possiamo conoscere le circostanze in cui si accede ai nostri contenuti. Non sappiamo se il nostro utente finale è seduto sul divano con un Kindle, parapendio con un iPhone o che attraversa il deserto del Gobi con un MacBook Pro. Non sappiamo quanto è grande il loro schermo, come è il loro processore e, allo stesso modo, non possiamo supporre di sapere quanto sia veloce la loro connessione.
Stiamo iniziando a capire che la performance è una parte fondamentale del design per il web. Ancora una volta, le immagini giocano un ruolo in questo. Ogni singola risorsa (che si tratti di un'immagine, di uno script, di un documento o di qualsiasi altra cosa) che viene prelevata da un server Web è costosa.
Invece di mantenere i file come immagini e caratteri in una cartella chiamata "risorse", rinominerò la cartella "passività".
- Jeremy Keith (@adactio) 18 febbraio 2013
Non solo dovrebbero essere ottimizzati per essere il più piccoli possibile, ma dovrebbero anche essere come pochi il più possibile I browser sono limitati nella quantità di risorse che possono contemporaneamente scarica, spesso solo due in qualsiasi momento. Se la tua pagina web contiene centinaia di singole immagini, costituirà un collo di bottiglia, in ultima analisi, fornendo un'esperienza negativa all'utente finale.
Questo può essere aiutato, combinando i file di immagine in singoli sprite, ma (di nuovo) le schermate di retina forzano qualche tipo di piano di backup.
Invece, gli effetti si ottengono meglio con i CSS, le icone possono essere incorporate attraverso i caratteri web, i loghi possono essere implementati come grafica vettoriale scalabile, il tutto per incantesimo alla fine per lo strumento slice.
Quando il flusso di lavoro del web designer era effettivamente lo stesso della stampa con Internet appiccicato alla fine, la progettazione di layout in Photoshop era parte integrante del processo:
In questi giorni, con meno del risultato finale che si basa su risorse create in un'applicazione grafica, la progettazione di un intero layout in Photoshop in modo efficace significa raddoppiare i tuoi sforzi. Costruiscilo una volta per avere un'idea di come sarà, quindi costruiscilo per davvero. Quindi butta via il PSD perché non serve a nessuno.
Adobe stava resistendo al cambiamento, o semplicemente stava cercando di essere accomodante, quando ha introdotto alcune funzionalità di web design in CS6. Il pannello di output CSS di tipo CSSHat ti consente di acquisire il codice dagli elementi di pagina creati visivamente. Hanno anche reso possibile incollare un colore esadecimale (copiato dal browser) incluso l'hashtag (#ffffff per esempio) nel selettore di colori di Photoshop senza generare un errore.
Gli stili di paragrafo (un po 'come in InDesign) sono stati introdotti per dare più controllo globale sulla tipografia. Lorem Ipsum ha trovato la sua strada come caratteristica standard e ora puoi persino scegliere le dimensioni del dispositivo più comuni come predefiniti del documento!
Ma qui stiamo negando - c'è un grande elefante blu in piedi nell'angolo della stanza.
Quello che stiamo guardando qui, non è un'applicazione che non si adatta al web design, ma un flusso di lavoro che non è più appropriato. Infatti, anche prima che il web diventasse fluido e soffocante, nel processo di progettazione web di Photoshop c'erano dei difetti fondamentali come l'abbiamo descritto. C'era la tendenza a creare rendering perfetti di pixel di pagine Web prima ancora che la costruzione potesse iniziare. E poi, a causa dell'ossessione di ottenere tutto perfetto al 100% in Photoshop, ci sarebbe un fanatismo simile per ottenere risultati identici in tutti i browser. Ci è voluto molto tempo per capire che le pagine web non devono apparire identiche in tutti i browser!
Un serio problema con la mira alla perfezione in Photoshop nasce quando il cliente viene coinvolto. Questo flusso di lavoro rende fin troppo facile rimanere bloccati in un ciclo infinito di clienti che fanno suggerimenti per spingere pixel, inevitabilmente perdendo di vista il quadro generale.
Ciò di cui c'è bisogno è un approccio più modulare al web design e Photoshop può assolutamente svolgere un ruolo in questo. Considerare prima la fase di pianificazione; raccolta di informazioni e contenuti, abbozzando le relazioni tra le aree del sito web nel suo insieme - una parte cruciale di questo processo modulare, ma la cosa migliore da fare al di fuori di Photoshop.
Wireframing porta avanti il processo; definizione di elementi di interfaccia rudimentali, creazione di relazioni visive, gerarchia e interazione di base. Ancora una volta, questo non è un compito che Photoshop svolge molto bene, lasciando invece il posto a applicazioni come Omnigraffle e Balsamiq, persino Illustrator (e ce ne sono molte altre).
Photoshop si presta molto meglio all'estetica. Non può descrivere i layout in modo fluido, ma può esplorare colori, trame, stili di elementi individuali, tipografia, atmosfera e umore. Style Tiles è un concetto suggerito da Samantha Warren. Sono essenzialmente le moodboard di Photoshop, ma evidenziano un modo per isolare e presentare la fase estetica al cliente.
Il prossimo modulo in questo flusso di lavoro è la prototipazione; creazione di layout di base, ma funzionali per il browser. E no, neanche questa è la tazza di tè di Photoshop. In effetti, Adobe sta lavorando attivamente su una linea alternativa di applicazioni per aiutare qui. I loro strumenti di bordo mirano a offrire un'interfaccia canvas personalizzata, che si presenta fluida per il browser; ideale per la prototipazione rapida, ma ancora molto lavoro in corso.
Ognuna di queste fasi modulari prende un aspetto del processo di progettazione, lo isola e coinvolge pesantemente il cliente, dando loro molte opportunità di firmare su ogni fase senza influenzare gli altri.
Si noti che questo è un flusso di lavoro suggerito, nulla è scritto nella pietra in cui il design è interessato e spesso è più coinvolto di queste fasi generali. Il che mi porta al punto di chiusura.
Qualsiasi processo di progettazione è estremamente personale e ciò che funziona per qualcun altro non funzionerà necessariamente per te. Ci sono un sacco di persone che chiedono la fine del web design in Photoshop, invece la campagna per un flusso di lavoro basato su browser. Il fatto è che, se Photoshop funziona per te, usalo! Alla fine della giornata, siamo designer - se vogliamo spendere centinaia di ore uomo a spingere i pixel e a lucidare il nostro portafoglio Dribbble, permettiamoci di goderci il lusso!
Interessato a saperne di più su Photoshop e sulla sua relazione con il web design? Dai un'occhiata agli articoli qui sotto.
Accentsconagua