Trends in the design and design of email newsletters in 2020
Despite the fact that email marketing has existed for decades, it still remains an actual trend in Internet marketing in 2020 and a popular way to promote services online. The…

Continue reading →

How microstock originated, features of photobanks and microstock
Microstock (microstock) - the budget segment of stock photography, offering high-quality images for a penny, is rapidly gaining momentum. What is not surprising: high-quality photography has never been so cheap…

Continue reading →

Features UI application design in different countries
When you create an interface design for applications / sites operating in different countries, you should take into account the peculiarities of national cultures and traditions of the corresponding target…

Continue reading →

Effective split-screen design methods

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.

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 SATURATED COLORS AND EFFECTIVE 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.

ACCENT THE USER AT 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 ABOUT 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:

Contrast and Brand
Here, for example, they duplicated the brand color for a visual transition from a product picture to a screen with a pre-order of this product.

Duplicate contrast color
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:

Tips for creating a beautiful one-page portfolio site
Many global web design trends can be applied to single-page users, but they also have their own unique features. Such projects are specific enough, so it’s useful to read something…

...

Stages of development of a web designer and reaction to criticism at work
Just as a singer cannot exist without listeners, so a designer cannot exist without a spectator. And this viewer, of course, has the right to his opinion on the evaluation…

...

How to overcome the creative crisis of designers?
Today we have another guest post from Eugene Ignashov who represents the Candysign project: creating websites, icons, networking, programming. Are these lines read by creative people or those who rank…

...

How to overcome the creative crisis of designers?
Today we have another guest post from Eugene Ignashov who represents the Candysign project: creating websites, icons, networking, programming. Are these lines read by creative people or those who rank…

...