Wireframe: cosa sono e come si creano nel 2024

(Aggiornato 2024)

Il mondo del design UX è in continua evoluzione e uno dei concetti più importanti in questo campo sono i wireframe. I wireframe sono uno strumento fondamentale per il processo di progettazione di un’interfaccia utente, sia per le applicazioni web che mobile.

Per diventare UX designer bisogna conoscere bene il significato dei wireframe e come usarli.

A partire dalla fine degli anni 90, con la diffusione di internet, il wireframe è diventato uno strumento fondamentale per la progettazione dei siti web. Costituisce la prima rappresentazione visuale del sito e cioè un elaborato grafico low fidelity che ha lo scopo di identificare la struttura del sito web, l’architettura dell’informazione e la disposizione degli elementi nella pagina. – Wikipedia

In fase di interaction design, una volta che il designer chiarisce la struttura generale e gli schemi di navigazione di un prodotto (Research + Usabilità + AI), si procede alla progettazione dei wireframe.

I wireframe illustrano il layout generale dell’interfaccia del prodotto, definiscono le regole della visualizzazione delle informazioni ed il comportamento dei suoi elementi. I wireframe sono uno strumento utile per redigere un’interfaccia prima di rifinire i dettagli dello stile e dell’interfaccia utente (UI).

Wireframe: cosa sono?

I wireframe sono una sorta di modello architettonico utilizzato per rappresentare visivamente lo scheletro alla base della vostra interfaccia. Collegano la struttura concettuale al design visivo del prodotto. Aiutano, inoltre, a decidere come creerete la gerarchia di informazioni, la priorità dei contenuti e aiutano gli utenti a vedere chiaramente i passi successivi.

I wireframe possono essere una documentazione di design molto utile, e possono fornire dettagli interattivi al vostro team – nello specifico per gli sviluppatori del front-end che implementeranno il design.

Come tutti i processi di design, la creazione del wireframe è iterativo.

Comincia con l’osservazione alle vostre mappe del sito, ai diagrammi di flusso, ai requisiti e bozzetti, e pensa al layout visuale del vostro sito web.

Esempio:

Wireframe: come si progettano?

Durante la progettazione, la stessa schermata può essere costruita in molti modi diversi, ma solo alcune di esse trasmettono correttamente il tuo messaggio e generano un software o un sito Web di facile utilizzo.

Definire una buona struttura di interfaccia è forse la parte più importante della progettazione del software.

Fare questo lavoro, prima che venga scritto qualsiasi codice e prima che il progetto visivo sia finalizzato, ti farà risparmiare un sacco di tempo e dolorosi lavori di regolazione in seguito.

I wireframe possono essere progettati includendo i seguenti aspetti:

• layout: la gerarchia delle informazioni e delle funzioni;
• elementi UI: la gamma di elementi e funzionalità disponibili (icone varie);
• flow: le regole per visualizzare determinati tipi di informazioni (si usano le frecce o le gestures);
• annotazioni: come i diversi scenari incidono su ciò che viene visualizzato nell’interfaccia.

I wireframe documentano come verrà data la priorità alle informazioni e agli elementi interattivi, come ad esempio pulsanti di azione, campi di inserimento, e collegamenti ipertestuali.

È anche possibile definire come funzionano gli elementi interattivi del prodotto.

Per esempio, in questo wireframe si utilizza le “gestures” (i gesti) sovrapposte al layout per dimostrare come si possa interagire coi vari elementi della UI:

Come abbiamo visto precedentemente, le annotazioni svolgono un ruolo molto importante.

I wireframe utilizzano le annotazioni, ovvero note ai margini, per aggiungere descrizioni, regole o spiegazioni su come funziona l’elemento, e qualunque altra informazione utile.

Di solito questo viene fatto posizionando un numero colorato in un elemento dell’interfaccia e poi utilizzando lo stesso numero per associare l’annotazione in basso.

Da wireframe a prototipo – di Anna Gerasymenko

Wireframe a bassa e alta definizione

Come le bozze, i wireframe a bassa fedeltà vi aiutano a buttare giù le vostre idee rapidamente in modo che potrete ragionarci e rifinirle.

I wireframe a bassa fedeltà si basano su forme geometriche per rappresentare in maniera astratta i contenuti. A volte, a questi livelli, i designer usano dei testi incomprensibili (a meno che non sappiate il latino) chiamati lorem ipsum.

Mentre questo semplifica il design, spesso è meglio usare il testo reale perché è un importante tipo di contenuto utilizzato per nominare, categorizzare e comunicare.

I wireframe a bassa fedeltà vanno bene per un lavoro di gruppo collaborativo, perché non sono troppo specifici.

Vi permettono di discutere decisioni importanti con il vostro team – ad esempio qual’è il focus della pagina – piuttosto che decisioni di UI poco importanti – ad esempio il tipo di freccia usato per un menu a tendina.

Gli strumenti comuni dei wireframe a bassa fedeltà sono le lavagne, carta e penna, ma anche strumenti digitali.

Invece, i wireframe ad alta fedeltà sono più dettagliati – riflettono fedelmente il modo in cui la vostra interfaccia apparirà e come funzionerà esattamente.

Per i wireframe ad alta fedeltà, molti designer usano Figma, Sketch e Adobe XD.

In ogni caso, lo strumento non è così importante come credete, il che vuol dire che dovreste scegliere lo strumento con il quale vi sentite più a vostro agio.

Wireframes per Responsive Design

Il responsive design pone maggiormente l’accento sulla struttura e sul layout di un sito Web, rendendo i wireframe particolarmente utili, persino necessari.

Per i siti Web responsive, consigliamo questa procedura:

1. Crea un inventario dei contenuti: elenca tutti gli elementi per ogni pagina, quindi organizzali in base alla priorità in modo da sapere cosa dovrebbe essere visto in modo prominente su ogni pagina.
2. Inizia con Mobile-first – Iniziare con il tuo schermo più piccolo aiuta a creare un’esperienza coerente su tutti i dispositivi, meglio aggiungere cose progressivamente piuttosto che capire cosa portare via.
3. Posiziona blocchi di contenuti – Prima di immergerti nei dettagli, dividi lo schermo in blocchi grandi e vaghi per i contenuti. Questo aiuta a mantenere la coerenza tra i dispositivi.
4. Dettaglia i blocchi: una volta finalizzati i blocchi, aggiungi dettagli come collegamenti, segnaposto per immagini, dimensioni, numero di righe, ecc.
5. Continua a pensare al prototipo finale a cui stai lavorando. Ognuno di questi wireframe può essere testato e messo a punto per una migliore precisione.

Vantaggi di usare i Wireframe

È necessario e vantaggioso creare wireframe per una migliore progettazione.

Ecco 5 principali vantaggi del wireframing.

1. Visualizza chiaramente la struttura. Un wireframe è il primo vero processo per un progetto. Trasforma le idee astratte in qualcosa di tangibile senza distrazione.
2. Chiarire le funzionalità dell’interfaccia. In molti casi, i clienti potrebbero non comprendere gerghi come “presentazione dinamica”, “feed di notizie”, “integrazione di mappe di Google”, “filtro dei prodotti”, “breadcrumb” e centinaia di altri tipi di funzionalità. Un wireframe fornisce una chiara comunicazione a un client su come funzioneranno queste funzionalità, dove appariranno sulla pagina specifica e quanto possano essere effettivamente utili.
3. Spingi l’usabilità in primo piano. Questo è uno dei vantaggi più importanti dei wireframe. L’usabilità è il requisito base del design. La creazione di wireframe porta l’usabilità in primo piano nel mostrare i layout di pagina al loro interno. Elimina le immagini, i colori e si concentra sulle ossa in modo da costringere tutti a osservare obiettivamente la facilità d’uso di un sito Web, i percorsi di conversione, la denominazione dei collegamenti, il posizionamento di navigazione e il posizionamento delle funzioni. E questo è vantaggioso per tutte le parti.
4. Aiuta a perfezionare la navigazione. Ad esempio, un wireframe di un sito Web consente alle persone di eseguire un nuovo test sul nuovo sito: per vedere quanto sia facile o difficile individuare le pagine di destinazione; per determinare se i menu a discesa chiariscono o confondono l’utente; per capire se lo schema di navigazione generale è intuitivo, ecc.
5. Risparmia tempo e denaro. Wireframing consente di risparmiare tempo in molti modi. I tuoi disegni sono più calcolati. Il tuo team di sviluppo capisce cosa devono costruire tenendo presente il progetto. La creazione di contenuti diventa molto più chiara. Ciò può facilitare la comunicazione ed evitare incomprensioni. Tutti i membri del team di sviluppo, dell’agenzia e del cliente sono tutti sulla stessa pagina su cosa dovrebbe fare l’interfaccia e su come dovrebbe funzionare.

Wireframe: quali tool utilizzare?

I wireframe possono essere realizzati a mano su carta o utilizzando strumenti digitali come Sketch, Figma o Adobe XD. Sono composti da forme geometriche semplici come rettangoli, cerchi o triangoli, ma possono anche includere icone, pulsanti e altri elementi UI.

• Sketch (macOS) uno dei tool più famosi in circolazione.
• Figma (Web) il tool che va più di moda e che ha il miglior sistema di collaborazione sul mercato.
• Mockplus RP(macOS, Windows, iOS, Web) Strumento di wireframe collaborativo online gratuito per la progettazione Web e APP
• Adobe XD (macOS, Windows) il tool di casa Adobe dedicato alla user experience.
• InVision Studio (Web) molto facile da usare ed integrare con la prototipazione di Invision.
• UXPin (Web) un altro tool interessante.
• InVision Freehand (Web) praticamente come una lavagna online dove poter liberamente abbozzare idee.
• Balsamiq (macOS, Windows, Web) uno dei più anziani tool di wireframing.
• Proto.io (Web) ottimo sistema per il wireframing.
• Moqups (Web) uno degli ultimi arrivati, interessante da vedere.
• Adobe Illustrator (macOS, Windows, iOS) il tool vettoriale di casa Adobe, molti designer lo usano per il wireframing.
• Affinity Designer (macOS, Windows, iOS) profilo simile ad illustrator.
• Adobe Photoshop (macOS, Windows, iOS) non adatto al wireframing ma molti designer lo usano ancora oggi.
• Marvel (Web) profilo molto simile ad Invision.
• Canva (Web) nato come tool per marketing, ha anche funzioni di progettazione per wireframe.

Perché i wireframe sono importanti nel 2024 e nei prossimi anni? Ecco alcune ragioni:

1. Comunicazione e collaborazione. I wireframe sono uno strumento di comunicazione importante tra i membri del team di progettazione, in quanto aiutano a visualizzare le idee e a fornire una base comune per la discussione e la collaborazione. I wireframe possono essere condivisi con i clienti, gli stakeholder e altri membri del team, consentendo a tutti di comprendere e valutare il design in modo più efficace.
2. Risparmio di tempo e costi. I wireframe possono aiutare a ridurre il tempo e i costi del processo di progettazione, in quanto consentono di individuare e risolvere problemi in fase di progettazione. Inoltre, i wireframe possono aiutare a identificare le funzioni chiave e a semplificare il processo di sviluppo, riducendo il rischio di dover apportare modifiche costose durante la fase di sviluppo.
3. Test e iterazione. I wireframe consentono ai designer di testare rapidamente diverse idee e di iterare il design senza dover dedicare troppo tempo alla creazione di una versione completa dell’interfaccia utente. Questo consente di individuare e correggere eventuali problemi in modo più rapido ed efficiente, consentendo di raggiungere un design migliore in tempi più brevi.
4. Focus sull’usabilità. I wireframe consentono di concentrarsi sull’usabilità e sull’esperienza dell’utente, piuttosto che sull’aspetto estetico. In questo modo, i designer possono garantire che l’interfaccia utente sia facile da usare e comprensibile per gli utenti, aumentando la soddisfazione dell’utente e migliorando l’efficacia dell’interfaccia.
5. Design responsivo. Con l’aumento dell’uso dei dispositivi mobili, la progettazione responsiva è diventata sempre più importante. I wireframe consentono ai designer di pianificare l’interfaccia utente per diverse dimensioni di schermo e di garantire che l’interfaccia funzioni su tutti i dispositivi, dal desktop al tablet

Risorse Extra

Per avere tanti altri contenuti come questo:

• accedi al gruppo esclusivo, e gratuito, di User Experience Italia
• seguici su Instagram
• seguici su Telegram