Web Design Trends : Split-screen

While the Web Design industry is constantly evolving and adapting to the changing user interactions with the fast growing technologies, it is mandatory for designers to be up-to-date with the latest trends. Our creativity is after all the result of what we consume. The main reason I personally love following trends is that they inspire me to venture with new design habits. I would combine the trends together with what I, already, am familiar with and create something new.

With that said, many trends emerge each year. Some of them fade away due to either technical issues (like the Parallax scrolling) or just not being user-friendly enough. But some stay for a while and take root in the UI Design practices. Split-screen is a current Web Design trend that I think will continue to shape User Interfaces through 2018 and the years after.

One screen, two views!

The Split-screen is one great way to make your website stand out, give it an edgy look and feel. A fun way to create a versatile side-by-side layout where each element displays its own design and content. This desktop view will of course collapse to stacked elements once on a smaller viewport.

It’s important to take into consideration that it takes on average 3 seconds for a user to decide whether your interface is worth their time or not. So make sure that the contents are designed to complement each other and not confuse the users and scare them away.

Another great aspect of this layout is that it can be taken advantage of in so many ways. I will state bellow a few non exhaustive options with examples:

This or That!

In this case equal space means equal importance. This layout is usually designed to make it easier for the user to make a “This or That” decision. The two elements would often have the same message but with contrasting designs and content.

A good example is the website for One of a Kind Chicago. It gives the user the opportunity to choose between two events dates. It’s simple, straight-forward and time-saving, everything a user could wish for!

oneofakindchicago
Source: One of a Kind Chicago

The “Cards” system

Since the split-screen is at its core based on the cards design pattern, it is only logical that there is no rule obliging the perfect split in half.

The O3 World home page makes for a great example of this! The design is clean, well stacked and expanded into more user entry points by making all the right section cards clickable.

o3world
Source: O3 World

Duality

Contrast when applied well always succeeds at driving the user’s attention. Highlighting duality gives more edge to the brand’s identity, it also connects its different aspects in a unique and compelling way.

Filip Triner, a Zurich-based designer, did a great job with Type & Face at connecting Typography to the Human’s Identity with a dual layout.

typeandface

Navigation tool

A Split-screen can also serve as a navigation tool. Instead of the usual horizontal navigation bar in the header section or the vertical one at the left of the page, half of the screen is entirely devoted to displaying the navigation elements and in the case of Xavier Bourdil’s website, it serves as a portfolio as well, exposing all of his projects.

xavierbourdil
Source: Xavier Bourdil

Connecting elements

An element that links the two portions backs up the visual flow from one screen to the other. This works well with text that is displayed continuously in the middle and spreads to both of the page sections. It also works with logos, icons or overlapping cards. The following example from Engine Themes highlights the connection between the two views with the bird shape in the middle.

enginethemes

The Overlay effect

Split-screen can also be a great option to work with challenging content such us big product images, putting emphasis on a brand’s video or just directing higher focus on call to actions. Bashful used the split-screen with a twist, the page features a video loop and half of it is covered with a tinted color box: clear enough to highlight the call to actions but fade enough to allow the visioning of the full-screen video.

bashful
Source: Bashful

 

While these are not the only ways you can put the split-screen into use, the idea is to get the general usability of this pattern and then bend the rules and adapt them to your own content and product’s purpose.

Maybe combine the Split-screen with VR or 360° video ?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s