4 modi per progettare una homepage a schermo diviso perfetto
Uno schermo diviso in due.
La tecnica dello schermo diviso è stata a lungo nota nell'industria cinematografica, con i primi esempi risalenti ai giorni del cinema muto del 20esimo secolo, ed è ancora oggi un dispositivo popolare in film e tv.
Un layout a schermo diviso è in uso quando gli elementi a schermo intero sono suddivisi in due o più parti verticali. Una scena del film "Scott Pilgrim vs the World"
Tuttavia, questa è una tecnica relativamente nuova per l'industria del web design. Gli schermi divisi sono diventati popolari solo verso la metà del 2016 e ora abbiamo sempre più siti Web che utilizzano questo modello di progettazione. Ci sono alcuni motivi per cui questo modello di design è diventato così popolare:
- Ha una bella qualità estetica. Se eseguito correttamente, può offrire agli utenti un'esperienza visiva meravigliosa.
- È una buona scelta per quadri reattivi. Il design a schermo diviso può essere adattato per una varietà di schermi, anche piccoli. Quando si tratta di schermi più piccoli, come i display mobili, i pannelli possono essere impilati.
- Aiuta a guidare la navigazione. Utilizzando semplici tecniche di progettazione, puoi attirare l'attenzione dell'utente su una parte specifica dello schermo o incoraggiarli a fare clic.
Quando lo schermo diviso funziona meglio
Lo split-screen è particolarmente utile quando hai due cose da promuovere. Ad esempio, quando un sito offre due varianti completamente opposte. Questo approccio consente ai progettisti di dare risalto a entrambe le cose e consentire all'utente di selezionare rapidamente tra di loro.
Una schermata, due messaggi in Dropbox Guides
Quando si dovrebbe evitare lo schermo diviso
I progetti a schermo diviso non si espandono bene con la crescita del contenuto, pertanto non è consigliabile applicarli a layout con contenuti pesanti. È importante mantenere gli schermi semplici perché schermi divisi complessi rendono l'interfaccia utente sovraccaricata di informazioni. Ecco perché il layout a schermo diviso si adatta perfettamente ai progetti di siti Web minimalisti.
Come decidere se lo schermo diviso è buono per te
Se stai considerando una tecnica a schermo diviso per il tuo sito web, ti consiglio di pormi alcune domande:
- È adatto per i tuoi contenuti?
- Ci sarà abbastanza spazio negativo per far funzionare il layout?
- I tuoi utenti apprezzeranno il layout o li confonderà?
- Sarà giusto dividere l'attenzione dei tuoi utenti a metà?
La cosa più importante da tenere a mente è che il contenuto è re e lo schermo diviso dovrebbe essere un modo semplice per consegnare il tuo messaggio alle persone.
Tecniche di progettazione per schermi suddivisi
1. Coppia colori vivaci e tipografia drammatica
Grazie al Flat and Material Design, i colori vibranti e la tipografia drammatica sono ora grandi tendenze. I colori vibranti sono visivamente stimolanti e la tipografia drammatica migliora il contenuto del testo. Basta unire i due e creerai un design visivamente interessante. Baesman ha fatto questo con maestria. Hanno dato uguale importanza a entrambi gli elementi, consentendo allo stesso tempo all'utente di scegliere rapidamente tra loro.
Colori vivaci e coppie di tipografia interessanti possono aggiungere interesse
2. Attira l'attenzione dell'utente sul pulsante CTA
Molto più di una semplice tendenza grafica, suddividere lo schermo in due parti distinte fornisce un modo originale per guidare l'utente attraverso il tuo sito. È un'ottima opzione quando vuoi creare un punto focale più grande per le chiamate all'azione. Nell'esempio seguente, puoi vedere in che modo lo spazio negativo crea una divisione verticale per dare uguale ponderazione a due diverse opzioni.
Il divario verticale consente di porre l'accento su due diversi CTA senza favorire entrambi
3. Crea flusso visivo tra "schermate"
Quando lo schermo diviso rappresenta un singolo oggetto, è importante stabilire una connessione tra i contenitori del contenuto. Un modo possibile per farlo è usando un colore. Basta duplicare un colore distinto per stabilire il flusso visivo tra due schermi. Ciò funziona particolarmente bene con un colore o una tonalità di marca con molto contrasto. Usando il colore è possibile comunicare una connessione più forte tra due parti di contenuto.
Un altro modo possibile per creare una connessione forte è la stratificazione di un singolo elemento come la copia di testo su tutti gli schermi:
Il testo sovrapposto collega due schermate
Ultimo ma non meno importante, puoi utilizzare una sovrapposizione colorata per questo scopo:
Considera la parte sinistra dello schermo
4. Usa l'animazione per incoraggiare gli utenti ad agire
L'animazione fine e gli effetti interattivi incoraggiano gli utenti a fare clic. Guarda il design usato per " Cechov è vivo "Sito qui sotto. Il design ti prega di cliccare per trovare il tuo personaggio.
Conclusione
Ci vogliono circa tre secondi perché un visitatore prenda una decisione sul tuo sito web. Di conseguenza, i layout dovrebbero essere sempre di facile consultazione per i visitatori se si desidera ridurre la frequenza di rimbalzo. La tecnica a schermo diviso può aiutarti in questo. I design a schermo diviso sono un modo divertente, funzionale e reattivo per creare un design accattivante.