UI , Gradient

Using Gradients the Right Way

share

I couldn’t agree more with one of the world’s most celebrated graphic designers. And, why shouldn’t I? Design is a universal language, and there are many ways to create brilliant and aesthetically pleasing designs. In our previous article where we spoke about the UI Design trends in 2017, we saw how trends and styles come and go, right from skeuomorphism to flat. Recently, however, gradients have been the topic of conversation.

There are three responses to a piece of design—yes, no, and WOW! Wow is the one to aim for.  -Milton Glaser

Right from backgrounds to logos, the dual-color (or tri-color, or anything that suits your fancy) effect has gained the spotlight in the world of UI design - we can find it everywhere, from branding, illustrations, typography, and more. What’s really impressive about gradients is the fact that they can be used in a variety of ways, and still end up looking pretty great; they add so much more depth to designs that would otherwise seem flat, don’t they? Some gradients may include more than two colors; some may spread from the center, or fall from a corner; and some may fall horizontally or vertically. They could be created with flat colors, with two tones, or even with a background image—our choices are almost endless.

Gradients are hence a great way to make designs a lot more interesting—they’re simple, yet complex. And so, many-a-time, I find gradients to be just a tad bit confusing. That being said, I’ve created a ‘gradients checklist’ that I refer to whenever I’m using gradients for UI, so I’m able to unleash their full potential. Below, you’ll find the deck of questions I ask myself each time I’m using or plan to use gradients-- a list that brings my designs one step closer to receiving the response it yearns for—a “WOW!”

Have I chosen the right colors?

It’s a known fact amongst us designers, that the colors one picks can make or break a gradient, and thereby, our designs. Hence, while picking the colors, I’m usually very careful. After all, the colors used could determine the entire (and I mean, entire)  style of the website, or an application.

I like to go back to the basics, i.e. my color palette, when I’m at a roadblock or puzzled about what colors to use for the gradient I’m creating. I love creating the gradients from the same family of colors as they always work out perfect. Another of my favorite things to do, is to experiment with lighter shades, as they can work wonders. Finally, to make sure my gradient actually works, I test it with text, images, and all sorts of other content, to make sure it’s as versatile as it can be. 

Personally, I don’t enjoy using too many colors when I’m creating a gradient. To me, two or three colors look great. Why? Well, in general, too many colors can be quite harsh to look at if not blended in properly, resulting in the death of design. However, I’m not completely dismissing the idea of using more than three colors in a gradient-- they can also look wonderful if used correctly. 

Are the color tones smooth enough?

I see Photoshop’s ‘Dither’ button as my angel in disguise here. Quite a few designers aren’t aware of this magical little button on the software, unless banding appears in the gradients they’ve created. Ever noticed those rectangular bands? They aren’t exactly best looking, are they? I use the dither button on Photoshop to fix this, as it smoothens the bands until the change in tone is seamless, and are yet a little visible.

undefined

In my previous point, I shared how using two or three tones is a safer option. But, if you’re a free spirited and experimental soul who’s trying to create a gradient with multiple colors, then blending them right is absolutely critical. If not done properly, they can provide an extremely poor experience to your users and even hurt their eyes.

Am I using the gradient in right place?

Sure, gradients look great, but they can’t be used just anywhere. I keep reminding myself that gradients have a pretty bold presence, and so, one should have a good sense of judgment in order to effectively create, and use them. For example, I don’t see a gradient working for the website of a hospital or that of a government. Basically, if the brand’s a serious one, I choose to leave out gradients.

Another important thing to always check is balancing gradients with loads of white space—the design needs to breathe, doesn’t it? When you’ve used a gradient in the background,  you need to balance its overpowering effect, with the subtlety of white spaces around it. 

Also, ensuring minimal content when using a gradient for the background allows greater readability and makes my design seem clean and pleasing. 

Does gradient work in illustration or logo?

When using gradients in illustrations or logos, I’ve learned to be extra careful, as they look best only in few scenarios. If I’m creating line illustrations, I would avoid using gradients completely as they tend to look quite strange - the colors don’t pop, and the illustration loses its charm. Besides this, they can also appear distorted while they’re being scaled to smaller dimensions.  However, to me, using them in isometric, or filled illustrations is a good idea, as they can help give a 3D effect to designs.

I usually use gradients for B2C brands or websites that are seemingly more light-hearted, as to me, a gradient’s one of the best ways represent this trait, brand image, or personality. While doing so, however, I always make sure that the gradient embodies brand values and it flows across the whole digital presence - be it the logo or the website design.

Does it do well on print?

It’s a known fact that gradients are capable of looking really great on a screen. But do they look as great when printed? In my experience, they often don’t. Let’s look at the world’s most well known brands like Starbucks, Nike, and McDonald’s. All these brands have one thing in common: they use flat colors for their logos, as these logos need to be printed out for packaging collaterals, and various other purposes. Why do they do this? It’s for the same reason stated earlier: gradients don’t exactly do very well on print and this is because of the reason that banding appears on print which makes your design look off the beat. 

I won’t deny that sometimes, I’m quite persistent to use a gradient on print. When I do this, I test, and test the design until it works, and get the outcome I wanted in the first place. After all, a designer’s job doesn’t start and end with a screen—we’ll have to make sure our work does well on all sorts of mediums.

Now that I’ve covered how I perfect gradients, here’s what I avoid doing with them:  

Using paragraphs

When it comes to UI, I find it best to not use lot of text, and thereby I avoid paragraphs, as gradients reduces the text readability. Paragraphs usually consist of lot of content. and we as designers, reduce the font size, which makes it nearly impossible for any of it to be read on a gradient. After all, we’d want the audience to actually be able to read the content, don’t we?

Using it on the website’s header/ footer text

When it comes to header/ footer text, flat colors are what I prefer. As mentioned before, the audience is supposed to be able to read what’s on a website. So, using a gradient on the text at menu bar is something I like to avoid because minimum text size has to be 12 points and they do not do justice their.

There you have it: a couple of nifty hacks I use to master gradients, and make my design game stronger than ever. I faithfully follow the checklist above while creating a gradient, which makes me good to go.

share
LEAVE A COMMENT

We would love to hear from you and we appreciate the good and the bad.