Uno schermo diviso in due. Questo potrebbe essere uno dei trend di design più grandi che emergono in questo momento. Sempre più siti Web utilizzano schemi di progettazione che comprendono due pannelli verticali o quadrati affiancati.
Ed è una bella estetica. L'aspetto è facile da usare, può essere adattato a una varietà di esigenze e aiuta a guidare la navigazione. È una tendenza che probabilmente vedremo di più - e del design - nei prossimi mesi. Oggi stiamo esaminando alcuni grandi esempi di design a schermo diviso con mini case study e scopri come sfruttare al meglio questa tendenza di design.
3 casi per il design a schermo diviso
Allora, perché nel mondo vorresti dividere il tuo design a metà? Se mi hai appena posto la domanda senza vedere i risultati, avrei potuto metterlo in discussione. Ma c'è un buon motivo per provare un concetto di schermo diviso.
- È una buona scelta per quadri reattivi. Sugli schermi più grandi, il design è diviso, ma quando si tratta di schermi più piccoli, i pannelli possono essere impilati.
- È facile lavorare in animazione ed effetti che incoraggiano i clic. Guarda il modello di gamification usato per? Chekhow è vivo? sito sopra. Il design ti prega di cliccare per trovare il tuo personaggio. (Ed è molto difficile non farsi coinvolgere).
- Due pannelli simmetrici facilitano la creazione di una struttura modulare per la progettazione del sito di riempimento e l'organizzazione dei contenuti all'interno dei blocchi. È quasi un'estensione sovradimensionata dei modelli di design in stile carta che sono cresciuti in popolarità.
Vai audace con colori e tipografia
Il colore e la tipografia sono i driver di grande tendenza, grazie a una maggiore attenzione dal design piatto e dei materiali. Combina i due e finisci con un'estetica semplice che può essere interessante e coinvolgente.
Baesman ha fatto questo con maestria con il design a schermo diviso. Due pannelli colorati brillanti sono la prima introduzione per questo utente. Stati cool hover? Expand? la messaggistica su ciascun pannello quasi implorava gli utenti di fare clic più avanti. La selezione del carattere tipografico è semplice, ma ha un margine sufficiente per farti sembrare.
Fai clic sul sito ed è facile vedere che questo concetto di schermo condiviso consente di creare un senso di flusso e organizzazione. Mentre il resto del design non è perfettamente suddiviso come la home page, il contenuto è organizzato in pannelli in tutto il design e il colore brillante trasporta.
Crea uno spazio per i messaggi
Uno schermo diviso è una grande opzione per creare un tema visivo che può funzionare con contenuti o immagini stimolanti, o semplicemente se vuoi creare un punto focale più grande per le chiamate all'azione. Il trucco per fare questo lavoro è un sacco di spazio, tipografia pulita e assicurandosi che lo stile diviso (nel caso dell'esempio qui, una sovrapposizione di colore) completi le immagini.
BAO utilizza un'immagine di eroe a schermo intero dietro un blocco di colore con testo, navigazione e un invito all'azione. Il design è interessante in un paio di modi, perché rompe alcuni dei modelli a cui siamo abituati, ma senza essere confusi. Ad esempio, la navigazione (menu hamburger) è vicino al centro dello schermo e l'immagine dell'eroe include solo un tocco di animazione con passaggio del mouse.
Queste cose aiutano gli utenti a richiamare l'invito all'azione sulla dimensione sinistra dello schermo. Ciò che è particolarmente bello di questo design è che ogni schermata assume un aspetto quasi home page, in modo tale che ogni diverso bit di contenuto sia ugualmente ponderato. (Questo tipo di trattamento non è per ogni progetto ma funziona particolarmente bene per mostrare il portfolio o il lavoro del cliente.)
Concentrati su un'azione
Un design del sito web a schermo diviso può anche ricordare la stampa. Ciò funziona particolarmente bene con un framework minimalista che include un chiaro invito all'azione per gli utenti.
Nel caso di Tree That Gives, l'obiettivo del sito è incoraggiare le donazioni con il semplice pulsante colorato nel pannello in basso a destra. L'immagine serve solo da punto di atterraggio per gli utenti che raggiungono la pagina, ma tutti i contenuti e le informazioni importanti si trovano nell'altro pannello. (Questa metà del sito Web potrebbe effettivamente vivere da sola in termini di contenuto, ma non sarebbe così interessante dal punto di vista visivo.)
Creare? Carte?
Il design a schermo diviso è davvero un modello derivato dalla popolarità delle carte. Molti di questi siti includono interazioni che sono contenute all'interno di un lato dello schermo o l'altra, seguendo il contenitore, la filosofia di un clic che è caratteristica delle interfacce in stile carta.
Considera l'espansione dello schermo diviso in più contenitori per un numero ancora maggiore di tocchi potenziali da parte di ciascun utente. Si le Soleil utilizza uno schermo diviso in tutto il sito; la grande differenza è che il pannello di sinistra è una? carta? mentre i pannelli di destra contengono una coppia di carte. I semplici effetti al passaggio del mouse inducono l'utente al fatto che ognuno di questi elementi è cliccabile e porterà a un'altra azione. Il design è pulito, ben organizzato e progettato per consentire agli utenti di fare clic.
Cambiarlo
Mentre molti dei progetti che abbiamo esaminato fino ad ora si sono concentrati su una distinzione sinistra-destra distinta con una linea dura tra gli elementi, non è sempre il caso. Uno schermo può essere diviso visivamente utilizzando anche altri elementi.
Il sito per Varsavia Rising lo fa con semplicità e bellezza. Un blocco di testo è la linea divisoria? tra i pannelli. Ogni lato presenta una faccia, ritagliata allo stesso modo sullo schermo e distanziata alla perfezione. Lo scorrimento cambia il testo centrale senza togliere lo stile del pannello. Lo stile quasi inverso dello schermo diviso, le immagini in bianco e nero e le note di colore giallo lo distinguono. Il design complessivo è altamente drammatico senza essere difficile da navigare o da accogliere.
Conclusione
Il design a schermo diviso è qualcosa che vedremo molto nei prossimi mesi. Il modello è semplice, utilizzabile e funziona per un numero di tipi di sito diversi, come abbiamo esaminato qui.
Il trucco per farlo funzionare - e non rimanere bloccato in un? Abusato? design - è aggiungere tocchi che lo rendono il tuo. Se sei grande sul colore, usalo; considerare l'impilamento di elementi o il semplice tocco fuori centro. Ma soprattutto divertiti!