Flat vs. Rich Design: Let Your Business Decide for You

July 30, 2015
1 Star2 Stars3 Stars4 Stars5 Stars

Microsoft and Apple software products are the biggest examples of the flat vs. rich design debate, and a lot can be learned by studying the examples they set. But first, let’s evaluate the technical differences between flat and rich design.

Rich design mimics real-world objects in design by using complex shadows, gradients, gloss, textures, and bevels. Rich design is technically difficult to pull off successfully, and even has a fancy technical name: skeuomorphism. Flat design generally uses solid, bold colors without texture or gradient, hard lines, a use of negative space, and flat type faces. Flat design is economical with designer time and coding.
Flat vs. Realism Design
Microsoft: Champions of Flat Design
With the release of Windows 8, Microsoft became the champions of flat design. The new OS interface operated much like a tablet or smartphone, with bold, flat boxes representing program and interface options. Microsoft purportedly took cues from metro transit signs, focusing on simple, clear icons with minimal typography.

In essence, the purpose of the design is communicated as simply as possible, and some report, reduces confusion and improves the user experience by offering greater clarity. Flat design lends itself to responsiveness on the web, as large items on a traditional computer look virtually the same and are easily distinguishable on mobile. The primary drawback of flat design is that contrast and color of elements must be carefully considered, as similar-looking elements can be easily confused. It’s also true that having many flat design elements placed close together requiring many colors for differentiation can look messy.

Apple: Forerunners of Rich Design
Apple, by contrast, has held firm with its rich design elements. The program bar on Safari is peppered with lifelike icons with beautifully generated shadows and gradients. But since these icons represent familiar images, they rely less on intuition. For example, a music program could mimic the dials and sliders found on a real mixer, reducing any learning delays from the physical object to the digital equivalent.

Unfortunately, rich design is technically difficult to do well, and can easily look tacky. Some rich designs also translate poorly to responsiveness.

How Can My Business Decide?
But both Microsoft and Apple are in the same business, and used different styles! In their case, it was a matter of competition: each seeking to differentiate from the other. If you are entering a market with a significant competitor, you could consider using a similar strategy, and swinging the opposite way of your competitor to facilitate differentiation. Don’t have a major competitor? You can let your business decide easily which would be best for your website using cues from your product.

Is it a tangible product? Does experiencing the product require sensory engagement? Clothes, jewelry, restaurants, books; these sorts of products can greatly benefit from using rich design which draws a visitor into the experience of the product. Bagigia is a good example of this, as they use recognizable textures and web elements related to their product. If you decide to go the rich design route, make sure to spend the time hunting for a typeface which complements your design, and tailor it to the general impression you want visitors to walk away with.

A business with confusing elements or terms, intangible products, or which requires users to process a lot of information (charts, graphs, etc.) is likely to benefit more from flat design, which removes visual distractions and focuses on conveying the most amount of information in the simplest way possible. You will also want to consider flat design if you expect the vast majority of your traffic to come from mobile sources. Louder Than Ten is a good example of an agency which uses flat design. You won’t need to worry as much about tailoring your fonts or other elements to your design: just shoot for clean edges, good use of negative space, and non-serifed fonts.

Another big consideration is simply cost. A good, detailed rich design which is themed to your niche is likely to be a bit more expensive to produce than a flat design. Remember: it’s hard to do rich design without looking tacky, and if you can’t guarantee a designer and coder that’s up to snuff, or rich website templates at WebsiteBuilder.com it’s better not to risk it.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.