How to Design a Daring but Effective Split-Screen Layout

Split-screen layouts are full-screen web components that are divided into two (or more) equal vertical columns.

However, despite the fact that split-screen layouts are white-hot trendy, it is a bold stylistic decision that can hurt the user experience if there isn't a sound, logical reason behind your choice.

Saying that, when executed correctly it can offer users a wonderful viewing experience.

[caption id="attachment_129575" align="aligncenter" width="800"] Split-screen site design by Roman Kirichik[/caption]

Why Use a Split-Screen Layout?

Split-screen components work best in minimalist web designs because the negative space combined with the bold vertical divide adds a supreme amount of focus on the important areas.

Aside from these advantages, the benefits to split-screen layouts extend way beyond visual aesthetics; they're especially effective for landing webpages with two side-by-side selectable options.

Some obvious examples include:

• Login and signup forms
• Paid and free subscriptions
• Products that come in alternate colours

Great Examples of Split-Screen Components

First, let's take a look at some terrific examples and discuss why they work so well for their use-case. Split-screen layouts can be used in many different ways, so the advantages vary from site-to-site, depending on what the website sets out to achieve.

Cam Strobel

Not every website design needs access to the entire horizontal viewport. With ultra-minimal designs, like Cam Strobel's website, splitting the screen into two vertical columns means that all of the content can be above-the-fold, completely eliminating the need for the user to scroll.

Studio Meta

Full-width "big header" designs are still quite common - it's a huge trend and rightfully so, however, there's rarely an opportunity to use bold imagery due to the lack of text legibility (we usually have to the blur the image or add a colour overlay). Split-screen layouts solve that, and Studio Meta shows us exactly how.

By having the image and content side-by-side, we can use images that are more colourful, more courageous, and with a much deeper meaning because we don't have to obscure the image in any way.

Bose

Split-screens don't have to consist of two 50/50 components - Bose takes this trend to the limit, although I did notice that the website doesn't even try to adapt to smaller screens. Regardless of how beautiful this looks, responsive design is something you have to consider, and it can be quite hard to adapt split-screen layouts to smaller devices.

Aside from that, this is my favourite split-screen example because the layout allows Bose to show off each item with a unique personality by using different colours. Combined with the edgy diagonal shapes, this website really catches my eye.

Fillet is another wonderful example of how split-screen layouts can inject individual personality into web components of equal importance. Plus, because there are only three vertical columns and almost no content (each column showcases artwork), this displays correctly on mobile devices.

Continue reading %How to Design a Daring but Effective Split-Screen Layout%

by Daniel Schwarz via SitePoint