How to make a menu for a site? The main features of the menu selection
Whatever the site, without which it certainly cannot do, is without a menu. And often on one site there are several menus at once - for the main and additional…

Continue reading →

Computer hardware configuration
What is described below suggests that you want to make a beautiful and stylish website completely do-it-yourself, i.e. you draw all the graphic elements yourself, write the pages yourself, scan…

Continue reading →

How to create an attractive website?
So, you want to make a useful, beautiful and convenient site. What is needed for this? What factors influence the popularity of a website? What is the best place to…

Continue reading →

Split screen

One of the most noticeable trends in website design for 2017 is the split of the screen into two parts. More and more web projects are using a similar layout option, where two vertical panels are located next to each other. Split Screen Design follows a very simple rule: one screen, two messages. Each side includes a separate element: photo, text block or illustration.

Focus on two things
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.

A split-screen design is not just a trendy trend, but also a very original way to navigate your site. Having looked more closely, you can see the following advantages in it:

He draws attention to something specific.
Plays in contrasts.
Uses a non-standard format.
It is also a great choice when working with responsive frameworks. This type of design is ideal for navigation on a large monitor or tablet, but mobile devices do not remain deprived: the panels can be arranged vertically, one after another.

But the great thing about the 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 options for split design
Using a split-screen on the site, you are able to equally emphasize the importance of both elements, while at the same time giving the visitor the opportunity to instantly choose between them. Thus, what appears on the screen becomes doubly important. It should be understood that the user will look for a visual connection between the separated blocks, so consider them as something similar to the concept of yin-yang. Here’s a couple of tips for implementing Split Screen Design.

Combine rich colors with eye-catching typography.
Due to the increased demand for flat and material designs, color and typography are now setting trends themselves. Vivid colors stimulate visual perception, and spectacular typography emphasizes the content of the text. Put them together – and you get a visually attractive and interesting layout.

Using vibrant colors
Combinations of vibrant colors and interesting typography can attract attention. Illustration courtesy of Baesman.

Colorful picture + text
Bright colorful image and text are located side by side.

Focus your attention on the call to action button
The split screen in 2 parts is an excellent tool for developing a visual theme, thanks to which calls to action will become even more noticeable. Negative space in combination with a characteristic vertical line help focus the attention of the project audience on important areas and key elements.

Call to action
The example screenshot above focuses on the call to action on the left side of the screen. An excellent move when developing a landing design, which many recommend.

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

Splitting into cards
The left panel in the design of Si Le Solei is one card, while the right one is a pair.

The arrangement of elements may vary depending on these same objects. For example, in the illustration below, the right side is divided into several small parts.

Mosaic from pictures
Variant of arrangement of pictures in the form of a mosaic.

Tip: try to make the blocks look as simple as possible: on cluttered screens, the user interface seems very overloaded.

Create a visual transition between screens
And although the templates in a 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 establish 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 the color of a brand or with a very contrasting shade:

And here, in order to provide a visual transition, a high-contrast color was duplicated.

Another method is to superimpose one element (for example, text) on two screens. This can provide additional communication:

Text overlay
Details in a split-screen design can overlap both of its parts. Image courtesy of Sewage Free Seas.

And last but not least, you can apply color overlay:

Color Overlay
On Nathan Riley’s website, the right block is designed as a continuation of the left.

Use animation to encourage people to take action.
High-quality animation and interactive effects encourage people to click on buttons.

The difference between UI and UX
Today there will be a guest post on the topic of UX and UI interfaces using the Icons8 service as an example. The author is a usability specialist Andrei Burmistrov,…


Web Design Trends 2015
Many areas of activity are subject to the influence of fashion, including web design. And, for example, even before the onset of 2015, both web design specialists and potential website…


10 key trends in logo design 2018
Last year's post on logo logo trends 2017 was well received by readers, so we decided to continue this “tradition” and consider the main trends in logo design 2018. Despite…


The browsers we choose
Now let's talk about browsers. And what to say about them, you say, and so everything is clear - this is the program with which we look at Web pages.…