X Course Advisor FREE Course Advisor
(Close)
Watch Tutorials
macProVideo.com
Close
The Benefits of Flat Design for Your Website and Marketing Materials

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


Elaine Ashburn

Elaine Ashburn | Articles by this author

Elaine Ashburn is an advertising creative director/art director. She's worked with Photoshop, Illustrator and InDesign since their inception. She also has a number of unpublished novels and short stories to her credit and enjoys writing as much as she does art directing. Her focus is to make these programs as easy for the layman as they can be by creating a 'simple steps' approach. Her goal is to have you using the programs to achieve your goal in a matter of minutes. Elaine's work can be viewed at elaineashburn.com and elaineashburnart.com.

Comments

You must be logged in to post a comment.
Create an Account  Login Now

What is macProVideo.com?

macProVideo.com is an online education community featuring Tutorial-Videos & Training for popular Audio & Video Applications including Adobe CS, Logic Studio, Final Cut Studio, and more.
© 2018 macProVideo.com
a division of NonLinear Educating Inc.
Link