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 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.

La rotellina di scrolling presente ormai su ogni mouse
La rotellina di scorrimento, presente ormai da anni su tutti i mouse, oggi viene sempre più spesso sostituita da una superficie tattile che offre la stessa funzione (image by VisualPhotos.com)

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.

schermata presentazione del tema 'one page' Patti su Elegant Themes

Nella schermata di presentazione molti temi ‘one page’ evidenziano la loro caratteristica ‘responsive’ con l’immagine dei dispositivi mobili, (nella figura l’esempio del )

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 (‘’) 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.

L'uso di un video in una hero section nel tema OneUp

Il 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.

Figura 2.4 - La nuova voce Wordfence introdotta dopo l’installazione e attivazione del plugin e le diverse opzioni disponibili

Lo splendido 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.

esempio di sezione 'chi siamo' su tema 'one page' Renova

Il 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.

alcuni esempi dei moduli 'testimonial' del tema Divi

Il tema , 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.

il tema one page Saga nella sua sezione 'filtered portfolio'

Un esempio di ‘filtered portfolio’ nel , 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.

un form minimalista nel tema 'one page' Newave

Il , 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 modulo 'social follow' del tema Divi prevede diversi stili di icone

Il 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.

WordPress Guida Completa copertina

La nuova guida completa per WordPress.

SCOPRILA ORA!