The Secret of Great Gradient

Inspired by Nature

Ann Grand
UX Planet
Published in
5 min readDec 14, 2017

Truly gradients created by nature

Have you ever noticed how some colors and gradients look so natural and beautiful, while others look so unnatural and weird? The reason for this can be found somewhere between our pupil and our visual cortex. The difference between natural and unnatural is just familiarity or maybe nature is created to perfectly to fit together with our souls. The gradients we identify as beautiful are similar to what we see in nature. Conversely, a combination of colours our eyes have never seen before would rightly evoke feelings of discomfort and unease.

Our eyes accurately identify real and fake combinations of colors. For example the biggest inspiration for our eyes is the sky. Even if we don’t spend most of our waking hours staring at it, we are still influenced by its colours, since they coat our surroundings with their hues.

Despite all the light and conventional pollution, even sprawling metropolises can produce beautiful sunrises and sunsets.

If you leave the perceived comfort of the asphalt jungle and decide to go for some mountains, tropical islands or forests, you quickly realize how beautiful gradients nature can produce if it weren’t for that thick layer of smog and dust. Combinations of colors our brain find the most attractive and beautiful. It certainly invokes a sense of humility towards the divine.

I often see combinations of colours in design that simply do not fit together. A good example for this is a red to green transition. Both are very specific and bright colors which you actually never see as gradient in nature.
There are lots of different gradients in sky: orange-purple, purple-red, blue-purple, but to this day, I have never seen “green-red”.

Another apt example of what not to do would be “orange-blue”, since it doesn’t occur in nature without red and purple as the middlemen. Put orange and blue together and they look like they are going to start fighting at any moment, but if you raise the distance between them with something in between, and suddenly your eyes don’t want to jump out of your skull.
Orange and blue make dynamite, while orange and red and purple and blue make a beautiful sunset.

How to find great Natural Gradient

In my opinion the greatest inspiration for finding great natural gradients is nature. Specifically, the sky. It’s most basic colours are blue and red, but in truth, it’s so much more than just that. Subtle changes in hue emulate waves, the irregular and imperfect clouds simultaneously both ruin and enhance the big picture, and should the sun ever rise or set, the whole thing is thrown into complete disarray, that, while one would think would ruin the experience, everything still sets into a perfect harmony. I have never seen a sky that didn’t somehow inspire me to feel something bigger than all the artists of our civilization have ever managed to create.

Bright shades of the sky gradient

Sometimes you simply cannot believe how colourful the sky can be. A majestic mix of orange, yellow, purple, red and blue colors look so fantastic that I have yet to find an adjective that could do it justice. Usually you can observe such beautiful sunsets and sunrises in tropical countries near the equator, but to be honest, the subtlety of the sky in the temperate climate is also something to write poems about.

Don’t be afraid to use bright gradient in your design. If you pick the right colours, I promise it will look fantastic.

Clear sky gradients

The most beautiful clear gradients can be observed early in the morning at dawn and at the beginning of the sunset. Each of the shades is unique. I dare you to try to choose such a beautiful gradient using a color picker.

Therefore, it is necessary to be inspired by the sky and beautiful photos of the landscape of nature. This way, you will find the best combination of colors for your design.

Using natural gradients in UI Design

Sky gradient could be great background for your design. As an example, I want to share with you my concept of weather app using beautiful natural gradients. It really invokes feelings of the sky and weather when you look at it. It is really easy to show if it is hot, foggy or rainy weather just using gradient of the sky. I’ll tell you more about weather concept and share more picures in my next article, but now I want to compare weather app with natural gradient with new weather app material design by google. I truly like material design colors palette, most of the colors looks good and you can easy use it in design, but this last update weather app shocked me a little. Because colors do’t fit together and too bright and unnatural.

Thanks for reading!

I’m happy to share with you guys my colors research and natural pallet inspiration. I hope it will make your decision about colors easier and more natural :)

Please, share your thoughts about natural gradients in comments.

You can follow me on dribbble

beautiful colors pallet for your inspiration: http://colorpalettes.net/

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Published in UX Planet

UX Planet is a one-stop resource for everything related to user experience.

Responses (14)

What are your thoughts?

Anna, I would formulate your rule differently.
⛔️ Do not use complementary colors in gradients.
Red and green, orange and blue etc

16

Thanks for wrote this article! I loved, didn’t know about this. I do also loved your weather app design!

2

Help Full Info For Designers Thanks Anna Grenn

1