Published on <a href="https://blog.prototypr.io/design-with-gradients-fdba5ec856d4?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Erkan Kerti 
<h4>How to design user interfaces by expanding your color palette</h4>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*DJVazp-__k4pN6nrqMhB0g.png">Gradients are rising. <a href="https://unsplash.com/search/photos/oxford-street%2C-london%2C-united-kingdom">Oxford Street, London, United Kingdom</a>
In real world, we can’t see any color in solid format. No matter how we craft them, every object has a gradient because light creates shades. Seeing a gradient is not a new thing for our eyes, so wisely including them into our designs within user interfaces has become a real natural.
What I will tell you is not the gradients that were commonly used while making realistic images known as <a href="https://en.wikipedia.org/wiki/Skeuomorph">skeuomorphism</a>. I think many of us can remember the glass-like web pages, leather calendars, and paper-ish notepad applications. We have used gradients for objects in order to make them look like something real. (That times are behind us and I’m glad we came to today’s simplistic design thinking environment.)
Unlike the historic user interface design, the design is not an ornament or garnish in order to make things prettier now. The design is the solution for a given problem, while it has powers that are taken from fine arts. We can say it’s an art-related discipline that brings solution to people’s everyday problems. You can encounter it every time you are using a coffee machine, computer or an application. Remember the famous saying by Steve Jobs:
<blockquote>“Design is not just what it looks like and feels like. Design is how it works.”</blockquote>
Design shows the way things work. It gives the sensation about whether your product is simple, strong, funny, beautiful, mindful. It creates a reflection behind, and the ideas and passions at the surface. So, making a thing that is a copycat of the real world object is not your product, it has nothing to do with showing how it works. Using gradients to make a wood, leather, or glass looking user interfaces, is totally a result of missing this point.
<h4>Solid colors</h4>
While solving questions, the design uses many agents. Typography, human psychology, gestalt rules (I wrote the fundamental rule of Gestalt here <a href="https://blog.prototypr.io/law-of-pr%C3%A4gnanz-bdb2fcf349b8">The Designer’s Guide to the Law of Prägnanz</a>), art, Hick’s law, Ockham’s razor etc. Too many agents we can use to craft design. From these agents one of the major ones is certainly color. Colors should be selected wisely, too much of it makes the design unstable, childish; too less usage may prevent creating stunning designs. If you stuck on one color, there is a high chance it makes you miserable.
When it comes to identity, too many brands use the same color over and over again in their logos and user interfaces. So they depend on these certain colors and they do not change them over time easily. Smart ones have the secondary color alternative as a side-kick to the primary one.
I’m guessing many of you are familiar with the <a href="https://en.wikipedia.org/wiki/Color_wheel">color wheel</a> if you practice design. If we look at it, we can see primary, secondary, and tertiary colors. Wheel generally represents twelve colors and even if we create light and dark versions of them, we get thirty-six nearly distinct colors. We can say that using these cannot make a difference between brands easily. But if we started to make gradients using each two of them, we can get 630 different color options from thirty-six colors. This is awesome right? Using gradients as colors brings possibilities that we didn’t see before.
<h3>Gradients</h3>
Using gradients brings new things to the table, designers have more space to rather than sticking with the same color. Before using gradients, you should be well aware of the color theory in order to use them with correct amounts in your UI’s. If you find the correct amount, it will be the unique color that can be used in different media channels, such as interfaces, illustrations and banners you’d like to share over social media.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*VzXuXHQHPc49yQf5anHTOQ.png">webgradients.com
You can find inspiring web pages for finding gradients like <a href="https://webgradients.com/">webgradients.com</a> and <a href="https://uigradients.com/#Telegram">uigradients.com</a>. They provide gradients with the names, and these gradients look natural. These web pages provide a good jump point for your design projects.
Gradients can be used instead of solid colors and they provide natural transitions between tones. For example, mixpanel.com creates a great job with the gradient background(below image). Interface identity consists of two colors, blue and some green. Whoops? I said green, maybe yellow? We don’t exactly know the colors, but we get the unique color feeling that maybe we can call it morning breeze, blue dreams, green light or sharp-eyed eagle.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*_6bqV-olH3GIxyIzSD1_iQ.png">mixpanel.com
Shading does not only occur when some object leaves a shadow in the background. They also have a smooth shade. Our eyes are familiar with these gradients, they represent the natural look and we can even not think about them. Using these perfect transitions in our gradients opens the world for us. On earth, our largest light source is the sun. Because of different objects can cause shades around us, the light reflection makes transitions over objects.
These transitions create the depth perception. Flat colors lack it so they do not look real. You can not see a sky without gradients, it doesn’t consist of flat colors. Look around you even if you are at home or office, there aren’t many flat shadows around, they are all simple and subtle. They are raddled. So making gradients simple, you get the effect that creates depth and reality even when you are not creating a natural object (UI).
<img alt="" src="https://cdn-images-1.medium.com/max/1024/1*XPvFVOcS6ZM8T9JalsBuzQ.jpeg">All gradients. <a href="https://unsplash.com/search/photos/canyonlands-national-park%2C-united-states">Canyonlands National Park, United States</a>
Bringing gradients to your user interfaces seems easy. But you need to be careful while doing this. First thing first, overdoing it should be prohibited by law. Overdoing will take you too far from the realistic approach. When selecting colors, use subtle ones, or think about the color theory. And rely on the light source.
Controversial shadowing is generally caused by wrong choices with the linear and radial gradients. If you create a controversial shadowiness people can easily distract from your gradients because they do not look normal.
To conclude, try to make things more natural and subtle while using gradients. Designing a UI requires lots of deep thinking behind. So does the usage of gradients. Make gradients by applying the color rules and do not fall in love with the first things you do with them. There can, and most likely will be other options that fits your case perfectly.
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Ff51076%3Fas_embed%3Dtrue&amp;dntp=1&amp;url=https%3A%2F%2Fupscri.be%2Ff51076%2F&#038;image=https%3A%2F%2Fe.enpose.co%2F%3Fkey%3DdRXnS9Gplk%26w%3D700%26h%3D425%26url%3Dhttps%253A%252F%252Fupscri.be%252Ff51076%252F%253Fenpose&amp;key=d04bfffea46d4aeda930ec88cc64b87c&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=fdba5ec856d4" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/design-with-gradients-fdba5ec856d4">Design with Gradients</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Design with Gradients

How to design user interfaces by expanding your color palette

Top Stories