Creare wireframe è uno step importante nel processo di sviluppo di un qualsiasi sito web. In primo luogo, l’attività di wireframing consente di definire la gerarchia delle informazioni da inserire all’interno del progetto; quindi di semplificare la progettazione del layout in base al modo in cui si desidera che interagisca con l’interfaccia e alabori tali informazioni. Si tratta di una fase fondamentale che permette di pianificare al meglio la realizzazione dell’interfaccia senza essere “distratti” da elementi grafici e di contenuto. Insomma la logica è che se il wireframe “funziona” allora funzionerà anche il sito una volta ultimato.
6 semplici step per creare wireframe di qualità
Ma cosa occorre fare per creare wireframe in maniera ottimale? Abbiamo individuato alcuni passaggi essenziali e abbiamo deciso di elencarli in questa guida pratica che potrete prendere a riferimento ogni volta che sarete impegnati in questo tipo di attività.
- Per prima cosa è buona norma osservare ciò che fanno gli altri professionisti web designer come te. Dagli altri infatti c’è sempre da imparare e anche la realizzazione di un semplice wireframe per sito web può offrire spunti davvero interessanti. Su I love wireframes potete trovare numerosi esempi da cui prendere spunto.
- Quindi ti consigliamo, specie se sei ancora alle prime armi, di buttare giù una scaletta del processo di sviluppo web che andrai a svolgere. Le possibilità infatti sono diverse e ogni professionista è libero di organizzarsi autonomamente da questo punto di vista. Insomma, non esistono regole codificate, ognuno può crearsi il proprio modo di lavorare.
- Dopodichè, una volta chiarite le varie fasi del processo, devi sceglierti gli strumenti da utilizzare e crearti la tua cassetta degli attrezzi. Tra i programmi ti segnaliamo Balsamiq, Omnigraffle, Axure e Flairbuilder. Mentre se opti per una piattaforma online la scelta non può che ricadere su Mockflow, Hotgloo e Mockingbird. Oppure potresti “accontentarti” di utilizzare attrezzi universali che dovresti già conoscere come Powerpoint o la Adobe Creative Suite. A te la scelta.
- Il modo più rapido ed efficace per creare wireframe è quello di partire da una struttura a griglia per poi disegnare una serie di blocchi che ti permetteranno di dar vita al tuo layout di pagina. Tutto ciò ti aiuterà successivamente in fase di sviluppo e design e a collocare facilmente elementi grafici e di contenuto.
- A questo punto potrai iniziare a organizzare le informazioni e i contenuti che successivamente andrai a implementare in maniera compiuta. Si tratta in questa fase semplicemente di riempire i vari blocchi con brevi estratti o titoli dei contenuti testuali.
- Quindi passerai a dare al tuo wireframe un aspetto più “amichevole”: utilizzerai la scala di grigio per definire e distinguere i blocchi e aggiungerai parti più consistenti di contenuto, come le voci di menu, una bozza del logo e i testi.
Ti invitiamo in conclusione a prendere seriamente in considerazione l’opportunità di seguire questi 6 semplici passaggi che ti serviranno per creare wireframe di qualità utili per dar vita a siti web moderni sotto ogni punto di vista.
[…] del lavoro dell’azienda, ma la maggior parte dei progettisti di interazioni hanno il compito di creare wireframe che definiscano le interazioni nel prodotto. A volte, i progettisti di interazioni possono anche […]