Start typing and press Enter to search

Gradients are back to rule in App Design 2018
09 Jul 2018

Gradients are back to rule in App Design 2018

What are Gradients? The mysterious and impulsive color transition of an object refers to gradients which come from bright to dark, deep to shallow, or from one color to another. When the flat design had risen, the designers tried to skip the gradient in design.

But since Instagram changed the logo from a classic Polaroid camera to a brightly colored flat icon, this impulsive color transition in the design process is gradually making a comeback.

Flat design color combination are the reason of gradient’s rice that is extremely easy to cause homogeneity.

Gradient is one of the best options only if the designers pursue a design language with rich visual. Let’s have a vision on the examples of gradient color used in a mobile App.

1) Linear Gradient 

It is the basic expression method in gradual design, so the linear gradient isone of the most common creative techniques in design options.

In general, there are 3 kinds of the gradient according to the direction: horizontal gradient, vertical gradient, and diagonal gradient. Following are the examples.

Horizontal gradient:

In an e-commerce app, we can be called this as a concept design. It includes settings, authorization, and coupons.

Through the card options, a designer can present the user's coupon information that uses a uniform double-color horizontal gradient, highlighting the information on the card. In total, the interface is minimalist and elegant.

Vertical gradient :

Want to make your app stand out? Find out this one. In this app, the interface and function complement each other. Designers use the vertical gradient very clever to create a sophisticated evening sky background with the APP's timeline.

Diagonal gradient :

This landing page was created by the rapid prototyping tool Mock plus. Whenever you will open the app, this will automatically ask your current state and can filter the music in line with the current mood.
As a background design, designers use diagonal gradients. The warm gradual interface will make the interface more friendly and smooth.
The diagonal gradient gives the users a soft and humane AI product experience and makes the interface more lively and rich.

2) Gradient overlays on the image

It can strengthen the sense of wholeness if you add gradient overlays on the background and head image. It will make the user aware of other more important and crucial elements that enhance the page's readability. You can notice the effect of this design on the big image. So the overall image will be more mysterious, elegant and attractive.
Remember that, users should pay attention to the selection of the background image, picture content, and tone. All the elements need to be consistent, the use of translucent could make the picture more delicate. Gradient needs to strengthen the readability of the page information and cannot be decorated for decoration.

3) Multi-angle multi-level overlay

Changing the icons and UI, Instagram lead designer Ian Spalter wrote a post about the icon change on Medium.
“If the lens is a bridge into the bolder, simpler glyph, the rainbow is a bridge into the colorful gradient. Color has always been a huge part of Instagram —you see it in the classic app icon, filters, and the community’s photos and videos.
When we started reimagining the rainbow, we looked at more minimal options, but ultimately we needed more warmth and energy to complement the glyph.”

Instagram captures the core elements of the original logo: the rainbow, the lens, and the viewfinder, which created a minimalistic and colorful rainbow of images with a multi-angle, multi-layered overlay on the background. Specifically, this icon mainly uses a set of the linear diagonal gradient, plus two sets of spherical radial gradient overlay, using color wisely in UI design.

4) Functional gradient effect

A limitation to be used as a single background decoration, gradient has also some functionality. Color options like similar color, approximate color, contrast color, complementary color are used to separate each menu item clearly. The interface keeps the balance at the same frequency so that it can make the picture more colorful, rhythmic and more comfortable.

Royex is one of the leading mobile app Development Company in Dubai who is providing cost-effective application development service. If you want to develop your company apps, Royex is there to help you. Please feel free to contact us at or call us at +971-56-6027916



Leave A Comment

  • Blogs & news
  • E-books
prev next