Benvenut* o bentornat* in questa nuova lezione di Web Design!
Oggi intendo parlarti degli elementi che compongono una pagina web, della loro "anatomia" e funzione e dei design responsive a nostra disposizione per poterli visualizzare correttamente con ogni device.
Header
L'header è, all'interno di un sito web, l'oggetto più importante di tutti. In sé contiene informazioni indispensabili per comunicare l'identità, gli scopi e ciò che ha da offrire l'azienda o il professionista che rappresenta.
Un'header ben strutturata contiene almeno il logo e il menu principale; niente però ci vieta di inserire al suo interno anche dei rapidi link per accedere alle pagine social e una barra di ricerca.
Qui in basso alcuni esempi di header:
Ti invito a notare come nell'ultimo esempio io abbia variato la dimensione dell'header e l'abbia suddivisa in due righe distinte: questo può accadere quando abbiamo un menu lungo e/o molti elementi fondamentali da mostrare all'utente.
Ma come poter adattare una header in maniera tale da renderla responsive?
Raccogliendo il menu in un unico bottone, come nel progetto qui sotto:
Ancora una volta, però, molto dipende dalla quantità di voci, link e simboli da inserire. Possiamo lasciare il menu aperto se ha poche voci, oppure, in particolare se ne ha molte, categorizzare le varie voci e distribuirle all'interno di più menu.
In basso un esempio pratico:
Qualunque sia il device, è bene con esagerare con le dimensioni dell'header, perché è essenziale che i nostri internauti abbiano la possibilità di dare un'occhiata anche a ciò che abbiamo inserito subito sotto, ossia la hero image.
Hero image
È un'immagine di importanza capitale per pubblicizzare l'attività dell'azienda/professionista proprietari* del sito. Di dimensioni rilevanti, è composta da un'immagine, una o due righe di testo e da un link o un bottone che conduca a una pagina con ulteriori chiarimenti. Se lo volessi, potresti inserire uno slideshow, ossia una galleria di immagini che scorrono in automatico o cliccando una freccia. Lo slideshow dovrà avere però un senso logico, ossia la presenza dovrà essere giustificata dall'esigenza di dover mostrare più contenuti importanti in cima al sito. Chiaramente, ogni immagine che compone la galleria dovrà essere accompagnata da link e testo, nonché, i contenuti delle slide dovranno essere differenti gli uni dagli altri.
Nella gran maggioranza dei casi la l'hero image svolge anche il compito di "chiamare all'azione" l'utente, diventando così una call to action. Possiamo perciò utilizzare questo spazio per proporre l'acquisto di un servizio o un prodotto in sconto, per incoraggiare la compilazione di un form di contatto per avere un preventivo, o per invogliare a sfogliare un nuovo catalogo.
In basso alcuni layout di esempio:
Oltre agli elementi sopra citati, puoi inserire nella hero image anche una barra spaziatrice, icone accompagnate a testi e uno o più loghi; fa' però attenzione a non occupare tutto lo spazio a tua disposizione, altrimenti l'immagine verrà coperta del tutto.
I testi di questa sezione hanno più scopi:
- incoraggiare all'azione: "Scopri i vantaggi della nostra fantastica promozione!", "Richiedi un campione gratuito!", "Sconti su tutto il catalogo!" sono alcuni esempi.
- informare: seppur brevemente, lasciando, se vantaggioso, spazio al desiderio di chiedere ulteriori chiarimenti.
- slogan: esattamente come il logo, lo slogan permette di comunicare lo spirito e la personalità dell'azienda.
Se si desidera rendere la hero image maggiormente esplicativa e accattivante, si può caricare un video al posto di una o più immagini. In questa maniera è possibile far vedere all'utente la qualità e il design di un prodotto, il suo uso o permettergli di dare un'occhiata alle stanze di un albergo.
Il video non deve necessariamente essere un filmato, ma può essere anche un'animazione o un susseguirsi di immagini. È possibile anche dotarlo di audio con comandi per regolare il volume e la riproduzione.
Bisogna badare però a non sovraccaricare la pagina, perché si corre il rischio di spazientire il potenziale cliente e fargli abbandonare il sito.
Per quanto riguarda le varie versioni responsive, è consigliabile creare alternative più leggere per i video e, eventualmente, sostituirle con semplici slideshow.
In linea generale, l'unica accortezza da mettere in pratica è ridurre le dimensioni di immagini, testi e bottoni abbastanza da inquadrarli nella loro interezza. Bisogna però porre attenzione anche alla leggibilità e all'utilizzabilità delle parti cliccabili: un'immagine non comprensibile non serve a molto e un link illeggibile a nulla.
Nei casi in cui non è possibile far conciliare ridimensionamento con usabilità, è bene prevedere versioni sostitutive.
Concludo questa lezione qui, con la prossima parleremo di altri elementi utilissimi come lo spazio dei servizi e dei feedback.
A presto!