All Articles Web
The Benefits of Flat Design for Your Website and Marketing Materials
Elaine Ashburn on Thu, June 12th 0 comments
Elaine Ashburn breaks down how flat design can add depth, not only to your website but to ALL your marketing communications. Essential reading for creatives, designers and marketers.

Contrary to the beliefs of Christopher Columbus the world is flat. If you don’t take my word for it, just look at your phone. iOS7… flat. Windows 8… flat. Flat design has taken the world by storm. (Pic 1)

Pic 1

Pic 1

Just what is flat design and why is it important?

I’ve read some articles that say flat design was created in retaliation to the over-rendering of buttons, apps and webpages, but I believe the reality for its conception was to save “K” space (kilobyte). Every gradient, texture and shadow you put on an image takes up precious “K” space and especially with phones and tablets being responsible for 63% of our internet searches, you need all the “K” space you can get. And yeah, it is also true that you no longer need to create an illusion of reality to make viewers feel secure. Everyone knows what the icons they have on their devices mean… and do. In fact, most viewers can’t remember a world before iconography became the norm and flat design just simplifies these icons. Take a look at the old interpretation of the Safari browser (skeuomorphic) from OS X versus the iOS7 version (flat) and tell me if you don’t think my idea holds any credence? (Pic 2)

Pic 2

Pic 2

The reality is, flat design has been around for a while. It’s just gained in popularity over the last few years because it looks so crisp, clean and modern. The combination of retro colors (salmon, purple, green and yellow—like 1950s automobiles), sans-serif type and simplistic pictograms contribute to this overall feel. The buttons still look clickable even without the beveling and gradations we associate with buttons of the past. The input fields still look like places to type in your particulars… and websites still look like websites. It’s 2D compared to 3D. (See Pic 3, rdio.com for an example of a great flat design input field.)

Pic 3

Pic 3

So what makes it so popular?

Think minimalistic. Flat design has a distinct look and feel without all the extras. It’s especially useful on small screens such as your phone and mini tablet since it makes navigating fairly easy with less chance of hitting a wrong button. But if you really want to add visuals to your design, try some simple photography. Yes it’s true that photographs have natural depth, but they seem to work well with the simplicity of all the other elements.

Some Examples

I’ve found a few websites that I love, done entirely in flat design. And some that combine it with photography, which just takes it to the next level as far as I’m concerned.  I know truests would have a hard time with the addition of the photographic elements, but I’ve never been a truest and I like what I like.

Spelltower

The first one I want to show you is Spelltower (spelltower.com). Spelltower is a spelling game for your Mac, iOS or Android device. It’s a cool game that has just as cool of a website. The site has a unique scroll down function, similar to an iOS tablet and flat design is used throughout. What I like most about it? It’s fun, cartoony, simplistic and it has just one purpose… to get you to purchase this game. (Pic 4)

Pic 4

Pic 4

Huxtaburger

This is an Australian site (huxtaburger.com.au) that uses flat design at its simplest to sell hamburgers. The site works very much the way your tablet does, you simply scroll down or move from side to side. And it too only has one function—the ability to order your hamburgers online and pick up at the closest store. I just love the way this site looks and works. Kudos Australia. (Pic 5)

Pic 5

Pic 5

Fitbit

The next site I want to show you is Fitbit (fitbit.com). It’s a site for some unusual products that help to keep you fit. You can see your progress towards fitness and health with online tools and apps that accompany the devices they sell. The site utilizes both flat design and photography and the combination of the two work oh so well together. (Pic 6)Pic 6

Pic 6

Paper Tiger

This is a digital design agency out of New Jersey whose corporate website strips away levels of photography to the point of flat design. They also mix it with traditional iconography for a unique look that would be acceptable to even the most conservative of firms. (Pic 7)

Pic 7

Pic 7

Who says flat design is only for the web?

Diet Coke

Flat design hasn’t just taken the web by storm; it’s also taken the subways. The Diet Coke ads that dominate the Times Square Shuttle walls right now are a brilliant example of flat design. Mostly white with flattened “grayed out” imagery, to me these ads exemplify flat design. Yes the can itself is three-dimensional, but the use of the flat type behind it is brilliant. I’m jealous. I wish I came up with these ads. (Pic 8)

Pic 8

Pic 8

And last but not least, flat design can even be found in the refrigerator section of your supermarket.

Friendship Cottage Cheese

I guess being a lover of design has some advantages. I discovered the packaging for the Friendship Cottage Cheese line quite by accident. I was looking for my favorite Greek yogurt when the tops of the cottage cheeses caught my eye. They are bold, brightly colored and embrace the flat design philosophy. (Pic 9) Yep, you guessed right. Two or three of them made their way into my grocery cart. If Friendship only knew how I shopped.

Pic 9

Pic 9

So as I sign off on this article, I’ll leave you with something else to think about. Facebook, Twitter and the Rdio.com sign off have all embraced flat design; maybe your next design project should too. (Pic 10)

Pic 10

Pic 10


Comments (0)

You must be logged in to comment. Login Now

Feedback
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: