Avrai sicuramente sentito parlare di questa sezione e della sua importanza.

Di fatto possiamo dire che è la parte più importante di un sito web perché è quella che l’utente vede appena atterra su un sito web.

È fondamentale quindi che quest’ultima sia progettata bene e che abbia delle determinate caratteristiche e dei componenti.

Ma quali sono?

Vediamole insieme.

Innanzi tutto al suo interno deve avere una serie di componenti, ovviamente non sono sempre gli stessi.

Facciamo un esempio molto generico per capire meglio.

Barra di navigazione + logo

Il primo componente è la barra di navigazione che allo stesso tempo contiene il logo da un lato e il menù di navigazione dall’altro.

Possiamo orientarli in diversi modi, nel tutorial che vedrai in fondo alla pagina realizzeremo insieme 2 esempi.

Il 1o con il logo a sinistra e il menù a destra, il 2o con il logo centrato e il menu distribuito a destra e sinistra.

Immagine di background

L’immagine di sfondo deve colpire l’utente, deve essere impattante e avere una connessione con il business core del sito web.

È quell’elemento che suscita emozione all’utente che la guarda e lo invoglia a scoprire di più.

La scelta dell’immagine deve essere accurata in quanto quest’ultima deve dare modo di poter inserire del testo e/o dei bottoni sopra di essa.

Se lo sfondo non dà modo di poter creare il giusto contrasto con le scritte allora è opportuno creare un overlay.

Come si crea un overlay?

Lo scoprirai nel video tutorial

Tagline (title + subtitle)

Il “tagline” è generalmente strutturato in 2 livelli:

Un titolo principale ed un sottotitolo.

Come per l’immagine anche il tagline deve essere progettato bene: deve essere breve, deve colpire e deve essere coerente con il proposito del sito web.

Call to action

Non è sempre presente ma quando c’è, è l'”affordance” (es. la maniglia per la porta) della nostra sezione.

Molto spesso ancora con uno scroll in verticale nella stessa homepage.

Altre volte, la cta, linka ad un’altra pagina del sito.

Guarda il video tutorial ed iscriviti al canale di webdesignerd

Leggi qui

The post Disegnare la hero section di un sito web first appeared on Webdesignerd.