Friday, August 21st, 2009
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.
Dovrebbe essere la nostra prima preoccupazione, ma stranamente è probabile che ne avremo la risposta solo alla fine dell’articolo.
Per spiegarmi meglio, in base alla quantità e qualità dei contenuti, la nostra conoscenza degli strumenti, di ciò che abbiamo in mente,
avremo bisogno di creare un tipo specifico di sito che ha tutto un suo processo per essere raggiunto. 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.
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à.
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.
Direi che a questo giro è tutto.
Aggiungo che potete disegrìnare 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.
