Il nostro Web » Qualità del Web » Layout e Grafica

Il nostro Web

Layout e Grafica per il Web - Realizzare la struttura di un sito web

Il layout e la grafica di un Sito Web sono due concetti che camminano di pari passo, in quanto il layout può essere definito come la struttura grafica di una pagina Web, mentre la grafica rappresenta un concetto più ampio rientrando cosi in una tecnica di comunicazione capace di esprimere concetti e comunicare messaggi, il tutto attraverso il canale visivo.

La grafica annovera al suo interno più settori specifici, di cui almeno due chiaramente caratterizzati: il graphic design (progettazione grafica) a cui oggi si assimila il termine indicante la categoria generale di grafica e la grafica d'arte, settore orientato alla riproduzione di opere artistiche in limitata quantità.

fonte: Grafica su Wikipedia

Parlare di layout e grafica non significa limitarsi ad esporre le tecniche di progettazione e quindi realizzazione di un prodotto finale, bensì parlare di comunicazione.

La comunicazione effettuata tramite la grafica viene meglio definita, dagli esperti del settore, come visual design .

Questa fase è preceduta dall'organizzazione dei contenuti attraverso un insieme di regole finalizzate all'organizzazione di testi, titoli, immagini e didascalie, all'interno di uno spazio che solitamente è lo schermo.

Elementi principali del Layout di un sito Web

Il layout rappresenta la struttura grafica di una pagina Web; non sempre esso risulta tangibile se non per sfumature di colori o bordi che influiscono distaccando lo sfondo della pagina dallo sfondo dove sono presenti i contenuti.

In linea di massima, in ogni layout convenzionale di un sito web, si possono individuare delle sezioni ben precise:

Header - Intestazione del Sito
Content - Parte centrale (solitamente suddivisa in colonne)
Footer - Chiusura del layout
Barra dei Menu - Accoglie le voci principali del menu del sito web e, in genere, è posizionata subito sotto l'Header o nella colonna sinistra del Content.

Analizzando più approfonditamente le sezioni descritte, si può aggiungere che l'Header è la sezione che solitamente accoglie, nell'angolo in alto a sinistra, il Logo, simbolo dell'azienda o rappresentazione del sito web. Altri componenti che si possono riscontrano nell'Header sono: slogan, menu, banner, motore di ricerca interno al sito, ecc...

Il Content è la parte centrale di ogni sito web, solitamente suddiviso in colonne, può, a seconda dei casi, essere di una, due o tre colonne (raramente più di tre). Le colonne del Content sono solitamente di dimensioni differenti, la più grande accoglie i contenuti della pagina web, la (o le) più piccola può invece ospitare menu (principali o secondari), brevi news, link ecc...

Il Footer è la parte in basso che chiude effettivamente il layout del sito web, questa sezione solitamente ospita la denominazione del titolare (o azienda) del sito web, i copyright, le eventuali validazioni, la Partita IVA, il link all'informativa sulla privacy, i crediti, ecc...

La Barra dei Menu si trova solitamente immediatamente sotto l'Header se il menu è di tipo orizzontale, o nella colonna sinistra se è di tipo verticale. Sempre più spesso, i menu vengono posizionati anche in altre sezioni o posizioni, in quanto pare sia stato dimostrato che la sua posizione non influisca sull'esperienza di navigazione dell'utente.

Non di rado si trovano menu secondari (o di servizio) sull'Header (in alto a destra) o nella colonna di estrema destra del layout. Inoltre, se il sito web in questione è di dimensioni notevoli (molte pagine e sezioni), è verosimile riscontrare la combinazione di più menu in contemporanea, secondo lo schema comunicativo del caso.

Layout Liquido e Layout Fisso

Nel comune cyberspazio i layout delle pagine web sono catalogabili in layout fissi e layout liquidi.

I layout fissi vengono realizzati impostando, sin dall'inizio, una dimensione standard per la larghezza ed essa non varia ridimensionando la finestra del browser.

L'unità di misura dei componenti della pagina, come immagini, icone, foto, margini, spazi e font, è specificata solitamente in unità di misura assoluta generalmente espressa in pixel (px).

Solitamente per i layout fissi si usano dimensioni standard per la larghezza come 760px e 960px; calcolate in relazione alle più diffuse risoluzioni dei monitor: 800x600px e 1024x768px.

Lo scopo è quello di realizzare un sito web che, con tali risoluzioni, non obblighi il visitatore ad utilizzare lo scroll orizzontale durante la navigazione.

Come scegliere la giusta risoluzione? La domanda non ha una risposta facile o assoluta: solitamente ci si basa su indagini relative al target di riferimento a cui ci si aspetta appartengano i visitatori.
Se la percentuale di visitatori attesi che utilizzano ancora la vecchia risoluzione di 800x600px è alta si opta per il layout a 760px, altrimenti per il layout a 960px.
Quando non si riescono ad ottenere dati attendibili o quando le percentuali sono all'incirca uguali è sempre meglio optare per il layout a 760px, che consentirà di allargare il proprio bacino di utenza.

I layout fissi hanno molti vantaggi poichè consentono una più facile realizzazione quando si intende utilizzare una grafica più elaborata, offrendo una maggiore possibilità di personalizzazione rispetto al layout liquido, comunemente sfruttato, invece, per progetti che presentano una grafica per lo più basata su elementi testuali.

Vantaggi:

permette una maggiore personalizzazione grafica;
al crescere delle risoluzioni il layout si mantiene sempre identico evitando l'insorgere di disallineamenti grafici e testuali.

Svantaggi:

ad alte risoluzioni non viene utilizzata tutta la larghezza a disposizione sul monitor;
a basse risoluzioni (più basse di quella prestabilita in fase di progettazione) o a finestra del browser ridotta, è necessario utilizzare le barre di scorrimento orizzontale per fruire di tutte le informazioni della pagina.

I layout liquidi vengono realizzati impostando, sin dall'inizio, una dimensione in percentuale rispetto alla dimensione della finestra del browser qualunque sia la risoluzione del monitor.

Solitamente la dimensione dei componenti che costituiscono la pagina web è specificata in percentuale (%).

Ridimensionando la finestra del browser anche la pagina web verrà ridimensionata.

I layout liquidi risultano essere più versatili poichè si prestano ad uno spettro più ampio di risoluzioni; la limitazione più grande sta nell'aspetto che essi possono assumere per la veste grafica.