in Design

The Gradient Effect In iOS App Design

iOS 7 gives us the chance to experience one of the most simple yet visually appealing design element: the gradient effect. This effect can vary, depending on colors and general theme, and it can either make your design great, or completely ruin it. And naturally, also, the gradient effect is also subject to change in order to keep up with new trends.

The most popular trend nowadays is the subtle neon gradient combined with a light text usually supported by slightly transparent layers. This kind of refined combination gives a hint of sophistication to any user interface.

Although this is by far one of the most popular type of gradient, we are going to focus on another manner of applying gradient. We’ll talk about the use of gradient as a differentiation tool, its main objective being to support the content in a visual way.

First, let’s see some of the most interesting mobile app interfaces that keep up with the trends

Sense by Tommy Borgen – has a very simple, almost minimal design. The background colors support the content very nicely, the subtle circle in the center of the screen and the slender font inside it stand out nicely, but not loudly.

gradient iOS app

 

iOS Locksceen by Michael Shanks – has a very minimalistic screen that includes only basic information highlighted with delicate shadow and a fine transparent stripe. The designer wanted to make it easier for the user to unlock the device and he has succeeded with style.

gradient iOS app design

Personal Site Idea v1.1 by Ross Popoff-Walker – uses the blue shades of morning to create the gradient. This beautiful blue base serves as an elegant foundation for the white graphics that stand out nicely. The top and bottom of the screen use subtle shades of grey that give a luminous aspect to the screen.

iOS gradient design

Instasave iPhone App by Chirag Davethis interface has a radial gradient background that adequately supports the side menu. The lighter part of this background is used to accentuate the delicate lettering that represents the navigation.

4

Screens by Yasser Achachicatches the eye with an amazing kaleidoscope of colors as the background for the light font, the coloured icons and semi-transparent stripes. All of these come together beautifully creating a quite spectacular interface.

gradient iOS app

Coloring: Clock by Kyung Min Kimhas a sunset color set combined with a matching bold text. The interesting feature of this design is that you can choose your own colour combination, making it either elegant or funky, and you can even fill the Coloring Clock with your personal pictures, styling the interface in a way that will suit you best.

gradient iOS app

Beam Day by VladimirThis is another clock themed interface in which the background is designed to highlight the graphical elements. The graphical elements are very slim outline circles that encompass a narrow type of font.

iOS app gradient

Aero Weather by Alex PatrascuHere is a well designed gradient that highlights the very complete and practical weather forecast offered by the app. The bright background looks very well with the light font that makes it easy to read.

gradient app iOS

iOS Shortcuts Menu By Gaétan PautlerThis interface is not designed with a traditional type of gradient, since the background image is more blurred than gradient, but the shortcut menu has an interesting mix of blue-ish to pink gradient.

iOS app gradient

Gradient Effect as a means to reinforce your medium

The next part of our list will focus on application interfaces that use gradient effect as an auxiliary element to enhance the application’s characteristics and usability.

IndiaNIC App by Keyuri Bosmia – has the menu designed on a rainbow themed colour scheme that helps set apart each of the items. Overall, the concept is very colourful and has a cheerful note.

iOS gradient app

SunFun App by Andrus Valulis – This interface has a smoother gradient, the colours varying from darker hues to lighter ones on a warm palette. It shows your current location, the time of sunset and sunrise, as well as the best places to watch it. You can also take photos and add places.

11

 

Flat Style Color Wheel by Frantisek Krivda – Unlike the SunFun App, this interface is designed with a cold color palette that goes from dark blue to white. This gives the UI a more serious look. However the curb-y lines give it a little note of playfulness.

iOS gradient app

 

Haze Rays theme by Franz (Taptanium) – also uses a sort of icy color scheme, with a radial gradient effect that makes the user focus on the center of the screen where all the information is placed.

gradient design iOS app

Waygo App V2 by Carrie Phillips – takes us back to the warm colour zone with shades of orange that brighten up the menu. The orange shades go very well with the grey of the background, standing out nicely.

iOS app gradient design

Bird app GIF by Rustem Ramadanov – This UI highlights every category in the menu by separating them into differently colored tiles. The colour combination is made of slightly different modest shades of blue.

iOS gradient style app

Brisk by Eddie Lobanovskiy – In this design the gradient effect is created by various colours from orange to blue separated quite sharply and not sliding into eachother. However, in this case, the colour scheme has not only a decorative role, but also a functional one, helping to graphically support the temperature indicator.

apple iOS gradient app

Goo App by Nick Murphy – is a minimalistic interface that shows only “what you need and nothing extra”. It is designed using pastel colours with a soft gradient effect that blend perfectly with the content.

apple style iOS app

Giftboard by Maria Bratchikova – This design is based on different shades of red that help both distinguish and highlight categories and also give the interface a cozy appeal, perfect for a gifts page.

iOS gradient app

Weather App UI by Amine Mounazil – is yet another app that makes use of colours to better represent the data. The colours vary from warm to warmer in accordance with the temperatures.

gradient app iOS style

Conclusion

The gradient effect is widely used either as an embellishment or as an instrument for reinforcing the application’s elements. For interesting, vibrant visual experiences designers create gradient effects varying from bluntly separated colours to smoothly flowing shades, from cold icy palettes to warm and sunny ones. Either one you choose, the effect is still impressive and pleasing for the user.

Bogdan

Bogdan is the founder of Top Design Magazine. You can find him in Bucharest-Romania so next time you want to drink a beer there and talk about web and stuff, give him a message.

Leave a Reply