I migliori strumenti di wireframing per la tua app

Pubblicato: 2018-03-23

Ti abbiamo creato un elenco di strumenti di wireframing che possono aiutarti a rendere meno intimidatoria la creazione della tua app o del tuo sito web. Se stai cercando un ottimo strumento per prototipi , abbiamo incluso anche alcuni suggerimenti per quelli.

La creazione di una nuova app o di un sito Web è un'impresa rispettabile che non molti realizzeranno nella loro vita. Questo non significa che dovresti rinunciare a farlo, ma piuttosto che dovresti ricercare e capire tutto prima di tuffarti a capofitto. Molti principianti hanno difficoltà a capire la differenza tra wireframe, prototipo e mockup, quindi questo post è qui per aiutarti a capirli.

INDICE

COS'È UN WIREFRAME?
I MIGLIORI STRUMENTI DI INFILATURA DEL 2018
COS'È UN PROTOTIPO?
I MIGLIORI STRUMENTI DI PROTOTIPAZIONE DEL 2018
CREA MODELLI DEL TUO PRODOTTO

COS'È UN WIREFRAME?

Hai un'idea geniale per una nuova app o sito Web, ma come inizi a trasformarla in un prodotto reale? Con un wireframe! Questo è il primo passaggio del processo di pianificazione, quindi è importante non saltarlo.

Nozioni di base su Wireframe

Prima di prendere qualsiasi decisione progettuale importante, la tua app o il tuo sito web avrà bisogno di un layout funzionale che abbia senso. È qui che entra in gioco il wireframe. La maggior parte delle persone inizia facendo uno schizzo disegnato a mano di come vogliono che assomigli alla loro app o al loro sito web. Il passaggio successivo consiste nel trasformare questo schizzo in un layout o contorno digitale che sembri più organizzato e professionale.

Il tuo wireframe dovrà comunicare la struttura di base della pagina senza includere alcun elemento di design o contenuto reale.

Lavorare attraverso il wireframe prima di iniziare ad abbellire qualsiasi cosa ti consentirà di cogliere eventuali errori di usabilità che sarebbero difficili da affrontare in seguito. In questa fase, è più importante garantire che gli elementi inclusi abbiano un senso e siano funzionali, soprattutto per il tuo pubblico di destinazione. Se stai cercando di attirare l'attenzione degli investitori, un wireframe li aiuterà anche a capire il tuo prodotto molto più facilmente. In effetti, non avere almeno un wireframe pronto può far perdere interesse agli investitori molto rapidamente. Gli elementi inclusi in un wireframe tendono ad essere riquadri per titoli, pulsanti, riquadri di testo e riquadri immagine.

Wireframe contro Mockup

È facile confondere un wireframe con un mockup perché contengono elementi molto simili. Tuttavia, quando lavori con un team di sviluppatori, designer e investitori, dovrai capire cosa li distingue.

Per iniziare, viene utilizzato un wireframe per organizzare il contenuto e le funzionalità della tua app , ma in modo molto semplice. Pensalo come uno schema che mostra la struttura di base di ciò che sarà incluso nella tua app. Una volta che inizi ad aggiungere altri elementi, come colore, icone, immagini, caratteri e foto, inizierà a trasformarsi in un mockup.

Un mockup fornisce una rappresentazione a media fedeltà della tua app o del tuo sito Web in fase di sviluppo. È una rappresentazione molto più realistica di ciò in cui viene modellata la tua app. Pensa a questo passaggio del processo come ad aggiungere un po' di sostanza al tuo wireframe barebone o dargli un po' più di vita.

I MIGLIORI STRUMENTI DI INFILATURA

BALSAMIQ
MOCKPLUS
MOQUP
WIREFRAME.CC
MOCKFLOW

BALSAMIQ

Disponibile per tutti i sistemi operativi perché basato sul web.

Caratteristiche principali: Balsamiq è uno strumento di wireframing altamente raccomandato che consente agli utenti di creare wireframe per app desktop, app mobili, siti Web, finestre di dialogo, app Web, app per tablet e altro . Creare il tuo wireframe tramite Balsamiq è simile a disegnare su una lavagna e il programma ti consente anche di trascinare e rilasciare elementi dell'interfaccia utente, ottenere feedback sugli schizzi dal tuo team, rivedere i progetti e perfezionare il tuo lavoro in tempo reale.

Prezzo: Il prezzo di questo strumento varierà a seconda di un numero di situazioni. Puoi iniziare con una prova gratuita di 30 giorni, dopodiché dovrai pagare canoni mensili o annuali a seconda della piattaforma scelta. Ad esempio, la versione cloud ti costerà $ 9 al mese o $ 90 all'anno per un massimo di due progetti. La versione desktop ti costerà $ 89 per una licenza per utente singolo.

Bonus: Balsamiq offre corsi gratuiti disponibili tramite Udemy e Skillshare per aiutarti a imparare come utilizzare il loro prodotto e ottenere i migliori risultati da esso.

MOCKPLUS

Disponibile per Mac OS, Windows, Android e iOS.

Caratteristiche principali: poiché i progetti possono essere collegati all'archiviazione su cloud, MockPlus consente a un intero team di collaborare facilmente a un singolo progetto. Gli utenti possono commentare direttamente il progetto e contrassegnarlo affinché gli altri lo vedano. Puoi anche inviare e-mail di notifica al tuo team per rimanere in contatto sulle modifiche. La parte migliore è che puoi fare tutto questo senza codificare o programmare, quindi è più facile concentrarsi sul lavoro di fronte a te.

Prezzi : è disponibile un'opzione gratuita per utenti singoli che include prodotti illimitati, sebbene sia limitata in altri aspetti. Successivamente, il prezzo varierà da $ 199 all'anno per un individuo a $ 2999 all'anno per un'impresa. Puoi anche acquistare una licenza, che andrà da $ 399 per un singolo utente a $ 5999 per un'azienda (30 utenti).

Bonus: il più grande vantaggio di MockPlus è che consente agli sviluppatori di creare wireframe a una velocità maggiore grazie agli strumenti che hanno progettato per accelerare il processo.

MOQUP

Disponibile per tutti i sistemi operativi poiché è basato sul web.

Caratteristiche principali: Moqups è una piattaforma basata sul Web che può essere utilizzata per creare wireframe per app Web e app mobili per iOS, Android e Bootstrap. Poiché la piattaforma è basata sul Web, hai la possibilità di connetterti e lavorare da qualsiasi luogo. La piattaforma non è solo per wireframe, puoi anche creare diagrammi e prototipi. Puoi facilmente trascinare e rilasciare elementi, utilizzare i loro kit di stencil, scegliere tra diversi tipi di carattere, selezionare oggetti e trascinare e rilasciare le tue immagini in qualsiasi cosa su cui stai lavorando.

Prezzi : come la maggior parte degli strumenti di wireframing, Moqups offre una prova gratuita. Successivamente, il prezzo dipenderà da una serie di fattori. Ad esempio, un abbonamento annuale che include progetti, oggetti, spazio di archiviazione e commenti illimitati costerà $ 13 al mese per un singolo utente e $ 19 al mese per un team creativo (3 persone). Dovrai contattare direttamente Moqups per ottenere un preventivo per un account Enterprise.

Bonus: se fai parte di una ONG, di una scuola o di un'organizzazione no-profit, Moqups ti darà un account Premium senza alcun costo.

WIREFRAME.CC

Disponibile su tutti i sistemi operativi poiché è basato sul web.

Caratteristiche principali: Wireframe.CC è considerato uno degli strumenti wireframe più basilari disponibili. Non è necessariamente una cosa negativa, soprattutto se sei un principiante. In effetti, a causa del suo design semplice, gli sviluppatori potrebbero trovare più facile concentrarsi sul proprio lavoro. Questo programma basato sul Web può essere utilizzato per wireframe di finestre del browser, app mobili o app per tablet.

Prezzi : Wireframe.CC offre una prova gratuita di 7 giorni e un account di base gratuito. Dopodiché, costerà $ 16 al mese o $ 144 all'anno per uso singolo, $ 439 al mese o $ 390 all'anno per tre utenti, o $ 99 al mese o $ 990 all'anno per un'azienda (utenti illimitati).

Bonus: la semplicità di questo programma rende difficile distrarsi e procrastinare. In effetti, gli elementi dell'interfaccia utente appariranno come opzioni solo quando necessario.

MOCKFLOW

Disponibile come app desktop per Mac OS e Windows o come app Web.

Caratteristiche principali: questo programma può essere utilizzato per progettare app Web, app mobili, interfacce e software tra le altre opzioni. Offrono pacchetti di componenti per l'interfaccia di tua scelta al fine di semplificare il tuo lavoro. MockFlow offre anche funzionalità di collaborazione che consentono a tutti i membri del tuo team di vedere le modifiche in tempo reale, consentendoti anche di fare commenti annotati affinché tutti possano vederli. Puoi esportare i tuoi file in un gran numero di formati, inclusi DOC, PDF e HTML.

Prezzi : un account di base, che include un utente e un massimo di progetto in ogni strumento, è gratuito. Un account premium per un utente costa $ 14 al mese. Il suo unico aspetto negativo sono le restrizioni di condivisione. Un pacchetto team per tre utenti costa $ 29 al mese, ma puoi aggiungere utenti a questo account a un costo aggiuntivo. Un account aziendale non ha limiti in termini di utenti e ti costerà $ 160 al mese.

Bonus: uno dei vantaggi dell'utilizzo di MockFlow è il loro MockStore, che vende modelli di interfaccia utente per tutti i tipi di interfacce. Se non ti senti ispirato, puoi sfogliare il loro negozio alla ricerca di idee o persino acquistare un modello.

COS'È UN PROTOTIPO?

Un prototipo non è ancora il prodotto finito, ma dovrebbe essere molto simile ad esso in termini di aspetto e funzionalità generale. Questo prototipo ad alta fedeltà della tua app o del tuo sito web dovrebbe essere utilizzato per testare il tuo prodotto e ricevere feedback dagli utenti per aiutarti a migliorare eventuali problemi che potrebbero sorgere.

Nozioni di base sui prototipi

Un prototipo di solito arriva alla fine del processo di progettazione e funge da ponte verso il prodotto finale. In questa fase, i designer potranno mostrare il loro lavoro e usarlo per ottenere un feedback utile. Il prototipo non dovrebbe includere solo elementi di design, ma dovrebbe anche dimostrare come funzionerà il progetto una volta completato.

Un prototipo potrebbe non includere tutte le animazioni e le interazioni del progetto finale, ma dovrebbe essere in grado di dimostrare come scorrerà l'app. Permettendoti di testarne le prestazioni.

Puoi fare in modo che gli utenti lo provino e ti forniscano feedback per migliorare l'esperienza utente. Potresti sentirti come se stessi utilizzando una vera app, ma un prototipo è solo una raccolta di immagini collegate tra loro. Questi tipi di prototipi, prototipi interattivi, sono ideali perché puoi vedere il progetto finito mentre interagisci con esso. La creazione di un buon prototipo interattivo può richiedere tempo e denaro, ma vale sicuramente la pena investire.

I MIGLIORI STRUMENTI DI PROTOTIPIATURA

PROTO.IO
MARVELAPP
PROT
AXURA RP
INVISIONE

PROTO.IO

Disponibile per Mac OS e Windows.

Caratteristiche principali: lo slogan di Proto.io è " Prototipi che sembrano reali" e con buone ragioni. Il loro prodotto consente ai designer di creare prototipi ad alta fedeltà il più vicino possibile alla realtà. Può essere utilizzato per creare prototipi per app mobili e app Web. Il loro strumento di registrazione dello schermo consente al tuo team di vedere esattamente come il tuo pubblico interagisce con il prototipo e la modalità offline ti consente di interagire con il prototipo senza una connessione Internet, tutto questo senza dover scrivere una singola riga di codice.

Prezzi : puoi iniziare la tua esperienza con Proto.io con una prova gratuita di 15 giorni e poi avere la possibilità di ottenere un account gratuito, anche se è piuttosto limitato. Gli account a pagamento vanno da $ 24 al mese (abbonamento annuale per un utente che include 5 progetti) a $ 160 al mese (abbonamento annuale, 10 utenti e include 30 progetti attivi).

Bonus: alcuni dei loro strumenti più recenti includono animazioni vettoriali che puoi importare tu stesso o scegliere dalla loro libreria di animazioni vettoriali. Di recente hanno anche introdotto una libreria di componenti VR che consente di integrare facilmente 360 immagini.

MARVELAPP

Disponibile come app Web per Mac OS, iOS, Android e Windows.

Caratteristiche principali: MarvelApp è un ottimo strumento di prototipazione per designer con un'esperienza minima. La sua semplice interfaccia può sembrare piuttosto semplice, ma fa parte del suo fascino. Non solo è un buon punto di partenza per i nuovi designer, ma offre anche i risultati professionali che i designer più esperti stanno cercando. Marvel rende facile rimanere al passo con le modifiche, i nuovi commenti e i progressi grazie all'opzione per importare la tua squadra da Slack o Asana. Sebbene sia un'app, puoi utilizzarla per creare prototipi per il Web o per dispositivi mobili.

Prezzi : MarvelApp è disponibile gratuitamente per un singolo utente e include due progetti. I loro abbonamenti a pagamento partono da $ 12 al mese per un singolo utente, progetti illimitati, prototipi protetti da password e la possibilità di scaricare i tuoi prototipi.

Bonus: MarvelApp funziona su tutti i dispositivi iOS, il che significa che puoi visualizzare rapidamente e facilmente il tuo lavoro su iPhone, iPad, Apple Watch e persino Apple TV.

PROT

Disponibile come app iOS e Android.

Caratteristiche principali: lavorare su un'app mobile per creare un prototipo può sembrare un po' limitante, ma Prott dimostra che non è necessario. In effetti, questa piattaforma è ricca di funzionalità e strumenti che possono essere utilizzati per creare modelli di interfaccia utente, prototipi di software desktop, layout di siti Web, wireframe interattivi e prototipi. Se lavori con un team ampio, Prott semplifica la condivisione delle modifiche con loro e il feedback in tempo reale.

Prezzi : Prott offre una prova gratuita che si trasforma in un abbonamento gratuito al termine del periodo di 30 giorni. Questa opzione è per un singolo utente e un singolo progetto. I loro piani a pagamento partono da $ 19 al mese per un singolo utente, tre progetti, schermi illimitati e revisori illimitati.

Bonus: la piattaforma Prott ti consente di lasciare commenti in qualsiasi punto del progetto, aiutandoti a comunicare con il tuo team in modo molto più semplice e chiaro. I membri del tuo team possono rispondere direttamente ai tuoi commenti, assicurandoti che nulla si perda lungo il percorso.

AXURA RP

Disponibile per Mac e Windows.

Caratteristiche principali: Axure RP è considerato uno degli strumenti più completi per la prototipazione , quindi non sorprende quanti utenti abbiano. Sebbene sia un'interfaccia molto completa, è un'opzione migliore per chi ha una buona esperienza. Un altro motivo per cui è così noto nel settore è perché è in circolazione da molto tempo ed è lo strumento su cui la maggior parte dei designer ha appreso le proprie abilità nei primi anni 2000. Vale la pena ricordare che avrai bisogno di alcune conoscenze di codifica per ottenere ciò di cui hai bisogno da questo strumento.

Prezzi : puoi iniziare con una prova gratuita di 30 giorni. Successivamente, gli abbonamenti partono dal livello Pro per $ 29 al mese per utente e arrivano fino a $ 99 al mese per utente a livello Enterprise. Le licenze perpetue partono da $ 49 al mese per utente, ma non sono disponibili a livello Enterprise.

Bonus: Axure RP offre ai progettisti la maggior parte delle opzioni rispetto ad altri strumenti di prototipazione. Sebbene la sua interfaccia fornisca la maggior parte delle funzionalità, ha il prezzo di un sistema più complicato. Una volta padroneggiato, Axure RP ti darà ottimi risultati.

INVISIONE

Disponibile su tutti i sistemi operativi poiché è basato sul web.

Caratteristiche principali: InVision è uno strumento ben noto e apprezzato nel settore che consente ai progettisti di realizzare prototipi per Web, iOS e Android. Questa piattaforma è stata progettata pensando a grandi team, quindi la collaborazione è un gioco da ragazzi. È abbastanza facile da usare, devi semplicemente caricare i tuoi file di progettazione e aggiungere elementi come animazioni, gesti e transizioni. Il risultato finale è un prototipo affidabile e ad alta fedeltà.

Prezzi : InVision offre un piano gratuito che include un prototipo attivo, dopodiché i piani a pagamento partono da $ 15 al mese per tre prototipi per un singolo utente. Un abbonamento team per cinque utenti e che include prototipi illimitati costerà $ 100 al mese.

Bonus: InVision ha recentemente rilasciato il suo tanto atteso Studio, che afferma di essere "lo strumento di progettazione dello schermo più potente del mondo". Questo nuovo strumento spera di semplificare il processo tra la progettazione e la creazione di prototipi funzionali. La parte migliore è che è gratis!

CREA MODELLI DEL TUO PRODOTTO

Una volta che il tuo prototipo è pronto e sei tornato per risolvere eventuali problemi riscontrati durante il processo di test, probabilmente ti stai avvicinando alla data di lancio. Ma, prima di andare in diretta, assicurati di avere gli strumenti giusti per commercializzare correttamente la tua app o il tuo sito web . L'utilizzo di modelli che mostrano l'aspetto della tua nuova app o sito Web su dispositivi reali può aiutare ad attirare più attenzione su di esso.

Cos'è un mockup?

In precedenza abbiamo discusso della differenza tra un wireframe e un mockup , ma il tipo di mockup di cui stiamo parlando qui è qualcosa di completamente diverso. Questo tipo di mockup arriva alla fine, una volta che la tua app o il tuo sito Web sono pronti per essere pubblicati. Queste sono fondamentalmente foto che puoi personalizzare con immagini o screenshot del tuo prodotto finale. Ad esempio, puoi fare uno screenshot della tua app e rilasciarlo sullo schermo di un iPhone X.

I mockup sono importanti perché possono essere utilizzati per commercializzare e promuovere la tua app o il tuo sito web. Possono essere utilizzati anche durante la creazione di screenshot della tua app per l'App Store o il Play Store. I modelli di Placeit sono facili da usare e sono disponibili in una vasta gamma. Puoi trovare tutti i tipi di modelli, inclusi modelli di iPhone, modelli di iPad, modelli di MacBook, modelli di browser e modelli di Android.

Mostra il tuo lavoro su un mockup

Probabilmente sei entusiasta di finire finalmente il progetto su cui hai lavorato così duramente per così tanto tempo. Sappiamo che probabilmente non hai un sacco di soldi rimasti per la pubblicità, ed è qui che entrano in gioco i modelli di Placeit. Sono facili da usare, producono fantastiche immagini del tuo prodotto e sono molto convenienti! Non importa cosa stai promuovendo, un'app per iPhone, un'app per iPad o un nuovo sito Web, Placeit ha gli ultimi modelli di gadget che ti coprono!

Se ti è piaciuto questo post, prova questo elenco di 10 strumenti di ottimizzazione dell'app store o dai un'occhiata a 7 suggerimenti per promuovere la tua app.