L’importanza del wireframe nel processo di creazione di un sito
Quando si arriva a parlare di wireframe in un sito web, si è già passati per il primo passo dell’interaction design, cioè si è già arrivati a definire la struttura del sito, come esso reagirà in base all’utente e tutto il resto.
Dopo questo passaggio iniziale, si passa di solito a parlare di wireframe.
Ma cosa è un wireframe?
Fondamentalmente, un wireframe è una sorta di bozza del sito, in cui viene descritto visualmente tutte le informazioni ricavate precedentemente. Ovviamente non si tratta di una cosa accurata, serve soltando a vedere la struttura.
Un wireframe, è solitamente composto di vari blocchi, senza colore, con una sorta di testo al loro interno, o, in alternativa, i blocchi sono accompagnati da una didascalia (più utile per chi i testi li vede a fine sito o piuttosto non li vede e basta).
(questo wireframe è preparato secondo la tecnica del grey box method, cioè usando solo blocchi di colore grigio)
Un wireframe è disegnabile sia con i più tradizionali strumenti come per esempio Photoshop, che sì, è comodo, ma risulterà impossibile da modificare da terzi, oppure con programmi come ad esempio OmniGraffle o Visio che, in un team di persone, permettono modifiche più veloci e alla portata di tutte le persone impegnate nel progetto.
Un wireframe è utile sotto diversi aspetti.
Innanzitutto permette di avere una prima bozza di un sito, traducendo in immagine ciò che era rimasto su carta (o lavagna, o post-it…), e quindi, definisce la struttura del sito visivamente.
È fondamentale poi per il cliente, perchè in questa fase di wireframing il cliente può farsi un’idea di come sta venendo il sito e apportare le sue modifiche (nell’ordine del ragionevole) senza per questo stravolgere il design, i colori o il codice, a vantaggio di tutti, con minor spreco di tempo e di soldi.
In definitiva, quella del wireframing è una tecnica che si presta alle modifiche più disparate, consentendo di sviluppare e modificare siti rapidamente, si adatta a siti grandi e piccini, e inoltre un wireframe potrebbe essere inserito nel preventivo, di modo che i clienti abbiano già qualcosa in mente per il loro sito.
L'Autore
Architetto dell'Informazione presso uno società di webdesign, ho sviluppato nel tempo conoscenze in interaction design e user centered design che cerco di condividere con gli utenti di ItalianWebDesign.
Add to Google
42 Commenti
interessante!
io sono rimasta un po’ indietro, nel senso che propongo una bozza quasi definitiva.
un wireframe + grafica definitiva.
in effetti c’è un po’ di lavoro in meno da fare con i wireframes, io li userei con portali elaborati o per clienti per i quali non ci sentiamo di rischiare il nostro tempo
software free ne conoscete?
lo sto carcando da mesi ma nulla
Molto interessante ,
prediligo questa soluzione alla bozza grafica vera e propria (inizialmente intendo) perchè rende l’idea al cliente e poi per un fatto di tempo visto che capita a volte che poi non se ne faccia niente
In pratica è come se fosse lo scheletro del sito.
Omnigraffle… devo guardarmelo 1 po’.
Lavorando da sola credo però che si possano usare pure programmi vettoriali tipo illustrator, giusto?
Problema 1: i software proposti costano!
Problema 2: credo che i vocaboli in letteratura non rendano bene l’idea. L’articolo è interessante e i commenti pure. C’è distinzione tra struttura, layout e contenuti? Certo.
Problema 3: il wireframe equivale ad un prototipo usa-e-getta o usa-migliora-e-finisci?
Problema 4: conviene far vedere il risultato del wireframing al cliente?
Marco, ecco 4 assist. Buon riflessione a tutti!
il libro che sto leggendo approfondisce tanto questo concetto, suppongo che Marco si sia letto lo stesso libro
(oltre i css)
Non si può non leggere quel libro!
motivo? …io l’ho quasi finito…
Ma scusate, non porta limiti alla creatività ?
Cioè il grafico alla fine si trova a “decorare” una struttura preesistente, non a crearla.
Non so magari sbaglio.
Ottimo articolo, effettivamente si usa poco questa tecnica con il cliente. Invece potrebbe essere molto più comodo della bozza per cominciare a capire meglio cosa il cliente si aspetta dal sito, ed evitare forse di dover rifare una bozza se non si è ben compreso l’immagine mentale che il cliente si è fatta del sito.
@andrea: se è il grafico stesso ad aver creato la struttura non ci sono limitazioni. Ovviamente anche io mi sono trovata, quando lavoravo in azienda, a dover “colorare” dei wireframe creati dal project manager… e questo è uno dei motivi per cui ora sono freelance
Il wireframe è uno strumento di lavoro però, dedicato agli addetti lavori. Ad esempio si fa la riunione tra programmatori, web designer, marketing, capo ecc ecc e si parla del wireframe si discute e si modifica. Di norma il wireframe e il primo step delle specifiche tecniche di un sito ma non arriva mai al cliente il quale non è in grado di vedere oltre lo sfondo grigio e l’assenza di immagini. Al cliente si farà una proposta grafica più completa dove potrà vedere tutti gli elementi. Il wireframe non è utilizzabile neanche per i test di accessibilità in quanto non contiente gli elementi grafici.
Personalmente anch’io non utilizzo questa tecnica.
Preferisco ottenere il maggior numero di info possibili dal cliente e mostrargli una bozza semi definitiva in cui lui può scegliere di apportare modifiche di liene entità.
Comunque è un ottimo metodo per effettuare lavori veloci per far intuire subito al clinete l’eventuale struttura del progetto.
Ottimo articolo. Complimenti a Marco
.
Beh si, se è il grafico stesso ad averla creata, hai ragione.
Per il resto bell’articolo, ne terrò conto.
Ciao a tutti,
vi segnalo gliffy, lo preferisco ai software desktop based perchè in pochi click mi permette di creare un wireframe veloce e accurato.
Personalmente utilizzo i wireframe solo in progetti complessi (il mio è un problema di tempi e budget). Devo dire che le volte che l’ho usato mi ha facilitato notevolmente il lavoro e la qualità finale del progetto è stata migliore.
Come strumento di scambio e interazione con il gruppo di lavoro e il cliente è sicuramente prezioso!
Il difetto di cristalizzarti sul layout grafico è che ci si focalizza subito sull’aspetto e non sui processi interattivi, sull’implementazione delle specifiche ecc.
ps. Oltre i CSS è davvero un bel libro
@mauro: come sempre mi fai riflettere: in effetti alcuni clienti non vanno al di là del box grigio e si spaventano pensando che sia quello l’aspetto del sito…
@alex: otitme indicazioni, grazie. lascio il link per chi lo trovasse utile:http://www.gliffy.com/examples/wireframes/
Eccomi, non mi aspettavo di vederlo pubblicato oggi, me ne sono andato al lago, scusate
@Sadegraphic: si, se lavori da sola, ovviamente fai come ti pare, io tendo a usare photoshop.
@Kiko:
1 – E lo so, ma d’altronde costa pure photoshop.
2 – Si certo che c’è distinzione.
3 – usa-migliora-finisci
4 – Io tendo a farlo vedere, più che altro capisce come verrà e se ha da modificare, modifica quello e non il sito definitivo.
@Laura: no, non ho letto libri riguardo wireframe, semplicemente mi sono imparato ad usarli e mi hanno “sgrezzato” diversi colleghi che lavorano molto con l’interaction design.
@Mauro: il wf non è assolutamente il primo step, prima c’è tutto lo studio dell’interaction design, poi c’è un wireframe, che focalizza graficamente tutte le cose che si sono tirate fuori dallo studio precedente. Ovviamente non parliamo di test d’accessibilità, ma quelli di usabilità si.
@Mirko: e se il cliente pensa a una cosa e ne dice un’altra e devi fare una modifica grossa? Li il wireframe torna utile.
Marco complimenti per l’ articolo.a me personalmente torna più utile in fase di progettazione di un portale, quando varie figure professionali o dello stesso team interagiscono scambiandosi idee e dando vita mano mano alla struttura finale.Non utilizzerei questa tecnica con un cliente, ma gli mostrerei direttamente una bozza grafica sulla quale apportare successive modifiche
Sicuramente i wireframe esprimono il massimo potenziale come strumento di integrazione fra competenze differenti, ma secondo me anche per il singolo può essere utile pianificare la truttura del proprio progetto tramite wireframe. Perchè? Ci permette di pensare alla truttura e non alla grafica. Io personalmente lo trovo un modo per ragionare sulle specifiche e la disposizione delle interfacce di relazione. Ci permette di fare schizzi che possiamo stravolgere in un attimo seguendo i nostri processi mentali ancora prima di pensare al colore, alle icone ect ect…
C’è sempre da imparare! Non avevo mai sentito parlare di wireframe, e come tante cose, l’ho imparato qui!
Prima di creare un sito facevo si delle bozze a mano, ma molto più skizzate e meno chiare, ragione per cui, mi trovo sempre a fare numerosi cambiamenti in corso d’opera…
Da oggi farò cos’, anche per stabilire uno schema mentale e pratico su come svolgere il lavoro!
thanks
non so come ma ieri mi sn perso questo articolo! molto ma molto ma molto interessante.
nbè ragazzi modelli preimpostati cosi li fa dreamweaver, ovviamente offre la struttura simile a quella sopra, basterebbe solo aggiungere i link, ovviamente costa pochissimo lavoro rispetto alla bozza grafica…cmq per la mia piccola esperienza di solito offire una bozza grafica è più d’impatto per il cliente…poi ovvio per quelli indecisi forse è meglio dargli un’idea in questo modo…
marky ma la bozza grafica di cui parli viene assieme al preventivo?
perchè è di questo che stiamo discutendo, ovviamente proporre una bozza è assolutamente la prassi, ma far firmare un preventivo consegnato assieme ad una bozza è sicuramente un rischio.
Non vi nascondo che ho visto miei layout in giro ovviamente senza saperlo. Ed erano bozze consegnate in quei famosi concorsi per grandi, anzi grandissime aziende. Non faccio nomi per ovvi motivi.
Laura, infatti come dici te è un bel rischio..
Non ti nego che fino ad adesso forse sono stato fortunato…io lavoro un pò maluccio rispetto a voi anche perchè non ho clienti grandi…per adesso mi è andata sempre bene, nel senso che al 90% quando faccio la bozza il sito lo vendo, ovvio faccio un jpg e glielo metto sotto il mio dominio, il prezzo spesso lo pattuaiamo prima…stilando le cose che metterò e come lavorerò sul suo sito…se decide che è troppo ecc, basta cancellare la bozza dal dominio…a meno che non è cosi furbo da scaricarsi la jpg…
Se il cliente è disonesto le troverà tutte per fregarci comunque!
Se si può secondo me è sempre meglio vedersi da vicino, dargli il preventivo con l’eventuale bozza stampata a grandi linee, firmata da entrambi e fotocopiata se dice: “me la tengo, la faccio vedere ai miei soci/figli/moglie/parenti…” Almeno dove lavoravo prima facevano così, visto varie fregature anche di clienti importanti (anzi, direi soprattutto clienti importanti!).
Il problema si pone se si fa tutto via web e e-mail. Diciamo che lì basta fare i1 jpg con la classica scritta vedo-non-vedo bozza, ma se proprio vuole se la scarica e già ha l’idea di base.
Comunque se si pensa sempre a questo non si lavora più!
Di solito io abbozzo la struttura del sito semplicemente con Neoffice (Drawing).
Mi è capitato anche di lavorare a progetti più complessi in cui chi si occupava della progettazione del sito mi passava wireframe abbastanza dettagliati su cui lavorare.
Devo dire che faccio un po’ di fatica ad adottare questa metodologia di lavoro (dato che per abitudine ho bisogno di “visualizzare” subito il sito graficamente per procedere ) però credo che sarebbe senza dubbio la più corretta, per lo meno per siti di medie/grandi dimensioni.
Infatti, cerco sempre di mettere a preventivo una parte di “progettazione” in modo da obbligare il cliente a ragionare sulla “struttura”, anche se in base alla mia esperienza è difficile ( anche solo far capire la differenza tra wireframe e grafica….)
Inoltre, soprattutto nel caso in cui la figura del progettista del sito e quella del grafico non coincidano, sarebbe interessante capire quale dovrebbe essere il giusto confine tra le due figure e fino a che punto il wireframe dovrebbe essere dettagliato, dato che mi è capitato di parlare con grafici che mi dicevano di sentirsi troppo “imbrigliati” dai wireframe….
Beh, Denise, in realtà il web designer è un progettista, non un grafico, quindi sentirsi imbrigliati da un wireframe significa aver sbagliato lavoro
Probabilmente il fatto di sentirsi imbrigliati a un wireframe nasce da un franintendimento sugli scopi e il significato del wireframe (o meglio dei greybox se vogliamo fare riferimento a Transcending CSS). I wireframe sono un modo per pianificare la struttura e visualizzare delle idee che ci permette di ragionare sulla struttura del sito prima di pensare alla grafica. Ci permette di mettee sul “banco di lavoro” gli elementi di interfaccia e di ragionarci su.
Per questo motivo il wireframe dovrebbe essere dettagliato nel riportare le relazioni fra gli elementi, le descrizioni delle varie parti ecc. ma estremamente povero per quanto riguarda la connotazione visiva.
In realtà a ben vedere è la bozza grafica che vincola il designer, doprattutto nel caso in cui si deve realiare un layout fluido che per sua natura non sarà mai esattamente come la bozza di partenza.
Concordo con Denise su un punto: spesso il cliente non ha assolutamente idea di cosa sia un wireframe. In questi casi io faccio un semplice ragionamento: se il gioco vale la candela a costo di raddoppiare le riunioni il cliente lo si educa (e immagino che se il budget lo permette il cliente sarà anche motivato ad avere un prodotto il più professionale possibile) negli altri casi… amen (anche io spesso procedo direttamente dalla bozza grafica, spesso mi viene direttamente fornita e non ho voce in capitolo)
@marco: orsù, ora addirittura aver sbagliato lavoro…spesso anche io mi sono sentita “imbrigliata” nella creatività dai wireframes, o forse è solo un’impressione quella che si ha, magari l’aspetto finale poi risulta creativo agli occhi del cliente, mentre il creativo in questo caso si può sentire talvolta troppo costretto da alcune linee guida. càpita!
Il web designer non è un semplice grafico web, per questo dico che è sbagliato sentirsi imbrigliati nei wireframe, in fondo è il web designer che li crea. Se invece i wf vengono consegnati già belli fatti e si deve fare il template allora parleremmo di visual designer. È solo una precisazione, certo non un invito a cambiare lavoro
Completamente d’accordo con Mauro e Mirko. Attenzione ai wireframe che diventano facilmente armi a doppio taglio se usate nel modo sbagliato al momento sbagliato o con i referenti sbagliati. È un approccio molto tecnico e astratto che spessissimo tralascio (mia esperienza) salvo clienti particolari che so che se l’aspettano o nel caso di applicazioni software particolarmente strutturate. È come se andate a comprare un’auto e invece di farvi vedere il catalogo vi fanno vedere gli schemi progettuali…
Prima si chiamava bozza, adesso la vogliono chiamare “wireframe”. Cosa ha di diverso?
Ha di diverso quello che viene prima del wireframe o “bozza” e quello che viene dopo, cioè tutto lo studio che un web designer o “progettista web” deve fare, a cominciare dallo studio iniziale di interaction design, per poter così realizzare un sito davvero usabile e funzionale.
[...] presume che prima sia stato disegnato su carta e sia stato progettato un wireframe per decidere la posizione degli oggetti, dopodichè, foglio bianco di Photoshop, si [...]
Molto interessante davvero. Pensare che questa cosa la facevo in utomatico ogni volta che devo lavorare su un sito. Tipicamente anche io utilizzo dei colori casuali o meglio i grigi per definire la struttura del sito e poi entrare nel dettaglio, arrotondare dove serve e sistemare sfumature e immagini. Grazie per la dritta “teorica”.
A molti viene spontaneo e naturale lavorare così, altri hanno bisogno che li si guidi passo passo. Questa guida fa per loro!
[...] cosa serve un wireframe? (Per capire la sua importanza, puoi leggere anche questo articolo di Marco Olivetti). Il wireframe presenta, sotto forma di immagine, gli elementi di una pagina e le [...]
[...] come sviluppare una data funzione. Possiamo creare delle bozze da mostrargli, non un vero e proprio wireframe, solo una bozza a grandi linee. Possiamo creare una presentazione powerpoint e mostrargli come lo [...]
[...] I wireframes [...]
errata corrige: “Fondamentalmente, un wireframe è una sorta di bozza del sito, in cui vengono descritte visualmente tutte le informazioni ricavate precedentemente.”
Probabilmente era un refuso!
Per quanto riguarda i “Wireframe”, un’ulteriore metodologia da seguire sarebbe quella dei “Grey Box”, che hanno il vantaggio di focalizzarsi soltanto sugli elementi strutturali della pagina, migliorando la comprensione dei rapporti che intercorrono tra i differenti contenuti, lasciando il designer più libero nelle sue scelte creative. Non dimentichiamoci che in questa fase del progetto l’utilizzo dei “Grey Box” e di notevole utilità agli specialisti che si occupano della creazione di contenuti ed informazioni, al fine di comunicare più efficacemente con i web designer, senza limitarli nelle loro decisioni più importanti come il layout e la composizione tipografica.
cao a tutti diciamo che sono 5 anni che sforno senza sosta wireframe per svariati progetti interattivi che affronto ogni giorno.
qual’è il valore concreto del wireframing secono il mio punto di vista?
fondamentalmente sono tre
il cliente solitamente non capisce mai le analisi funzionali e non riesce a tramettere correttamente al team di lavoro i requisiti utente e di business, con i wireframe interattivi la comprensione di quel che sarà aumenta notevolmente
il developer è spesso troppo “ingegnere” per lui la bellezza sta nel codice indentato e commentato correttamente bene il wireframe associata alla descrizione funzionale e tecnica permette di sviluppare molto più velocemente e con meno rischi sulla qualità finale del prodotto
nella catena di produzione del software, i ricicli e i rework incidono pensantemente sui costi, disegnare wireframe accurati e completi di tutte le interazioni permette:
ai creativi di sviluppare solo le soluzioni creative funzionali alla definizione degli stili grafici dell’intero website
.
eventualmente riciclare e modificare solo i wireframe e non dover modificare grafiche e codici sorgenti.
boom