En skärm uppdelad i två. Detta kan vara en av de större designtrender som dyker upp just nu. Fler och fler webbplatser använder designmönster som innehåller två vertikala eller fyrkantiga paneler placerade sida vid sida.
Och det är en fin estetik. Utseendet är användarvänligt, kan anpassas för olika behov och hjälper navigering. Det är en trend som vi sannolikt kommer att se mer av - och design - under de närmaste månaderna. Idag tittar vi på några bra exempel på split screen design med mini case studies och hur du kan få ut det mesta av denna design trend.
3 Fodral för Split Screen Design
Så varför i världen skulle du vilja dela din design i hälften? Om du bara ställde frågan till mig utan att se resultaten, kanske jag har ifrågasatt det också. Men det är ett ganska bra fall för att försöka ett split screen-koncept.
- Det är ett bra val för lyhörda ramar. På större skärmar är designen uppdelad men när det gäller mindre skärmar kan panelerna staplas.
- Det är lätt att arbeta med animeringar och effekter som uppmuntrar klick. Titta på gamifieringsmodellen som används för? Chekhow är Alive? plats ovan. Designen ber dig att klicka för att hitta din karaktär. (Och det är väldigt svårt att inte dra in.)
- Två symmetriska paneler gör det enkelt att skapa en modulär kontur för utformningen av fyllplatsen och organisera innehållet i blocken. Det är nästan en överdimensionerad förlängning av kortdesignmönstren som har blivit allt populärare.
Gå fet med färg och typografi
Färg och typografi är stora trenddrivare tack vare ökat fokus från platt och materialdesign. Kombinera de två och du hamnar med en enkel estetik som kan vara intressant och engagerande.
Baesman har gjort detta mästerligt med delad skärmdesign. Två ljusa, djärva färgpaneler är den första introduktionen för den här användaren. Cool svävar states? Expand? Meddelandet på varje panel ber nästan att användarna klickar vidare. Typsnittet är enkelt, men har bara tillräckligt med en kant för att få dig att se ut.
Klicka på webbplatsen och det är lätt att se att detta split-screen-koncept går igenom för att skapa en känsla av flöde och organisation. Medan resten av designen inte är så splittrad som hemsidan, är innehållet organiserat i paneler genom hela designen och den ljusa färgen går igenom.
Skapa ett utrymme för meddelanden
En delad skärm är ett bra alternativ för att skapa ett visuellt tema som kan fungera med utmanande innehåll eller bilder, eller bara om du vill skapa en större kontaktpunkt för samtal till handling. Tricket för att göra detta arbete är gott om utrymme, ren typografi och se till att delad stil (i fallet med exemplet här, ett färgöverdrag) komplimangerar bilderna.
BAO använder en helskärmsheltbild bakom ett färgblock med text, navigering och ett samtal till handling. Designen är intressant på några sätt eftersom den bryter ut ur några av de mönster vi är vana vid, men utan att vara förvirrad. Till exempel är navigationsmenyn (hamburgermenyn) nära skärmens mitt och hjältebilden innehåller bara en aning av animering med svängare.
Dessa saker hjälper till att dra användare till uppmaningen till handling på skärmens vänstra storlek. Det som är särskilt trevligt med denna design är att varje skärm tar på sig en nästan hemsida för sin egen känsla, så att varje annorlunda bit av innehållet vägs lika. (Denna typ av behandling är inte för alla projekt men fungerar särskilt bra för att visa upp portfölj eller klientarbete.)
Fokusera på en åtgärd
En delad webbdesign kan också påminnas om utskrift. Det fungerar särskilt bra med en minimalistisk ram som innehåller ett tydligt åtgärdsprogram för användare.
När det gäller träd som ger, är målet med webbplatsen att uppmuntra donationer med den enkla färgade knappen längst ned till höger. Bilden tjänar bara som en landningsplats för användare som kommer till sidan, men allt viktigt innehåll och information finns i den andra panelen. (Den här halvan av webbplatsen kan faktiskt leva ensam i innehåll, men skulle inte vara så intressant visuellt.)
Skapa? Kort?
Split skärmdesign är verkligen ett mönster härrörande från populariteten av kort. Många av dessa platser innehåller interaktioner som finns i ena sidan av skärmen eller den andra, efter den ena behållaren, en klickfilosofi som är karakteristisk för kortstilar-gränssnitt.
Överväga att expandera split-skärmen i flera behållare för ännu mer potentiella beröringar från varje användare. Si le Soleil använder en delad skärm över hela webbplatsen; Den stora skillnaden är att den vänstra panelen är ett? kort? medan de rätta panelerna innehåller ett kortpar. Enkla svängverkningar antyder användaren till att alla dessa element är klickbara och leder till en annan åtgärd. Designen är ren, välorganiserad och utformad för att hålla användare klickande.
Ändra upp det
Medan många av de mönster vi hittills har tittat på har fokuserat på en distinkt vänster-höger delning med en hård linje mellan element, det är inte alltid fallet. En skärm kan delas visuellt med andra element också.
Platsen för Warszawa Rising gör detta med enkelhet och skönhet. Ett block av text är delningen? Rad? mellan panelerna. Varje sida har ett ansikte, beskärs på samma sätt på skärmen och åtskilda till perfektion. Rullning ändrar mitten text utan att ta bort panelen stil. Den nästan omvända stilen på split-skärmen, svartvitt bilder och poppar av gult gör att den sticker ut. Den övergripande designen är högt drama utan att vara svårt att navigera eller ta in.
Slutsats
Split skärmdesign är något vi kommer att se mycket under de närmaste månaderna. Mönstret är enkelt, användbart och fungerar för ett antal olika sajttyper som vi har undersökt här.
Tricket för att få det att fungera - och inte fastnar i en "överanvändning"? design - är att lägga till detaljer som gör det till ditt eget. Om du är stor på färg, använd den; överväga att stapla element eller gå bara en touch off center. Men mest av allt ha kul!