UX of one screen, two messages

History of split screen design

The first usage of a split screens dates back to 1903, when Edwin S. Porter used it in his movie “Life of an American fireman”. The opening scene of the film is the fireman thinking of a woman and child. He uses the concept of a split screen to film his opening scene.

Since then, many film makers have been using the concept of split screen. The concept came in designing quite late.

Back in 2013, it was quite a rapid emerging trend. But the trend started gaining traction in mid 2016 and now it is a big deal — More and more websites are now using design patterns that include two vertical panels placed side by side!

Split screen design is a logical and trendy way to give two contrasting elements equal consideration.

When to use a split screen design?

  1. When you don’t know which of the 2 elements to feature more prominently
  2. When the site offers two entirely opposite variations. It is a good practise because users get to make their selection right from the start — and the site does not waste time showing both options needlessly.
  3. When you can’t really help having two Call to actions for the website.
  4. Communicate a stronger connection between two pieces of content.

Why are designers so adoptive to the split screen trend?

Split-screen designs are a fun, functional, and responsive way to create an engaging design. Here’s why designers love going for a split screen design —

  1. It allows content diversity
  2. It adds more visual weight to two categories without overwhelming users.
  3. It gives a pleasant aesthetic with a natural hierarchy

Best practices for split screen design

This trend is more likely to be suitable a large screen or tablet, but designers also use it for mobile devices. What is it that then, that the designers can do to execute split designs perfectly across devices?

  1. Play up with duality

This is one of my favourites tips while designing split screens. There’s so much that we as designers can do to make these contrasts interesting and fun! Throw opposite characteristics against each other, opposite and contrasting bright colours, different text sizes and typographies, varies nature of image etc.

  1. Have the primary information ALWAYS visible

It’s quite an intelligent move when you know your users needs a constant reminder of a particular information. Also when you want to have a sticky CTA. Sticky headers are a good option for this but, there’s only so much space in a header. Having a relevant image or description in the header is certainly not possible.

  1. Unified navigation

It’s best to retain a single, unified navigation menu — ideally at the top, where it’s clear that it applied to both sides for example: eye-catchy.com

  1. Having the image and content side-by-side

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.

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.

  1. Do not use it for a content heavy layouts

Split-screen designs do not expand well as the content grows, therefore it is not advisable to apply them to content-heavy layouts.

  1. Create Visual Flow Between “Screens”

While split-screen design patterns can leave you with distinctly different elements, there must be a connection between content containers. One possible way to establish a connection is using a colour. Duplicate a distinct colour to establish visual flow from one “screen” to the other. This works particularly well with a brand colour or hue with a lot of contrast:

  1. Go beyond 50/50 concept

Split-screens don’t have to consist of two 50/50 components — Eyecatchy Desings 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.

Combined with the edgy diagonal shapes, this website really catches the eye.

Conclusion

When split screen designs are made logically and correctly, split-screen layout offer magical viewing experience for your users. I’m happy to hear your thoughts on horizontal scroll and learn few more tips to make it intuitive.