Visual sugar
How designers learned a favorite trick of food industry and why they should stop abusing it
How do you make anything taste better? Just add sugar to it. That’s the simple trick that big players in the food industry use to make everything tastier. Nowadays sugar is in everything: in burgers, in soft drinks, in skimmed milk, in mayonnaise, even in baby food!
In 1822 the average American consumed about 45g of sugar every five days. Today, that number is 756g!
Our brain constantly craves sugar, so we get addicted to the food that contains it (brain scans show that sugar is as addictive as cocaine). Sugar has no nutritional value, so this only results in higher profits for food producers and loads of health problems for consumers. There’s a brilliant a documentary about this — Fed Up.
How do you make any design better? Just add sugar to it. Visual sugar.
What is visual sugar?
Visual sugar is any visual decorative element. The most common types of visual sugar are icons, gradients, shadows, textures, motion etc.
Designers sometimes use them in a meaningless and excessive way to make their designs feel nicer. The word ‘meaningless’ is key here. There’s nothing wrong with any of these per se, it’s just that they are used to sweeten otherwise flavorless and meaningless designs.
Why does it happen? Well, we’ve all been in this situation: you’ve started working on a design and it feels a bit bland. What do you do? How about adding some icons, maybe some gradients and shadows? It might seem that you’ve made your design better, but in fact, you just disguised a shallow design.
Some designs are literally an eye candy (in a bad way). Loads of sugar, zero nutritional value. Let’s take a typical dashboard from Dribbble:
✅ Heavy shadows
✅ Loads of icons
✅ Gradients
❌ Meaning
How much sugar is too much?
According to the American Heart Association, the maximum amount of added sugars you should eat in a day are 37.5 grams (9 teaspoons) for men and 25 grams (6 teaspoons) for women.
What about product design? How much visual sugar is it ok to use in product design? Edward Tufte in his book Visual Display of Quantitative Information has the perfect answer:
When a graphic is taken over by decorative forms of computer debris, when the data measures and structures become Design Elements, when the overall design purveys Graphical Style rather than quantitative information, then that graphic may be called a duck in honor of the duck-form store, “Big Duck.”
For this building the whole structure is itself decoration, just as in the duck data graphic. In Learning from Las Vegas, Robert Venturi, Denise Scott Brown, and Steven Izenour write about the ducks of modern architecture — and their thoughts are relevant to the design of data graphics as well:
When Modern architects righteously abandoned ornament on buildings, they unconsciously designed buildings that were ornament. In promoting Space and Articulation over symbolism and ornament, they distorted the whole building into a duck. They substituted for the innocent and inexpensive practice of applied decoration on a conventional shed the rather cynical and expensive distortion of program and structure to promote a duck… It is now time to reevaluate the once-horrifying statement of John Ruskin that architecture is the decoration of construction, but we should append the warning of Pugin:
It is all right to decorate construction but never construct decoration.
How to cut down on visual sugar?
There are few simple things that are worth keeping in mind when working on the design to make sure it doesn’t turn into visual junk food.
Here are five ways to cut down the sugar:
One. Always remember about the hierarchy of product needs. Get the functional aspects of the product right before you work on the form. Once you figure the overall goal of your design and the structure of information at hand, every element will fall its place. Start working on visual look and feel of your product first and the pyramid will collapse.
There’s also a great advice about this from iA.net:
Do not look for reasons to use an icon because your design feels empty or cold or doesn’t work as well as you expected. Icons do not fix a structurally broken design. Add icons at the very end of the design process, do not play with icons while working on your wireframes. Pictures can stand for 1,000 different words; strong information architecture finds the right notions and puts them in the right context. Get your rationale straight before appealing to emotion.
Two. Every element in your design should have a purpose. For example, motion in Google Material Design language is used to add extra meaning not just to make everything look nicer:
…more than simply seeming natural, motion should above all else help guide users, providing them with the right information at the right time. Motion should help navigate complex challenges, and clearly communicate to the user an element’s resistance, dynamism, and path.
— from Making Motion Meaningful by Sharon Correa and John Schlemmer
Three. Remove visual sugar when it’s not necessary. Before its re-design, Dropbox used to have icons next to every menu item in the left-hand side navigation panel (on the left). They looked nice, but didn’t have almost any practical meaning: if you were to hide the text next to each icon, users wouldn’t remember what it means. In the new design (on the right) all the icons are gone and the menu now is not only much cleaner visually, but more easily comprehensible as well.
Four. Don’t follow trends. At the time when Dieter Rams started working on his first designs, the trendy design of vinyl player looked like this:
This is what he designed:
Five. Remember: good design doesn’t need to be too sweet. Frank Chimero compares good design to vanilla ice cream:
I am for a design that’s like vanilla ice cream: simple and sweet, plain without being austere. It should be a base for more indulgent experiences on the occasions they are needed, like adding chocolate chips and cookie dough. Yet these special occasions are rare. A good vanilla ice cream is usually enough.
To wrap it up
There’s a brilliant piece in the recent Peter Thiel’s NYT interview:
Journalist: You believe that no one should ever eat sugar.
Peter Thiel: Confirm. We preach, we don’t always practice.
