Share
Wireframing è un passo importante in qualsiasi processo di progettazione dello schermo. In primo luogo, consente di definire la gerarchia delle informazioni del proprio progetto, semplificando la pianificazione del layout in base al modo in cui si desidera che l'utente elabori le informazioni. Se non hai ancora utilizzato il wireframing, è il momento di bagnarti i piedi.
Prima di iniziare, però, una domanda veloce: hai bisogno di una soluzione per un sito web professionale? Se è così, abbiamo un numero di modelli di siti Web ben progettati che possono soddisfare le tue esigenze. Puoi scaricare modelli illimitati e altri articoli per un unico abbonamento mensile basso.
Modelli di siti Web su Envato ElementsAltrimenti, entriamo in questo tutorial!
È come un progetto architettonico; devi vederlo in diagrammi bidimensionali in bianco e nero prima di capire come costruire la casa vera e propria. Analogamente per la progettazione di uno schermo, non è possibile iniziare a costruire livelli di pixel in Photoshop, o scrivere blocchi di codice, senza sapere dove andranno le informazioni.
Ad un livello più profondo, un wireframe è anche molto utile nel determinare come l'utente interagisce con l'interfaccia. Ad esempio, i wireframe possono contenere vari stati di comportamento di pulsanti o menu.
Wireframing è importante perché consente al progettista di pianificare il layout e l'interazione di un'interfaccia senza essere distratto dai colori, dalle scelte del carattere tipografico o persino dalla copia. Mi piace spiegare ai miei clienti che se un utente non riesce a capire dove andare su un wireframe bianco e nero, non ha importanza quali colori si utilizzano. Un pulsante deve essere evidente anche se non è lucido o colorato.
Come le fondamenta di un edificio, deve essere fondamentalmente forte prima di decidere se dargli una costosa mano di vernice.
Prima di entrare in ulteriori dettagli, dato che un'immagine può dipingere mille parole, dai un'occhiata a I ♥ wirefames. Sarai in grado di ottenere una rapida panoramica e comprensione visiva di come altri progettisti gestiscono il loro processo di wireframing.
Forse prendi anche questo bookmarklet browser elegante, Wirify che ti permette di vedere una versione "wireframe-d" di qualsiasi sito live.
Se osservi continuamente ciò che altri progettisti o siti stanno facendo per i loro wireframe, ti verrà lentamente fatto un'idea di come un wireframe aiuti a organizzare le informazioni per lo schermo.
Il design è un processo organico e quindi diversi designer si avvicinano al wireframing e alla sua traduzione in immagini o codici in modi diversi. Devi trovare il processo che fa emergere i tuoi punti di forza e ti senti più a tuo agio. Di seguito è riportato un diagramma che mostra diversi processi tipici:
37signals è ben noto per aver sostenuto l'uso di schizzi e passare direttamente al codice, anche se sembra che alcuni dei loro progettisti coinvolgano anche prototipi visivi nel loro processo.
Per quanto mi riguarda, ho attraversato abbastanza cicli di design-to-code per avere un processo alquanto snello. Questo è un passo su cui alcune persone potrebbero non pensare, ma considero anche qualsiasi framework html / css che utilizzerei nel progetto.
Ad esempio, ho usato per costruire una tonnellata di siti in Blueprint, quindi avrei impostato sia i wireframe che il Blueprint sulla stessa griglia a 12 colonne. Ciò accelera notevolmente la prototipazione e il tempo di sviluppo, poiché invece di dover scrivere la larghezza di ogni elemento nel mio foglio di stile CSS, ora sono predefiniti da una a dodici colonne. Ora utilizzo cssgrid per il suo supporto alla progettazione reattiva, ma è ancora impostato su una griglia di 12 colonne che è possibile scaricare come modello di Photoshop.
Come ho detto, sta a te decidere quale processo ti senti a tuo agio, a volte potresti averlo provato diverse volte prima di rendersi conto di quale sia il processo più efficace. Alcune persone potrebbero essere davvero brave a disegnare e potrebbero preferire di non utilizzare affatto uno strumento wireframing. Altri progettisti potrebbero voler avere il maggior numero di passaggi possibile per minimizzare le deviazioni o permettere loro di pensare attraverso ogni singola iterazione mentre il design inizia a prendere forma e forma.
Alla fine svilupperai il tuo processo preferito ma per il tutorial userò il mio tipico processo come esempio:
Il motivo per cui utilizzo solitamente Illustrator come strumento wireframing è principalmente per tre motivi:
Tuttavia, io uso altri strumenti e dipende dallo scenario del progetto. Descriverò brevemente alcuni strumenti popolari, i loro punti di forza e le loro debolezze nella prossima sezione.
Ecco alcuni strumenti popolari in nessun ordine particolare:
Balsamiq è diventato popolare grazie ai wireframes prodotti con Balsamiq come schizzi, rendendo immediatamente evidente che il wireframe non è un prodotto finito ma un work in progress. Balsamiq ha anche un'enorme libreria di componenti riutilizzabili che puoi trascinare e rilasciare molto facilmente per progettare i tuoi wireframes.
Puoi anche usarlo su quasi tutte le piattaforme, con versioni desktop disponibili per Mac, Windows e Linux, oltre a una versione web se preferisci lavorare nel cloud. App di terze parti come iMockups per iOS supportano anche i formati di esportazione Balsamiq.
Un vecchio Mac preferito, Omnigraffle ha anche una libreria di componenti riutilizzabili ampiamente supportata dagli utenti; Graffletopia.
Dal momento che è stato sviluppato specificatamente come applicazione di diagrammi, Omnigraffle ha anche funzioni complesse come il layout automatico, il supporto di stili di oggetti personalizzati, guide intelligenti e strumenti grafici. Alcune di queste funzionalità sono disponibili anche nella suite Adobe CS, ma se non si dispone della suite CS, Omnigraffle ha un buon valore (~ $ 100) per la produzione di wireframe dettagliati.
Quasi come il nonno degli strumenti wireframing, Axure è stato uno dei primi strumenti wireframing / prototyping di classe professionale. Fino a poco tempo fa, era disponibile solo su Windows. Personalmente non ho molta esperienza con esso, ma è noto per essere uno strumento ampiamente utilizzato tra i professionisti del settore.
Un nuovo ragazzo sul blocco, Flairbuilder ha un forte supporto per le interazioni.
Ha anche un'enorme libreria di componenti, supporta pagine master ed è possibile esportare il prototipo per essere visualizzato online.
Se il software desktop non è la tua tazza di tè, ci sono strumenti come mockflow, hotgloo e mockingbird.
Keynotopia "trasforma la tua applicazione di presentazione preferita nel miglior strumento di prototipazione rapida per creare mockup di app per dispositivi mobili, Web e desktop". Per gli utenti non Mac, non preoccuparti, Keynotopia offre anche modelli powerpoint.
Personalmente lo consiglio vivamente se avete bisogno di wireframe o prototipo di applicazioni mobili rapidamente. Un'altra buona alternativa è Keynote Kungfu.
Per chi ha già familiarità con la suite Adobe, Fireworks, Illustrator e Indesign sono strumenti di wireframing molto capaci con i loro punti di forza e di debolezza individuali.
È possibile lavorare sull'intero processo di progettazione in Fireworks, dai wireframe di base alla visualizzazione completa. Fireworks supporta le pagine master (considerale come modelli riutilizzabili in cui ogni modifica del modello principale può essere applicata in tutte le pagine secondarie), librerie di elementi ed è possibile creare prototipi interattivi con Fireworks in modo relativamente rapido.
Questo è uno dei miei strumenti preferiti da usare perché ho già molta familiarità con Illustrator e sono sicuro che anche molti stilisti qui ne sarebbero a conoscenza. Uso Illustrator quando cerco di realizzare wireframe rapidi ma complessi, senza necessità di interattività.
Cosa lo rende un vincitore? La possibilità di esportare come PSD con livelli modificabili, un forte supporto per copia e incolla su Photoshop e potenti controlli tipografici con stili di tipo che puoi salvare, modificare e riutilizzare, quasi come i CSS.
Punti di forza simili a Illustrator con controlli di stili tipografici ancora più forti, supporto di pagine master avanzate e la recente capacità di realizzare prototipi interattivi.
Prendo Indesign quando devo realizzare prototipi interattivi multi-pagina ad alta fedeltà. L'unica avvertenza per me è il debole supporto per l'esportazione di Photoshop per la progettazione di immagini.
"Potente prototipazione semplice." Versione 9 recentemente rilasciata con una nuova palette wysiwyg. Vale la pena dare un'occhiata.
C'è molta teoria per quanto riguarda i sistemi a griglia, ma senza esagerare, la spiegherò come "un modo strutturato e semplice per gli elementi del layout".
Sto usando Illustrator per questo tutorial ma i passaggi possono essere applicati a qualsiasi strumento.
Innanzitutto, imposta una dimensione del documento. Ho usato 1280 x 900 perché userò cssgrid che permetterà al mio sito web di scalare facilmente le risoluzioni da mobile a un massimo di 1140 pixel.
Inserisci il modello scaricato da cssgrid nel tuo documento.
Ci sono molti modelli di griglia disponibili per il download, ma se sei interessato a personalizzare il tuo dare un'occhiata a responsify.it.
Inizia disegnando caselle sulla griglia. Pensa all'ordine delle informazioni che vorresti presentare ai tuoi visitatori, dall'alto in basso è il più semplice, seguito da sinistra a destra. Di seguito è riportato un esempio di wireframe con un layout comunemente utilizzato dalle società di software in questi giorni:
A volte, a seconda dell'obiettivo e dell'entità per cui si progetta, è possibile essere creativi con il layout, pur tenendo presente la gerarchia delle informazioni. Questo è un esempio del mondo reale di uno dei miei clienti in cui stavo uscendo dai layout del sito web della tecnologia convenzionale:
Ecco un layout per un blog, con contenitori pubblicitari accuratamente posizionati e istruzioni specifiche per il cliente:
Dopo che sei soddisfatto del modo in cui sono disposte le scatole, inizia a rilasciare frammenti del tuo contenuto per capire se l'informazione è ben strutturata. La regola generale è la stessa: le informazioni che vuoi trasmettere al tuo pubblico devono essere chiare, anche in un wireframe bianco e nero.
Usare semplicemente dimensioni di carattere diverse come inizio è un ottimo modo per differenziare i diversi livelli di informazione.
Non aver paura di sperimentare in questa fase. A volte, quando si compila più in dettaglio, è possibile rendersi conto che il layout originale non funziona bene. Questo è il punto centrale del processo di wireframe; fare quante più iterazioni possibili per restringere il modo migliore di rappresentare le informazioni che stai cercando di comunicare.
Nell'esempio riportato di seguito, ho deciso che volevo che gli screenshot avessero un impatto maggiore e ho anche iniziato a utilizzare le black box per definire quali sono le aree che assumono importanza visiva per questo sito Web:
L'utilizzo dell'intero spettro della scala di grigi può aiutarti a determinare la forza visiva dei tuoi elementi senza dover scegliere una tavolozza di colori. In effetti, potrebbe aiutarti durante il processo di progettazione visiva in seguito.
Questo è un passaggio facoltativo, ma se ti piace prendere le cose in incrementi potresti voler provarlo. Fare un'alta definizione di wireframe significa semplicemente aggiungere più dettagli, il più possibile, senza andare troppo granulare nei dettagli visivi. Potrebbe significare riempire la copia effettiva nel wireframe e provare a determinare le dimensioni dei caratteri ideali:
Potrebbe anche coinvolgere i colori:
L'idea generale è che nella fase di visualizzazione / codice si desidera essere in modalità di lucidatura e non più in modalità di disegno o sperimentazione. Eseguire i cicli di iterazione (feedback <-> wireframing) il più rapidamente possibile in un'applicazione wireframing che stai usando, piuttosto che spostare livelli e pixel in Photoshop.
Detto questo, in alcuni scenari potrebbe essere più opportuno saltare troppo la definizione dei dettagli e andare direttamente in una fase di prototipazione interattiva (ala 37signals). L'argomento per questo è che determinati dettagli di interazione non possono essere comunicati completamente su un'immagine piatta.
Se lavori con un team di sviluppatori, potresti voler distribuire i wireframe approvati agli sviluppatori per la codifica del framework di base mentre lavori sul visual.
Citato in precedenza, il motivo per cui preferisco usare Illustrator per wireframing è perché posso esportarlo in un .psd con la maggior parte dei livelli di testo modificabili. Per il momento in Photoshop non avrò bisogno di modificare il tipo più di tanto (Photoshop ha strumenti di controllo dei tipi inferiori, sebbene molto migliorati in CS6):
Ecco un esempio di wireframe tradotto in un visual. La spina dorsale del wireframe è praticamente intatta, anche se ci sono ritocchi fatti visivamente. Puoi anche vedere questo sito web dal vivo:
Quindi qui finiamo questo tutorial. Spero ti sia ispirato a iniziare a sperimentare! Come con qualsiasi processo di progettazione, non aver paura di iterare, iterare e iterare.
Inoltre, dedica un po 'di tempo a sperimentare con diversi strumenti e processi. Troverai l'investimento nel tempo utile quando trovi un'applicazione che ti sembra intuitiva.
Non esitate a fare domande nei commenti, grazie per la lettura!
Inoltre, se hai bisogno di componenti di siti Web già pronti, abbiamo un sacco di modelli di siti Web ben progettati su Envato Elements. Puoi scaricare modelli illimitati e altri articoli per un unico abbonamento mensile basso.
Se vuoi saperne di più su wireframing, potresti voler controllare queste risorse.
Accentsconagua