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 StyleYou 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 ElementsWhat 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.
TypographyThere 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 LineThis 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 PowerfulWhat 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 HereYour 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.
Powered by WizardRSS | Donate to WizardRSS
.png "English"){kind=small}
