5 strumenti eccellenti per creare modelli di interfaccia utente per siti Web e app

Sommario:

Video: Wireframe, Mockup, Prototype: elementi dell’UX Design - Enrico Maioli 2024

Video: Wireframe, Mockup, Prototype: elementi dell’UX Design - Enrico Maioli 2024
Anonim

Sia che tu voglia progettare un'app mobile, un software desktop o semplicemente provare a progettare un sito Web, creando UI Mockup, puoi ottenere i primi elementi visivi dei tuoi progetti futuri e anche presentare l'idea di design al cliente in un modo migliore.

La creazione di Mockup dell'interfaccia utente è diversa da Wireframing. Wireframing è come creare un progetto per la tua casa o progetto di ingegneria, mentre la creazione di un Mockup sta arrivando con il design creativo reale (aspetto finale) della casa per i clienti.

Avere accesso a un pratico strumento Mockup ti aiuta nella fase di progettazione dell'interfaccia utente e inoltre velocizza l'intero processo.

Non c'è carenza di strumenti di UI Mockup; tuttavia, con così tante opzioni tra cui scegliere, può diventare confuso su quale sia uno che dovresti iniziare a usare per primo.

Sia che tu sia un professionista che desidera aggiungere più utensili elettrici al suo attuale arsenale o un principiante che prova le sue mani alla progettazione di Mockup per la prima volta, questa guida ti introdurrà ad alcuni dei migliori strumenti per creare Mockup dell'interfaccia utente nel 2019.

Quali sono gli strumenti migliori per creare mockup dell'interfaccia utente?

MockFlow

  • Prezzo - Piano mensile gratuito limitato / Premium di $ 19 - $ 14 per piano annuale per utente al mese

MockFlow è una soluzione premium basata su cloud che offre strumenti Wireframe, Prototyping e UI Mockup per privati ​​e organizzazioni. È disponibile sia in piani gratuiti che premium e può essere utilizzato anche sul tuo PC.

Il prezzo è diviso tra piani annuali e mensili. Rispetto ai piani annuali, i piani mensili non sono solo costosi ma mancano anche alcune funzionalità. Sui piani annuali, non solo ottieni uno sconto equo, ma ottieni anche un servizio gratuito di 3 mesi, accesso offline e power-up.

Per utilizzare lo strumento, è necessario registrarsi con un account gratuito. Gli account gratuiti consentono di creare un progetto in ciascuna app, due revisori per progetto, una selezione limitata di app e nessun supporto. Tuttavia, l'account gratuito fornisce una buona idea sull'usabilità di MockFlow.

MockFlow offre accesso offline su computer con sistema operativo Windows e Mac. Le estensioni MockFlow ti consentono di utilizzare lo strumento con app come Microsoft Office, Google Chrome, Google Docs, Slack, JIRA e altre.

MockFlow ha sei funzioni di base: WireFrame e UI Mockups, Sitemap, StyleGuide, DesignCollab, Annotate Pro e Website Pro. Per creare Mockup dell'interfaccia utente usa la prima opzione WireFrame dalla dashboard e fai clic sull'icona +.

Inizia con la selezione della piattaforma che desideri creare il modello per dispositivi iOS simili, smartwatch, sito Web, app Microsoft, ecc.

La dashboard di modifica è divisa anche in 6 schede. Dalla scheda Elemento è possibile trascinare e rilasciare oggetti pre-progettati come cornice mobile, icone, immagini di sfondo, schede di menu, opzioni di pagamento e altro oppure, se lo si desidera, è possibile iniziare da una pagina vuota.

Gli oggetti sono ulteriormente personalizzabili con un semplice doppio clic. È possibile raggruppare più elementi per facilitare lo spostamento e il ridimensionamento dell'interfaccia utente.

Altre schede nell'editor sono Pagine, per creare più pagine per la stessa app, scheda Immagini, scheda Flusso per aggiungere e controllare lo stato dei progetti, scheda Store e Power-UP per aggiungere più app e modelli.

MockFlow è un eccellente strumento multiuso per creare UI Mockup e altro ancora. Tuttavia, i piani premium significano che è per gli utenti seri che possono utilizzare almeno la metà della funzionalità che ha in offerta.

Prova MockFlow

  • Leggi anche: 10 migliori software di progettazione 3D gratuiti per principianti e utenti avanzati

Balsamiq

  • Prezzo - Versione di prova gratuita di 30 giorni / La versione online inizia a $ 9 al mese / La versione offline inizia a $ 89 di licenza perpetua

Balsamiq è una moderna soluzione basata su cloud per progettisti e sviluppatori dell'interfaccia utente che offre un wireframing rapido, accessibile e collaborativo. Se preferisci una soluzione offline, anche Balsamiq la copre.

Balsamiq offre due versioni dello strumento, l'app desktop online e offline per computer Mac e Windows. La versione offline è un acquisto una tantum che costa $ 89 per un singolo utente. La versione online inizia a $ 9 al mese per utente con spazio per due progetti.

Fortunatamente, puoi registrarti gratuitamente e utilizzare l'app Web per 30 giorni gratuitamente con wireframe illimitati e utenti illimitati in offerta.

La registrazione per l'account di prova gratuito è semplice ma richiede agli utenti di convalidare l'e-mail. Una volta fatto, inizia creando il tuo spazio e assegnagli un nome. Quindi procedi con la creazione del tuo primo progetto.

L'editor di progetto ha un'interfaccia molto semplice e intuitiva. Tutte le proprietà sono ben distribuite sulla barra degli strumenti. Le pagine o i wireframe vengono visualizzati sul lato sinistro ed è possibile aggiungere più pagine facendo clic sull'icona + in alto.

Puoi iniziare trascinando e rilasciando un modello nell'editor o ricominciare da zero utilizzando gli strumenti di modifica di base. Utilizzare l'opzione Altri controlli per cercare altri modelli e icone dalla libreria. Dalle applicazioni desktop e diagrammi alle interfacce hardware e layout, la libreria Balsamiq ha tutto il necessario per creare facilmente un Mockup e Wireframe.

Per modificare le proprietà dell'oggetto, selezionare l'oggetto e le opzioni applicabili verranno visualizzate nel riquadro di destra.

Gli sviluppatori possono invitare i clienti a fare una presentazione inviando un collegamento tramite e-mail. Puoi anche aggiungere i membri del tuo team al progetto e assegnare un ruolo a ciascun membro del team.

Inoltre, Balsamiq offre anche l'integrazione con app aziendali come Google Drive, Confluence e Jira. Le risorse di progettazione dell'interfaccia utente sul sito Web sono utili per utenti esperti e principianti.

Balsamiq è uno strumento eccellente e con una suite di software offline e online è senza dubbio uno dei migliori del settore. Combinalo con una prova gratuita di 30 giorni e avrai abbastanza tempo per valutare lo strumento prima di effettuare un acquisto.

Prova Balsamiq

  • Leggi anche: 8 fantastici software per creare opuscoli e governare il gioco di marketing

MockPlus

  • Prezzo - Versione di prova gratuita / $ 59 all'anno Licenza individuale / $ 199 licenza perpetua / Piano di squadra inizia a $ 299 all'anno

Per chi è alla ricerca di uno strumento flessibile per creare prototipi e prototipi per schermi di ogni dimensione e piattaforma, MockPlus è una buona scelta. È un'applicazione offline ed è disponibile per dispositivi Windows, Mac, Android e iOS.

MockPlus è utilizzato da alcuni dei nomi leader nel settore tecnologico, tra cui Microsoft e IBM. C'è una prova gratuita di 7 giorni per provare lo strumento prima di effettuare un acquisto.

L'interfaccia utente di MockPlus è ben strutturata e sembra moderna. Offre una buona quantità di spazio e non ingombra lo spazio di lavoro con strumenti non necessari. Ha anche un'opzione multi-finestra per utilizzare il software in più finestre per una migliore produttività.

Puoi creare facilmente prototipi interattivi semplicemente trascinando e rilasciando componenti pre-progettati nell'editor. La libreria è dotata di oltre 3000 icone e quasi 200 componenti pre-progettati per iniziare a supportare tutte le funzionalità di trascinamento della selezione.

I prototipi possono essere testati istantaneamente utilizzando il codice QR generato dall'app. Inoltre, i progetti possono essere pubblicati sul Web per ottenere commenti da clienti e membri del team condividendo un collegamento Web al prototipo.

MockPlus eccelle in ciò che fa e le caratteristiche e le funzioni di questo software di prototipazione lo rendono uno strumento ideale per i progettisti di UI e UX indipendentemente dalla loro esperienza.

Scarica MockPlus

  • Leggi anche: 9 software ricco di funzionalità per creare linee temporali interattive su PC

Moqups

  • Prezzo - Prova gratuita / Inizia a $ 19 al mese - Piano personale

Moqups è un'app Web basata su cloud che ti consente di creare wireframe, modelli, diagrammi e prototipi e collaborare in tempo reale con altri membri del team.

È uno strumento premium con account personali e di squadra. La prova gratuita richiede la registrazione di un account e offre 5 MB di spazio di archiviazione con un progetto limitato a 300 oggetti.

L'interfaccia utente è simile a MockFlow, ma gli strumenti e il layout sono diversi. Dopo aver creato un nuovo progetto, puoi trascinare e rilasciare gli elementi dalla scheda Stencil.

Puoi aggiungere più pagine al progetto, personalizzare i contorni, creare modelli, caricare e aggiungere immagini, navigare dalla vasta libreria di icone e aggiungere commenti al progetto.

Gli oggetti possono essere modificati per ridimensionare, ruotare, allineare e stile. La funzione di raggruppamento semplifica il raggruppamento di più oggetti per facilitare gli spostamenti.

Una volta che il Mockup è pronto, puoi esportare in Google Drive, Dropbox o in formato PNG, PDF o HTML locale del tuo computer.

Moqups è uno strumento facile da usare per il wireframing e per creare diagrammi e modelli in pochissimo tempo. Registrati per l'account gratuito e prova lo strumento per vedere se è qualcosa che soddisfa le tue esigenze.

Prova Moqups

Conclusione

Che tu sia un designer professionista dell'interfaccia utente o solo un principiante, è importante sapere quali strumenti utilizzare per creare Mockup dell'interfaccia utente. Se stai cercando solo uno strumento di wireframing, ti consiglierei di provare Wireframes.cc.

È un'app basata sul web con un design minimalista e una manciata di funzionalità per creare wireframe semplici ed efficaci per app o siti Web. Dopo tutto, non è sempre meglio.

Tuttavia, per i progettisti di UX / UI che cercano strumenti Mockup ricchi di funzionalità dovrebbero provare tutti gli strumenti sopra consigliati. Tutti questi strumenti offrono una versione di prova gratuita o un account gratuito di base senza alcuna limitazione per iniziare.

Puoi passare un po 'di tempo con ciascuno di questi strumenti prima di decidere quello che seleziona il maggior numero di caselle nell'elenco che devi avere.

Sapendo che nessuno strumento sarà mai in grado di soddisfare le esigenze di tutti, abbiamo cercato di includere gli strumenti migliori per creare Mockup dell'interfaccia utente in grado di soddisfare la maggior parte delle esigenze dei progettisti.

Facci sapere il tuo software preferito di mockup e wireframing o se pensi che abbiamo escluso una valida alternativa in questo elenco nei commenti qui sotto.

5 strumenti eccellenti per creare modelli di interfaccia utente per siti Web e app