I 7 migliori strumenti di wireframing e prototipazione per i produttori di app

Ultimamente ho avuto molte discussioni su UI e UX. Nessuno si è lamentato di questo, quindi presumo che stiamo raggiungendo un punto in cui tutti coloro che sono coinvolti nello sviluppo di app riconoscono l'importanza di UI e UX.

Un'ottima idea per un'app è così facilmente rovinata da un'interfaccia ed esperienza mal pensate. E con molti strumenti ora disponibili per wireframing e prototipazione rapidi, non dovrebbe esserci alcun motivo per non eseguire un'esperienza brillante.

Sebbene i termini siano spesso usati insieme, c'è una chiara distinzione tra un wireframe e un prototipo.

Un wireframe è un layout scheletrico e essenziale della struttura della tua app. Di solito è fatto senza alcun colore - semplice bianco e nero - e mentre un wireframe mostra dove andranno testo, immagini e altri elementi di design, non include immagini, testo, ecc. Tuttavia, ciascuno degli elementi wireframe è mostrato in scala reale. La ragione di ciò è che i wireframe hanno lo scopo di focalizzare la tua attenzione sulla struttura, non sul design reale. Un po 'come i progetti per una casa o un edificio: hai un'idea chiara della struttura e del posizionamento di tutto, senza essere distratto dal design.

I prototipi cadono tra wireframe e un'app completamente funzionale. La parte più importante di un prototipo è l'uso dell'animazione, che ti consente di esaminare come la tua app risponderà all'interazione dell'utente e alle transizioni di pagina o schermo. I prototipi possono anche includere immagini reali, set di icone e testo, ma ciò è determinato dallo scopo del prototipo. Se stai solo testando le interazioni e il flusso dello schermo, puoi creare un prototipo che includa solo animazioni e forse un po 'di colore. Se stai cercando di convalidare la tua idea o di presentare una presentazione a potenziali investitori, vuoi che il tuo prototipo sia più lucido, utilizzando immagini, testo, ecc.

Sebbene gli strumenti che ho incluso in questa carrellata rendano più semplice la creazione di prototipi, inclusi più elementi oltre all'animazione e un tocco di colore significa che hai bisogno di più tempo per apportare eventuali modifiche al prototipo.

1. Balsamiq

Se sei interessato solo a mettere insieme un wireframe della tua idea di app, Balsamiq è lo strumento che fa per te. Disponibile sia come applicazione desktop che web, Balsamiq è in circolazione dal 2008.

I wireframe richiedono pochissimo sforzo e tempo, quindi Balsamiq è progettato per aiutarti a creare wireframe rapidamente. Aggiungi semplicemente gli elementi di base di cui hai bisogno, quindi ridimensiona, posiziona e personalizza secondo necessità. I wireframe che crei con Balsamiq sembreranno un po 'ruvidi, ma è intenzionale. Il team creativo dietro lo strumento crede che un wireframe che assomiglia più a uno schizzo incoraggia il brainstorming. Che è una grande ragione per il wireframing in primo luogo.

Il semplice controllo della versione ti aiuterà a tenere traccia di dove hai iniziato e dove ti trovi ora. E solo perché questo è un wireframe non significa che non puoi ricevere input da potenziali utenti / clienti. Non è possibile creare un prototipo completamente interattivo utilizzando Balsamiq, ma è possibile collegare le schermate / pagine create per generare un semplice prototipo di click-through. Nessuna animazione o interazione: lo scopo è esclusivamente quello di dimostrare il flusso.

E se Balsamiq sembra un po 'troppo limitato, puoi sempre aggiungere qualsiasi estensione, modello e pacchetto di icone creati dalla comunità.

Balsamiq è disponibile come app desktop, al prezzo di $ 89 / utente, un'app basata sul Web a partire da $ 12 / mese o un'app collegata a Google Drive, al prezzo di $ 5 / utente / mese. Ma puoi iniziare prima con una prova gratuita, per vedere se è lo strumento giusto per te.

2. WireframePro

Sebbene una licenza MockFlow includa l'accesso a otto diverse app, è WireframePro che ti interesserebbe quando inizi a sviluppare la tua app. Anche in questo caso è un'app basata sul Web, con un'interfaccia drag and drop per creare senza sforzo un wireframe.

Viene fornito con tutti gli elementi dell'interfaccia utente standard, insieme a una moltitudine di altri componenti di cui potresti aver bisogno, inclusa una selezione per smartwatch Apple e Android. L'app ti dà anche accesso al Mock Store, che offre un'ampia selezione di modelli di terze parti che puoi utilizzare come ispirazione o come punto di partenza rapido per il tuo wireframe.

Come con tutti gli strumenti elencati qui, WireframePro è progettato per individui e team, con strumenti di collaborazione integrati. Una buona inclusione è la capacità di generare automaticamente le specifiche per ogni elemento, quindi se non stai facendo il lavoro di progettazione da solo, il tuo designer avrà facile accesso a tutti i dettagli relativi al design.

Infine, quando condividi uno dei tuoi progetti, puoi assegnare i diritti, limitando alcune persone a essere solo in grado di visualizzare e commentare un progetto, mentre altri potrebbero anche modificarlo.

WireframePro non ha piani gratuiti, ma puoi provarlo per 30 giorni prima di passare a un piano a pagamento. Le licenze partono da $ 19 / mese per un utente e $ 39 / mese per un massimo di tre membri del team.

3. UXPin

Come suggerisce il nome, il team dietro UXPin enfatizza l'UX. Niente di sbagliato in questo, wireframing e prototipazione hanno lo scopo di aiutarti a perfezionare l'UX della tua app. Con UXPin, puoi occuparti sia del wireframing che della prototipazione, quindi non è necessario cambiare strumento.

Come ci si aspetterebbe, UXPin supporta i file sorgente di Sketch e i file Photoshop. Ma ha anche un editor integrato che supporta frammenti di codice CSS, consentendo di personalizzare qualsiasi elemento utilizzato nel wireframe e nel prototipo. E UXPin rende semplicissimo tenere traccia di ogni iterazione di ogni file che aggiungi o crei, così non dovrai fare clic su dozzine di file alla ricerca della versione originale.

La creazione di wireframe e prototipi di base è semplice e veloce, con tutte le interazioni standard dei prototipi disponibili. Naturalmente, puoi comunque creare interazioni personalizzate in caso di necessità. E una volta che il tuo prototipo è pronto, puoi inviarlo a chiunque per il test, con tutte le interazioni acquisite in video, insieme all'audio dei commenti di ogni tester.

UXPin supporta wireframing e prototipazione di siti Web, app mobili e app Web e viene fornito con 14 punti di interruzione preimpostati, che ti consentono di visualizzare facilmente il tuo progetto su più dispositivi. I prezzi partono da $ 19 / mese per il piano di base e $ 29 / mese per sbloccare funzionalità avanzate.

4. Prott

Sebbene Prott sia marchiato come uno strumento di prototipazione, include anche una funzione di wireframing. Se l'idea della tua app è poco più che schizzi approssimativi, puoi fotografare i tuoi schizzi e importarli direttamente nell'app. Questi schizzi possono quindi essere animati o utilizzati come base per il tuo wireframe. Trascina e rilascia le forme preimpostate e gli elementi dell'interfaccia utente direttamente sul tuo schizzo per passare immediatamente da linee mosse a wireframe lo-fi professionale.

Prott include un gran numero di kit di interfaccia utente per una varietà di dispositivi, da iOS ad Android e web. Ma puoi anche creare la tua libreria di elementi dell'interfaccia.

Invece di condividere semplicemente il tuo prototipo con altre persone, ora puoi persino includere una mappa dettagliata che mostra chiaramente la struttura della tua app. E chiunque condividi il tuo prototipo può commentare direttamente su ogni schermata, quindi è più facile capire a cosa si riferiscono i loro commenti.

Prott offre una prova completa di 30 giorni, con un piano gratuito che non ha limiti oltre al numero di progetti che puoi creare. Se devi creare più progetti, puoi passare a un piano Starter o Pro, al prezzo di $ 19 / mese.

5. InVision

InVision è esclusivamente per la prototipazione, ma con supporto per una varietà di usi. Con InVision puoi creare rapidamente prototipi interattivi del tuo sito web, app web o app per dispositivi mobili e quindi visualizzare il prototipo su dispositivi reali. E questo include tablet e dispositivi indossabili, non solo telefoni cellulari.

Il processo è semplice come:

  • Aggiungi le tue risorse di progettazione (InVision supporta GIF, PNG, JPEG, PSD e file sorgente di Sketch) tramite trascinamento della selezione o sincronizzando con Dropbox.
  • Disegna gli hotspot su ogni risorsa e impostali per collegarli ad altre risorse, URL esterni o ancoraggi.
  • Aggiungi interattività sotto forma di gesti (tocco o scorrimento), aree fisse (barra dei menu, ecc.) E transizioni.

Una volta terminato, puoi visualizzare il progetto sul tuo telefono, tablet o computer, o anche SMS o e-mail un collegamento ad amici e colleghi. Questo ti rende più facile coinvolgere altre persone nel processo di progettazione, con chiunque a cui invii un link in grado di commentare ogni progetto.

I prezzi per InVision partono gratuitamente per un prototipo, $ 25 / mese per prototipi illimitati e $ 99 / mese per team fino a 5 membri.

6. Meraviglia

Come InVision, l'app Marvel è per la prototipazione. Include il supporto standard per i file Sketch e Photoshop, oppure puoi utilizzare il loro strumento di progettazione Canvas integrato. Marvel ha anche un'app per iOS e Android che ti consente di fotografare i tuoi scarabocchi e disegni e caricarli direttamente nella tua libreria Marvel.

È facile creare hotspot sui tuoi progetti, con dozzine di interazioni e transizioni di schermo disponibili per dare vita al tuo prototipo. E puoi testare il tuo prototipo su una moltitudine di schermi, incluso Apple Watch.

Ovviamente, nessuno strumento di prototipazione vale la pena discutere se non include la collaborazione. E con Marvel puoi annotare il tuo prototipo per evidenziare aree specifiche su cui vuoi che le persone commentino. I commenti possono essere fatti da chiunque invii il tuo prototipo, senza che sia necessario creare prima un account Marvel.

I prezzi su Marvel partono da $ 0 / mese per un utente e fino a due progetti, ma con funzionalità limitate. Per $ 14 / mese ottieni progetti illimitati e tutte le funzionalità, con prezzi separati per team e clienti aziendali.

7. Proto.io

Proto.io è un popolare strumento di prototipazione che ha ricevuto un enorme aggiornamento nel 2016. Proto.io include tutte le funzionalità richieste in uno strumento di prototipazione, ma l'aggiornamento ha anche portato una serie di funzionalità semplificate.

Insieme a un'interfaccia utente ridisegnata che rende tutte le funzionalità principali più accessibili, Proto.io ha anche posto molta enfasi sull'animazione. Il movimento è una caratteristica importante delle app mobili e la funzione Transizioni di stato di Proto.io rende facile per chiunque creare e personalizzare le animazioni nel proprio prototipo.

Proto.io ha anche introdotto una libreria di modelli di progettazione dell'interazione, che semplifica l'aggiunta di interazioni. Questi modelli includono interazioni come menu a scorrimento e pull per aggiornare. Tutto quello che devi fare è aggiungere un'interazione al tuo progetto e personalizzarlo.

La nuova versione di Proto.io estende la possibilità di consentire agli utenti di testare e commentare il tuo prototipo. Si integra con piattaforme di test utente come Validately e UserTesting, dandoti accesso a un pool più ampio di utenti reali. E con l'integrazione Lookback, ottieni registrazioni illimitate - solo su iOS, per ora - che ti mostrano come gli utenti interagiscono e navigano attraverso la tua app.

Proto.io offre una prova completa di 15 giorni, dopodiché puoi passare a un account gratuito molto limitato. I piani a pagamento partono da $ 29 / mese, a seconda delle dimensioni del tuo team.

Conclusione

Quando hai appena iniziato a sviluppare app, potresti voler creare sia wireframe che prototipi della tua idea di app. Ma man mano che ti senti più a tuo agio con il processo di sviluppo, puoi considerare di fare solo l'uno o l'altro.

Poiché i wireframe sono così semplici nel design, ti costringono a concentrarti sull'ottenere il flusso e l'esperienza utente giusti. I prototipi possono aiutarti a perfezionare sia il flusso che la UX, evidenziare eventuali difetti di progettazione e, cosa più importante, avere un aspetto migliore dei wireframe se devi presentarli a clienti o investitori. E anche se potresti essere tentato di accontentarti di uno strumento che combini sia wireframing che prototipazione, il fattore decisivo dovrebbe sempre essere quale strumento includa tutte le funzionalità di cui hai effettivamente bisogno ed è più comodo da usare. E poiché ciascuno degli strumenti qui elencati offre un piano o una prova gratuiti, perché non passare una giornata a provarli tutti prima di prendere una decisione?