Effective split screen design techniques

One of the most notable web site design trends of 2017 is splitting the screen into two. More and more web projects use this layout option, where two vertical panels are placed next to each other. Split Screen Design follows a very simple rule of thumb: one screen, two messages. Each side includes a separate element: photo, text block, or illustration.

The method is especially suitable for cases when you need to focus someone s attention on two things at once. Thus, the visitor can instantly choose between them.

Split screen design is not just a trendy trend, but also a very original way to navigate your site. Taking a closer look, you can see the following benefits:

• It draws attention to something specific.
• Plays on contrasts.
• Uses a non-template format.

It s also a great choice when working with responsive frameworks. This type of design is ideal for navigating on a large monitor or tablet, but mobile devices are not left out either: the panels can be arranged vertically, one after another.

But the great thing about split screen is the almost unlimited number of design combinations. In this article, you will learn how to get the most out of this trend.

The best split design options

By using a split screen on your site, you are able to emphasize the importance of both elements equally, while allowing the visitor to instantly choose between them. Thus, what appears on the screen becomes doubly important. It should be understood that the user will be looking for a visual connection between the separated blocks, so consider them as something similar to the concept of yin-yang. Here are some tips for implementing Split Screen Design.

Combine rich colors and bold typography

With the increased demand for flat and material designs, color and typography are now trendsetters. Rich colors stimulate visual perception, and bold typography emphasizes text content. Put them together and you have a visually appealing and interesting layout.

Combinations of vibrant colors and interesting typography can grab attention. Illustration provided by the site Baesman.

Vivid colorful image and text are placed side by side.

Emphasize the user s attention on the call to action button

The split screen 2 is a great way to design a visual theme that will make your calls to action even more visible. Negative space combined with a distinctive vertical bar helps to focus the project audience on important areas and key elements.

The example screenshot above focuses on the call to action on the left side of the screen. A great move when developing a landing page design that many advise.

Think of the screen as a card

Split design is a model that emerged due to the popularity of “cards”. And all websites that follow this design trend, in fact, support this concept: the screen is a large-sized card, and at the same time, each block is a container containing one message and one action for visitors.

Left panel in design Si Le Solei is one card, while the right one is a pair.

The location of the elements can vary depending on these very objects. For example, in the illustration below, the right side is split into several smaller sections.

A variant of the arrangement of pictures in the form of a mosaic.

Tip: Try to keep the blocks as uncomplicated as possible: on cluttered screens, the user interface seems quite overloaded.

Create visual transitions between screens

Although templates in split-screen design can be strikingly different in the variety of elements, there must be some connection between the containers in which they are contained. One possible way to make this connection is to use color. Duplicate the distinctive color to make a visual transition from one part to another. This works especially well with a brand color or a very contrasting shade:

Here, for example, we duplicated the brand color to visually transition from a picture with a product to a screen with a pre-order of this product.

And here, to provide a visual transition, they duplicated a high-contrast color.

Another method is to overlay one element (such as text) on two screens. This can provide additional connectivity:

Details in a split-screen design can overlap both. Illustration provided website Sewage Free Seas.

Last but not least, you can apply color blending:

On Nathan Riley s website, the right block is designed as an extension of the left.

Use animation to nudge people into action

High-quality animation and interactive effects encourage people to click on the buttons. Take a look at the Chekhov Alive website in the illustration below. A similar technique simply begs you to press a button to find your character.

Illustration provided by Google

Conclusion

Split Screen design is a fun, functional and responsive way to create an attractive look. However, when it comes to its implementation, it is not so simple. If you plan to use split screen on your site, we recommend asking yourself the following questions:

• Is this method suitable for my project? Is there enough negative space for its implementation?
• Would the audience appreciate this decision, or could it be confusing?
• Dividing the attention of visitors in half, will it not lead to a negative result?

Keep in mind that content is always at the forefront, and split-screen is just an easy way to get your message across to people.

This article is a translation of this post from Nick Babich.

If you liked it, write in the comments, we will look for new interesting topics of publications. You can add examples of bright designs with a split screen into 2 parts in the comments.