Forma e funzione: una guida ai migliori strumenti Wireframe

Nel 1487 Leonardo da Vinci disegnò uno schema chiamato "veicolo da combattimento", progettato mentre era sotto il patrocinio di Ludovico Sforza, duca di Milano. Sebbene la macchina sia stata appositamente progettata per non funzionare correttamente, un gruppo di ingegneri l'ha ricreata nel 2010. Lo schema di Da Vinci è uno dei primi esempi di wireframe di base.

Il termine wireframe è stato utilizzato per decenni, molto prima che fosse adottato dal mondo del web design. I wireframe sono stati originariamente utilizzati nel software CAD (Computer Aided Design) per illustrare il design di un oggetto senza la necessità di dettagli. Il risultato è stato un progetto che sembrava fatto di cavi, ergo, abbiamo finito con i wireframe.

Ma cos'è un wireframe nel design e qual è lo scopo di averne uno?

Un wireframe nella progettazione digitale è una guida visiva o uno schema di pagina privo di stile tipografico, colori, grafica ed elementi interattivi e rappresenta un punto specifico del processo di progettazione. Il suo scopo è mostrare idee di layout a livello di pagina che descrivono funzionalità, comportamento e priorità del contenuto.

I progettisti utilizzano i wireframe per collegare le strutture concettuali sottostanti al design visivo di un sito o alla schermata di un'app. Esistono tre diversi tipi di wireframe:

• Bassa fedeltà : un disegno in fase iniziale senza molti dettagli. I wireframe a bassa fedeltà sono spesso schizzi disegnati a mano o linee e forme che rappresentano un'idea.
• Media fedeltà : wireframe che iniziano a mostrare più dettagli sui componenti e si concentrano sul layout del contenuto e sulla struttura generale della pagina.
• Alta fedeltà - Disegni in fase successiva (post iterativi) che descrivono più dettagli e rendering di livello superiore dei componenti, con caratteristiche comportamentali e un'attenzione al layout del contenuto.

Un'evoluzione dei wireframe nella progettazione digitale è un altro artefatto UX e deliverable: il wireflow. I wireflow sono una combinazione di wireframe e diagrammi di flusso, due artefatti che i designer di UX hanno lentamente unito in uno per un altro scopo: illustrare e seguire le interazioni che rappresentano i flussi di attività in un prodotto come un'app web.

Un problema che i progettisti incontrano con i wireframe è comunicare il percorso dell'utente. Sebbene ci siano modi più complessi per mostrare i percorsi degli utenti, c'è una tendenza a includerli nella semplicità di un wireframe. Uno strumento utile per questo è una mappa wireframe.

Una mappa wireframe combina wireframe con percorsi utente (o flussi utente) per dimostrare il percorso dell'utente attraverso un prodotto utilizzando wireframe.

I migliori strumenti di wireframe

I progettisti hanno molte scelte quando decidono quali strumenti di wireframing utilizzare. Nuovi strumenti entrano continuamente nel mercato, quindi può essere difficile tenere il passo. Ecco alcune caratteristiche degli ottimi strumenti di wireframing da cercare:

• La capacità di produrre una varietà di fedeltà (da bassa ad alta)
• Software stabile, facile da usare e aggiornato frequentemente
• Modelli, simboli e componenti dell'interfaccia utente standard incorporati con funzionalità aggiuntive

Alcuni degli strumenti in questa guida si concentrano maggiormente sul wireframing, mentre altri cercano di trovare un equilibrio tra wireframing e prototipazione e funzionalità di mockup. La scelta di utilizzare uno strumento rispetto all'altro (o più insieme) dipende dalle preferenze del designer.

Balsamiq

Balsamiq è uno strumento di wireframe a bassa fedeltà e semplice da usare, apprezzato per la sua facilità d'uso e l'iconico aspetto "disegnato a mano". Viene fornito con una serie di modelli predefiniti che possono essere utilizzati rapidamente e facilmente con un editor drag-and-drop. I designer possono aggiungere le proprie risorse e personalizzare il layout.

La prototipazione di base può essere ottenuta collegando i modelli per creare semplici esperienze di click-through per i test di usabilità durante la visualizzazione del progetto in modalità Presentazione a schermo intero o come PDF esportato.

Balsamiq è offerto come versione desktop (Windows e Mac), servizio cloud o come plug-in per Google Drive, Confluence e JIRA.

Moqup

Moqups è un altro strumento di collaborazione creativa che si concentra sul wireframing ma può essere utilizzato anche per la prototipazione. A differenza di Balsamiq, è puramente web-based ed è pensato per creare wireframe per applicazioni web e mobili.

La principale differenza tra Moqups e Balsamiq è la fedeltà dei wireframe. Mentre Balsamiq produce un aspetto "disegnato a mano", Moqups fornisce stencil e kit a colori per app mobili e web design inclusi iOS, Android e Bootstrap.

Moqups si distingue da Balsamiq in alcuni altri modi. Il software consente la modifica di oggetti finiti e la gestione delle pagine, offrendo ai progettisti la possibilità di definire oggetti "principali", il che può far risparmiare molto tempo quando si apportano modifiche ai wireframe durante il processo di iterazione.

Ad esempio, un designer crea un oggetto pulsante principale con dimensioni, forma e colore specifici. Questo pulsante viene utilizzato più volte in tutto il wireframe. Successivamente, nel processo di iterazione, se il designer ha bisogno di cambiare il colore del pulsante, invece di cambiare ogni singolo oggetto pulsante, può cambiarlo una volta e tutti gli oggetti pulsante figlio vengono immediatamente interessati.

Pidoco

Pidoco è uno strumento di wireframing di punta incentrato su risultati a bassa fedeltà con una certa interattività di base. Anche basato su cloud, utilizza componenti riutilizzabili e si distingue da Balsamiq e Moqups con un'esperienza wireframe click-through più robusta.

Pidoco è utile per app mobili e web design perché ha visualizzazioni mobili integrate in modo che i designer possano vedere come appariranno le pagine delle loro app su schermi di varie dimensioni. Un'altra caratteristica incorporata è la funzione di esportazione e specifica . Questo aiuta i progettisti a passare dal wireframe al prototipo/mockup senza la necessità di un plug-in o di un'estensione.

Picoco ha un aspetto e una sensazione di bassa fedeltà, ma include diverse funzionalità che si trovano in genere in strumenti di progettazione più complessi. Funziona bene per i designer che stanno facendo UX snella e hanno bisogno di iterare rapidamente con cicli di feedback più brevi.

Scintillante

Gliffy è uno strumento di wireframing di media fedeltà con alcune caratteristiche uniche che lo differenziano da Balsamiq e Mockups. Una caratteristica unica è la capacità di creare wireflow. Gliffy ha funzionalità integrate di diagrammi di flusso e diagrammi con stencil inclusi, mappe mentali e modellazione dei processi aziendali.

Come gli altri strumenti di wireframing, Gliffy fornisce una libreria di forme, icone e la possibilità di condividere wireframe in modo nativo su Confluence, Slack, Basecamp, Trello e WordPress di Atlassian.

Questo è uno strumento di progettazione wireframe UX relativamente nuovo, tuttavia vanta un'ampia base di abbonati di designer professionisti che cercano integrazioni e funzionalità semplici oltre a un wireframe statico.

Wireframe.cc

Wireframe.cc è uno strumento di wireframing di base molto simile a Balsamiq. Ha un'interfaccia pulita senza molte barre degli strumenti e icone che distraggono. A differenza di molti altri strumenti, ti consente di "disegnare" wireframe con un mouse.

Wireframe.cc fornisce una libreria di stencil e una gestione pulita e semplice degli oggetti. Un elemento utile che Wireframe.cc offre quando si lavora con la lean UX, è un URL per ogni pagina wireframe in modo che possa essere condivisa per un feedback in modo rapido e semplice.

Non c'è prototipazione o interattività incorporata in quanto si concentra esclusivamente sul wireframing a bassa fedeltà.

Stravagante

Chiamato "Google Docs" per wireframe, Whimsical imita strumenti per la creazione di diagrammi come OmniGraffle e Visio. Non si concentra sulla prototipazione/prototipi, poiché il suo obiettivo principale è il wireframing e i diagrammi di flusso, il che lo rende un ottimo candidato per la produzione di wireflow.

Come Gliffy, Whimsical è uno strumento di wireframing di media fedeltà e include un'ampia libreria di elementi configurabili (pulsanti, input, caselle di controllo, ecc.).

La collaborazione illimitata sullo stesso documento wireframe allo stesso tempo è un'ottima funzionalità integrata per i team di progettazione remoti.

Adobe XD

Adobe XD ha recentemente attirato l'attenzione dei designer grazie alla sua interfaccia semplice, ai profondi legami con altri prodotti Adobe, alla facilità d'uso e alle funzionalità integrate che riducono la necessità di fare affidamento su plug-in ed estensioni.

Esistono due modi per creare wireframe in Adobe XD. Possono essere costruiti utilizzando linee e forme per creare oggetti ed elementi, oppure possono essere costruiti utilizzando kit di interfaccia utente predefiniti da fonti come behance.net e risorse XD.

Una funzionalità di Adobe XD che consente di risparmiare tempo è la possibilità di creare componenti "principali" (denominati Simboli in Sketch), utili quando si apportano modifiche poiché tutti i componenti istanziati dal master erediteranno le modifiche.

Un altro vantaggio dell'utilizzo di XD come strumento di wireframing è la possibilità di passare alla modalità di prototipazione con un semplice clic del mouse. La modalità di prototipazione è integrata in XD e funziona in background, così i designer non perdono tempo quando passano dai wireframe ai prototipi.

Schizzo

Sketch, uno strumento di progettazione popolare per i progettisti di UX/UI, fornisce una piattaforma per l'editing vettoriale, la prototipazione e la collaborazione e dispone di una libreria in crescita di centinaia di plug-in che ne estendono le funzionalità.

Wireframing in Sketch è molto simile ad Adobe XD con il suo uso di kit/modelli e strumenti di disegno. Sketch fa ampio uso di simboli che sono componenti riutilizzabili che possono essere definiti una volta e utilizzati più volte (pulsanti, ecc.). I simboli istanziati accettano anche le modifiche apportate al simbolo "principale". Questo è vantaggioso per i progettisti poiché ci sono spesso molte modifiche che devono essere apportate durante il processo di wireframing.

Sketch consente ai progettisti di creare wireframe, prototipi e prototipi ad alta fedeltà. Non è un'app basata su cloud e uno dei potenziali svantaggi è che funziona solo con macOS.

Pin UX

UXPin è uno strumento wireframe di punta che supporta stati interattivi, componenti logici e programmatici offrendo ai progettisti la possibilità di codificare interazioni, variabili ed espressioni condizionali.

UXPin va ben oltre il wireframing, concentrandosi principalmente sulla prototipazione con librerie di componenti dell'interfaccia utente, simboli, strumenti di disegno vettoriale e co-editing.

Esiste una versione per Windows, macOS e cloud/browser. Per il wireframing ad alta fedeltà, UXPin funziona in modo molto simile a Sketch e Adobe XD. Non è drag-and-drop come Balsamiq, ma porta la prototipazione e i modelli a un livello superiore per i designer che cercano di rimanere all'interno di un unico ecosistema.

meraviglia

Marvel, un altro popolare strumento di progettazione che facilita il wireframe e la prototipazione, offre ai progettisti un'interfaccia drag-and-drop familiare per la creazione di wireframe ad alta fedeltà.

Marvel non richiede alcun componente aggiuntivo o estensione poiché tutte le risorse sono incluse. La piattaforma è completamente basata su cloud, il che rende facile e veloce la condivisione di wireframe con altri membri del team di progettazione o clienti.

Uno dei motivi per cui i designer scelgono Marvel per il wireframing è la sua integrazione con altre piattaforme come Jira, Sketch, Confluence, Dropbox, Slack e molte altre. Per la collaborazione con sviluppatori, team di progettazione remoti e clienti, questa funzionalità consente ai progettisti di risparmiare molto tempo.

La Marvel ha anche un prodotto chiamato Pop che aiuta a trasformare schizzi di carta e penna in prototipi interattivi di iPhone e Android. Pop consente ai designer di scattare una foto dei loro schizzi e trasformarli in wireframe interattivi.

Axure RP

Axure RP è in circolazione da molto tempo ed è un ottimo strumento per creare wireframe statici (oltre a prototipi altamente interattivi). Non è basato su cloud sebbene funzioni sia su Windows che su macOS.

Il wireframing può essere eseguito utilizzando la sua vasta libreria di componenti di trascinamento della selezione, tuttavia, Axure RP è uno strumento complesso che va ben oltre il wireframing. Utilizzando le funzionalità programmatiche di Axure RP, i progettisti possono creare prototipi avanzati con funzionalità che rispecchiano un'applicazione completamente funzionante.

Data l'elevata curva di apprendimento di Axure, non avrebbe senso utilizzarlo esclusivamente per wireframe statici. Tuttavia, se l'obiettivo è produrre prototipi che siano altamente rifiniti e funzionali, allora sarebbe lo strumento perfetto per i designer di prodotti.

Strumenti Wireframe preferiti dai designer di Toptal

Abbiamo contattato alcuni designer di Toptal per scoprire quali strumenti di wireframing utilizzano i designer professionisti e perché. Ecco cosa avevano da dire.

“I miei preferiti sono Adobe XD e UXPin. Sto iniziando a scegliere XD come preferito perché è facile creare wireframe veloci e testare idee, e da lì posso effettivamente iniziare la progettazione e persino il prototipo sulla stessa piattaforma". -Michael Craig

“Il mio preferito è il Pop perché è così veloce. Comunque disegno sempre i miei wireframe su carta, quindi funziona benissimo e non devo gestire nulla. Trovo anche che vada bene per l'intera faccenda del "non innamorarti della soluzione" perché è così chiaramente lo-fi. " -Nicola Rushton

“Uso Axure praticamente sempre per il mio lavoro di progettazione. È uno strumento altamente sottovalutato per un lavoro di progettazione completo, con una complessità molto elevata” - Andi Omtvedt

“In realtà non uso più il wireframe di per sé, poiché penso che gli strumenti siano abbastanza forti da produrre prototipi a bassa fedeltà, quindi quasi combinando il wireframe iniziale con una visuale migliore. Ho adottato Framer X da gennaio di quest'anno e lo adoro". - Charlie Williams

Sommario

Data la capacità di produrre prototipi sofisticati, il wireframe è ancora rilevante? Alcuni designer professionisti sosterranno che i wireframe sono una reliquia del passato, mentre altri difendono fermamente la loro continua importanza per il processo di progettazione.

Oggi c'è un'abbondanza di strumenti wireframe che facilitano il processo di progettazione. Alcuni continuano a concentrarsi esclusivamente sul wireframing, anche se la tendenza si sta spostando verso prodotti ibridi che iniziano con il wireframing ma includono anche la possibilità di creare prototipi e, in molti casi, produrre mockup completamente funzionanti.

Sebbene si sia evoluto da un prodotto a bassa fedeltà a uno a media o alta fedeltà, Wireframing non sta certo scomparendo.

Ulteriori letture sul blog di Toptal Design:

• Mappatura wireframe: come evitare lo scope creep
• Morte al Wireframe. Direttamente all'alta fedeltà!
• Resa dei conti con lo strumento di progettazione - Adobe XD vs. Sketch (2019)
• Padroneggia il tuo mestiere con questi migliori strumenti UX
• I 10 risultati UX utilizzati dai migliori designer