Basic Principles of Flat Design – And Resources to Get You Started!

Posted in Tips, Web Design11 months ago • Written by 24 Comments

In case that you have been stuck in a cave for the past few years, let me tell you this nice news: flat design is the current craze. We should now say goodbye to those intricate designs dominated by brushes, gradients, drop shadows and all those kinds of designs. I repeat, flat is the new trend.

The flat design is an emerging design style that uses flat shapes and icons. It basically revolves around the use of rectangles, circles, triangles and others shapes with the absence of other design elements like shadows, strokes and gradients. It was made popular by Microsoft in their computer systems, especially their new operating system they call Windows 8. Basically, the flat design style is rooted on two principles: simplicity and readability. These two principles guide the designers in formulating stylish web layouts, software designs, posters and many more.


Build Flat Responsive Website from Scratch – Complete Course


website-sample-flat-02
Photo from Michael Kelsinger

Flat Design’s Simplicity

It is the state of a design that refrains from the use of intricacies. Simple flat designs turn away from the use of drop shadows, strokes and other design elements. The reason behind this is that people now appreciate simple and easy to recognize styles. Also, with the advent of mobile browsing, where the screen space is limited, the use of simple images would maximize the use of the pixels on the screen. The minimalist style is also applied as the designers focus on wide spacing between icons, images and all the other elements of a web page or application. Furthermore, simple and flat images tend to load faster than intricately designed ones because the browser would not load the design elements packed together with the main image.

Meanwhile, the principle of readability comes in together with the minimalist style. With more ‘white-spaces’ (or empty spaces), the text is seen well. Also, the absence of drop shadows, strokes and gradients will ensure the readability of the texts placed within a page.

Facebook is one of the first to adapt the design format. In the past weeks, Facebook has evidently changed their design schemes, allowing users to see simple icons, designs and more eye-friendly visuals. Google has also followed the lead by changing its icons to colorful yet flat images.

facebook-changes-flat

Truly, the flat design trend has slowly but surely invaded our web pages, apps and computers. Soon enough it will totally influence us. And before that happens, let’s familiarize ourselves with the philosophy of the flat Design. We’ll talk about the elements of the design and how are they used to fully utilize the screen space.
There are actually five elements. They are:

  1. Absence of depth
  2. Use of simple elements
  3. Typography
  4. Color
  5. Minimalism

skeumorphic-04

Photo source: The World is Flat

The Death of Depth

Depth is now dead. A new design trend is ruling the block. Unlike the previous design trends where we couldn’t live without drop shadows, strokes, bevels and gradients, the new flat design style focuses more on simple 2D blueprint. This philosophy of the flat design totally contradicts the skeuomorphistic design, where images are made to imitate the shape, color and utilization of a real-word object. Skeuomorphistic-designed websites and apps normally have background images which are realistic in nature. These use textures in the real world.

skeumorphic-design-flat02

A good example of this kind of design is the iOS6 (and previous versions of iOS) design. Each design is supposed to be an imitation of the real object. The use of 3d computer-generated images, the use of gradients, textures, strokes, bevels and embosses are maximized to make the image look like real-world. The newsstand app looks like an actual newsstand made of wood.

skeumorphic-02-comparison-flat

On the contrary, these elements are removed in the flat design. The scheme of the flat layout removes these 3D elements. Drop the depth. Remove all those shadows, gradients and strokes!

Simplicity is Still Beauty

With the removal of depth in the designs, it is but normal for the images, icons and other design elements to become visually simple. Icons are now made to be flat and uses basic geometric shapes like circles, squares and rectangles. This will give a simple and easy to use graphic user interface. The average person will no longer feel the need for a manual because the visuals present themselves as they’re used.

settings-icon-flat-01
Photo from Hrvoje Grubisi

When you see an F icon placed in a blue square, you’ll easily know it’s Facebook. When you see an icon of a gear, it would easily tell you that it’s a settings menu. Flat design works like that. When you see a diskette shape, you’ll automatically know that it’s the save icon. Or when you see a big yellow letter M placed on a red background, the notion will always be McDonald’s. See, the simpler the logo gets, the better the recognition will be. What you see is what you basically get.

facebook-icon-flat
Resources for designing a Timeless Logo:

settings-icon-flat-02
More on Okilla.com

Typography, as I told you before

typograph-sample
Photo by Courtney and Andrew
Typographies have their place in flat designs. It adds style even with the texts and gives you a reader-friendly interface. No more calligraphy. Use crisp and clear font texts with shorter messages and chromatically placed with color and shapes. For more information on this, read our typography tutorial.

Coo-lor Colors

As I mentioned in our typography tutorial, color is important. It can make or break your page. It basically sets the whole feel of your site or page. In the flat design principle, it is advisable to use candy colors which are slightly desaturated because they tend to add aesthetic beauty to your page without making your reader’s eyes bleed because of too much brightness. Candy colors attract the eyes better because they are cute, and can be complemented and contrasted easily with other colors. These colors are normally #e65d5d or #c43434 (for red), #7dc692 or # 508b61 (for green), #dfbc42 (for yellow) and # 3498db for blue. Flatuicolors.com provides a good guide for this.

Just remember that color is everywhere; don’t bore people by choosing the un-cool ones. Gradients are also not cool anymore. Avoid using bright yellow, neon yellow green, neon purple and bright red and bright orange. Don’t make your website visitors glare.

color-palette-for-flat-design

color-palette-for-flat-design-03
Master Your Colors!

Less is more, lesser is most

Minimalism is the art of de-cluttering your page or screen. This principle originated from the magazines of the print media where white spaces are more evident than the text itself. It gives padding or breathing room for your texts and suggests a typographical peace. Leave a lot of empty spaces. Throw away the unneeded elements and impress people. Less is more. Lesser is most.

sample-typography-flat
Relevant: Why Creating Minimalist Design Makes You a Better Designer

The flat design could be simple as it looks, but creativity is still everything. When thinking of possible usage for this layout, remember to refresh your mind. Think of newer, cuter and sleeker designs. This design style will be still in style, but doing a wreck out of it won’t make it any more famous. Be creative. Try to experiment. View inspiration sites. Try your own style, commit mistakes, correct them and be a better artist!
Know that you know how to be flat. Let us all, go flat!

74 Written ArticlesWebsiteGoogle+

Rudolph is a geek. He loves reading: books, blogs and even nutrition facts found at the back of products. Since joining 1stwebdesigner last year, Rudolph has written several articles that concerns Typography, Wordpress, Freelance Lifehacks, Graphic Design and Showcase of Beautiful Web Designs. He also write poems, movie reviews and he puts them in his blog together with rants and some daily life updates.

24 Comments Best Comments First
  • nateCitiz3n

    Monday, August 12th, 2013 11:20

    3

    This is for the young designers out there… There’s no such think as “Flat Design” there is minimalist design and flat “look and feel”. Design is an approach to solving a problem, it’s a philosophy. Aesthetics, “look and feel”, is just one of the tools used to present the solution and communicate that philosophy.

    Everything on a monitor is flat, everything on paper is flat.

    You can’t solve a problem by starting with someone else’s solution.
    Stop talking about “flat design” and start solving problems with your designs.

    +16
  • Kelly

    Thursday, August 15th, 2013 10:12

    10

    Hey everyone … now we all design like this! Baaaaa. I think flat design is really effective for a number of things – like data grids (love the Snowbird example) but something in me rebels when something is declared over.

    +7
    • Nimrod

      Saturday, August 17th, 2013 02:38

      13

      :D yeah.. I feel you Kelly! and when was Microsoft declared to be the world’s authority in web design & graphics?

      +2
  • Adorn Consultants

    Thursday, August 15th, 2013 01:36

    8

    Flat designs help a lot for responsive websites or apps. The way they can be scaled using simple CSS styles make them apt for both large screen and small screen devices.

    As you said “Less is more, lesser is most”!!

    +6
    • Nikhil Malhotra

      Friday, August 16th, 2013 09:53

      12

      I agree with you Adorn. Simplicity is attractive and flat design add three dimension effect to it.

      +2
  • Ryan

    Friday, August 30th, 2013 04:20

    20

    I love flat design, but let’s not just jump on the band wagon and discard the old one. There’s still a lot to take from other designs and a creative designer may even mix styles. No doubt flat design will be a thing of the past soon too, then will you hold the banner of some new trend and talk about flat designs as though they’re some undesirable waste of time?

    Like art, web designs go through phases, now is perhaps a minimalist phase but who knows what next… a romantic phase? where all websites go crazy with over adornment? Or a modernist? The main thing is web designers need to stay ahead of the curve and be able to cater to the latest trends if they’re going to keep getting clients.

    Interesting article! Thanks…

    +5
  • Nimrod

    Saturday, August 17th, 2013 02:40

    14

    I don’t think this trend will last.. It’s only a matter of time before someone of “perceived authority” in web & graphics design will decide to contradict this trend and the sheep herd will follow also… hahaha I find this funny!

    +3
    • Brian Hermelijn

      Sunday, August 18th, 2013 13:25

      15

      That’s indeed true. But each new design evolving process that solves one particular problem. Right now the flat targets the speed issue in most designs, but eventually it will die it.

      0
  • Jared

    Monday, August 12th, 2013 13:55

    5

    I would argue that paper is “flatish.” There is a 3d quality to paper that can be forgotten only at a designer’s peril. Also, if you look at what is happening in iOS 7, there is actually more fundamental use of 3D space to communicate that in iOS 6. The icons themselves are flat but the world they live in is full of layers, collections, and gravities. I think that is why apple does such a good job – they weren’t first to flat design but they will be the best at it. My two cents after using the beta for a few months.

    +2
  • michael

    Wednesday, August 21st, 2013 22:29

    18

    “A new design trend is ruling the block. ”

    You mean the design trend that existed for most of computing history?

    Time to just off the bandwagon and just use whatever works and makes things clear for the users (you remember them, right? They’re the people who don’t give a s41t about design and just want to accomplish their goals with minimal hassle.)

    +2
  • Flatypo

    Thursday, August 15th, 2013 09:14

    9

    i think flat design still popular because many people crave connection speed access in the middle inadequate. but it is very difficult to combine color and uniqueness in a flat design that most of the nearly equal

    +1
  • Casper

    Tuesday, August 13th, 2013 12:02

    7

    Flat design is more quiet…And that is very welcome in a time when people have to process more and more info.

    +1
  • Issa

    Thursday, August 22nd, 2013 11:24

    19

    love this article man!

    +1
  • Ruairi Phelan

    Saturday, September 7th, 2013 15:31

    22

    Flat design is great for responsive frameworks. Great article.

    Thanks

    Ruairi

    +1
  • Adrian

    Monday, August 12th, 2013 09:28

    1

    Designmodo resources are out of this list? so sad :(

    +1
    • Shina

      Friday, August 16th, 2013 04:47

      11

      How strange huh? :)

      0
    • Rudolph Musngi

      Monday, August 12th, 2013 12:37

      4

      Designmodo will be mentioned soon. Watch out! :)

      +2
  • Mohammad hamza

    Tuesday, August 20th, 2013 12:22

    17

    This post describes a new way to create flat design.
    I love that ‘Simplicity is Still Beauty’.

    +1
  • Adeel Qamar

    Tuesday, August 13th, 2013 03:52

    6

    Yep a new era of flat designs and more of technology is shifted to it. They are simple but at the same time, they are charming, unique, special.

    0
  • franz

    Saturday, September 28th, 2013 10:01

    24

    As a designers , should keep up with the latest trends I don’t know how long flat design will last but certainly is becoming so popular. And last if a client ask you for any type of design toy should be able to make it other wise you’re out !.

    0
  • Dinesh Gadtoula

    Thursday, September 5th, 2013 02:24

    21

    I love flat design.. It is easy to create but main theme should be kept there!

    0
  • Madan Patil

    Sunday, August 18th, 2013 21:10

    16

    Keep the essential, eliminate the rest. Minimalism is the way of life, not just limited to the design work but the principle works everywhere when you apply it. We apply the minimalism in design and it become flat.
    When we focus on minimum it becomes powerful, so the designs. Simple.

    0
  • aditya

    Monday, August 12th, 2013 10:59

    2

    skeuomorphic design is not that worst to wait for flat design. :P

    -2
  • Tarek

    Thursday, September 12th, 2013 11:33

    23

    Hi there,
    Twittstrap, Our flat version of the famous Twitter bootstrap. Check out the demo site http://twittstrap.com/twittstrap
    I hope that twittstrap can help you for faster and easier web development.

    -2
  • franz

    Saturday, September 28th, 2013 10:01

    24

    As a designers , should keep up with the latest trends I don’t know how long flat design will last but certainly is becoming so popular. And last if a client ask you for any type of design toy should be able to make it other wise you’re out !.

    0
  • Tarek

    Thursday, September 12th, 2013 11:33

    23

    Hi there,
    Twittstrap, Our flat version of the famous Twitter bootstrap. Check out the demo site http://twittstrap.com/twittstrap
    I hope that twittstrap can help you for faster and easier web development.

    -2
  • Ruairi Phelan

    Saturday, September 7th, 2013 15:31

    22

    Flat design is great for responsive frameworks. Great article.

    Thanks

    Ruairi

    +1
  • Dinesh Gadtoula

    Thursday, September 5th, 2013 02:24

    21

    I love flat design.. It is easy to create but main theme should be kept there!

    0
  • Ryan

    Friday, August 30th, 2013 04:20

    20

    I love flat design, but let’s not just jump on the band wagon and discard the old one. There’s still a lot to take from other designs and a creative designer may even mix styles. No doubt flat design will be a thing of the past soon too, then will you hold the banner of some new trend and talk about flat designs as though they’re some undesirable waste of time?

    Like art, web designs go through phases, now is perhaps a minimalist phase but who knows what next… a romantic phase? where all websites go crazy with over adornment? Or a modernist? The main thing is web designers need to stay ahead of the curve and be able to cater to the latest trends if they’re going to keep getting clients.

    Interesting article! Thanks…

    +5
  • Issa

    Thursday, August 22nd, 2013 11:24

    19

    love this article man!

    +1
  • michael

    Wednesday, August 21st, 2013 22:29

    18

    “A new design trend is ruling the block. ”

    You mean the design trend that existed for most of computing history?

    Time to just off the bandwagon and just use whatever works and makes things clear for the users (you remember them, right? They’re the people who don’t give a s41t about design and just want to accomplish their goals with minimal hassle.)

    +2
  • Mohammad hamza

    Tuesday, August 20th, 2013 12:22

    17

    This post describes a new way to create flat design.
    I love that ‘Simplicity is Still Beauty’.

    +1
  • Madan Patil

    Sunday, August 18th, 2013 21:10

    16

    Keep the essential, eliminate the rest. Minimalism is the way of life, not just limited to the design work but the principle works everywhere when you apply it. We apply the minimalism in design and it become flat.
    When we focus on minimum it becomes powerful, so the designs. Simple.

    0
  • Nimrod

    Saturday, August 17th, 2013 02:40

    14

    I don’t think this trend will last.. It’s only a matter of time before someone of “perceived authority” in web & graphics design will decide to contradict this trend and the sheep herd will follow also… hahaha I find this funny!

    +3
    • Brian Hermelijn

      Sunday, August 18th, 2013 13:25

      15

      That’s indeed true. But each new design evolving process that solves one particular problem. Right now the flat targets the speed issue in most designs, but eventually it will die it.

      0
  • Kelly

    Thursday, August 15th, 2013 10:12

    10

    Hey everyone … now we all design like this! Baaaaa. I think flat design is really effective for a number of things – like data grids (love the Snowbird example) but something in me rebels when something is declared over.

    +7
    • Nimrod

      Saturday, August 17th, 2013 02:38

      13

      :D yeah.. I feel you Kelly! and when was Microsoft declared to be the world’s authority in web design & graphics?

      +2
  • Flatypo

    Thursday, August 15th, 2013 09:14

    9

    i think flat design still popular because many people crave connection speed access in the middle inadequate. but it is very difficult to combine color and uniqueness in a flat design that most of the nearly equal

    +1
  • Adorn Consultants

    Thursday, August 15th, 2013 01:36

    8

    Flat designs help a lot for responsive websites or apps. The way they can be scaled using simple CSS styles make them apt for both large screen and small screen devices.

    As you said “Less is more, lesser is most”!!

    +6
    • Nikhil Malhotra

      Friday, August 16th, 2013 09:53

      12

      I agree with you Adorn. Simplicity is attractive and flat design add three dimension effect to it.

      +2
  • Casper

    Tuesday, August 13th, 2013 12:02

    7

    Flat design is more quiet…And that is very welcome in a time when people have to process more and more info.

    +1
  • Adeel Qamar

    Tuesday, August 13th, 2013 03:52

    6

    Yep a new era of flat designs and more of technology is shifted to it. They are simple but at the same time, they are charming, unique, special.

    0
  • Jared

    Monday, August 12th, 2013 13:55

    5

    I would argue that paper is “flatish.” There is a 3d quality to paper that can be forgotten only at a designer’s peril. Also, if you look at what is happening in iOS 7, there is actually more fundamental use of 3D space to communicate that in iOS 6. The icons themselves are flat but the world they live in is full of layers, collections, and gravities. I think that is why apple does such a good job – they weren’t first to flat design but they will be the best at it. My two cents after using the beta for a few months.

    +2
  • nateCitiz3n

    Monday, August 12th, 2013 11:20

    3

    This is for the young designers out there… There’s no such think as “Flat Design” there is minimalist design and flat “look and feel”. Design is an approach to solving a problem, it’s a philosophy. Aesthetics, “look and feel”, is just one of the tools used to present the solution and communicate that philosophy.

    Everything on a monitor is flat, everything on paper is flat.

    You can’t solve a problem by starting with someone else’s solution.
    Stop talking about “flat design” and start solving problems with your designs.

    +16
  • aditya

    Monday, August 12th, 2013 10:59

    2

    skeuomorphic design is not that worst to wait for flat design. :P

    -2
  • Adrian

    Monday, August 12th, 2013 09:28

    1

    Designmodo resources are out of this list? so sad :(

    +1
    • Rudolph Musngi

      Monday, August 12th, 2013 12:37

      4

      Designmodo will be mentioned soon. Watch out! :)

      +2
    • Shina

      Friday, August 16th, 2013 04:47

      11

      How strange huh? :)

      0

Comments are closed.

54.196.162.238 - unknown - unknown - US