Designing Without Gradients
The gradient has become a universal crutch. Hypocrisy, we know, considering parts of this blog’s current design. Gradients have a habit of decorating since the design trends introduced by Web 2.0 gloss. The starburst badges and text reflections may have faded into obscurity, but the brash gradient stuck it out.
Please don’t read this as a “you’re doing it wrong” post, because there have been far too many of those in the design community lately. Consider this a demonstration of alternatives with a low risk invitation to try it out.
You don’t need to quit gradients completely. This is just a call to reconsider if they are necessary in each design. Rather than taking a bland design and making it more “exciting” with gradients, why not play with the typography? Adjust the page hierarchy! Bring in some rich photography!
Learn to Leave Out
Many web design blogs periodically give tutorials guiding through the Photoshop process of page design. It’s given a weird impression that gradient-based designs are a universal way to making brilliant web pages. I’ll be the first to admit, we’re guilty of writing posts that ended up being read in the wrong way too.
The majority of bloggers are not trying to force conformity, but the posts leave often leave out the discussion of judgement. In one of our “Five Minute Upgrade” series posts, one of the biggest misunderstandings was from an assumption that all of the techniques presented should be used together. Web design is not a cookie cutter checklist of design trends to include, it’s also about learning what to leave out and arrange whatever remains. WeFunction had a great article about these marks of quality in their post “How to Spot Quality in Web Design“.
You’re not doing it wrong, but you can do it differently.
Fundamentals Stay in Style
You don’t have to be an elite art school graduate in order to design well, but it does take some breaks from the typical “How to Design an Awesome Site in Photoshop” in order to learn the technical stuff. The technical aspects of design don’t go out of style. Font kerning and color theory are not trends that will look dated a year from now, but the average Photoshop tutorial will. Many of the trendy design techniques from a couple years ago look laughable by today’s standards.
Meaningful Design Elements
What do designs without gradients focus on? These are the types of design that would shine in black and white. But even that’s vague, so what specifically can you focus on designing the hell out of? I’ve included a few points below that I think are important in distinguishing between decorating and design progress.
Typography
There are a limited number of web-safe fonts available, but typography is more than just which typeface – it’s about how that typeface is used. You could play with italics, uppercase, and bold versions of web fonts and get interesting mixes. If a design calls for more font diversity, you can always replace some headings with text as images or use JavaScript replacement options like TypeKit.
Visual Hierarchy
If a certain element is important, how do you let people know about it? Hierarchy can come in form of color, size, weight, or location. If text is large and at the top of the page, it’s likely an important piece. Decorators like gradients have a hard time expressing hierarchy without the help of other concrete design elements.
The Economy of Line
This is an interesting concept I first learned about in Jason Beaird’s “The Principles of Beautiful Web Design” a few years back*. The concept is simple: If your design keeps its primary shape with only line tracing, it’s good to go. It’s a simple test for your design, and it helps identify layouts that rely on subtle changes in order to designate visual areas.
You can see a simple example of the test in action below on Art In My Coffee, a Tumblr run by Jina Bolton and Meagan Fisher. Incidentally, both of them have site designs with typography to die for.
Gradients alone are not a good way to differentiate between sections in a web layout. Because gradients do not have any rigid boundaries, they can reinforce existing design elements, but they shouldn’t be the primary indicator.
*If you haven’t read Jason’s book already and are interested in the type of formal design that most blog design tutorials gloss over, I highly recommend you get moving! It’s the type of gem that gives tangible concepts that carry across everything you design.
Subtle is Powerful
What if a gradient makes sense to include? Is there a more effective way to use them? Try practicing subtlety.
I believe that the best designs are those that take some time to figure out. This doesn’t mean in a “I’m confused” usability issue way, but rather a “This looks smooth, but I can’t quite figure out why” sense. The atebits product page for Tweetie (soon to be Twitter) is a good example of subtle gradients in action. The menu goes from a solid white of #FFFFFF and ends up at a slightly grayer tone of #E7E7E7. The transition is simple, subtle, and doesn’t demand extra attention.
We’ve reached a point with CSS3 where basic gradients can even be simulated without images. The button style Google uses in a number of its web applications is actually built using three different bands of solid colors. Doug Bowman did an extensive writeup explaining the button design process that’s well worth a read.
Your Challenge from Here
Your challenge (optional, of course) is to make a small sample of design without the use of gradients. Dribbble has demonstrated how a small piece of design can speak volumes for the big picture. Even though we haven’t managed to land an invite yet (subtle hint), we can still take some inspiration for this exercise. Post a link to what you come up with in the comments below! We’d love to see what you can create.
Discussion
April 19th, 2010 at 1:00 AM
Love this post. I remember sometime last year when commenting on one of my friends designs, I loved how everything had a slick yet well constructed feel to it.
The first thing he said was “subtle gradients man”. Best piece of design advice I’ve ever gotten.
April 19th, 2010 at 1:04 AM
Excellent and well thought out article. I’ll be the first to admit that I have been guilty of relying of gradients as a crutch. I’m trying to escape trendy and embrace good design. A good color scheme, wise use of typography, and a solid grid system will make a good website.
Thanks again for the well written article.
April 19th, 2010 at 2:20 AM
There is always this feeling that once you have your wireframes done, the next phase is how do I now implement my gradients. This needs to change. Good post!
April 19th, 2010 at 2:31 AM
I would just add that you can always use texture as an alternative to gradients (yes, using both or none is also an option)
April 19th, 2010 at 2:56 AM
Gradients are dead long time, they are actually not part of design, is just decoration, and as we know, decorating is not designing. Is like call, make my web pretty, the same as XY. And my grandma she likes PINK. And soft. So u use gradients, to have such pain in the … job done, payed, and you can go further. Actually mistaking the Photo shop for a web tool is a past. And Trendy is most of time mediocre. This is where the Gradients are coming from. Lack of courage and self confidence. To spread the message on the web is actually the goal. To achieve such we need clear and easy to grasp layouts. To incorporate gradients, and swooshes, makes the result but blurry and foggy. And that is not a clear message, isn’t it? Stop decorating, better start designing. All the best to all of us, and I love this post as well. Radical has balls, mediocre gradients. :) Ciao
April 19th, 2010 at 3:39 AM
Love the write-up guys!
Gradients have definitely become overused beyond it’s original purposes. They have become a quick-fix to add depth, or to make something look modern, or dare I say “Web 2.0″.
Reducing and simplifying design well serve to enhance the message which in the end is the most important aspect of any piece!
April 19th, 2010 at 3:56 AM
Really great discussion post here.
I’m not sure it’s the tutorial posts fault that people see web design as a cookie cutter of design elements.
It’s the amount of cowboy ‘web-designers’ out there who think designing a website is as simple as learning a few tutorial techniques and using them on every design they do, regardless of audience and requirements.
Keep up the great posts!
April 19th, 2010 at 4:55 AM
very interesting post. i do think gradients make a difference to a design, and if used in a subtle way, can improve a design a lot.
April 19th, 2010 at 5:21 AM
I’m guilty. I have to admit I’m using gradients a lot, because it just make things look more modern and exciting. But this article definitely inspired me to create something without gradients. Thanks!
April 19th, 2010 at 8:26 AM
Excellent article, I need to pay more attention to my gradients. Additionally I love the “line design” idea and will try it out on a couple of my sites.
April 19th, 2010 at 8:37 AM
Fabulous! I can’t tell you how obsessed I am with visual hierarchy. It always upsets me when clients ask to make color changes that ruin the hierarchy of HEADING to paragraph.
I’ve never tried the line-design concept. I’ll definitely take that into consideration next time I design!
THANKS for the great article!
April 19th, 2010 at 8:42 AM
Great post, I must say that I tend to use subtle gradients on quite a large percentage of design work to add a bit of an extra dimension.
Definate food for thought!
April 19th, 2010 at 8:52 AM
Yeah, I am not really a fan of too much rounded corners. A little here and there but has been way over used.
April 19th, 2010 at 8:55 AM
I’ve been designing websites since 1994. Photoshop always had a gradient tool but it wasn’t until recently that people started using it so much. It’s a trend. I’ve done it. We all have. It’s easier to be trendy than original.
One thing I loved about the early days of the web was that there were no rules. Everything was new. A lot of web design was ugly but it was all different. No two sites looked the same. Navigation and logos could be anywhere. We had fewer tools at our disposal and yet there seemed to be no limit to creativity. Design-wise, things seemed much freer.
Today, navigation and logo are always in the same place (left column / left corner). It’s not necessarily a bad thing. There are good reasons for those conventions. And web design is much better today.
But the point is – be a designer – not a cake decorator. A designer looks at the unique requirements of every project and responds appropriately and creatively. A designer starts with a sketchbook… not a swatch palette.
April 19th, 2010 at 9:27 AM
From a UX perspective, subtle gradients on elements such as tabs and buttons can communicate that they are “affordances” (or to be less highfalutin’, clickable). I agree that in the hands of less skilled designers, gradients can make a site look like it’s been dipped in epoxy — slick, for sure, but not necessarily readable or usable — but they do have their place.
April 19th, 2010 at 9:51 AM
Forget gradients, just add a drop shadow and watch your design explode with creativity lol
great post :)
April 19th, 2010 at 10:49 AM
Wow that’s an great tutorial :) thank you very much for that one very helpful.
April 19th, 2010 at 11:31 AM
Oh damn and I just added gradients to my site. Subtle gradients albeit. But alas I am not a designer but a lowly food blogger but I find all design and the trends very interesting. Food is very similar.
April 19th, 2010 at 12:27 PM
I think it depends on the type of design, but overall I believe a little gradient here and there can help enhance a design. Gradients are natural, look at anything on your desk right now and you will see some form of gradient. Like the author said, gradients are not bad, but if that is the only type of site you design it may be time to look into trying another style.
April 19th, 2010 at 12:33 PM
wow….very well written article
April 19th, 2010 at 12:37 PM
Nice article. Thanks,
I like gradients in layout design but mostly only as far as adding a textural feel. I almost never use them for logo/identity. I’ve done enough apparel and promotional items to know that gradients don’t usually turn out well at all on those items. If you must use gradients on a logo, then at least have non-gradient alternatives you can use.
April 19th, 2010 at 1:59 PM
One of my favorite articles you’ve written in a while. Snaps for Zach.
April 19th, 2010 at 2:17 PM
This is really great! I actually read the whole thing without getting bored. (Rare for me) This was also helpful and enjoyable. I think everyone is guilty of using a gradient every now in then. I think that it does help to add depth or perspective to a design, if it goes with the project. Like a drop shadow, it’s not always needed. I don’t think we should entirely X out the idea of gradients but use it where its needed. I like it when gradients are used when it’s subtle and you don’t notice it right away.
Thanks for this!
April 19th, 2010 at 4:01 PM
Well, I’m sorry to say but my next design will be filled with (subtle) gradients… :D
April 19th, 2010 at 5:15 PM
But gradients are so cool!
April 19th, 2010 at 5:34 PM
Wonderful article. I’m just starting out with serious design and have found some of the wonders of using “subtle” gradients to make certain areas in a design look great. I’ll certainly keep this in mind, however, so that I don’t overuse this.
My new portfolio design actually doesn’t use gradients, so I can totally see how it can work well.
April 19th, 2010 at 6:02 PM
Amen, brother(s). Now, if we can only try some designs without drop-shadows, too…
(true, mustafa said it first, but it’s worth repeating)
April 19th, 2010 at 6:06 PM
Wondeful post!
I’ve been as guilty of gradient gluttony as anyone, but I’ve been trying to steadily move away from that rut and expand my “design emphasis repertoire.”
Keep up the excellent writing!
April 19th, 2010 at 10:50 PM
You use gradients to either:
a. Lighting: create the effect of raised surfaces (button or toolbar) or simulate lighting to elements.
b. Coloring: combination of colors\tones can sometimes be more eye pleasing than a single colored block.
This article refers to gradients as if they where a geometric element in a design – which is a wrong concept but it seems to be what less experienced designers tend to do this days.
The problem the article talks about exists, but it’s not the gradients alone – it’s the uneducated\inexperienced designers that flood the industry.
And I’m not saying it’s such a bad thing. I started out this way and i learned better over the years. it’s good that the web design industry has a starting point doesn’t require extensive education and training.
April 20th, 2010 at 2:22 AM
hello everybody :)
anyone with a dribbbled invitation?
I’d be very grateful if you could please pass it on to me.
April 20th, 2010 at 2:50 AM
I have to say that subtlety is defiantly key. One can so easily overdo something that could look really great.
April 20th, 2010 at 5:06 AM
I used to use to much gradients, now I try to kick off. I only use it for navigations and buttons only now. Nice article
April 20th, 2010 at 11:19 AM
Cheers for the great write up. Subtlety is definately the key!
April 20th, 2010 at 2:01 PM
I rarely use gradients in my designs. It’s because of my background drawing black and white comics. I prefer to use contrast to make my point. Thank you for the nice write up about this topic. I hadn’t really thought much about it before, just kept wondering why my designs never look like anyone else’s. Maybe now that I’m aware of this, I can come up with even better designs in the future.
April 20th, 2010 at 3:26 PM
It’s very nice to read, because I recently redesigned my website with no gradients. Simplicity is the best policy.
April 21st, 2010 at 11:21 AM
Great article. I learned some useful information, thanks!
April 22nd, 2010 at 4:32 AM
Great article, very interesting indeed. I’m guilty of whoring the gradient all over my web designs… it comes as standard now! And your totally right, we shouldn’t rely on gradients a great block colour scheme can be more effective, something that I will definitely take on board
April 22nd, 2010 at 4:53 PM
First things first. Great post, great structure.
We all need to keep in mind that just because there is currently a plethora of designers publishing content that is abusing gradients, it doesn’t mean that the concept of using gradients as a whole is a bad thing. Gradients do not take away from the quality or simplicity of a website. Abusing gradients can, however. Everything has its place, and our main point of focus, as designers, should not be on either using or banning the use of gradients, it should be on moderation, as Zach touched on when he wrote about the atebits layout.
-jonathan
April 22nd, 2010 at 9:19 PM
Thanks fot this article, ya true we can go without gradiant even with simple web color based on only 256 color choices..
April 23rd, 2010 at 10:51 AM
Nice article.. I can relate to that feeling of something being really nice but you cant quite put your finger on it.
April 25th, 2010 at 1:12 PM
Nice article !!!
April 27th, 2010 at 12:10 PM
Another reason to leave the gradients out: it keeps your work from becoming dated. We haven’t used a gradient in our work in years.
April 27th, 2010 at 3:49 PM
I think this site makes awesome use of no gradients. http://www.districtofsound.com
April 29th, 2010 at 9:09 AM
Love gradients… cannot live without them, straight vector is also cool, but gradients seem to have more flow and are easier on the eye
May 1st, 2010 at 3:37 AM
Great article! In my opinion, typography and some graphical details are the most important aspects, if you want to design a clean layout without gradients.
May 5th, 2010 at 5:52 AM
thank you for the realy interesting post and discussion.
May 28th, 2010 at 4:13 PM
That is an interesting point to stop using gradients, I don’t use gradients if I don’t have to, but sometimes you just must use a gradient, otherwise the graphic looks like crap :)
June 10th, 2010 at 6:38 AM
I do love my gradients, however this post has made me think about it in a different way. Great Work!
June 18th, 2010 at 5:36 AM
Nice one guys, good tutorial. Love the visual diagrams, they really work!
July 21st, 2010 at 4:58 PM
Design is all about the process. I’ve seen amazing illustrations just inside MS Paint, good design is determined before it ever makes it into a program. Of course these fundamentals are harder to grasp, but you can do anything once you gain that skill. Good article.
Join the Conversation!
Remember: Life's not all doom and gloom, so please keep it constructive. If we've made an error or missed something big, please let us know! Learning is revisions, after all.