3. Progetta il tuo sito web dalle fondamenta.

La progettazione delle pagine è un passo fondamentale per la buona riuscita di un sito web. Iniziando a scrivere codice senza avere una idea precisa di cosa si vuole ottenere, si corre il rischio di dover modificare, o peggio ancora cancellare, in seguito ciò che si è fatto.

Vi consigliamo di mettere su carta le idee man mano che vi vengono in mente (per non dimenticarle) e fare degli schizzi di quello che per voi dovrebbe essere il risultato finale.

Successivamente tramite un programma di grafica (li trovi nella pagina strumenti per il fai da te) si vanno a definire e costruire, in forma di immagine statica, le pagine e le relative sezioni, la distribuzione dei contenuti, il posizionamento dei menù di navigazione e l'aspetto che dovranno avere le stesse. In tal modo avremo un'anteprima abbastanza fedele della resa finale del sito (in definitiva basta realizzarne un paio tra cui la home page).

Dalla progettazione in 2D estrapolate i singoli elementi grafici in formato gif, png o jpg, che verranno richiamati all'interno delle pagine html.

Per chi è alle prime armi o per chi non ha molta fantasia può essere di grande aiuto farsi un giro nel web e prendere ispirazione da altri siti (cercando di discernere sempre la sottile linea rossa che divide l'ispirazione dal plagio).

Se proprio non sapete dove mettere le mani potete scaricare dei template gratuiti e modificarne il contenuto.
Trovate una lista dei migliori siti che offrono web template gratis in questa sezione.

Lo stile con cui realizzate il vostro sito deve essere pensato anche in funzione della destinazione: i siti aziendali in genere hanno un aspetto molto lineare con colori non troppo brillanti, usano font quali arial o verdana e riportano immagini di persone, macchinari o elementi che fanno riferimento al lavoro descritto.
Siti che si occupano di argomenti giovanili invece hanno colori brillanti, aspetto accattivante ed elementi dinamici in flash.
Siti di hotel o agriturismo mettono in evidenza vedute ed interni, cercando di creare, attraverso dei colori pastello, un aspetto confortevole ed invitante.
Inoltre se si ha già un logo è conveniente rispettare il suo stile, per quanto sia possibile, evitando così di creare contrasti di colori, linee e caratteri.
Si può anche realizzare lo stile di un sito attraverso una metafora di ciò che si vuole comunicare. Un esempio ne è la nostra home page, dove la costruzione di siti web viene visualizzata metaforicamente come costruzione di una ipotetica casetta di mattoncini lego.

Importante ricordare che le dimensioni di un sito web si misurano in pixel e non in mm/cm, quindi quando realizzate la vostra prova impostate questi come unità di misura predefinita. Per rendere il sito visibile sulla maggior parte dei monitor in maniera ottimale si consiglia una larghezza che oscilla tra gli 800px e 1000px.

In generale non esiste uno schema predefinito, ma alcune tipologie, come i portali, rispettano mediamente la stessa impostazione: una testata in cui si inseriscono logo, nome, menù di navigazione ed eventuale immagine. Una sezione centrale e una o due sezioni laterali (un ottimo esempio è il portale del comune di Roma).

Di seguito illustriamo alcuni degli schemi più utilizzati nella realizzazione di pagine web:

Fate diverse prove prima di iniziare a scrivere il codice delle pagine, non siate soddisfatti del primo tentativo, sicuramente potete fare di meglio.

• Un pò di fantasia.
• Carta e penna.
• Un programma di grafica.