Dal wireframe la UI: strumenti per il design grafico

fonte
fonte

Il visual design è la “trascrizione” grafica e visuale, della progettazione emersa attraverso le fasi di studio di ux e stesura dei wireframe.

Solitamente è a carico di un visual designer che si occupa di ridisegnare le informazioni dei wireframe, definendone lo stile grafico, colori, font, icone. ù

Gli strumenti per la creazione del visual design sono diversificati, da Ide complessi per la manipolazioni di immagini, a strumenti online che permettono la creazione di prototipi funzionanti.

Storicamente (e impropriamente) lo strumento più utilizzato è (era?) Photoshop. Benchè il software nasca come programma di elaborazione di fotografie, può essere utilizzato per disegnare UI.

La realtà, purtroppo,  è che tendenzialmente il “grafico” utilizza il programma che sa usare meglio.
Da qui, l’utilizzo anche di software per la grafica vettoriale come Illustrator, o per l’impaginazione come Indesign.

Al di là, della mera guerra di religione su cosa sia meglio o peggio, la scelta di uno strumento piuttosto che un altro, a mio avviso, deve essere fortemente legata al team con il quale state lavorando, in particolare alla collaborazione tra visual designer e frontend developer.

Se volete approfondire delle “buone pratiche” per la stesura di un impianto photoshop (ma le regole base funzionano per qualsiasi ide), in questa presentazione troverete dei suggerimenti sia per designer, che per dev che si trovano ad avere a che fare con un psd.

Con la diffusione della progettazione responsive, la creazione di visual design in photoshop o in software statici è diventata piuttosto macchinosa, perchè questi strumenti non consentono di rappresentare in maniera facile (e in resa verosimile) le dinamiche degli elementi al cambio di dimensione della finestra.

Per questo motivo risultano piuttosto validi strumenti come Webflow, che consentono la creazione della ui direttamente all’interno del browser, andando a lavorare sugli elementi direttamente dei diversi stati in cui vengono rappresentati.

Altri strumenti