Note: I'm sorry about the horrible writing in this post. I woke up in the middle of the night, so I thought I'd write a blog post. I picked a topic that's very visual so my inability to form sentences in my current state shouldn't matter too much.
This post is for those of you that aren't professional designers, but still find yourself responsible for coming up with basic designs for things like websites, email templates, logos, brochures, etc.
If you find that your design just doesn't stand out enough, but you're not sure what you can do to fix it, there's an easy trick that you should try out: Add gradients. A gradient is a graphical element that fades from one color to another. For example, here's a gradient that fades from white to black:
If you add subtle gradients to your design, things will look more 3-d and realistic. Basically, Gradients are to design as auto-tuners (like what T-Pain uses on his vocals) are to music. If you're not sure what you're doing, just throw some in there and things will look better.
On the right, you'll see some examples of how gradients can be used to spice up common design elements. You can do things like add the appearance of a shadow, or make things look shiny.
In real life, nothing is one solid color. Because of differences in lighting, reflections, and textures, objects all have slight color variations. When you look at a solid-colored button or navigation bar on a website, it looks weird to you because nothing exists like that in nature. Adding a slight gradient basically tricks your eyes into believing that the computer screen is somehow more realistic.
I'm not suggesting that things look bad when they're a solid color, they just look different. If you look at the lessannoyingsoftware.com design, there are very few gradients, so I obviously don't advocate abusing gradients. My point is that if you're looking for some random bling to catch your audience's attention, gradients are a nice trick.
To drive home my point, here are two different versions of the same login screen. They are identical except that one uses gradients and the other doesn't. Which one stands out more?
I should note that I went waaaay overboard with the gradients just to make them obvious. Websites end up looking tacky when you lean on gradients as much as I did here, so be careful to use them sparingly and with a little more subtlety than I'm using here (look at attractive websites like
mint.com to see how it should be done).
