Esistono molti modi diversi per creare un sito web. Mentre alcuni scelgono di ideare manualmente un concept per poi iniziare a scrivere i codici in html, altri preferiscono un approccio più grafico per impostare lo stile del layout.
In questo articolo ci occuperemo della seconda tipologia di approccio.
Molti, infatti,  preferiscono partire da un immagine,  quando iniziano la progettazione di un sito,  e normalmente i passi fondamentali sono tre:

1 usare photoshop per creare un immagine che sia rappresentativa per lo stile generale che avrà il layout.

2 Una volta che si è soddisfatti della propria elaborazione grafica iniziare a pensare a come caricare l’immagine o le immagini sul template del sito. In questo procedimento è essenziale avere una conoscenza del codice html ed è inoltre indispensabile avere confidenza con le tabelle o molto meglio con i fogli di stile, in modo da poter adattare la prorpia immagine con la massima resa.

3 Fatto questo è tempo di iniziare a scriver il codice html. Questo sarà la base del template che verrà utilizzato per creare tutte le pagine del tuo sito.

Impostare lo stile dell’interfaccia

Siamo finalmente giunti ad uno dei momenti più critici dell’intero lavoro di prgettazione del sitto web, Il design dell’interfaccia. Si tratta di un operazione  molto importante per rendere la navigazione all’interno del tuo sito più agevole.  Infatti, un sito internet che presenti gravi lacune in questo senso, sarà sicuramente tenuto in poca considerazione dalla maggior parte degli utenti.

Pensare al futuro

Quando ci si approccia al lavoro di progettazione grafica di un sito  è bene pensare al futuro in modo da impostare un lavoro che permetta di operare cambiamenti con estrema facilità. Se, ad esempio, vuoi aggiungere una nuova sezione al tuo sito e non hai impostato una struttura grafica adattabile, ti ritroverai a spendere tempo e denaro in quantità.
E’ importante progettare il design del tuo sito pensando a quali potrebbero essere le tue esigneze future. I siti web, infatti, sono come ogni altro tipo di business: necessitano di stare al passo coi tempi.

Adattare le immagini

Naturalmente è possibile usare qualunque software per creare le immagini, anche se photoshop è tra i più consigliati, grazie alla facilità con cui è possibile modificare il formato delle stesse.

Adattare significa prendere il tuo progetto di layout originale e farne tante piccole immagini individuali, che potranno essere inserite  nelle tabelle o nei fogli di stile.  Naturalmente è possibile usare l’immagine nelle sue dimensioni originali come una pagina del tuo sito, impostando una mappatura delle sue parti per inserire i link. Purtroppo però operando in questo modo si rallenterà di molto il caricamento delle pagine del sito, e un sito troppo pesante da caricare risulta scomodo da utilizzare. Per questo è consigliabile utilizzare immagini che si possano suddividere, in modo da poter creare, tramite il codice html, un pattern che si ripeta. Quando finalmente le immagini sono pronte e ottimizzate per le diverse pagine si può finalmente passare alla vera e propria edificazione del sito.

In questo articolo non ci siamo soffermati su quegli aspetti squisitamente tecnici che riguardano questo particolare ambito, ma ci siamo limitati a fare una breve descrizione dei processi che precedono la messa on line del sito, aggiungendo qua e là qualche consiglio e qualche accorgimento.
Con la speranza di non avervi annoiato e di essere magari riusciti a dipanare qualche dubbio vi salutiamo e vi diamo appuntamento al prossimo articolo.

Parte prima:

Grafiche  e  Layout

Nell’articolo postato precedentemente abbiamo cercato di spiegare come sia cambiato il ruolo professionale del designer dopo l’avvento del web. Si era detto che il web designer è una figura differente rispetto al grafico o al designer tradizionali, che necessariamente deve acquisire una serie di conoscenze specifiche per poter essere in grado di lavorare. Si tratta insomma di una figura complessa e multisfaccettata.
Come dicevamo nell’articolo precedente ciò che ci preme è la realizzazione di una guida semplice e priva di fronzoli, che possa dare alcuni utili consigli pratici ai grafici di nuova generazione.
Al di là delle conoscenze teoriche di base, infatti, per poter svolgere un lavoro di qualità sulla rete, è necessario avere un forte senso pratico per ciò che concerne gli aspetti più tecnici.

Le grafiche

1: Pensa in piccolo, non utilizzare immagini che abbiano un peso eccessivo. Anche se il tempo di caricamento delle pagine può essere condizionato da fattori tra i più disparati, le immagini di dimensioni troppo grandi sono comunque la causa principale del rallentamento delle pagine di un sito. Naturalmente per riuscire ad avere la massima resa è possibile ottimizzare le proprie immagini, ma questa è un altra storia.

2: Usa sempre delle grafiche che abbiano a che fare con i contenuti del sito. E’ di fondamentale importanza che la grafica della pagina sia studiata in correlazione con i suoi contenuti. Naturalmente questo non significa che tutte le immagini accessorie ( che cioè vengono utilizzate per arricchire e abbellire la pagina) debbano essere strettamente legate all’illustrazione dei contenuti, è sufficiente che siano minimamente pertinenti.

3: Non usare troppo spesso animazioni flash o immagini che si muovono scorrendo o roteando. Sono stati effettuati molti studi sull’attenzione che dimostrano che le grafiche troppo luminose e movimentate distraggono lil lettore dal messaggio e annoiano facilmente.

Il layout

4: Scegli un assetto grafico standard. Ci sono molti siti che preferiscono avere un assetto originale, con un impaginazione dei testi che va da sinistra verso destra invece che dall’alto verso il basso. Possono sembrare soluzioni originali e potreste trovarle più divertenti da realizzare, ma faranno impazzire il vostro lettore. Il motivo per cui l’impaginazione a tre colonne è così popolare sia sui siti web che sui giornali è perchè funziona. Potrete pensare che sia noiosa, ma riuscirete ad attirare l’attenzione di più lettori se utilizzate una forma di impagionazione semplice e a cui sono più abituati.

5: Gli spazi bianchi sono tanto importanti sul web quanto lo sono su un layout cartaceo. Gli spazi bianchi sono un elemento fondamentale del layout della tua pagina. Devi fare molta attenzione alla loro distribuzione  e all’effetto che operano sui contenuti testuali.

6: Usa le tue grafiche come elementi funzionali all’impaginazione. Le grafiche del tuo sito possono essere molto più che sempliici grafiche e diventare veri e propi elementi d’impaginazione.
Al di là dei pulsanti e delle icone funzionali alla navigazione all’interno del sito, anche le immagini che normalmente sono puramente decorative possono diventare elementi in grado di aiutarti nell’arduo compito di creare un assetto adatto alla pagina.