Testo grigio minuscolo su uno sfondo confuso. Gli occhi si affaticano prima ancora di finire la prima frase. Ecco perché l'above the fold conta per il tuo brand. Quando layout e colori vanno contro il messaggio, le persone se ne vanno senza dirti il motivo.
L'above the fold è il contenuto visibile prima di scorrere la pagina, su una determinata dimensione dello schermo. Questo capitolo spiega cosa significa tutto questo in parole semplici, perché incide sul tuo sito e sul tuo marketing e come applicare questi concetti senza perdersi nel gergo. Vedrai anche come il design della homepage rientra nello stesso quadro. Procediamo passo dopo passo.
Cos'è l'above the fold e perché conta
L'above the fold è il contenuto visibile prima di scorrere la pagina, su una determinata dimensione dello schermo.
Nella pratica, l'above the fold compare negli header del tuo sito, nelle pagine dei servizi, nelle grafiche social e nei materiali stampati. Se usi i termini giusti, puoi dare indicazioni ai designer più in fretta e valutare le bozze con sicurezza.
Idee correlate come il design della homepage sono collegate direttamente. Tienile a mente mentre leggi il resto di questo modulo.
Crea la prima impressione e decide se i visitatori continuano a leggere.
Perché l'above the fold conta per la tua attività?
I clienti giudicano l'affidabilità dal layout, ancora prima di leggere ogni parola. Una struttura visiva chiara riduce gli attriti e rende le offerte più facili da capire.
Il design della homepage deve trattare il contenuto above the fold in modo diverso su mobile e su desktop.
Controlla l'above the fold su più dimensioni di telefono, non solo sul tuo portatile.
Se vuoi vedere come questo tema si collega agli argomenti vicini, leggi poi «come progettare una landing page» e «best practice per le landing page».
Una checklist pratica da usare subito
Controlla l'above the fold su più dimensioni di telefono, non solo sul tuo portatile.
Quando controlli una pagina, chiediti se l'above the fold emerge già al primo scroll da mobile. Se non è così, riordina le sezioni prima di curare i dettagli.
Salva gli screenshot prima e dopo le modifiche, così capisci cosa ha fatto davvero la differenza per l'above the fold sul tuo sito.
Condividi questa checklist con chiunque aggiorni il tuo sito, così il design della homepage rimanga coerente su tutte le nuove pagine.
Scegli una metrica da tenere d'occhio questo mese, per esempio il tempo sulla pagina o le compilazioni di moduli avviate, così le modifiche al design si legano ai risultati di business e non solo al gusto personale.
Come questo tema si collega al tuo brand
Le scelte visive raramente riguardano una sola pagina. Il design della homepage deve trattare il contenuto above the fold in modo diverso su mobile e su desktop.
I tuoi post social, le email e i materiali stampati dovrebbero riprendere la stessa gerarchia, gli stessi colori e le stesse regole tipografiche che usi sul web.
Quando l'aspetto visivo del brand si perde per strada, i clienti sentono una lieve incoerenza, anche se non sanno spiegarla.
Leggi il capitolo «design dei pulsanti» per confrontare gli appunti con un capitolo collegato di questo modulo.
Crea la prima impressione e decide se i visitatori continuano a leggere.
Domande che molti trascurano
Termini correlati come design della homepage e header del sito ti aiutano a cercare esempi più approfonditi e a confrontare il tuo lavoro con gli standard più diffusi.
Il design della homepage deve trattare il contenuto above the fold in modo diverso su mobile e su desktop.
Scrivi una modifica, con il prima e il dopo, da testare questa settimana su una pagina online. Piccole modifiche misurate battono i piani vaghi.
Dare al tuo team un vocabolario condiviso sull'above the fold riduce i giri di revisione con designer e agenzie.
Strumenti che rendono più facili gli aggiornamenti visivi
Per risolvere molti problemi di layout e di stile non serve scrivere codice. Un editor visuale ti permette di regolare spaziature, colori e tipografia mentre guardi l'anteprima mobile e desktop.
WEMASY include un creatore di siti con modifica visuale, così puoi pubblicare le modifiche senza aspettare uno sviluppatore per ogni ritocco. Apri il creatore di siti quando è il momento di mettere in pratica ciò che hai imparato.
Quando pubblichi gli aggiornamenti, ricontrolla «come progettare una landing page» e «best practice per le landing page», così il modulo resta collegato nella tua mente.
Ora hai una chiave di lettura pratica per l'above the fold. Usala quando controlli il tuo sito, approvi materiali di marketing o dai indicazioni a un designer. Continua con «best practice per le landing page» e «design dei pulsanti» per mantenere lo slancio in questo modulo.
Domande frequenti
Quanto tempo ci vuole per fare progressi sull'above the fold?
La maggior parte delle piccole imprese vede pagine più chiare dopo poche sessioni mirate, una volta applicate le basi di questo capitolo. Parti dalla homepage, poi estendi le stesse regole alle pagine dei servizi e dei contatti.
Serve un designer per lavorare sull'above the fold?
Un designer è utile per i rebranding complessi, ma molti interventi sull'above the fold si possono fare da soli, una volta che sai cosa cercare. Usa «come progettare una landing page» insieme a questo capitolo per altri consigli.
WEMASY può aiutarti ad applicare l'above the fold sul tuo sito?
WEMASY include un editor visuale nel creatore di siti, così puoi regolare layout, colori e tipografia senza scrivere codice. Apri il creatore di siti per aggiornare i modelli e vedere l'anteprima delle modifiche su mobile.
Qual è l'errore più comune con l'above the fold?
Molti cercano di sistemare tutto in una volta invece di procedere una pagina alla volta. Scegli una sola priorità, come la leggibilità o il contrasto, poi guarda «best practice per le landing page» per il miglioramento successivo.
Che legame c'è tra l'above the fold e la SEO?
Una gerarchia visiva chiara e un testo leggibile trattengono più a lungo i visitatori sulla pagina, e questo sostiene i segnali di coinvolgimento che i motori di ricerca osservano. Abbina gli interventi di design a una buona struttura dei contenuti per ottenere i risultati migliori.
Cosa studiare dopo l'above the fold?
Prosegui con «come progettare una landing page» e «best practice per le landing page» in questa guida per costruire un sistema visivo completo per il tuo brand online.