4 måder at designe en perfekt split screen hjemmeside
En skærm delt i to.
Split-skærmteknikken har længe været kendt i filmindustrien, med tidlige eksempler, der går tilbage til de stille filmdage i begyndelsen af det 20. århundrede, og det er stadig en populær enhed i film og tv i dag.
Et split-skærmlayout er i brug, når fuldskærmselementer er opdelt i to eller flere vertikale dele. En scene fra filmen "Scott Pilgrim vs World"
Dette er imidlertid en relativt ny teknik til webdesignindustrien. Split-skærme blev kun populære omkring midten af 2016, og nu har vi flere og flere websites, der bruger dette designmønster. Der er nogle få grunde til, at dette mønster blev så populært:
- Det har en dejlig æstetisk kvalitet. Når den udføres korrekt, kan den tilbyde brugerne en vidunderlig oplevelse.
- Det er et godt valg for lydhørige rammer. Split-skærm design kan tilpasses til forskellige skærme, selv små. Når det kommer til mindre skærme, som f.eks. Mobile skærme, kan panelerne stables.
- Det hjælper med at navigere. Ved hjælp af enkle designteknikker kan du trække brugerens opmærksomhed på en bestemt del af skærmen eller opfordre dem til at klikke.
Når Split Screen fungerer det bedste
Split-skærm er særlig godt, når du har to ting at fremme. For eksempel, når et websted tilbyder to helt modsatte variationer. Denne tilgang gør det muligt for designere at fremhæve begge ting og give brugeren mulighed for hurtigt at vælge imellem dem.
Én skærm, to meddelelser i Dropbox Guides
Når du bør undgå splitskærm
Split-skærm design vokser ikke godt, da indholdet vokser, derfor anbefales det ikke at anvende dem på indholds-tunge layouts. Det er vigtigt at holde skærmbillederne enkle, fordi komplekse splitskærme gør brugergrænsefladen overbelastet med information. Derfor vil split-skærm layout være en perfekt pasform til minimalistisk hjemmeside design.
Sådan afgøres om Split Screen er godt for dig
Hvis du overvejer en split-screen teknik til din hjemmeside, anbefaler jeg dig at stille dig selv et par spørgsmål:
- Er det egnet til dit indhold?
- Vil der være nok negativt rum til at gøre layoutet til at fungere?
- Vil dine brugere sætte pris på layoutet, eller det vil forvirre dem?
- Vil det være OK at dele dine brugeres opmærksomhed i halvdelen?
Det vigtigste at huske på, at indhold er konge og delt skærm, bør være en enkel måde at levere din besked til folk på.
Designteknikker til splitskærme
1. Par vibrerende farve og dramatisk typografi
Takket være flad og materiale design er levende farver og dramatisk typografi store trends nu. Levende farver er visuelt stimulerende og dramatisk typografi forbedrer tekstindholdet. Du skal blot kombinere de to, og du vil skabe et visuelt interessant design. Baesman har gjort dette mesterligt. De gav lige stor vægt på begge elementer, samtidig med at brugeren hurtigt kunne vælge mellem dem.
Lyse farver og interessante typografipar kan tilføje interesse
2. Tegn brugerens opmærksomhed på CTA-knappen
Meget mere end en simpel grafisk tendens giver opdeling af skærmen i to forskellige dele en original måde at guide brugeren gennem dit websted. Det er en god mulighed, når du vil oprette et større kontaktpunkt for opkald til handling. I eksemplet nedenfor kan du se, hvordan negativt rum skaber en lodret skillelinje for at give lige vægt på to forskellige muligheder.
Lodret opdeling tillader fokus på to forskellige CTA'er uden at favorisere enten
3. Opret visuelt flow mellem "skærme"
Når delt skærm repræsenterer en enkelt genstand, er det vigtigt at etablere en forbindelse mellem indholdsbeholdere. En mulig måde at gøre er ved at bruge en farve. Du skal blot duplicere en tydelig farve for at etablere visuel strømning mellem to skærme. Dette virker særligt godt med en mærkefarve eller nuance med meget kontrast. Ved at bruge farve er det muligt at kommunikere en stærkere forbindelse mellem to indholdstyper.
En anden mulig måde at skabe en stærk forbindelse på er at lægge et enkelt element som tekstkopiering på tværs af skærme:
Overlappende tekst forbinder to skærme
Sidst men ikke mindst kan du bruge et farvet overlag til dette formål:
Overvej den venstre del af skærmen
4. Brug animation til at tilskynde brugere til at handle
Fin animation og interaktive effekter opfordrer brugerne til at klikke. Se på det design der bruges til " Chekhov er i live "Websted nedenfor. Designet beder dig om at klikke for at finde din karakter.
Konklusion
Det tager cirka tre sekunder for en besøgende at træffe en beslutning vedrørende din hjemmeside. Derfor skal dine layouter altid være besøgervenlige, hvis du vil reducere afvisningsprocenter. Split-screen teknik kan hjælpe dig med det. Split-skærm design er en sjov, funktionel og lydhør måde at skabe et engagerende design på.