Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Wireframing
Webdesign

Guida per principianti alla realizzazione dei Wireframe

by
Length:LongLanguages:
This post is part of a series called UX Foundations.
First Steps in Your User Experience Workflow: Nascent UX
A Beginner’s Guide to Wireframing in Omnigraffle

Italian (Italiano) translation by Roberta C (you can also view the original English article)

La realizzazione dei Wireframe è uno step importante in qualsiasi processo di design per lo schermo. Soprattutto consente di definire la gerarchia delle informazioni, rendendo più facile pianificare il layout a seconda di come si desideri che un utente elaborari le informazioni. Se devi ancora utilizzare i wireframe, è il momento di iniziare...

A simple wireframe

È come un progetto architettonico; Devi vedere i diagrammi in bianco e nero e in bidimensionale prma di capire come costruire la casa reale.  Allo stesso modo vale per un design dello schermo, non è possibile iniziare a costruire pixel layout in photoshop, o scrivere blocchi di codice, senza sapere dove devono andare le informazioni.

A un livello più profondo, un wireframe è anche molto utile nel determinare come l'utente interagisce con l'interfaccia. Ad esempio, un wireframes può contenere vari stati di comportamento di un bottone o di un menu.

a simple example of a wireframe showing a menu hover state this reduces the possibility of miscommunication

Il disegno del Wireframe è importante perché permette al progettista di pianificare il layout e l'interazione di un'interfaccia senza essere distratto dai colori, da scelte di carattere tipografico o anche dai testi. Mi piace spiegare ai miei clienti che se un utente non riesce a capire dove andare su un wireframe bianco e nero, non è importante quali colori si utilizzino alla fine. Un pulsante deve essere evidente, anche se non è lucido o dai colori vivaci.

Come le fondamenta di un edificio, devono essere fondamentalmente forti prima di decidere se dare un costoso cappotto di vernice.


Step 1: Ottenere l'ispirazione

Prima di entrare in ulteriori dettagli, dato che una foto può dipingere mille parole, date un'occhiata I ♥ wirefames. Abbiamo una rapida panoramica e capiamo come gli altri designer stanno gestendo il loro processo di viual wireframing.

I Heart Wireframes

Anche utile questa estensione del browser, Wirify che consente di vedere una versione "wireframe" di qualsiasi sito dal vivo.

cnncom with wirify

Se si osservano continuamente ciò che altri designer o siti stanno facendo per loro wireframes, lentamente si otterrà un'immagine nella mente di come un wireframe aiuta a organizzare le informazioni per lo schermo.


Step 2: Progettare il processo

La progettazione è un processo organico e così diversi designer approcciano i wireframing e la loro traduzione ad elementi visivi o codice in diversi modi. Dovete trovare il processo che metta in risalto le proprie forze e con cui si sta più comodi. Di seguito un diagramma che mostra i diversi tipici processi:

Wireframes Process

37signals è ben noto per aver sostenuto l'uso di schizzi e di  andare direttamente al codice, anche se sembra che alcuni dei loro progettisti incudano anche visual mockup nel loro processo.

Per me, ho un'esperienza sufficiente di passaggi dal design al codice da avere un processo alquanto semplificato. Si tratta di un passaggio di che alcune persone non fanno, ma considero anche ogni framework html/css che vorrei utilizzare nel progetto.

Ad esempio, sono solito costruire un sacco di siti in Blueprint, così imposto i miei wireframes e Blueprint per la stessa griglia di 12 colonne. Questo accelera i tempi di prototipazione e sviluppo notevolmente, invece di dover scrivere la larghezza di ogni elemento nel mio foglio di stile css, ora sono pre-definiti da uno a dodici colonne di larghezza. Uso cssgrid invece come supporto per il responsive design, ma è ancora impostato su una griglia di 12 colonne che è possibile scaricare come template di photoshop.

the 12-column cssgrid template

Come ho detto, tocca a te decidere con quale processo hai più dimestichezza, si può provare più volte prima di rendersi conto di qual è il processo più efficace. Alcune persone possono essere veramente brave a disegnare e preferiscono non usare affatto uno strumento per i wireframe. Altri designer potrebbero voler avere bisogno di più step per minimizzare le deviazioni e permettergli loro di pensare attraverso ogni singola iterazione come il design inizi a prendere forma e consistenza.

Alla fine puoi sviluppare il tuo processo di comodo, ma per amor di tutorial userò come esempio il mio processo tipico:

Uso di solito Illustrator come strumento di wireframing principalmente per tre ragioni:

  1. Stili – è possibile salvare gli stili tipo e oggetto e riutilizzarli in tutto, proprio come CSS.
  2. È facile per modificare, spostare o ridimensionare gli oggetti multipli.
  3. Vanta un facile transizione a Photoshop più tardi.

Tuttavia, uso anche altri tool, a seconda del progetto. Descriverò brevemente alcuni strumenti, i loro punti di forza e le loro debolezze nella sezione successiva.


Step 3: Selezionare gli strumenti

Ecco alcuni strumenti popolari in nessun ordine particolare:

Balsamiq

Balsamiq è diventato popolare come genereatore di wireframe con Balsamiq resemble sketches, rendendo immediatamente evidente che il reticolo non è un prodotto finito ma un work in progress. Balsamiq propone anche una vasta libreria di componenti riutilizzabili che è possibile trascinare e rilasciare molto facilmente per progettare il tuo wireframes.

Sample Balsamiq wireframe from the Balsamiq website

È anche possibile utilizzarlo su quasi ogni piattaforma, con le versioni desktop disponibile per Mac, Windows e Linux, inoltre c'è una versione web, se si preferisce lavorare nel cloud. .Applicazioni di terze parti come iMockups per iOS supportano i formati di esportazione di Balsamiq.

Omnigraffle

Un vecchio Mac, Omnigraffle ha anche una libreria utente di componenti riutilizzabili ampiamente supportata ; Graffletopia.

youll like omnigraffle if you enjoy using beautiful stencils like this one

Poiché è stato sviluppato specificamente come un'applicazione per la creazione di diagrammi, Omnigraffle ha anche funzionalità complesse come il layout automatico, supporto degli stili di oggetto personalizzati, smart guide e strumenti grafici. Alcune di queste caratteristiche sono anche disponibili nella suite Adobe CS, ma se non avete la suite CS, Omnigraffle ha un buon valore (~ $100) per la produzione di wireframe dettagliati.

Axure

Quasi come il nonno degli strumenti per realizzare wireframe, Axure è stato uno dei primi strumenti di classe professionale per wireframing/prototipazione. Fino a poco tempo fa , era disponibile solo per Windows. Io personalmente non ho molta esperienza con questo, ma è conosciuto per essere uno strumento ampiamente utilizzato tra i professionisti del settore.

FlairBuilder

Flairbuilder ha un supporto molto forte per le interazioni.

from show hide to if-else interactions

Ha anche una libreria di componenti enorme, supporta le pagine master e si possa esportare i prototio per essere visualizzati online.

Applicazioni online

Se i software desktop non sono per voi, ci sono strumenti come mockflow, hotgloo e mockingbird.

Keynote/Powerpoint

Keynotopia "trasforma la tua applicazione preferita  per le presentazioni nel miglior strumento di prototipazione rapida per creare mockup per dispositivi mobili, web e desktop". Per utenti non-mac, non preoccupatevi, Keynotopia offre anche template powerpoint.

Io personalmente lo consiglio caldamente se avete bisogno di applicazioni per wireframe o prototipi mobili rapidi. Un'altra ottima alternativa è Keynote Kungfu.

Adobe CS

Per coloro che hanno già familiarità con la suite di Adobe, Fireworks, Illustrator e Indesign sono buoni strumenti per il wireframing con i propri punti di forza e di debolezza.

Fireworks

Si può lavorare sull'intero iter progettuale in Fireworks, dal wireframe di base al visual completo. Fireworks supporta le pagine master (si pensi a loro come modelli riutilizzabili dove ogni modifica fatta sul modello master può essere applicata a tutte pagine figlie), librerie di elementi e si possono fare prototipi interattivi con  Fireworks in tempi relativamente brevi.

Illustrator

Questo è uno dei miei strumenti preferiti che utilizzo perché ho già molta familiarità con Illustrator e sono sicuro che molti designer qui ne hanno ugualmente tanta. Io uso Illustrator quando devo fare un veloce, ma complesso wireframe, senza bisogno di interattività.

Cosa lo rende il vincitore? La possibilità di esportare come PSD con livelli modificabili, buon supporto per il copia e incolla in Photoshop e controllo della tipografia con gli stili di testo che si possono salvare, modificare e riutilizzare, quasi come CSS.

Indesign

Punti di forza simili a Illustrator con ancora più avanzati controlli per gli stili tipografici, supporto pagine master e la  recente capacità di fare prototipi interattivi.

Have you seen the interactive controls of InDesign

Uso Indesign quando devo fare prototipi multi-pagina interattivi ad alta fedeltà. L'unica pecca per me è il debole supporto per l'esportazione su Photoshop per la progettazione grafica.

ProtoShare

"Powerful Prototyping Made Easy." Recentemente è stata rilasciata la versione 9 con una nuova tavolozza wysiwyg. Worth checking out.


Step 4: Impostare una griglia

Ci sono un sacco di teorie per quanto riguarda i sistemi di griglie, ma senza addentrarci troppo, li descrivo come "un modo semplice per strutturare gli elementi di un layout".

Uso Illustrator per questo tutorial, ma la procedura può essere applicata a qualsiasi dei vostri strumenti.

In primo luogo, impostare un formato di documento. Ho usato 1280 x 900 perché userò cssgrid che permetterà al mio sito Web di scalare facilmente tra le risoluzioni mobile ad un massimo di 1140 pixel.

Posizionare il template scaricato da cssgrid nel documento.

Suggerimento:

Ci sono un sacco di template di griglia disponibili per il download, ma se siete interessati a personalizzare il vostro date un'occhiata a responsify.it.


Step 5: Determinare il Layout con i box

Iniziate disegnando caselle sulla griglia di partenza. Pensare l'ordine delle informazioni che si desidera presentare ai vostri ospiti, dall'alto in basso: è il modo più semplice, seguito da sinistra verso destra. Di seguito un esempio di un wireframe che ha un formato comunemente utilizzato da aziende di software:

A volte, a seconda dell'obiettivo e del soggetto che si sta progettando, si può essere creativi con il layout, pur mantenendo ancora la gerarchia delle informazioni nella mente. Questo è un esempio reale di uno dei miei clienti dove stavo progettando il layout del sito web di una società di tecnologia convenzionale:

Qui è un layout per un blog, con box per la pubblicità accuratamente posizionati e istruzioni specifiche per il cliente:


Step 6: Definire la gerarchia delle informazioni con la tipografia

Dopo che si è soddisfatti di come sono disposte le caselle, cominciare a mettere dei contenuti per capire se le informazioni sono state ben strutturate. La regola è la stessa: le informazioni che si desidera dare al tuo pubblico devono essere chiare, anche in un wireframe in bianco e nero.

Semplicemente usare diverse dimensioni di carattere come punto di partenza è un ottimo modo per distinguere tra i diversi livelli di informazioni.

Non abbiate paura di sperimentare in questa fase. A volte, quando si riempie in modo più dettagliato, si può capire che il layout originale non funziona bene. Che è parte del processo di wireframing; fare più iterazioni possibili al fine di individuare la maniera migliore per rappresentare le informazioni che si vogliono comunicare.

Nell'esempio qui sotto, ho deciso che gli screenshot avessero un impatto maggiore e ho anche iniziato a utilizzare box neri per definire quali sono le zone di maggiore importanza visiva in questo sito:

Step 7: Regolazione fine con scala di grigi

Utilizzare l'intera gamma di gradazioni di grigio può aiutare a determinare la forza visiva degli elementi senza dover scegliere una tavolozza di colori. Infatti, può aiutare durante il processo di progettazione visiva più tardi.


Step 8: Hi-definition Wireframe

Questo è un passaggio facoltativo, ma se vi piace fare le cose incrementali è possibile provarlo. Fare un wireframe ad alta definizione significa semplicemente aggiungere ulteriori dettagli, per quanto possibile, senza entrare troppo nei dettagli visivi. Può voler dire reaizzare la copia effettiva in wireframe e cercare di determinare le ideali dimensioni dei font:

Potrebbero essere inclusi anche i colori:

L'idea generale è che in fase di visual/codice si stia in modalità di rifinitura e non più in redazione o sperimentando modalità. Si eseguono i cicli di iterazione (feedback <-> wireframing) più velocemente in usando un'applicazione di wireframing, anziché spostando livelli e pixel in photoshop.

Detto questo, in alcuni casi può essere meglio ignorare la definizione di troppi dettagli e andare direttamente in una fase di prototipazione interattiva (ala 37signals). La ragione è perché alcuni dettagli di interazione non possono essere comunicati completamente su un'immagine piatta.

Se si lavora con un team di sviluppatori, è possibile tenere a portata di mano gli wireframe approvati agli sviluppatori per codificare il framework di base mentre si lavora sul visual.


Step 9: Tradurre un Wireframe in Visual

Come accennato in precedenza, la ragione perché io tendo a preferire Illustrator per il wireframing è perché posso esportarlo in PSD con la maggior parte dei livelli modificabili. Dal momento che sono su Photoshop non sarà necessario modificare molto (Photoshop ha strumenti di controllo di tipo inferiore, anche se molto migliorati in CS6):

Photoshop Export Options

Ecco un esempio di un wireframe tradotto in visual. La spina dorsale del wireframe è praticamente intatta, anche se sono state fatte modifiche visive. È inoltre possibile vedere questo sito live:

Webwise 2010

Conclusione

Così qui finiamo questo tutorial. Spero che ti abbia ispirato per iniziare a sperimentare! Come con qualsiasi processo di progettazione, non abbiate paura di provare, provare, provare.

Inoltre, trascorrete del tempo a sperimentare con diversi strumenti e processi. Troverete che l'investimento di tempo ne vale la pena una volta trovata un'applicazione che vi risulti intuitiva.

Sentitevi liberi di fare tutte le domande nei commenti, grazie per la lettura!


Risorse aggiuntive

Se si desiderano maggiori informazioni sul wireframing, potete dare un'occhiata a queste risorse.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.