Designing Without Gradients

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

Good Stuff and Everything Else

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

Lead the Eye

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.

Economy of Line in Action

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.

Subtle Gradient Design

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.

Posted Monday, April 19th, 2010 · Back to Top

SPONSOR

Add Comment

63 Comments 10 Mentions

  1. Nathan Author Editor

    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.

    ·

  2. Philip Davis Author Editor

    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.

    ·

  3. David Author Editor

    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!

    ·

  4. Armin C. Author Editor

    I would just add that you can always use texture as an alternative to gradients (yes, using both or none is also an option)

    ·

  5. Brano Author Editor

    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

    ·

  6. Justin Moore-Brown Author Editor

    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!

    ·

  7. AtiKuSDesign Author Editor

    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!

    ·

  8. ForwardSlash Author Editor

    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.

    ·

  9. Nicole Bauer Author Editor

    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!

    ·

  10. Dennis Author Editor

    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.

    ·

  11. _meganORSI__ Author Editor

    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!

    ·

  12. Mark Author Editor

    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!

    ·

  13. Jordan Walker Author Editor

    Yeah, I am not really a fan of too much rounded corners. A little here and there but has been way over used.

    ·

  14. David Lewis Author Editor

    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.

    ·

  15. A.J. Kandy Author Editor

    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.

    ·

  16. Mustafa Kurtuldu Author Editor

    Forget gradients, just add a drop shadow and watch your design explode with creativity lol

    great post :)

    ·

  17. CPO – Drupal Author Editor

    Wow that’s an great tutorial :) thank you very much for that one very helpful.

    ·

  18. Chili Author Editor

    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.

    ·

  19. Steve Mullen Author Editor

    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.

    ·

  20. Cook Author Editor

    wow….very well written article

    ·

  21. Travis Ulrich Author Editor

    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.

    ·

  22. JD Ross Author Editor

    One of my favorite articles you’ve written in a while. Snaps for Zach.

    ·

  23. Hillary Author Editor

    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!

    ·

  24. Davy Kestens Author Editor

    Well, I’m sorry to say but my next design will be filled with (subtle) gradients… :D

    ·

  25. Shawn Bird Author Editor

    But gradients are so cool!

    ·

  26. Sarah Kettell Author Editor

    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.

    ·

  27. Jason Author Editor

    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)

    ·

  28. Noah Author Editor

    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!

    ·

  29. Koby Author Editor

    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.

    ·

  30. Ayman Aboulnasr Author Editor

    hello everybody :)

    anyone with a dribbbled invitation?

    I’d be very grateful if you could please pass it on to me.

    ·

  31. Nicole Author Editor

    I have to say that subtlety is defiantly key. One can so easily overdo something that could look really great.

    ·

  32. krike Author Editor

    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

    ·

  33. Mark Author Editor

    Cheers for the great write up. Subtlety is definately the key!

    ·

  34. Rachel Nabors Author Editor

    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.

    ·

  35. Pusparaj Author Editor

    It’s very nice to read, because I recently redesigned my website with no gradients. Simplicity is the best policy.

    ·

  36. Inspirationfeed Author Editor

    Great article. I learned some useful information, thanks!

    ·

  37. Rory Author Editor

    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

    ·

  38. MacRemix Author Editor

    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

    ·

  39. Shajed Evan Author Editor

    Thanks fot this article, ya true we can go without gradiant even with simple web color based on only 256 color choices..

    ·

  40. Jonathan Author Editor

    Nice article.. I can relate to that feeling of something being really nice but you cant quite put your finger on it.

    ·

  41. cooljaz124 Author Editor

    Nice article !!!

    ·

  42. Craig Author Editor

    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.

    ·

  43. CChaos Author Editor

    I think this site makes awesome use of no gradients. http://www.districtofsound.com

    ·

  44. HERMAN BRUMMER Author Editor

    Love gradients… cannot live without them, straight vector is also cool, but gradients seem to have more flow and are easier on the eye

    ·

  45. Webtwist – Webdesign Bamberg Author Editor

    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.

    ·

  46. clea walford Author Editor

    thank you for the realy interesting post and discussion.

    ·

  47. Vladimir Author Editor

    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 :)

    ·

  48. Web Design Nottingham Author Editor

    I do love my gradients, however this post has made me think about it in a different way. Great Work!

    ·

  49. Rob Author Editor

    Nice one guys, good tutorial. Love the visual diagrams, they really work!

    ·

  50. Daquan Wright Author Editor

    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.

    ·

  51. ExampleMag Author Editor

    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.
    So called Web 2.0 hehe ))

    ·

  52. Wandregale Author Editor

    great article , many thanks

    ·

  53. Rhonda Author Editor

    Great article! I love the examples you used, especially the Art in My Coffee website.

    ·

  54. Hynek Author Editor

    OT: may I ask what tool have you used to create the wireframe of artinmycoffee web site? I love the look of it!

    http://s3.amazonaws.com/buildinternet/images/designing-without-gradients/art-in-coffee-lines-comparison.jpg

    ·

  55. iraq Author Editor

    thank you it’s vrey uesful

    ·

  56. Name.Con.Tc Author Editor

    harika bir çalışma paylaşım için teşekkürler.

    ·

  57. Designer Renji Author Editor

    Nice Post….Thanks…………

    ·

  58. cheao air max shoes Author Editor

    A lifetime of happiness ! No man alive could bear it ; it would be hell on earth

    ·

  59. the soccer store Author Editor

    Along with almost as much expectation amongst U . s . football fans out of the box [url=http://www.supersoccershoes.com/]direct football shop[/url] produced by the subsequent Apple company product launch regarding technophiles, Major Category Football announced its total diary for the particular 2012 time the other day early morning. Stretching from Very first Stop weekend about Goal 12 for the MLS Cup Final about 12 , 1, Multiple listing service will play the longest time in the historical past – any span of video games that can last for 267 days. Additionally, just about all 323 regular time video games and the entirety from the postseason will probably be transmit upon reside tv.

    They’re heady times indeed for the 17 years old league, because Multiple listing service makes its way into a new period in their rise in terms of interest amongst home-based soccer fans. Within San Jose, 2012 should show to be the crucial 12 months for your business, because the prospective customers for any new stadium take keep as well as [url=http://www.supersoccershoes.com/]nike soccer cleats[/url] the staff looks to be able to rebound from your disappointing year on the discipline. The particular tired tiny category that may is among the most Newest Factor and the pleasure from your football local community hasn’t been higher.

    ·

  60. Carlena Crismond Author Editor

    Thank you for the auspicious writeup. It in reality used to be a enjoyment account it. Glance complicated to more introduced agreeable from you! By the way, how can we keep in touch?

    ·

  61. awebdesk Author Editor

    Thanks for this valuable post. 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. Keep posting about new trends

    ·

  62. ccna training chennai Author Editor

    wow …. really i love your article

    ·

  63. Cubicle Ninjas Author Editor

    Couldn’t agree more; gradients should be used oh-so sparingly.

    ·

 

Build Internet by One Mighty Roar. Since 2008.