Photoshop web design: disegnare interfacce – parte 2

Pensare al design delle proprie applicazioni rappresenta una fase importantissima nel processo di realizzazione di qualsiasi progetto, ed è quella fase che si trova dopo il wireframing e prima dello sviluppo. Oltre a produrre un prodotto di qualità, questo step aiuta a ridurre notevolmente i tempi di creazione.

Lo scorso mese ti avevo suggerito un mio guest post scritto per Lobaedesign.com su come utilizzare Photoshop per realizzare interfacce mobile (e non solo), utile per tutti coloro che si interessano alla creazione di prodotti web e digitali e tutti gli aspiranti web designers.

L’idea di scrivere una mini guida su come iniziare a disegnare interfacce con questo potentissimo strumento, nasce dal fatto che la rete brulica di guide Photoshop per fotografi. Esse offrono degli ottimi consigli su come ringiovanire il viso, scontornare i capelli e rimuovere le rughe, trasformare un paesaggio in bianco e nero ecc

Tutta roba non adatta a noi web designers.

Con questa piccola mini-guida spero di poterti incentivare a disegnare applicazioni e siti web prima di passare allo sviluppo. Molte volte abbiamo “fretta” ed iniziamo a scrivere codice HTML5 e CSS3 per dar vita al nostro progetto, senza pensare che investire qualche piccola ora di tempo nel disegnare quello che dobbiamo realizzare, può rappresentare un importante risparmio di tempo futuro.

Qualunque tipo di design, che sia esso web o mobile, è fortemente caratterizzato e condizionato dalla presenza del testo, elemento che molte volte viene sottovalutato per concentrarsi maggiormente su componenti come pulsanti, modal, header e footer. In questa seconda parte del tutorial ti spiego come gestire correttamente testo e paragrafi con Photoshop, in modo da rendere il proprio design più vicino possibile al markup che svilupperemo.

Ecco il link alla guida: