One display screen divided in 2. This could be one of many larger design trends appearing now. More sites are utilizing design patterns that include two vertical or square panels put side by side.
And it is a aesthetic that is nice. The look is user friendly, can be adapted for a variety of needs, and helps guide navigation. It’s a trend that we are likely to see more of – and design – in the months that are coming. We are looking at a few great examples of split screen design with mini case studies and finding out how you can make the most of this design trend.
3 Cases for Split Screen Design
So why in the world would you want to split your design in half? Without seeing the results, I might have questioned it as well if you just posed the question to me. But there is however a fairly case that is good trying a split screen concept.
- It’s a good choice for responsive frameworks. On bigger screens, the design is split but when it comes to smaller screens, the panels can be stacked.
- It’s on bigger screens an easy task to work with animation and impacts that encourage clicks. Look at the gamification model used for the “Chekhow is Alive” site above. The design begs you to click to get your character. (also it’s quite difficult never to get drawn in.)
- Two symmetrical panels allow it to be simple to produce a outline that is modular the fill site design and organize content within the blocks. It’s almost an oversized extension of the card-style design patterns that have been growing in popularity.
Go Bold with Color and Typography
Color and typography are big trend drivers, thanks to an increased focus from flat and material design. Combine the 2 and you end up with a simple visual that may be intriguing and engaging.
Baesman has been doing this masterfully with split screen design. Two bright, bold color panels would be the very first introduction with this individual. Cool hover states “expand” the texting for each panel almost begging users to click further. The typeface selection is simple, but has just enough of an edge to make you look.
Click through the site and it’s easy to see that this split-screen concept carries through to assist create a feeling of movement and organization. Whilst the remaining portion of the design isn’t as perfectly split whilst the website, content is arranged into panels through the entire design as well as the bright color holds through.
Create a Space for Messaging
A split screen is an option that is great create a visual theme that can work with challenging content or images, or just if you want to create a bigger focal point for calls to action. The trick to making this work is plenty of space, clean typography and making sure the split style (in the case of the example here, a color overlay) compliments the imagery.
BAO uses a full-screen hero image behind a color block with text, navigation and a call to action. The look is interesting in several ways because it breaks out of some of the patterns we are used to, but without being confusion. For example, the navigation (hamburger menu) is near the center of the screen and the hero image includes just a touch of animation with hover.
These things help draw users to the call to action on the left size of the display screen. What’s particularly good concerning this design is each display assumes an almost website of its own feel, so that each different bit of content is weighted equally. (This type of treatment isn’t for every project but works especially well to showcase portfolio or client work.)
Focus on an Action
A split screen website design can also be reminiscent of printing. This works especially well with a minimalist framework that features a definite proactive approach for users.
In the situation of Tree That Gives, the purpose of your website would be to encourage contributions utilizing the easy colored switch into the bottom panel that is right. The image just serves as a landing point for users that get to the page, but all of the important content and info is within the other panel. (This 50 % of the internet site could live alone in actually terms of content, but would not be near as interesting visually.)
Create “Cards”
Split screen design really is a pattern derived from the popularity of cards. Many of these sites include interactions that are contained within one side of the screen or the other, following the one container, one click philosophy that is characteristic of card-style interfaces.
Consider expanding the split-screen into multiple containers for even more touches that are potential each individual. Si le Soleil makes use of a split screen through the website; the big difference is that the left panel is one “card,” while the right panels contains a card pair. Simple hover effects clue the user in to the known proven fact that each one of these elements is clickable and certainly will result in another action. The style is clean, well-organized and designed to keep users clicking.
Change it Up
While many of the designs we’ve looked over to date have actually centered on a distinct left-right divide with a hard line between elements, that’s not always the case. A screen can be split visually using other elements as well.
The Site for Warsaw Rising does this with beauty and simplicity. A block of text is the dividing “line” between the panels. Each part features a real face, cropped similarly on the screen and spaced to perfection. Scrolling changes the middle text without taking away the panel style. The almost reverse style of the split screen, black and imagery that is white pops of yellow makes it stand out. The entire design is high drama without having to be tough to navigate or take in.
Conclusion
Split display screen design is one thing we are going to see lots of within the months that are coming. The pattern is simple, usable and works for a number of different site types as we’ve examined here.
The trick to making it work – and not getting stuck in an “overused” design – is always to include details which make it your very own. If you are big on color, use it; consider stacking elements or going just a touch off center. But most of all have fun!