Share
Questi sono tempi eccitanti per essere un web designer. I CSS stanno finalmente iniziando a raggiungere le visioni dei bellissimi siti web che abbiamo nelle nostre teste. Non dobbiamo più fare affidamento su hack e immagini per creare interfacce meravigliosamente coinvolgenti! Ma non possiamo semplicemente affidarci ai browser per inaugurare questa nuova era. Come creatori dobbiamo essere flessibili e adattare il nostro flusso di lavoro per incoraggiare queste nuove migliori pratiche. È tempo di ripensare a come realizziamo i siti web.
Quello di cui parlerò oggi non è nuovo o rivoluzionario, ma piuttosto un'estensione di ciò che già sospettate in fondo alla vostra mente da un po 'di tempo. Questo articolo servirà da contro-punto per molti degli altri articoli su questo sito che si concentrano su Photoshop e Fireworks, ma sono solo le opinioni di un singolo designer, quindi puoi prenderli o lasciarli.
Se sei come me, quando inizi un nuovo sito web, apri lo sketchbook e inizi a scribacchiare idee. Quindi apri Photoshop (o Fireworks) e martella il progetto. Il codice non vi entra nemmeno fino all'ultimo stadio.
Questa è un'idea fondamentalmente errata, per molte ragioni. Per uno, un sito Web non è un'immagine. Un sito Web finito è flessibile, in movimento cosa, costruito con HTML o CSS. Photoshop offre a noi (e ai nostri clienti) aspettative non realistiche su come un sito Web apparirà e si comporterà. Dovresti pensare a come il design si tradurrà in codice lungo tutto il processo di progettazione.
In secondo luogo, l'intero concetto di uno? Finito? il design per un sito Web è sbagliato. Costruire un mockup di Photoshop e poi dire? Va bene, ora sul codice? dà un tocco permanente a un web design, come se si stesse provando una stampa prima di inviarla via. Uno degli enormi vantaggi di Internet è che è in continua evoluzione. Stampaggio di un modello come fatto dice che questa è la versione finale del design che esisterà. Come designer, dovremmo abbracciare la natura in continua evoluzione del nostro mezzo e riconoscere che un design non è mai veramente finito.
Il vantaggio di progettare con il codice è che sei costretto a pensare al contenuto e agli stili come a due cose diverse. Il contenuto guiderà il design, piuttosto che il contrario.
Ovviamente, avrai bisogno di un browser. In effetti, dovresti davvero avere alcuni browser per i test. (A parte: raccomando Wine per IE testing su Mac). Come minimo, dovresti avere un browser basato su Webkit come Safari o Chrome, oltre a un browser basato su Gecko come Firefox. Se hai già fatto un qualche tipo di web design, avrai senza dubbio coperto quest'area.
Dovresti anche avere un editor di codice decente. Preferibilmente qualcosa con una funzionalità di aggiornamento dal vivo come Espresso o Coda. Personalmente sono un grande fan di TextMate, anche se non ha una modalità di aggiornamento dal vivo. Ancora una volta, come web-boy / gal probabilmente hai già un favorito, ma potrei menzionarlo anche per i nuovi arrivati.
Lo sketch è probabilmente la parte più importante del processo di progettazione. Questo non dovrebbe cambiare anche se progetti all'interno del browser.
Dovresti comunque avere una solida idea di come dovrebbe apparire il design prima di iniziare sul computer. Alla fine della giornata, questo è ancora design, e dovresti comunque usare un album da disegno. Non entrerò nei dettagli di questa parte del processo, visto che tu, come designer, dovresti già averne familiarità. Sappi solo che si applicano le stesse regole. Non apriresti Photoshop senza avere idea di come apparirà il tuo sito, sarebbe pazzesco!
In realtà, non deve essere abbozzato. Fai solo ciò che funziona tu per creare il concetto. Qualunque cosa possa essere, la cosa importante da considerare è avere un'idea solida prima di iniziare a lavorare sul computer.
Il layout è senza dubbio la parte più importante di questo processo. Potresti avere i font più ben selezionati, i colori perfetti e deliziosi piccoli dettagli, ma senza un layout solido, l'intero design cadrà piatto. Fortunatamente, la creazione di un solido layout basato su float con CSS è una delle cose più facili che puoi fare come web designer. A List Apart ha un Grande Articolo sull'argomento che consiglio vivamente per i dettagli tecnici sulla costruzione di un layout basato su CSS.
Se c'è una cosa che dovresti già sapere prima di entrare nel tuo editor di codice, è il layout del tuo design. Se hai in mente un layout specifico, è semplice codificarlo. Tuttavia, se entri senza un layout in mente, penso che rimarrai deluso dai risultati. Il layout non è una cosa che puoi semplicemente sperimentare e cambiare al volo, è una questione che richiede un'attenta considerazione da parte del designer.
Anche se non lo sai Esattamente dove ogni elemento vivrà sulla pagina, dovresti almeno avere un'idea generale del posizionamento degli elementi principali, nonché delle proporzioni tra questi elementi.
Una delle grandi cose di questo nuovo movimento di? Responsive Web Design? è come incoraggia i progettisti a pensare in proporzioni, piuttosto che in pixel. Ad esempio, si potrebbe dire che questo elemento deve essere il 30% del contenitore principale, a differenza di 200 px o una misurazione simile. Ciò è particolarmente utile per il web design in-browser quando si deve strutturare una pagina. Si potrebbe iniziare con un elemento contenitore principale che è, ad esempio, il 70% della finestra del browser, quindi progettare il resto della pagina all'interno del contenitore in proporzione alla larghezza di tale elemento. Non dovrai più scherzare con le misure esatte dei pixel e con quello stupido strumento Righello in Photoshop!
A questo punto, dovresti averlo almeno tutti sentito di @ font-face, anche se non l'hai ancora usato in un progetto. Per tutto, non lo so, uno di voi che non ne avete sentito parlare, ecco la versione a una frase. @ font-face è un modo di incorporare e utilizzare qualsiasi carattere tipografico da utilizzare su un sito Web, anche se non è installato sui computer degli utenti.
Questa semplice idea ha portato una nuova era della tipografia web nel giro di pochi anni. Intere aziende come Typekit e Fontdeck sono spuntate per il solo scopo di servire belle caratteri tipografici per il tuo sito web. In passato siamo stati costretti a fare affidamento su metodi hacky come Cufon o solo immagini regolari per mostrare il nostro tipo come lo vogliamo, ma tutto ciò sta cambiando. Le fonderie di tipo hanno in gran parte abbracciato il nuovo formato, modificando le loro licenze per consentire l'incorporamento o persino permettendo che i loro font siano ospitati da Typekit.
Quindi è fantastico, ma cosa ha a che fare con la progettazione di un browser? Bene, mio buon signore, te lo dirò.
È molto più facile gestire i caratteri tipografici quando sono gestiti dalle regole CSS, non da Photoshop?
Masticare in Photoshop per cambiare ogni singolo frammento di testo in un carattere tipografico selezionato diventa un po 'ridicolo dopo un po'. Nel codice è possibile visualizzare le modifiche in anteprima e testare caratteri, pesi e dimensioni differenti semplicemente modificando alcune righe di testo. Questo ti permette di iterare i tuoi progetti più velocemente, e adattiamo un design per le richieste dei clienti con poche semplici combinazioni di tasti.
Tutto quel potere diventa un po 'ridicolo quando si considera che ora abbiamo un numero infinito di caratteri tipografici con cui lavorare. Finché le fonderie continuano a fare le loro cose e Typekit continua a fare le loro, i designer non mancheranno mai un font appropriato.
Consiglio vivamente l'uso di Typekit, poiché sono disponibili molti più font che con una licenza standard @ font-face. Puoi sempre gestire il codice da solo, ma occuparti di licenze e dover acquistare ogni font singolarmente diventa abbastanza ridicolo piuttosto veloce. Questa è l'opzione che ho scelto su alcuni progetti, e mentre è ancora infinitamente migliore di quello che avevamo prima, l'esperienza non era la migliore.
Quando si tratta di scegliere i font, divertiti con questo! Sperimenta, prova qualcosa di pazzo. Se ti scuserai per la sfacciata autopromozione, vorrei indicarti un altro mio articolo.
In un? Tradizionale? processo di web design, spesso il progettista inizia costruendo un mockup in scala di grigi del loro design in Photoshop, prima di aggiungere i colori e i dettagli necessari per rendere il design pop. Questo processo è parte integrante del layout e della sensazione generale del design. Anche se non utilizzi il bianco e il nero, la costruzione del tuo design in serie di riquadri e forme semplici ti consente di vedere realmente come funzionerà il tuo progetto da una prospettiva più elevata. La costruzione di un design utilizzando semplici box è facilmente convertibile nel nostro flusso di lavoro nel browser. Basta usare
Una volta che il layout e la tipografia sono stati contrassegnati e adattati correttamente, l'introduzione del colore diventa una questione banale con poche righe di codice. Questo non vuol dire questo la scelta i colori sono una tecnica facile e semplice (anche se c'è un grande articolo anche per questo), solo che colorare gli oggetti a livello tecnico è molto semplice. Anche la visualizzazione di bellissime sfumature è facile con CSS3.
Quando codifico a colori un disegno, spesso Photoshop è aperto (sussulto!) Per scegliere i colori. Sono sicuro che ci sono alcuni ottimi strumenti disponibili online che forniscono un selettore di colori per generare codici esadecimali e valori rgb, ma per qualche ragione utilizzo ancora Photoshop. Questo è fuori dall'ordinario, perché di solito ho già Photoshop aperto, ma ci arriverò più tardi.
Come per la tipografia, i migliori schemi di colore provengono dalla sperimentazione, quindi divertiti! Qui puoi vedere la potenza di un processo di progettazione in-browser quando puoi modificare gli sfondi e i colori del testo di molti elementi sulla tua pagina con pochi tasti. Con un mockup di Photoshop, cambiare i colori di più elementi era un compito arduo, coinvolgendo con precisione la selezione di livelli e facendo clic su troppi pulsanti di una finestra, ma non di più!
Ti ricordi come ho detto che di solito Photoshop è aperto quando codifico un sito web? Bene, è tempo di rompere qualcosa a te, giovane padawan. Pochissimi siti possono essere sviluppati senza l'uso di Photoshop. Voglio dire, pensaci, anche se utilizzi un flusso di lavoro interamente basato su browser, ci sarà ancora almeno una o due immagini personalizzate da qualche parte, ad esempio uno sfondo o un'icona di qualche tipo. A meno che tu non sia a conoscenza di un modo di creare immagini senza un editor di immagini come Photoshop, tu o qualcun altro dovresti far apparire Photoshop o software simile per creare trame, icone e cosa hai.
Photoshop non è affatto male. La mia argomentazione principale in questo post è che non è affatto buono per progettare siti web, ma come uno strumento di progettazione di icone, è in realtà un po 'grandioso (se si ignora come spesso si blocca, cosa che provo). In ogni caso, ad un certo punto durante la creazione di un web design, senza dubbio dovrai generare una sorta di grafica personalizzata. Non ho problemi con PS usato per cose semplici come uno sfondo, una trama o un'icona ripetitiva che alla fine farà parte di un web design più grande.
Allo stesso modo, Fireworks non è male neanche. Infatti, Fireworks offre molte funzioni straordinarie (come l'elaborazione in batch e avanzati strumenti "salva per web" che lo rendono il compagno perfetto per il flusso di lavoro nel browser? Devi solo sapere quando utilizzarlo.
Abbiamo fatto molta strada in questo articolo, ma prima che finisca, ci sono alcune avvertenze su questo processo che vorrei menzionare.
Pushback del cliente: Alcuni clienti potrebbero non gradire l'utilizzo di questa tecnica. Potrebbero essere morti a guardare un mockup di Photoshop prima di fare qualsiasi lavoro sul codice. Se questo è il caso, dovresti accettarli. Puoi comunque utilizzare molti dei suggerimenti che ho fornito qui, ad esempio provare diversi caratteri tipografici con Typekit o un altro servizio @ font-face, oppure eseguire rapidamente un'iterazione con i colori. La parte importante di questo post è riconoscere che anche se si mockup con un editor di immagini, il design dovrebbe essere ancora aperto a cambiare e migliorare.
Old Browser Blindspots: Ci sono ancora molte cose che non puoi fare nel browser e molte cose che non sono supportate dai browser più vecchi. Se la piena compatibilità IE7 è un requisito del cliente, non utilizzare i gradienti CSS e utilizzare invece le immagini. Esistono modi per fornire fallback, ma a volte un client richiede il pieno supporto. Detto questo, si dovrebbe sempre cercare modi per delegare la responsabilità di progettazione ai CSS e ridurre l'uso eccessivo di immagini. Produce markup e risorse più puliti e più manutenibili.
Essere comodo! Il mio terzo e più importante avvertimento: potresti non essere a tuo agio con questo flusso di lavoro, e va bene! Come ho detto prima, anche se non sei pronto o non sei in grado di seguire completamente queste idee, l'importante è che tu riconosca e almeno tenti di considerare alcuni concetti, come l'iterazione rapida o la messa a fuoco prima del layout.
È di nuovo quel momento. È tempo di concludere e valutare davvero quello che hai imparato oggi, che si spera non sia niente. Ho coperto un sacco di cose e, con un po 'di fortuna, almeno alcune di esse sono rimaste bloccate nel tuo cervello. Non mi aspetto che tu vada e cambi completamente i tuoi flussi di lavoro, voglio solo che tu consideri che c'è un altro modo di fare le cose. A volte è difficile rendersi conto che ci sono altri modi di progettare oltre al modo in cui fai le cose ora, ma come designer, è importante che tu sia esposto a diverse scuole di pensiero.
Credo fermamente che questo processo sia il futuro del web design, e io, per esempio, lo accolgo!
Accentsconagua