home

Wireframes e Ideazione: Creare un Sito


Friday, August 21st, 2009

vimeo-clip-page.jpg

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.
Sketch1.jpg Wireframe #1 on flickr
Sketch2.jpg Wireframe #2 on flickr
Sketch3.jpg Wireframe #3 on flickr
Sketch4.jpg 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.


Tags & Category




Condividi

  • digg
  • SFacebook
  • Twitter
  • technocrati
  • stumble
  • delicious

Commenti   2rss

    1. Comment by admin

      September 2, 2009 @ 11:53 am


      Mi sono appena accorto che anche su Smashing Magazine ieri è uscito un articolo sull’argomento: http://www.smashingmagazine.com/2009/09/01/35-excellent-wireframing-resources/

      Inoltre anche su S37signals la scorsa settimana hanno mostrato i vari stili dei loro designers nell’uso dei wireframes: http://37signals.com/svn/posts/1880-the-different-sketch-styles-of-the-designers-at-37signals#

      Evidentemente era nell’aria :D

    2. Comment by Filippo Gambardella

      September 27, 2009 @ 10:55 am


      Complimenti per l’articolo! Davvero ben scritto e dettagliato!!


top