Considering a graphical background that your users won’t forget? Check out these trends that have UI designers hyped in 2018.
When it comes to designing an app, it’s clear that the background of the screen is of vital importance. Of course, users’ tastes and preferences have changed over the past decade, bringing us to a tipping point of exciting trends in 2018.
Back in the day, pretty much all backgrounds were of a solid, light colour as to not distract the user and let the content of the app shine. Today, we have learned that a graphical background can complement the content without taking any attention from it. It’s a fine line to walk — but we’re here to help you find the perfect balance in your app design.
UI designers everywhere now understand that adding certain elements can help you guide the eye of the user, set the tone of the product and help in improving the readability of the content. This opened the door to the use of pictures, illustrations, colour blocks and all sorts of effects.
Using colour to split screens: divide and conquer
Splitting the screen is a trick that has been around for some time. But while splitting the screen is a common feature on desktop computers, applying that to mobile has been challenging. With such limited space, how do we split the screen without overloading the user’s eyes?
Fortunately, UI designers have found the answer. By using contrasting colours to separate the content and illustrate actions taken by the user, we have a graphical background that is both visually attractive and functional.
In this example, we can see that not only does the designer use the red colour to split the screen, but also includes a white box to fit the content in — making the most of the contrast between the colorful graphical background the white content box. Functional, fun and beautiful!
Overlapping graphic elements: set the stage
Using different elements that overlap in the background can sound strange to some. If not done correctly, you can end up with a screen that has too many elements. Visually polluted and confusing — things you don’t want your product to be. But this type of graphical background can have huge payoffs.
Designers have been boarding this UI design boat because you can use the overlapping elements to create a sense of space. Even though smartphones have been getting bigger and bigger, screen real estate is still limited and quite precious. If you want, you can create a feeling of depth in the screen so the user has the optical illusion of more space. Smart!
Another positive is that this gives you the opportunity to create a truly eye-catching design — at Justinmind, we love adding shadows to certain elements in the graphical background to create an elegant look and authentic feel.
The trick is that you want elements that agree between themselves, so even though you have several different things happening on the screen there is still harmony.
Using a whole picture as graphical background
Yes, using a single picture for the whole graphical background has been a source of debate among the UI/UX design community. Some love it while others say it’s unforgivable.
Regardless of how you feel about having a picture as your background, there is no denying that it has become a trend in 2018. And indeed, if you can be smart about how you set up the different features of your app around the graphical background picture the results are likely to be incredible.
After all, a picture is worth a thousand words, right? Pictures can still communicate a message to the user in a clear way — be that message regarding the brand identity or the functionality of the app.
Here are your biggest allies in adapting the rest of your content to the image in your graphical background: opacity and content boxes.
Some designers have been skillful when placing the content in boxes so there is good contrast and readability, as you can see by this great graphical background arrangement by Air France. Aside from the fact that the content can be seen perfectly, the background picture itself is opaque. This makes the entire screen smooth, and ensures that there is nothing to distract the user from the boarding information.
Colour gradients: give your user the feels
Designers are no strangers to