En skärm uppdelad i två.

Split-skärmen tekniken har länge varit känd inom filmindustrin, med tidiga exempel som går tillbaka till de tysta filmdagarna i början av 1900-talet, och det är fortfarande en populär enhet i film och tv idag.

001

En delad skärmlayout används när helskärmselement är indelade i två eller flera vertikala delar. En scen från filmen "Scott Pilgrim vs World"

Detta är dock en relativt ny teknik för webbdesignindustrin. Split-skärmar blev bara populära runt mitten av 2016 och nu har vi fler och fler webbplatser som använder detta designmönster. Det finns några anledningar till varför detta designmönster blev så populärt:

  • Den har en fin estetisk kvalitet. När den körs korrekt kan den erbjuda användarna en underbar tittarupplevelse.
  • Det är ett bra val för lyhörda ramar. Split-skärmdesign kan anpassas för en mängd olika skärmar, även små. När det gäller mindre skärmar, t.ex. mobila skärmar, kan paneler staplas.
  • Det hjälper navigering. Med enkla designtekniker kan du dra användarens uppmärksamhet på en viss del av skärmen eller uppmuntra dem att klicka.

När Split Screen Works The Best

Split-skärmen är särskilt bra när du har två saker att marknadsföra. Till exempel, när en webbplats erbjuder två helt motsatta varianter. Detta tillvägagångssätt ger konstruktörer möjlighet att framhäva båda sakerna och tillåta användaren att snabbt välja mellan dem.

002

En skärm, två meddelanden i Dropbox Guides

När du borde undvika Split Screen

Split-skärmdesignen expanderar inte bra eftersom innehållet växer, därför rekommenderas det inte att tillämpa dem på innehålls tunga layouter. Det är viktigt att hålla skärmarna enkla eftersom komplexa splitskärmar gör att användargränssnittet överbelastas med information. Det är därför split-screen layout skulle vara en perfekt passform för minimalistiska webbdesigner.

Hur man bestämmer om Split Screen är bra för dig

Om du funderar på en delad skärmteknik för din webbplats, rekommenderar jag dig att ställa dig några frågor:

  • Är det lämpligt för ditt innehåll?
  • Kommer det att finnas tillräckligt med negativt utrymme för att layouten ska fungera?
  • Kommer dina användare att uppskatta layouten eller det kommer att förvirra dem?
  • Kommer det vara bra att dela upp dina användares uppmärksamhet i hälften?

Det viktigaste att komma ihåg att innehållet är kung och split-skärm bör vara ett enkelt sätt att leverera ditt meddelande till människor.

Designtekniker för delade skärmar

1. Par Vibrerande Färg och Dramatisk Typografi

Tack vare platt- och materialdesign är levande färger och dramatisk typografi stora trender nu. Levande färger är visuellt stimulerande och dramatisk typografi förbättrar textinnehållet. Helt enkelt kombinera de två och du kommer att skapa en visuellt intressant design. Baesman har gjort detta mästerligt. De gav lika stor betydelse för båda elementen, samtidigt som användaren kunde välja mellan dem snabbt.

003

Ljusa färger och intressanta typografipar kan lägga till intresse

2. Rita användarens uppmärksamhet på CTA-knappen

Mycket mer än en enkel grafisk trend, att dela upp skärmen i två olika delar ger ett originalt sätt att styra användaren via din webbplats. Det är ett bra alternativ när du vill skapa en större kontaktpunkt för samtal till handling. I exemplet nedan kan du se hur negativt utrymme skapar en vertikal uppdelning för att ge lika viktning till två olika alternativ.

004

Vertikal uppdelning möjliggör betoning på två olika CTA utan att heller gynna

3. Skapa visuellt flöde mellan "skärmar"

När delad skärm representerar ett enda objekt är det viktigt att upprätta en anslutning mellan innehållsbehållare. Ett möjligt sätt att göra det är att använda en färg. Dubbelkopiera en distinkt färg för att skapa visuellt flöde mellan två skärmar. Detta fungerar särskilt bra med en färg eller färgton med mycket kontrast. Med färg kan man kommunicera en starkare koppling mellan två innehållsdelar.

Ett annat möjligt sätt att skapa en stark anslutning är att lägga ett enda element som textkopiering över skärmarna:

005

Överlappande text ansluter två skärmar

Sist men inte minst kan du använda ett färgat överlag för detta ändamål:

006

Tänk på den vänstra delen av skärmen

4. Använd animering för att uppmuntra användare att agera

Fin animering och interaktiva effekter uppmuntra användare att klicka. Titta på designen som används för " Chekhov är Alive "Webbplats nedan. Designen ber dig att klicka för att hitta din karaktär.

007

Slutsats

Det tar ungefär tre sekunder för en besökare att fatta ett beslut angående din webbplats. Följaktligen bör dina layouter alltid vara besökarvänliga om du vill minska studsfrekvenserna. Split-skärm teknik kan hjälpa dig med det. Split-skärmdesign är ett roligt, funktionellt och responsivt sätt att skapa en engagerande design.