Costruire il layout di un sito web: 1° parte

Home  /  Web Design  /  Costruire il layout di un sito web: 1° parte

On febbraio 20, 2016, Posted by , In Web Design, By , , With Nessun Commento

Il layout di un sito web non è altro che l’impaginazione dei contenuti e delle immagini contenute al suo interno.

Se sei in procinto di realizzare il tuo primo sito web, che sia in WordPress o in qualsiasi altro linguaggio di programmazione, dovrai decidere fin dal principio il layout che il tuo sito dovrà avere, che comprenderà sia la struttura delle singole pagine, sia la grafica utilizzata. Creare un layout web può rappresentare un’operazione complessa, soprattutto se va già pensata e studiata per il responsive design (un sito che si adatti su ogni dispositivo), che spesso richiede l’intervento di un web designer (colui che disegna le singole pagine di un sito, solitamente con Adobe Photoshop), ma conoscendo le regole principali è possibile riuscire a definire la struttura di partenza e lo stile che vorrai dare al tuo sito web e potrai certamente in futuro essere in grado di spiegare al Web Designer come muoversi. Questo argomento è talmente vasto che non potrà essere spiegato interamente in un solo articolo, ma dovrò suddividerlo almeno in 2 parti. In questa prima parte tratteremo:

  1. Struttura del sito web
  2. Lo Stile

La struttura

Iniziamo presentando la STRUTTURA di base contenuta dentro ogni sito web, dalla quale partire e vediamo come questa sarà di volta in volta personalizzata:

Come puoi notare l’immagine sopra riporta la struttura di un sito web in tre modalità visive differenti: desktop (1024px), tablet (768px) e mobile (320px) . Questo perché ogni sito va pensato e studiato per adattarsi ad ogni dispositivo.

Come in un libro ogni sito che si rispetti ha un incipit, una situazione centrale ed un epilogo! Nel web l’incipit è l’HEADER , composta dal logo e dalla navigazione o da una possibile banda sopra o sotto che può contenere la Login di accesso ad un area riservata o dei Social Network o un invito a compiere un’azione come nel nostro caso. L’Header rimane sempre uguale in ogni pagina, non si sposta e non si muove. La nostra situazione centrale prosegue poi con un Contenitore che di norma contiene le singole pagina del sito web, le informazioni, gli articoli, i prodotti o lo Slider ed infine l’epilogo nel web si conclude con un Footer posto in fondo alle pagine, anch’esso resta sempre invariato e contiene le informazioni di Copyright di chi ha realizzato il sito web, la partita iva, i tuoi contatti personali/aziendali e le icone dei tuoi Social Networks.

Per essere più chiari vediamo adesso questo altro esempio:

layout web

Ti chiederai da dove partire? Non partire mai dal disegnare la prima bozza della struttura del sito web se non hai chiaro lo Stile che dovrai seguire.

Lo stile

Innanzitutto chiediti qual’è l’impronta grafica che vuoi dare al tuo sito web? Quali sono i colori base da utilizzare nel progetto? Che emozione devono suscitare le immagini? Che carattere utilizzare per i testi e che tono usare nel raccontare chi sei o cosa vendi? Ricorda che l’Header ed il Footer restano sempre invariati in ogni pagina, sia come posizione sia come stile grafico. Per i colori meglio colori freddi o toni caldi? Se sei titolare di una Spa certamente utilizzerai toni freddi ma che ricordano il mare, la calma ed il benessere come dei blu o dei viola, se insegni a dei bambini sicuramente opterai per dei toni pastello. Prova a fare una ricerca sulla pscologia del colore e vedrai quanta ispirazione potrai trarne! Solitamente una buona regola che non potrà mai farti sbagliare è quella di seguire i colori del Logo (quando il logo è a colori!!!) e riportarli nella navigazione o nei titoli principali dei testi del tuo sito web. Lo stile è composto anche:

Dall’immagine

Scelti i colori del sito ed i toni, puoi scegliere se optare per uno stile fotografico delle immagini o vettoriale quindi più estroso e disegnato (come quello che trovi nel nostro sito web!) o addirittura fatto solo di icone minimaliste e flat. Le foto andranno certamente bene per tutte quelle attività che hanno da mostrare prodotti o persone (ristoranti, asili, scuole, hotel, automobili, fotografi..), mentre i disegni o le icone possono andare bene per le agenzie pubblicitarie, grafici o web designer free lance, software house e tutte quelle attività che non presentano prodotti da guardare, ma propongono servizi.

Dai contenuti

Adesso passiamo ai contenuti! Hai mai sentito parlare di Architettura delle informazioni? I contenuti all’interno di un sito web svolgono probabilmente il ruolo più importante, perché devono dare velocemente e chiaramente l’informazione che l’utente sta cercando. Se i testi del tuo sito web, insieme alle immagini, non accompagnano nella lettura l’utente in maniera coerente, quest’ultimo uscirà dal sito per cercarsi le informazioni da qualche altra parte!. I contenuti solitamente ti vengono forniti dal Copywriter quando sei forturnato, ma molto spesso dal cliente stesso in un documento Word o nel peggiore dei casi ti verranno in grandi linee spiegati a parole e dovrai essere tu bravo a farteli fornire! Sta a te decifrarli e capire che spazio riservare ad ogni contenuto e quale importanza ricopre una frase piuttosto che un’altra!

Nel prossimo articolo , la seconda parte, ci focalizzeremo prima sui Contenuti, spiegando i tag Html più importanti che ti serviranno nella costruzione di un Layout per il web e quindi per identificare come vanno inseriti i Titoli e la loro importanza in termini SEO (h1,h2,h3…) piuttosto che i paragrafi e i loro tipi di allineamenti (al centro, sinistra, destra, giustificato) e dopo inizieremo a parlare di misure per impostare una prima pagina web con Adobe Photoshop. Delle immagini preferisco parlarne alla fine e meno, perché solitamente le fotografie o i disegni vi vengono forniti dal grafico che fa a priori una cernita ed una creazione grafica in base agli spazi da voi pensati.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *