Moqups: una panoramica e una recensione

Come fai a sapere che un'idea è grande o terribile senza testarla?

Wireframing, mockup e prototipazione sono parti necessarie del design digitale. La visualizzazione dei tuoi concetti ti consente di simulare i tuoi progetti, provare diverse esperienze utente e testare vari percorsi e flussi dell'utente prima di realizzare qualsiasi cosa.

In passato, i designer avrebbero dovuto stampare i loro progetti e presentare al cliente un PDF. Oggi esistono strumenti per aiutarti a trovare e risolvere le sfide di progettazione prima che un progetto diventi pubblico; elaborare le componenti estetiche e tecniche di un progetto; e testare l'esperienza prima di chiunque altro.

Semplificherai anche la tua relazione con il cliente: se assume qualcosa (e lo farà), puoi affrontarlo nelle prime fasi invece di sentire "Oh, pensavo che..." più tardi, quando è troppo tardi .

Moqups è uno strumento di progettazione basato sul Web che può aiutarti a creare wireframe, prototipi e prototipi in un unico ambiente. Puoi navigare tra i progetti e portare il tuo design da bassa fedeltà (fasi iniziali e schizzi) ad alta fedeltà (più completo e dettagliato). In questo post faccio un giro e ti mostro com'è quel processo in ogni fase del processo, inclusi i miei pensieri finali alla fine del post.

Cosa puoi fare con i Moqups?

Esistono numerosi design che puoi realizzare con Moqups: diagrammi, diagrammi di flusso, mappe del sito, wireframe, prototipi, grafici e diagrammi. Esaminiamoli.

Noterai che non parlo specificamente di prototipazione qui. C'è una ragione per questo, e la toccherò più tardi.

Diagrammi e diagrammi di flusso

Quasi tutti i progetti di web design iniziano con un diagramma, un diagramma di flusso o una mappa del sito e i membri del team tendono a tornarci sopra come riferimento lungo il percorso. Con Moqups puoi creare tutti i tipi di diagrammi:

• Diagrammi concettuali
• Alberi decisionali
• Diagrammi di flusso con le interazioni dell'utente
• Diagrammi di flusso per flussi di lavoro software
• Mappe mentali
• Sitemap
• Diagrammi di casi d'uso

Con gli stencil per diagrammi di flusso, puoi ottenere un vantaggio su tutti i tipi di diagrammi. Puoi anche utilizzare un Diagram Extender per evolvere un flusso in base alle tue esigenze. Inoltre, puoi modificare l'aspetto del diagramma per personalizzarlo.

Wireframe e mockup

Con i wireframe , il tuo team può capire cose come la gerarchia delle informazioni, la densità delle pagine e il flusso degli utenti all'inizio di un progetto. Forme semplici e testo segnaposto sostituiscono gli elementi di design più avanzati che aggiungerai in futuro. Non devi ancora preoccuparti del marchio o del design; invece, devi solo preoccuparti della struttura e dei requisiti chiave del sito web.

Con i prototipi , il tuo team può ottenere feedback nelle prime fasi della progettazione. Costruirai sullo schizzo del wireframe per visualizzare il contenuto e dimostrare come funzionerà in un modo molto semplice. Il design viene contestualizzato per renderlo migliore e per visualizzare il risultato finale. Invece di vedere un design su una pagina, i clienti possono vedere come apparirà il design sul loro sito web o app.

Crea nell'ordine che preferisci

La bellezza di Moqups è che puoi rimbalzare avanti e indietro tra i wireframe e i prototipi come preferisci, e non devi necessariamente crearne uno prima dell'altro. Ad esempio, puoi iniziare in modo tradizionale, con un wireframe e poi un mockup. Puoi quindi tornare al wireframe per apportare le modifiche di cui ti sei reso conto di aver bisogno durante la valutazione del mockup. Oppure, puoi prima creare un mockup, quindi passare alla fase di wireframing per capire i dettagli. Puoi anche saltare completamente il mockup e creare un prototipo a bassa fedeltà da un wireframe.

Grafici e grafici

Se hai bisogno di presentare le informazioni visivamente al tuo team, ai clienti o agli investitori, Moqups ti consente di creare tutti i tipi di grafici e grafici:

• Grafici ad area
• Grafici a barre
• Istogrammi
• Grafici a ciambella
• Grafici a linee
• Grafici a torta

Caratteristiche Moqups

Ecco le caratteristiche principali di Moqups, seguite da un breve elenco di vantaggi aggiuntivi.

Libreria integrata con grafica e caratteri

• La libreria integrata include migliaia di set di icone. Ci sono anche stencil pronti all'uso che sono stati progettati per casi d'uso popolari, oltre a kit di stencil personalizzati per la progettazione di app mobili Android e iOS.
• Allinea, ridimensiona, ruota o applica uno stile agli oggetti. Puoi anche modificare in blocco, raggruppare, bloccare e rinominare gli elementi. È possibile effettuare regolazioni precise con guide, griglie e righelli personalizzati.
• Google Fonts è integrato in modo da poter scegliere tra centinaia di caratteri. I controlli avanzati ti consentono di modificare il testo in modo che corrisponda ai tuoi progetti. (Vuoi imparare come scegliere i migliori caratteri per i loghi? Abbiamo un articolo per questo.)

Organizza i tuoi progetti

• Trascina e rilascia le tue pagine per riordinarle o organizzarle in cartelle.
• Il pannello delle pagine semplifica la ricerca e la navigazione tra le cartelle.
• Con le pagine master, puoi applicare automaticamente le modifiche a tutte le pagine associate.

Integrazioni e Collaborazione

• Moqups ha integrazioni con strumenti come Dropbox, Google Drive e Slack.
• Il tuo team può collaborare mentre lavora da remoto grazie al cloud (e qui ci sono anche altri modi per chattare con il tuo team).
• Ottieni feedback direttamente sul design stesso e apporta modifiche senza dover inviare varie versioni l'una all'altra.

Altre caratteristiche

• Editor drag-and-drop facile da usare (i principianti possono sperimentare una curva di apprendimento, ma non è importante)
• Carica le tue immagini
• Allineamento a scatto durante l'allineamento degli elementi
• Scala senza perdere qualità
• Esporta il tuo lavoro come PDF o PNG

Utilizzo di Moqups

Mi inserisco subito per raccontarvi la mia esperienza con Moqups. C'è molto da fare - non è fonte di confusione, c'è solo molto da fare - quindi parlerò delle funzionalità con cui ho giocato che ho pensato fossero interessanti o utili. Alla fine dell'articolo, ti darò i miei pensieri e sentimenti generali su Moqups, inclusi gli svantaggi comuni e per chi è meglio.

Iniziare con Moqups

Configurare Moqups è semplicissimo e ti suggerisco di iniziare con l'account gratuito (ne parlerò più avanti nella sezione Prezzi).

Creare un disegno

Mi piace molto l'editor drag-and-drop. In alcuni editor, fai clic su un elemento e questo appare immediatamente nel progetto, quindi può essere una seccatura eliminarlo. Moqups mi fa sentire come se avessi un po' più di controllo su ciò che aggiungo e mi consente di esplorare le opzioni senza preoccuparmi di fare clic accidentalmente su qualcosa e aggiungerlo senza rendermene conto. Inoltre, mentre trascini un elemento nel tuo progetto, puoi vedere come apparirà e poi rimetterlo a posto se decidi di non volerlo.

Lavorare con un Design

Quando passi con il mouse sui diversi elementi del tuo design, appare un contorno blu per mostrarti i diversi elementi della pagina. Per lavorare con un elemento, fare clic per selezionarlo. Si aprirà un menu sulla destra con opzioni personalizzate.

Colori del progetto

Mi piace la parte "Colori del progetto" del selettore di colori. Ciò ha reso facile abbinare il colore del cuore nell'angolo in alto a sinistra con il colore del testo.

Salvataggio di elementi come modelli

Una caratteristica utile di Moqups è che puoi salvare elementi come modelli, quindi aggiungerli facilmente ad altre pagine così come sono. Il design originale verrà mantenuto: colore, dimensione, ecc. Questo aiuta a creare continuità nel tuo design.

Funzionalità di collaborazione

Se sei un utente di Google Drive, i commenti avranno un aspetto e si comporteranno in un modo che conosci. Aggiungere un commento è semplicissimo e puoi spostare il commento prima o dopo averlo scritto in modo che il suo posizionamento abbia senso.

Se hai molti collaboratori e commenti, però, quel piccolo riquadro dei commenti può sfuggire di mano velocemente. Potresti voler creare una regola per il tuo team che i commenti siano contrassegnati come risolti quando non sono più necessari.

Prezzi Moqups

Con il piano gratuito, puoi realizzare un progetto che include fino a 200 oggetti. Questo è un aspetto da considerare quando si sceglie tra lavorare con un documento vuoto e utilizzare un modello. Ho optato per il modello Landing Page Wireframe, che ha utilizzato immediatamente 125 dei 200 oggetti. Posso entrare ed eliminare alcuni oggetti, ovviamente, ma per alcune persone potrebbe avere più senso iniziare da zero.

L'unica cosa per cui il piano gratuito è utile è testare Moqups perché è probabile che non avrai un solo progetto da progettare. Il prezzo parte da $ 13 al mese, pagato annualmente. Ogni piano ti consente di creare progetti illimitati e utilizzare oggetti illimitati, quindi la considerazione principale è quante persone utilizzeranno Moqups.

A meno che tu non sia un team di progettazione composto da uno, vorrai il pacchetto Creative Team. Più persone aggiungi, minore è il costo per utente. Ad esempio, se hai 50 utenti, il costo è di $ 3 per utente per un totale di $ 149 al mese (pagato annualmente).

Alcuni potrebbero ritenere che il prezzo di Moqups sia un ottimo affare, mentre altri penseranno che sia troppo costoso. Dipende da quanto lo userai e dal valore che ne ricaverai.

PS Con il piano gratuito, non è necessaria alcuna carta di credito: se vuoi provarlo e poi decidere che non fa per te, non dovrai ricordarti di annullare prima di essere addebitato.

Punti deboli Moqups

• Il più grande svantaggio di Moqups è che non puoi usarlo offline. D'altra parte, il fatto che sia basato su browser è super conveniente per alcune persone.
• Se hai esigenze di prototipazione avanzate o sei pignolo per le funzionalità, questo probabilmente non è lo strumento per te.
• Ho letto recensioni che dicono che Moqups può essere lento, impiegare molto tempo per caricarsi e persino spegnersi inaspettatamente, ma non ho riscontrato nulla di tutto ciò. Tuttavia, è qualcosa da tenere d'occhio mentre aggiungi contenuti avanzati e crei pagine aggiuntive. Non avevo foto o video nel mio progetto, quindi questo potrebbe aver contribuito a mantenere le cose veloci. Se i tuoi progetti conterranno molti elementi ricchi, approfitta del piano gratuito per testarlo.

Per chi è il migliore Moqups?

Moqups è ottimo per i non sviluppatori da concettualizzare durante le prime fasi della pianificazione del progetto. Ad esempio, un imprenditore o un project manager può trasmettere la propria idea al team di sviluppo e progettazione, che utilizzerà quindi metodi più avanzati per creare il prodotto reale o un rendering ad alta fedeltà.

Moqups è particolarmente utile per prototipi e wireframing, ma non è così forte quando si tratta di prototipazione. Moqups non ha tante funzionalità come altri strumenti di prototipazione e gli elementi di stile non possono essere personalizzati in tanti modi come gli strumenti della concorrenza. È a malapena menzionato sul loro sito web.

Pensieri finali

Nel complesso, mi è piaciuto usare Moqups e vorrei saperlo quando ho progettato il mio sito Web perché è molto più realistico del design con carta e penna che ho abbozzato. Ha funzionato come dice, e anche con molte opzioni, niente era troppo difficile da capire. Se hai mai lavorato con qualsiasi tipo di strumento di progettazione grafica - e immagino che tu l'abbia fatto - questo non sarà difficile da imparare. Puoi usarlo per la prima volta e finire un progetto entro la fine della giornata (o la fine dell'ora), quindi puoi tornare indietro ed esplorare tutte le opzioni che ti sei perso la prima volta.

Il punto degli strumenti di visualizzazione è ottenere un prodotto finale, giusto? Dai un'occhiata alla nostra vetrina di design Divi con il lavoro della nostra fantastica community.

Immagine in primo piano tramite Visual Generation / shutterstock.com