4 manieren om een perfecte gesplitste scherm-homepage te ontwerpen
Eén scherm verdeeld in twee.
De techniek van het gesplitste scherm is al lang bekend in de filmindustrie, met vroege voorbeelden die teruggaan tot de stomme filmdagen van het begin van de 20e eeuw, en het is nog steeds een populair apparaat in film en tv vandaag.
Een lay-out met een gedeeld scherm is in gebruik wanneer elementen op het volledige scherm zijn verdeeld in twee of meer verticale delen. Een scène uit de film "Scott Pilgrim vs the World"
Dit is echter een relatief nieuwe techniek voor de webontwerpindustrie. Gesplitste schermen werden pas rond medio 2016 populair en nu hebben we meer en meer websites die dit ontwerppatroon gebruiken. Er zijn een paar redenen waarom dit ontwerppatroon zo populair is geworden:
- Het heeft een mooie esthetische kwaliteit. Als het correct wordt uitgevoerd, kan het gebruikers een geweldige kijkervaring bieden.
- Het is een goede keuze voor responsieve frameworks. Split-screen ontwerp kan worden aangepast voor een verscheidenheid aan schermen, zelfs kleine. Als het gaat om kleinere schermen, zoals mobiele schermen, kunnen de panelen worden gestapeld.
- Het helpt navigatie te begeleiden. Met behulp van eenvoudige ontwerptechnieken kunt u de aandacht van de gebruiker vestigen op een specifiek deel van het scherm of ze aanmoedigen om te klikken.
Wanneer het gesplitste scherm het beste werkt
Split-screen is vooral goed als je twee dingen moet promoten. Bijvoorbeeld als een site twee volledig tegenovergestelde varianten biedt. Met deze aanpak kunnen ontwerpers beide dingen benadrukken en kan de gebruiker snel een keuze maken tussen beide.
Eén scherm, twee berichten in Dropbox-gidsen
Wanneer u het gesplitste scherm vermijdt
Split-screenontwerpen breiden niet goed uit naarmate de inhoud groeit, daarom wordt het niet aanbevolen om ze toe te passen op content-zware lay-outs. Het is belangrijk om de schermen eenvoudig te houden, omdat complexe gesplitste schermen ervoor zorgen dat de gebruikersinterface overbelast raakt met informatie. Daarom zou de lay-out van het gesplitste scherm perfect passen bij de minimalistische websiteontwerpen.
Hoe te beslissen of gesplitst scherm goed voor u is
Als u een splitscreentechniek voor uw website overweegt, raad ik u aan een paar vragen te stellen:
- Is het geschikt voor uw inhoud?
- Zal er genoeg negatieve ruimte zijn om de lay-out te laten werken?
- Zullen uw gebruikers de lay-out waarderen of het in de war brengen?
- Is het goed om de aandacht van uw gebruikers in tweeën te delen?
Het belangrijkste om te onthouden dat inhoud een koning is en een gedeeld scherm moet een eenvoudige manier zijn om uw boodschap aan mensen te bezorgen.
Ontwerptechnieken voor gesplitste schermen
1. Combineer levendige kleuren en dramatische typografie
Dankzij Flat en Material Design zijn levendige kleuren en dramatische typografie nu grote trends. Levendige kleuren zijn visueel stimulerend en dramatische typografie verbetert de tekstinhoud. Combineer gewoon de twee en u maakt een visueel interessant ontwerp. Baesman heeft dit meesterlijk gedaan. Ze gaven evenveel belang aan beide elementen terwijl ze tegelijkertijd de gebruiker de mogelijkheid gaven om snel tussen hen te kiezen.
Heldere kleuren en interessante typografieparen kunnen extra belangstelling hebben
2. Trek aandacht van de gebruiker naar de CTA-knop
Veel meer dan een simpele grafische trend, het splitsen van het scherm in twee verschillende delen biedt een originele manier om de gebruiker door uw site te leiden. Het is een geweldige optie wanneer u een groter knooppunt voor oproepen tot actie wilt creëren. In het onderstaande voorbeeld kunt u zien hoe de negatieve ruimte een verticale kloof creëert om een gelijk gewicht te geven aan twee verschillende opties.
Verticaal verdelen biedt de mogelijkheid om de nadruk te leggen op twee verschillende CTA's zonder een van beide te bevoordelen
3. Maak visuele flow tussen "schermen"
Wanneer het gesplitste scherm een enkel object vertegenwoordigt, is het belangrijk om een verbinding tot stand te brengen tussen inhoudscontainers. Een mogelijke manier om dat te doen is door een kleur te gebruiken. Dupliceer eenvoudig een afzonderlijke kleur om een visuele stroom tussen twee schermen tot stand te brengen. Dit werkt vooral goed met een merkkleur of tint met veel contrast. Met behulp van kleur is het mogelijk om een sterkere verbinding tussen twee stukken inhoud te communiceren.
Een andere manier om een sterke verbinding te maken, is het aanbrengen van een enkel element, zoals het kopiëren van tekst op verschillende schermen:
Overlappende tekst verbindt twee schermen
Als laatste, maar daarom niet minder belangrijk, kunt u hiervoor een gekleurde overlay gebruiken:
Bekijk het linkerdeel van het scherm
4. Gebruik Animatie om gebruikers aan te moedigen om te handelen
Fijne animaties en interactieve effecten moedigen gebruikers aan om te klikken. Kijk naar het ontwerp dat is gebruikt voor de " Tsjechov is Levend "Onderstaande site. Het ontwerp smeekt je om te klikken om je karakter te vinden.
Conclusie
Het duurt ongeveer drie seconden voordat een bezoeker een beslissing neemt over uw website. Daarom moeten uw lay-outs altijd bezoekersvriendelijk zijn als u het bouncepercentage wilt verlagen. Split-screentechniek kan u daarbij helpen. Split-screen ontwerpen zijn een leuke, functionele en responsieve manier om een boeiend ontwerp te maken.