Parti con la progettazione del tuo sito web

La progettazione delle varie pagine è una fase fondamentale per la buona riuscita del tuo sito web.
Iniziare a scrivere codice senza avere un’idea precisa di cosa vuoi ottenere ti porterà in seguito a dover modificare (o peggio ancora a cancellare) ciò che si è fatto.

Il consiglio che ti do è di mettere tutto nero su bianco.

Prendi un pezzo di carta e dai sfogo alle tue idee man mano che ti verranno in mente (per non dimenticarle) e fai degli schizzi di quello che vorresti fosse il risultato finale.

Esistono anche degli editor avanzati per progettare le bozze delle tue pagine web, ad esempio io trovo molto utile Balsamiq.

DISEGNA IL LAYOUT

Bene, hai tutto chiaro nella tua testa? Ora passiamo a disegnare il layout del tuo sito web.

Ricordati che la maggior parte dei siti web ha una struttura abbastanza delineata: contenuto centrale con sidebar a destra e sisnistra, colonna di sinistra ampia per il contenuto e sidebar destra, contenuto full page, schema a blocchi, ecc…

Ecco qualche esempio dei layout più comuni che potresti incontrare navigando sul web:

Tramite un software di elaborazione grafica potrai definire e costruire (in forma di immagine statica) tutte le pagine che compongono il tuo sito.

Ecco un elenco dei software maggiormente utilizzati in questa fase:

Software per grafica vettoriale

• Adobe Fireworks: a mio parere il programma ideale per progettare e realizzare un sito web. Completo, versatile e facile da apprendere.
• Gimp 2 (free): è un buon prodotto ed ha il grandissimo pregio di essere gratuito.
• Inkscape (free): è un ottimo programma vettoriale adatto a neofiti o esperti di grafica.

Software per fotoritocco

• Adobe Photoshop: non necessita di presentazioni direi
• Paint Shop Pro: il prodotto della Corel è davvero interessante anche per il prezzo contenuto rispetto al precedente
• Gimp 2 (free): se la cava egregiamente anche con il fotoritocco includendo effetti e filtri di vario genere
• Photo Pos (free): un programma gratuito che consente operazioni di fotoritocco con feature molto interessanti

A questo punto avrai un’anteprima abbastanza fedele della resa finale del tuo sito.

Consiglio: non disegnare TUTTE le pagine del tuo sito ma in definitiva basta realizzarne un paio tra cui la home page.

Dalla progettazione in 2D potrai ritagliare ed esportare i singoli elementi grafici in formato gif, png o jpg, che verranno richiamati all’interno delle tue pagine html.

Se sei alle prime armi o la fantasia non è il tuo forte, fatti un giro in internet per prendere spunto da altri siti, cercando di distinguere il limite che esiste tra ispirazione e plagio.

Ricordati: piuttosto che copiare è meglio scaricare qualche template gratuito e personalizzarlo a tuo piacimento, anche se il mio consiglio resta quello di “disegnare” tutto da zero.
Spazio alla creatività e all’originalità, dopo tutto il tuo sito deve rispecchiare la TUA natura e trasmettere il TUO messaggio.

CHE STILE SCEGLIERE

Lo stile con cui realizzate il tuo sito deve essere pensato anche in funzione della sua 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, uffici o elementi che fanno riferimento al lavoro.

Se stai progettando un sito che tratta argomenti giovanili potrai utilizzare dei colori più brillanti, un aspetto accattivante e degli elementi dinamici.

Se vuoi far pubblicità al tuo hotel o agriturismo, cerca di creare un aspetto confortevole ed invitante con l’uso di immagini panoramiche (a tutto schermo) e colori tenui.

LE DIMENSIONI CONTANO

Qualcuno dice che le dimensioni non contano ma in quest’ambito è il contrario!
Ricorda che il tuo sito web si misura in pixel e non in mm/cm, tienilo presente quando realizzi il layout delle pagine.

Per rendere il tuo sito visibile sulla maggior parte dei monitor in maniera ottimale ti consiglio una larghezza massima che non superi i 1000px.

Consiglio: cerca di immaginarti a priori come sarà visibile il tuo sito in versione mobile.

Ricorda inoltre che siamo nell’era del mobile per cui tieni presente che il tuo sito dovrà avere un design responsivo, ossia che si adatti ai vari display dei vari device.

Per questo motivo non dare larghezze fisse agli elementi delle tua pagine web (tabelle, div, immagini).

Direi che è giunto il momento di passare a qualcosa di più stimolante, perciò per prima cosa procurati un editor di testo perché nella prossima lezione partiremo con l’HTML, i CSS e tanto altro.

Ogni volta che mi impegno nella stesura di questi articoli, lo faccio per coloro che sono interessati a ricevere consigli sul mondo del web.
Perciò, se ti va, condividi quest’articolo sui social o esprimi la tua opinione.
Se hai domande, non esitare a farle, sono qui per te!