Le migliori risorse per lo sketch di wireframe basati su griglia

Il processo di progettare un'interfaccia inizia sempre con generazione di idee. Ciò include la visualizzazione, la ricerca di altri siti e la prototipazione rapida. Questa fase iniziale delle idee è fondamentale per capire il layout e l'esperienza dell'utente hai intenzione di costruire. Quindi, come dovresti effettivamente eseguire il lavoro di wireframe su un nuovo progetto?

Sono un fan della carta tradizionale e della matita con gli strumenti extra necessari. Ma wireframing digitale è anche grande ed è un'opzione praticabile per i designer moderni. In questo articolo, mi piacerebbe condividere le migliori risorse per entrambe le tecniche per aiutarti a crearne di tue wireframe dell'interfaccia utente basata su griglia.

Concettualizzazione UI / UX precoce

Iniziamo chiarendo le differenze tra a wireframe e a prototipo. Queste due parole sono spesso usate in modo intercambiabile perché si riferiscono allo stesso processo.

UN wireframe è un schizzo statico singolo dell'interfaccia utente di una pagina Web o di un'app. Può avere callout per spiegare il testo, i margini, le dimensioni degli elementi o anche le animazioni del pulsante. Ma i wireframes sono giusti bozze ruvide per le singole pagine.

Allo stesso modo, a prototipo è come un diagramma di flusso che mostra come diverse pagine si collegano tra loro. Quindi un prototipo collega i wireframe per dimostrare come pulsanti o collegamenti diversi dovrebbero condurre ad altre pagine.

Queste definizioni non sono scolpite nella pietra, alcuni designer possono avere una propria terminologia e potrebbero non essere d'accordo con la mia esatta formulazione. Ma questo è il modo in cui li ho visti di solito descritti, ed è il modo in cui molti designer comprendono questi termini nel modo migliore.

Quindi cosa dovresti fare esattamente con questi primi pezzi concettuali? Sono davvero necessari? Direi che la prototipazione non è sempre necessaria, ma è un'ottima idea, specialmente per la progettazione di app con interazioni complesse.

Ma wireframing è sempre una buona idea per ogni nuovo progetto. Ti aiuta concentrarsi sul quadro generale senza preoccuparsi dei dettagli. Si ha un'idea di come è strutturata la pagina generale e questo è inestimabile quando si progetta un layout concreto.

Obiettivi per Wireframing

Ogni volta che inizi un nuovo progetto, dovresti contemplarlo cosa stai cercando di risolvere. Ogni sito è costruito con un obiettivo specifico in mente. Molti siti hanno anche più obiettivi in ​​cui alcuni obiettivi sono più importanti di altri.

Usa wireframing come guida per aiutarti a trovare la strategia migliore per catturare l'obiettivo (i) di un sito web. Questo probabilmente non succederà sul primo wireframe, quindi preparati disegnare molte idee diverse.

Cerca altri siti simili e annota le loro migliori caratteristiche. Analizza come è organizzato il contenuto e come ti muovi attraverso ogni pagina.

Pensa ai wireframe di un punto di vista interattivo. Queste non sono solo belle foto. Sono rappresentazioni di interfacce digitali e tu vuoi abbozzare le tue idee con questo in mente.

Avere a disposizione risorse basate sulla griglia, sia che siano fatte di carta o che siano digitali, può essere di grande aiuto nello schizzo veloce. Ora esaminiamo le migliori risorse per la creazione di wireframe.

Grid Sketchpads

È sempre possibile iniziare con gli schizzi di anteprima di base sulla carta della stampante solo per tracciare idee approssimative. Personalmente, di solito inizio a lavorare su carta per stampanti, perché in questo modo sono meno preoccupato per le griglie e altro ancora generare idee.

Blocchi per schizzi a punti sono il modo migliore per andare se vuoi ripulire un'idea, e dargli più struttura La griglia ti aiuta stimare le distanze tra gli articoli sulla pagina e creare una sorta di simmetria nel wireframe.

Ci sono molti ottimi prodotti là fuori, se vuoi avviare wireframing su carta, per esempio il Rhodia Dot Pad è disponibile in varie misure per l'uso quotidiano. Viene fornito solo con 80 pagine, ma questo è abbastanza tipico della maggior parte degli sketchbook di griglia.

Un altro prodotto molto interessante e personalizzabile è Dotgrid. Tutti gli articoli di Dotgrid sono più costosi dei libri di Rhodia, ma vengono forniti con più materiali e design personalizzati.

Dotgrid accetta anche ordini su misura che ti permettono progetta il tuo sketchpad personalizzato. Ogni libro contiene poco meno di 100 fogli, quindi includendo il fronte e il retro si ottengono circa 200 pagine per lo schizzo della griglia.

Un altro paio di quaderni di quadricromie che voglio menzionare includono la Behance Dot Grid che è rilegata a spirale e rilegata a spirale, sebbene contenga solo 50 fogli di carta.

Il responsive design Sketchbook è una delle migliori risorse per i web designer. Nessun altro progettista di prodotti avrebbe bisogno di uno sketchbook di progettazione reattivo, ma i web designer traggono grande vantaggio dalla libertà di generare idee a diverse larghezze del dispositivo in cima a un layout di griglia.

Questi pad di design reattivi hanno anche 50 fogli per un totale di 100 pagine, ma ogni pagina ha quattro diverse griglie reattive rappresentano diversi punti di rottura nel design reattivo: desktop, laptop, tablet e smartphone.

Sebbene il design sia insignificante rispetto ai libri di Dotgrid, nessun altro ha considerato gli sketchbook reattivi per i web designer. Se ti piace questa cosa, vale la pena ordinarne una per un giro di prova.

Se sei davvero appassionato di cose fatte a mano e non vuoi spendere soldi, puoi anche farlo stampare le proprie pagine della griglia con Sketch Interface. Questo sito gratuito offre diversi modelli di griglia che puoi stampare e utilizzare per wireframes disegnati a mano.

Le griglie sono disponibili in formato A4 e americano per diversi tipi di carta per stampante. Puoi scegliere tra molte opzioni, come i modelli per un browser web a lunghezza intera o diversi schermi iPhone.

Tutte queste opzioni sono fantastiche e vale la pena esplorare se ci sei schizzo a matita. La carta è uno dei mezzi più facili per scovare rapidamente nuove idee, quindi è spesso la scelta preferita anche dai designer dell'interfaccia utente.

Strumenti digitali e app Web

Ci sono così tanti ottimi programmi di wireframing là fuori che possono essere difficilmente coperti senza rischiare la paralisi dell'analisi, quindi per ora concentriamoci su alcune delle migliori opzioni per wireframing basato su griglia.

Innanzitutto, vorrei dire che puoi usare gli strumenti Adobe come Illustrator per crea i tuoi wireframes. Questo non fa parte del flusso di lavoro di tutti e Illustrator non è certamente gratuito. Ma se lavori già con Adobe Creative Cloud, potrebbe essere un buon punto di partenza.

1. Moqups

Moqups è uno dei migliori strumenti online per wireframing. Lavorate con un editor visuale e una libreria di risorse da trascinare e rilasciare su tutta la pagina.

Ogni nuovo progetto Moqups ha un griglia predefinita, e usa linee viola brillanti per aiutarti a far scattare gli elementi nell'allineamento. È un ottimo strumento web che rende molto più facile la progettazione con una griglia.

Il sito funziona per impostazione predefinita su un piano gratuito che limita l'utente a 300 oggetti pagina. Il sito ha opzioni premium ma pagare una tariffa mensile potrebbe essere più fastidioso che andare con gli strumenti Adobe o un acquisto una tantum di Sketch.

2. Grid Papr

L'app web Grid Papr è completamente gratuita e offre sia account pubblici che privati ​​per i wireframe. Crea un nome per il tuo progetto e ottieni il tuo URL univoco per il wireframe che puoi modificare da qualsiasi computer.

Ogni nuovo wireframe viene fornito con una griglia che ti consente di eseguire snap-in-griglia su tutti gli elementi. Le funzionalità sono semplici, ma sono sufficienti crea un wireframe lo-fi in pochi minuti. Basta trascinare quello che vuoi sulla pagina e seguire la griglia per creare un wireframe stellare.

3. Wireframe.cc

Wireframe.cc è uno degli strumenti più semplici e minimi che puoi usare per il wireframing. Caratterizza a Interfaccia senza ingombro con un griglia pre-costruita e barre degli strumenti organizzate. Basta fare clic e trascinare per creare nuovi elementi sulla tela. Puoi anche salvare e condividere il tuo lavoro.

Questo è ancora un altro strumento offerto gratuitamente con piani premium opzionali. Ogni piano viene fatturato mensilmente, quindi è molto simile a Moqups nella struttura dei prezzi. Lo strumento gratuito è utilizzabile da qualsiasi computer senza un account.

4. Mockingbird

Mockingbird è un'altra grande opzione, che offre molte più funzionalità rispetto alla maggior parte degli strumenti wireframing. Puoi iniziare gratuitamente ma la versione di prova è limitata a 7 giorni. Questo può essere un fastidio per alcuni utenti, ma lo strumento è davvero incredibile e funziona su tutti i browser.

Mockingbird ha una libreria infinita di elementi dell'interfaccia utente come schede, fisarmoniche, menu a discesa, lettori video e semplici collegamenti testuali. La griglia predefinita utilizza il sistema di griglia 960gs, ma è possibile scegliere tra 12, 16 e 24 colonne.

Parole finali

Non importa se si sceglie il wireframing tradizionale o digitale, si tratta sempre del qualità dell'output. C'è molto da imparare quando si fa questo tipo di lavoro, quindi trova quello che ti sembra più comodo per te.

Andare avanti è la cosa migliore da fare avvia semplicemente wireframing. Scopri ciò che ti piace di più (cartaceo o digitale) e rendilo tuo. Le risorse in questo articolo dovrebbero darti più che abbastanza per iniziare a fare il wireframe delle tue interfacce digitali.

(Foto di copertina di Oykun Yilmaz)