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.
Post correlati
Trackbacks/Pingbacks
- Tutorial layout: come creare la grafica di un sito passo per passo | Italian webdesign - [...] presume che prima sia stato disegnato su carta e sia stato progettato un wireframe per decidere la posizione degli ...
- Progettare un sito web: i wireframe | Mimulus - [...] cosa serve un wireframe? (Per capire la sua importanza, puoi leggere anche questo articolo di Marco Olivetti). Il wireframe ...
- La strategia di architettura dell’informazione | Italian webdesign - [...] come sviluppare una data funzione. Possiamo creare delle bozze da mostrargli, non un vero e proprio wireframe, solo una ...
- Guida architettura dell’informazione | Italian webdesign - [...] I wireframes [...]
Lascia un commento
Istock photo
Sponsor Liquida
Sponsor e amici
I più commentati del mese
Consulenza legale
Oggi ti segnaliamo i seguenti link
Iscriviti alla newsletter!
Registrati al sito e al forum
Who's Online
Hai bisogno di un sito?
Lauryn.it, creatrice di Italianwebdesign, offre servizio professionale di webdesign, grafica, e-commerce, webmarketing, seo e posizionamento sui motori di ricerca.
Inoltre converte i tuoi layout grafici in xhtml e css e crea template per Wordpress personalizzati secondo esigenze di community, siti aziendali, blog professionali.
- Per informazioni: Lauryn.it
- Contatto email per preventivi gratuiti: info@lauryn.it
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.
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!
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