Se sei coinvolto nella progettazione di un sito web, un’applicazione mobile o un qualsiasi tipo di interfaccia utente, allora sicuramente hai sentito parlare dei wireframe.
Cosa è un Wireframe
I wireframe sono rappresentazioni scheletriche delle tue idee di progettazione, un passo cruciale per la creazione di un prodotto digitale di successo. In questo articolo voglio darti 8 consigli pratici per creare wireframe semplicemente perfetti.
1. Fa’ attenzione all’allineamento
Anche se non stiamo facendo il design finale del sito, questo non vuol dire che possiamo essere imprecisi, anzi: se inseriamo degli elementi disallineati in questa fase, è molto probabile che ce li porteremo fino alla fase di sviluppo. Non ho mai conosciuto sviluppatori che, di fronte a un layout disallineato, abbiano detto: qui il designer ha sbagliato, aspetta che allineo meglio questi elementi. Dunque, che tu faccia un wireframe a bassa o ad alta fedeltà, a mano o col software più preciso al mondo, non importa: gli elementi presenti devono essere allineati, perché chi verrà dopo di te nel processo di design deve potersi sentire libero di seguire perfettamente il tuo wireframe senza chiedersi: ma questo elemento non allineato, è voluto o è un errore?
2. No alla perfezione, ma sì alla precisione
Il wireframe perfetto è un wireframe con pochi elementi ma inseriti con un’altissima precisione. Ogni variante di un elemento genera una diversa interpretazione nella testa del web designer o sviluppatore che arriva dopo: dunque se metti un ingombro molto sottile per i testo, è facile che venga interpretato come font molto piccolo. E se usi una gradazione di colore diversa dal solito, magari verrà interpretata come un cambio di stile. Se disegni 9 immagini una accanto all’altra, è probabile che chi verrà dopo cercherà di rispettare questa regola, anche se finirebbe col creare un layout confusionario o, ancora peggio, con grossi problemi in fase di responsive. Ogni elemento quindi, la sua posizione, la grandezza, la graduazione di colore, va ragionato più e più volte prima di considerarlo come definitivo.
3. Usa le griglie
Le griglie ragazzi, le griglie! La maggior parte dei wireframe che ricevo nelle esercitazioni NON usano le griglie e sai cosa produce questo? produce layout disallineati, con brutti spazi vuoti oppure,cosa ancora peggiore, layout impossibili da usare in versione responsive. Quando devi realizzare un wireframe, la prima cosa da fare prima ancora di disegnare il primo rettangolo è un sistema di griglie. ho spiegato come si fa nel corso relativo a figma. e non hai nessuna scusa al riguardo: non mi venire a dire che stai facendo un wireframe a mano su carta e quindi non puoi usare le griglie, perché ho una brutta notizia da darti: anche in questo caso ti basta usare una carta fatta apposta per i wireframe.
4. Valido per ogni tipo di dispositivo
Ne parlavo prima, lo ripeto adesso: disegnare un layout solo per una versione desktop o solo mobile e non chiedersi come verrà negli altri dispositivi è l’errore più grave che puoi fare quando cominci a disegnare qualcosa. Se prendi l’abitudine di disegnare sempre il tuo layout su schermi di dimensione diversa, ti accorgerai subito di eventuali incongruenze o errori di progettazione.
5. Non usare i colori, mai
Ogni tanto, un colore ci scappa sempre. A volte è un pulsante, a volte un’icona, un testo, non lo so ma la ciò che è certo è che ogni tanto qualcuno di noi ha voglia di far emergere la sua creatività durante la realizzazione di un wireframe. e la brutta notizia purtroppo è questa: nei wireframe non devi mai usare i colori. Il perchè non lo si usa è piuttosto semplice: cosa succede se il colore che hai scelto per il tuo wireframe da mostrare al tuo capo o al tuo cliente è anche il colore che più detesta? Te lo dico io che succede: che vieni licenziato o che il progetto viene rifiutato o non accolto nella maniera che merita e tutto questo per un elemento, quello del colore, che non ha nulla a che fare con la struttura del sito e che dunque non va valutato.
6. Usa un linguaggio consistente
Parliamo di consistenza nel corso di UI e qui voglio solo sottolineare che, se la consistenza è una caratteristica così importante nei nostri siti, beh allo stesso modo deve essere presente già fin dai wireframe. Questo vuol dire che se da qualche parte nella pagina usiamo un testo per rappresentare i testi, poi non possiamo cambiare idea e usare invece una linea. Scegli quindi il linguaggio visivo e iconico che vuoi usare e rimani fedele ad esso in tutto il progetto.
7. Usa icone al posto di testi
Le immagini sono elaborate più velocemente dal nostro cervello, ecco perché sono sempre preferibili ai testi. Se stai creando dei box nel tuo wireframe che rappresentano elementi abbastanza standard come un’immagine, un video, una barra di ricerca, una select, NON è necessario che tu scriva un testo. usa piuttosto un’icona: comunichi la stessa cosa senza dover far fare uno sforzo cognitivo a chi sta cercando di interpretare il tuo wireframe. e a proposito di interpretazione…
8. Disegna degli elementi facilmente interpretabili
il tuo wireframe passerà di mano in mano tra quelle del cliente, il project manager, il designer e magari anche il programmatore. Persone diverse con background diversi e che hanno obiettivi diversi. il tuo scopo è quello di far nascere quante meno domande possibili nella loro testa quando guardano il tuo wireframe. Non fargli chiedere cose tipo: ma questa cosa è un titolo o un pulsante? questi sono radiobutton o icone?
In conclusione
In conclusione, la creazione di wireframe efficaci è una tappa essenziale nella progettazione di prodotti digitali di successo. Seguendo questi 8 consigli pratici, sarai in grado di sviluppare wireframe chiari, intuitivi e ben strutturati che aiuteranno a guidare il tuo progetto nella giusta direzione. Ricorda che i wireframe sono uno strumento flessibile, quindi non esitare a sperimentare e a migliorare il tuo lavoro man mano che il progetto evolve.