Il Wireframe(letteralmente in italiano "fil di ferro") è il modello iniziale utilizzato per la prototipazione di siti web, app o altri prodotti basati su schermo che implicano l’interazione uomo-computer.
In poche parole il wireframe costituisce la prima rappresentazione visuale, un elaborato grafico che ha lo scopo di identificare la struttura, l’architettura dell’informazione e la disposizione degli elementi.
È diventato quindi uno strumento di lavoro essenziale per molte figure professionali che operano nel web come Interaction Designer, UI Designer e UX Designer. Attraverso i wireframe illustrano il layout generale dell’interfaccia del prodotto.
Wireframe VS Mockup VS Prototipo
Alcuni pensano che wireframe e prototipo siano sinonimi, ma non è così.
Esistono 3 fasi della prototipazione di un prodotto visivo:
1) Wireframe: una bozza grafica a bassa fedeltà che rappresenta la base dell’idea. Gli elementi di un wireframe sono rappresentati con una scala di grigi (assenza di colore) semplicemente da bozze, mappe, rettangoli, etichette, annotazioni e contenuti astratti. Nella fase inziale tutto questo serve a comunicare le idee nel team del progetto in modo semplice ed efficace. Un wireframe non è altro che una struttura scheletrica minimalista del sito web o dell’app che dà una direzione al progetto.
2) Mockup: modello mediamente avanzato ad alta fedeltà, ma ancora in fase di progettazione. Ciò significa che il designer ha ricevuto il wireframe ed ha provveduto ad aggiungere grafica, colori, immagini, loghi e altri elementi visivi più realistici rispetto ai precedenti.
3) Prototipo: modello finale interattivo del prodotto. Il prototipo ha lo scopo di simulare l’interazione tra utente e interfaccia del prodotto.
Vantaggi di usare i wireframe
Ricapitolando i wireframe sono il primo passo da compiere nella progettazione di un sito o di un’app.
Quindi è necessario e vantaggioso creare wireframe, soprattutto se si considerano questi aspetti:
- si visualizza chiaramente la struttura
- si chiariscono le funzionalità dell’interfaccia
- si pone l’usabilità in primo piano
- aiuta a rendere la navigazione più intuitiva
- si risparmia tempo e denaro (facilita la comunicazione ed evita incomprensioni nel team)
Come si creano i Wireframe
Per realizzare un wireframe possono bastare carta e penna dato che è la bozza iniziale del prodotto. Tuttavia in rete sono disponibili una serie di tools (software per simulazioni) che permettono di creare wireframe digitali. I migliori tools in circolazione sono: Sketch, Figma, Mockplus RP, Adobe XD, Adobe Photoshop, Canva.
Cliccando su StoryboardThat troverai moltissimi esempi di wireframe e linee guida su come realizzare ogni tipo di wireframe.
Come ho già anticipato all’inizio dell’articolo, i wireframe vengono utilizzati da UX Designer, UI Designer e Interaction Designer.
L’unico corso professionale in Italia che può darti tutte le conoscenze e tutti gli strumenti per creare wireframe è Corso UX Completo, diviso anche per specializzazioni acquistabili singolarmente come quelle dei corsi di UI & Visual Design e Interaction Design.
Questi corsi offrono un programma vasto e dettagliato, la disponibilità dei mentor più qualificati in Italia che ti aiuteranno a sviluppare i tuoi progetti e al termine del corso riceverai una certificazione e la referenza diretta dei mentor che garantiranno la tua competenza, la quale ti sarà di grande aiuto durante i tuoi colloqui di lavoro sia in Italia che all’estero.
Se vuoi saperne di più, clicca su questi articoli:
