Wireframes e Ideazione: Creare un Sito

Quando si pianifica un sito è sufficiente partire con carta e penna prima ancora di accendere il computer. è importante capire cosa vogliamo creare. Capire qual’è il suo scopo, il tipo di contenuti che ospiterà e disegnarne la struttura sarà il nostro primo passo.

Che cosa mi serve?

Dovrebbe essere la nostra prima preoccupazione, ma stranamente è probabile che ne avremo la risposta solo alla fine dell’articolo.
Per spiegarmi meglio, avremo bisogno di creare un tipo specifico di sito in base alla quantità e qualità dei contenuti, alla nostra conoscenza degli strumenti ed in base a ciò che abbiamo in mente. Non tutti i siti sono uguali.

Ad esempio:

potreste volere una vetrina per il vostro nuovo business e solitamente un sito statico è sufficiente;
Potreste voler tenere aggiornati clienti o amici sulle vostre attività e una buona soluzione sarebbe un blog o persino Twitter se siete concisi;
magari volete creare un social network visto che in questo periodo stanno avendo successo ed in tal caso vi servirà qualcosa di molto più ampio e potente oltre a dovervi sporcare le mani col php per offrire contenuti dinamici;
un’altra possibilità è che vogliate mostrare dei vostri lavori e vi serve dunque un semplice portfolio.

Ci sono molte possibilità e dovete filtrarle anche in base alle vostre capacità se decidete di fare le cose da soli: siete dei mostri col CSS o preferite scegliere una template già pronta per il vostro blog? Avete familiarità con PHP o preferite usare un CMS per semplificarvi le cose? Tutte scelte da considerare prima di iniziare, ma diventerà tutto semplice nei prossimi paragrafi.

Elenca i tuoi contenuti

Scrivere su un foglio tutto quello che si ha in mente di inserire su un sito è una cosa molto semplice, ma aiuta moltissimo ad organizzare il lavoro.
Facciamo un esempio, diciamo che siate un fotografo e vogliate creare un portfolio dei vostri lavori.
Bene, sapete dall’inizio che metterete molte foto sul sito e probabilmente delle galleries per raccogliere ed aiutare la navigazione. In più potreste dividerle per categorie o periodi, quindi già potremmo avere alcune pagine. Sicuramente dovete aggiungere i vostri contatti nel caso qualcuno voglia assumervi o saperne di più e nello stesso spirito io aggiungerei anche una breve biografia o presentazione di voi stessi.

Adesso che avete fatto una lista e avete tutto davanti agli occhi potete cominciare a dividerlo per pagine così da organizzare il sito. Seguendo l’esempio avremmo già alcune pagine di foto, ognuna con la sua gallery in base alla categoria, una pagina per i contatti, una per la biografia e una homepage dove accogliere i visitatori e spiegare cos’è il sito.
In pratica ora abbiamo una piccola flowchart, uno schemino, con le pagine del sito e che contenuti avranno. Iniziamo a farci un’idea concreta delle dimensioni che avrà.

Disegnate i Wireframes

I Wireframes sono disegni schematici della pagina e dei suoi elementi. In poche parole si tratta di disegnare la struttura e l’aspetto della pagina.
Generalmente potete disegnare una sezione in alto per l’header ed una in basso per il footer. La navigazione potete metterla nell’header o in una sidebar, una colonna laterale come fanno molti blog.
Scegliete anche dove inserire il vostro testo, i titoli ed in questo caso le vostre immagini.
Insomma, disponete tutto come l’avevate immaginato.

Io generalmente parto con qualcosa molto schematico e pian piano che ho l idee più chiare aggiungo dettagli.
Date un’occhiata a questi esempi presi da designers e usability experts, alcuni sono già simili alla versione finale del sito e altri sono solo scarabocchi delle idee iniziali.
Wireframe #1 on flickr
Wireframe #2 on flickr
Wireframe #3 on flickr
Wireframe #4 on flickr
Questo è anche il momento per costruire le fondamenta dell’ information architecture del vostro sito. In realtà avete già iniziato suddividendo i contenuti per pagine, ma dovete anche considerare quali connettere tra loro e organizzare una gerarchia dei contenuti.
Questo vi aiuterà a creare la navigazione che &ègrave; alla base sia dell’IA che della usability del vostro sito. Due aspetti incredibilmente importanti di cui tener conto durante tutto il processo del vostro lavoro.

Update:Mi ero completamente scordato di aggiungere la presentazione che Nick Finck, Donna Spencer e Micheal Angeles hanno realizzato per l’SXSW interactive 2009. Slides + audio, non potevate chiedere di meglio (tranne essere là). Mi raccomando di ringraziare gli autori sui loro blogs e twitter.

Direi che a questo giro è tutto.
Aggiungo che potete disegnare i vostri wireframes a mano libera (come amo fare io con risultati orribili) o sono anche disponibili alcuni software apposta per il compito, generalmente usati dai professionisti che devono poi mostrare i progetti al cliente o lavorano con altre persone.
Il prossimo passo è quello di scrivere la versione finale dei contenuti da inserire (i vari testi, titoli, etc.) e creare la veste grafica. Ne parleremo più avanti (psst, subscribe per sapere quando).

Se avete delle domande, volete approfondire qualcosa o sapere come trattare altri tipi di siti che non erano nell’esempio potete usare i commenti, li tengo d’occhio.
Se v’è piaciuto l’articolo e pensate possa interessare a qualcun’altro condividetelo così spargiamo un po’ la voce.

You can leave a response, or trackback from your own site.

---

---

---

---

---