Design “one page”, gli elementi di un sito ‘monopagina’
Soltanto se negli ultimi due o tre anni siete vissuti in un ashram o su un altro pianeta vi sarà sfuggita la tendenza del Web design che sempre di più vede la home page come sintesi di un intero sito, manifestatasi nei cosiddetti temi ‘one page’ o ‘single page’, ovvero ‘monopagina’, temi che sono andati evolvendosi di conseguenza per incorporare ogni genere di elemento e contenuto e rendere sempre più fluida e intuitiva la navigazione verticale.
I temi per WordPress, naturalmente, non potevano sfuggire a questo nuovo trend, ne è la prova lo stesso tema Divi di Elegant Themes che fa del one page la sua filosofia principale, soprattutto con la nuova forma di navigazione verticale che come avrete notato è impiegata anche in questi articoli di approfondimento e, ovviamente, nella home stessa di questo sito (per quanto si tratti solo di una scelta stilistica, in questo secondo caso).
Con questo articolo, che apre la nostra serie sul design monopagina, proveremo a dare uno sguardo all’anatomia di queste nuove interfacce Web alla base della filosofia ‘one page’ (che per in alcuni casi può sfociare nella ‘landing page’), per capire quali sono gli elementi fondamentali che le compongono e quale è il ruolo di ciascuna di esse. Si tratta di un articolo introduttivo dedicato soprattutto a chi è interessato a questo argomento ma non ha ancora approfondito, e di certo non dirà niente di nuovo ai professionisti del Web Design e ai ‘guru’ della comunicazione. WPAZ è nato per fare divulgazione, e non a caso nasce come sito ufficiale del libro “WordPress – La Guida Completa“, nel quale questi argomenti sono stati approfonditi e corredati da un progetto pratico che ripercorre la creazione della home di questo sito. L’articolo, inoltre, come sempre fa da ‘apripista’ per un ebook sullo stesso argomento, in corso di sviluppo e a breve disponibile per lettori e app Kindle, e in formato ePub per iPad e iPhone, Android e per tutti i dispositivi di lettura compatibili con tale formato (la disponibilità potrà essere verificata nella sezione del sito dedicata ai libri ed ebook).
Click o scroll?
Il concetto alla base del design one page è che l’utente impiega molto meno a scorrere una sola pagina che a navigare fra pagine diverse cliccando sulle voci di un menu, soprattutto ora che tutti i mouse dei computer desktop e i touch pad dei portatili offrono un sistema di scrolling facilitato, e soprattutto alla luce del fatto che un numero sempre maggiore di utenti naviga da un dispositivo mobile scorrendo i contenuti su un display verticale attraverso l’interfaccia touch.
Predisporre i contenuti di un sito su un’unica pagina ha diversi vantaggi, primo fra tutti l’ottimizzazione dei tempi di consultazione, in particolare se il tema utilizzato sfrutta il cosiddetto lazy download, grazie al quale i contenuti vengono caricati gradualmente e si rivelano pronti per la visualizzazione in modo fluido nel momento in cui arrivano sotto gli occhi dell’utente. Naturalmente, come sempre, sta a noi ottimizzare i contenuti stessi e affidarci a un buon hosting e a un sistema di caching per dare ancora più fluidità alla visualizzazione della pagina.
Verticale è mobile
Come accennavamo, un design basato sulla consultazione ‘verticale’ si presta in modo particolare alla fruizione su schermi verticali, tipici dei dispositivi mobili (lo so, si possono ruotare, ma questo è secondario).
Il fatto che la quasi totalità dei temi sia ora anche ‘responsive’, ovvero capace di adattarsi ai diversi display e in particolare quelli di smartphone e tablet, rende i temi one page, già progettati per una visualizzazione ‘verticale’, ulteriormente predisposti per questo tipo di consultazione, e di conseguenza particolarmente adatti a un restyling radicale di siti esistenti e non ancora responsive, che possono così far confluire nell’interfaccia one page i contenuti di più pagine, ottimizzati e predisposti per una consultazione fluida e naturale su ogni genere di schermo.
Al di là quanto appena detto, ovviamente, il ruolo creativo e strategico del Web designer è, come sempre, l’ingrediente fondamentale da aggiungere per ottenere questo risultato.
Nella schermata di presentazione molti temi ‘one page’ evidenziano la loro caratteristica ‘responsive’ con l’immagine dei dispositivi mobili, (nella figura l’esempio del tema Patti su Theme Forest)
Slider o ‘hero section’?
La maggior parte dei temi one page comincia con il tradizionale slider, ma nessuno vieta di ridurre quest’ultimo a una sola immagine e inaugurare così la pagina con la cosiddetta ‘hero section’, una foto o un’illustrazione (‘hero image’) in grado di catturare l’attenzione dell’utente e trasmettere, possibilmente, lo spirito del messaggio principale che il sito vuole comunicare.
La scelta fra uno slider o una hero section è strettamente legata alla quantità di call to action che vogliamo includere nella parte iniziale della pagina, e queste ultime sono a loro volta legate al tipo di offerta e di messaggio che il sito deve presentare.
Ciò che conta, in ogni caso, è l’efficacia dell’abbinamento fra immagini e testo, e anche in questo caso è il professionista che svilupperà la pagina a dover interpretare e trasmettere nel modo più efficace il messaggio che promuoverà il cliente che ha ordinato il sito.
Il tema OneUp di Theme Forest fa addirittura uso di video per le sue ‘hero section’, aumentando l’impatto emozionale sul pubblico
Con o senza menu?
Il menu, in un contesto come quello one page, perde in un certo senso di significato: quando la tradizionale barra di navigazione orizzontale è presente nella testata, le sue voci non sono più dei link interni (tranne che in alcuni casi, come per esempio il collegamento a un’area ‘blog’ del sito) bensì rimandano a elementi della pagina stessa, effettuando quindi un ‘salto’ verticale verso il basso che agisce sullo scrolling portando il contenuto collegato all’altezza degli occhi del visitatore.
Ciò lascia spazio a un nuovo sistema di navigazione, non più basato necessariamente su un menu quanto sull’utilizzo strategico di call to action legate a elementi grafici, testo e pulsanti, che guidano gradualmente o strategicamente il visitatore a raggiungere le parti della pagina che vogliamo raggiunga, possibilmente un form di contatti o un pulsante d’acquisto.
Lo splendido tema ‘one page’ Brooklyn nella sua versione senza menu (una delle 11 pagine ‘home hero’ disponibili)
Chi siamo e cosa offriamo
Non può mancare, nella parte iniziale, un elemento (o più elementi) in grado di sintetizzare l’identità del professionista, dello studio o dell’azienda per lasciare poi spazio ai servizi o ai prodotti offerti.
Può trattarsi di una semplice frase ‘slogan’ che riassume eventualmente la ‘mission’, oppure a questa si può accompagnare una serie di ‘blurb’, elementi affiancati e/o sovrapposti che elencano i dettagli di quest’offerta, accompagnati quasi sempre da icone rappresentative.
Questi elementi vengono anche detti ‘services’, in quanto spesso identificano proprio una serie di servizi o caratteristiche presenti nell’offerta, e sono quasi sempre posizionati immediatamente dopo lo slider o la hero section.
Il tema ‘one page’ Renova include nel layout di esempio una sezione ‘About Us’ minimalista ma di particolare impatto
Gli elementi di autorevolezza
In una struttura one page non possono mancare quegli elementi che rafforzano l’autorevolezza del professionista, dello studio o dell’azienda, e questi prendono diverse forme, quasi sempre concretizzabili attraverso componenti inclusi nel tema. Vediamone alcuni fra i più tipici:
- il team, con le foto dei vari membri e un breve testo di presentazione seguito dalle icone collegate ai loro profili social
- i marchi dei clienti già serviti, dei partner oppure delle aziende fornitrici di materiali e strumenti utilizzati o rivenduti
- i ‘numeri’, ovvero una dichiarazione concreta di percentuali o quantità legate alla produzione dei servizi offerti, all’assortimento di prodotti, all’impegno professionale, anche sotto forma di grafico
- i ‘testimonial’, altro elemento imprescindibile del marketing, ovvero le testimonianze e le ‘recensioni’ dei clienti soddisfatti
Anche l’aforisma (fondamentalmente un elemento di testo) può far parte di questi elementi, sottolineando la mission o la filosofia del professionista, dello studio o dell’azienda rappresentata dal sito.
Il tema Divi, particolarmente adatto allo sviluppo di layout ‘one page’, include fra gli elementi di composizione anche diversi tipi di ‘testimonial’, che possono essere disposti verticalmente (affiancati in colonne) oppure sovrapposti orizzontalmente e configurati con vari colori o persino sotto forma di ‘blurb’ dotati di icone ‘virgolettate’
Il ‘campionario’
In un tema one page non manca quasi mai l’elemento ‘gallery’ o un ‘portfolio’: può essere utilizzato per elencare i siti realizzati da un Web designer, i libri pubblicati da un autore, i mobili creati da un designer di arredamento, o semplicemente i prodotti di un rivenditore o di un produttore.
Saranno sempre lì, con le loro ‘anteprime’ cliccabili che riveleranno eventualmente una versione ingrandita o porteranno (uscendo quindi dal concetto di one page) a un contenuto interno del sito dove l’utente potrà esaminare più da vicino ognuno di essi e convincersi così dell’acquisto, servizi o prodotti che siano.
Questo ‘campionario’ può essere fisso oppure mobile (il cosiddetto ‘carousel’), e può avere un elemento di ‘selezione’ (‘filtered portfolio’) ma quasi sempre è contraddistinto da un effetto di animazione che scatta nel momento in cui passiamo il puntatore sulla miniatura di anteprima (effetto rollover), che rivela un semplice pulsante o link su cui cliccare, evidenzia l’immagine stessa o visualizza un breve testo che sintetizza i dati del servizio o del prodotto.
Un esempio di ‘filtered portfolio’ nel tema ‘one page’ Saga, in questo caso il passaggio del puntatore (rollover) evidenzia la foto scelta rispetto alle altre
Il form dei contatti
Non più relegato a una quasi sempre tristissima pagina solitaria che include al massimo qualche altro dato, il modulo (form) per i contatti trova il suo spazio prominente nella one page per agevolare l’azione e spingere l’utente a creare il prezioso lead fondamento di futuri rapporti professionali o commerciali.
Proprio per questa sua nuova collocazione, il form dei contatti è semplificato al massimo, e i suoi elementi sono molto più evidenti che in passato, lasciando che l’attenzione dell’utente sia completamente assorbita dalla vacuità dei (possibilmente essenziali) campi da compilare e dal fatidico pulsante per l’invio del modulo.
Soltanto sui form ci sarebbe da scrivere a lungo (c’è chi ha scritto interi libri sull’argomento), quindi per ora ci fermiamo qui.
Il tema ‘one page’ Newave, dotato di vari demo con soggetti e layout diversi, visualizza sempre un form dei contatti molto essenziale, che si traduce in una particolare efficacia
I recapiti e i profili social
Trasposizione sintetica dell’ormai quasi obsoleto ‘dove siamo’, nella one page prende spesso la forma di un’ampia cartina stile Google Maps, seguita o affiancata da indirizzo, numeri di telefono, email e altri dati di contatto.
Visto che nessuna realtà oggi presente sul Web può prescindere dall’avere uno o più profili ‘social’, questi fanno spesso parte dell’elemento sopra descritto, ma in altri casi hanno un elemento a sé che conclude la pagina e si inserisce nel footer, prendendo la forma delle inconfondibili icone legate ai loghi dei rispettivi network.
La scelta dei profili è legata ovviamente al tipo di attività, ma anche su questo si potrebbe scrivere a lungo, e questo articolo introduttivo non ha la pretesa di approfondire o addirittura esaurire l’argomento, che sarà quindi ripreso in successivi articoli.
Il tema Divi di Elegant Themes prevede, come molti altri temi, un componente ‘social follow’ per visualizzare le icone dei vari social media associate ai rispettivi profili dell’azienda o del professionista, in questo caso con diversi stili
Per ora è tutto…
… ma sicuramente non è poco, dal momento che l’argomento si presta ad essere ulteriormente approfondito, nel suo concetto principale ma anche in ogni singolo elemento trattato in questo articolo o altri non ancora affrontati (per es. la SEO sui siti one page), quindi non lasciatevi pregare e cominciate a inviare il vostro feedback con suggerimenti e commenti, in modo da poterci confrontare su un argomento che sicuramente avrà sempre più spazio e importanza nel mondo del Web design e della comunicazione digitale.