Costruire il layout di un sito web: 2° parte

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

On febbraio 27, 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.

Nella prima parte di questo articolo ho introdotto il concetto di struttura del sito web e stile, in questa seconda parte vi spiegherò 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 all’interno delle pagina e la loro importanza in ottica SEO (Tag h1,h2,h3…), piuttosto che i paragrafi e i loro allineamenti (al centro, sinistra, destra, giustificato). Alla fine ti fornirò un file in formato .psd che contiene una griglia a 12 colonne e delle misure standard per iniziare a disegnare un primo layout Web.

Tag HTML più importanti

All’interno di ogni pagina web sono presenti una serie di marcatori (definiti TAG), i quali permettono a seconda della loro funzione ed importanza la visualizzazione di alcun testi. Quello che a te interessa sapere da buon “disegnatore” è capire come andare a posizionare un Titolo rispetto ad un paragrafo, le dimensioni e l’importanza che hanno in ottica SEO.

  1. TAG H1 e H2: Rappresentano il titolo (H1) ed il sottotitolo (H2) di una sezione, di un paragrafo o di un articolo e vengono quindi definiti TAG di intestazione. Quando si vuole ottimizzare una pagina web è fondamentale inserire una serie di Titoli H1 o sottotitoli H2 per aiutare i motori di ricerca a capire di cosa stiamo parlando e che quel contenuto ha un importanza maggiore rispetto ad un paragrafo. Vediamo un esempio:layout di un sito web

    Nell’immagine l’H1 è il titolo principale della pagina con il bordo rosso, mentre l’H2 è il sottotitolo con il bordo giallo. I titoli vengono disegnati e visualizzati sempre con un font più grande rispetto ad un paragrafo e dal colore differente. Tieni conto che a video la lettura risulta molto più difficoltosa, quindi non scegliere un font calligrafico o poco usuale, ma opta sempre per dei font lineari come l’Arial, il Roboto, il Lato o il Montserrat (dai un’occhiata ai Google Fonts).

  2. TAG p: Rappresenta il paragrafo, un testo meno importante di un titolo, ma che dovrà contenere al suo interno le parole chiave del sito web per consentire sempre la sua indicizzazione e non dovrà essere eccessivamente lungo, per consentire una lettura efficace. Il tag p viene rappresentato con un font dalla dimensione più piccola rispetto ad un H1 o H2, che può essere differente pur rimanendo all’interno della stessa “famiglia” e “stile” (Se usi un carattere lineare non puoi utilizzare un calligrafico su un paragrafo!) e con un colore solitamente scuro e sobrio per facilitare la lettura. Vediamo un esempio:paragrafo

    Nell’immagine il titolo stavolta è unh H2 e sotto vi è il paragrafo.

Gli allineamenti dei Testi:

  • Giustificato con Titolo allineato a sinistra:

paragrafo

  • Giustificato con Titolo allineato al centro:

allineamento testo

  • Titolo e paragrafo allineati a sinistra:

allineamento Sinistra

  • Titolo e paragrafo allineati a destra:

allineamentoaDestra

Adesso guardiamo insieme come è composta la griglia sulla quale si disegna un Layout web:

Layout web

La griglia si ispira a Bootstrap che divide una pagina web in 12 colonne per un totale di 1170px (spazio di colore rosso) sulle quali impaginare i propri elementi. Tieni presente che ogni elemento può occupare una colonna o prendersi due, tre o quattro colonne insieme o addirittura sei! (Vedi per esempio nell’immagine poco sopra il paragrafo “Chi siamo”, che dall’icona alla fine del paragrafo stesso occupa dalla colonna n.1 alla n.6, quindi il 50% del Layout totale visibile.
Il logo occupa, come noti, due colonne e la navigazione, in questo caso, ne occupa cinque. Il logo e la navigazione fanno parte però entrambi dell’HEADER (per rinfrescare la memoria segui la 1° parte di questo articolo!) e seppur ognuno dei due è posizionato in uno spazio specifico, insieme occupano il 100% dello spazio totale (1170px = 100% ) .

Capiremo più avanti il concetto di Layout Web fluido e responsive, perchè vedrai che ogni elemento che andari a posizionare all’interno della griglia a 12 colonne ispirata a Bootstrap servirà al Web Designer o Programmatore a capire da mobile come ogni elemento dovrà visualizzarsi!

Ti lascio una risorsa gratuita per scaricare sul tuo computer un .psd della griglia ed iniziare a provare ad impaginare i tuoi elementi grafici con Adobe Photoshop (testi ed immagini) all’interno delle 12 colonne a disposizione:


SCARICA Il PSD DEL LAYOUT WEB

Inserisci il tuo nome e la tua email per ricevere subito il PSD con la griglia per costruire un layout web efficace!

Il tuo nome*

La tua email*

Acconsento Privacy

Lascia un commento

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