Flat design came about after research into user drop-out. The two main causes of drop out were difficulty in navigation and slow download.

Firstly the user was becoming increasingly baffled with the barriers of new apps and technology. Committed users could sail through any technological sea but some youngsters and many oldsters were not motivated enough to invest their time and energy.

The other significant reason for user drop out is slow downloads. By its nature, flat design downloads significantly quicker than rich design. (Rich design is characterised by the use of digital ornaments such as reflections, drop shadows, and gradients).

Thus, graphic communication designers set to work to design a layout and style that would feel familiar, consistent, approachable and uncluttered. Nothing was to be left on the screen that didn’t give the user access to what they wanted. This was a new digital design ethic; probably the first graphic communication designer led digital movement. Microsoft invested heavily in communication design; and their use of flat design made it an international movement.

With flat design the limits of the screen are embraced, the restrictions are used, not opposed. This became the starting point for a radical streamlining of website designs in order to make them more functional, and, in many people’s eyes, to make them more attractive.

Apple struggled with their clunky icons and retro graphics until they too started to use flat design from the iOS 7 onwards.

Have a look below fora good design example, a little bit different. Flat need not be bland or corporate.

Evil is the new black – source.

Flat design has also aided the development of responsive design, which Google have now made their recommended mobile configuration; this means that websites with mobile phone interfaces will have higher rankings. Mobile phone screens have size constraints and in the past needed a different approach to their content layout. However, with flat design all devices can be linked in style, content and consistency.

Google wanted responsive design because responsive design sites have one URL and the same HTML, which permits Google to crawl and index content. Flat design allows for web design to become more efficient. Without extra design elements in the way, websites can load much faster and are easier to resize and form around the content it holds. It is much easier to display crisp typography and sharply defined boxes on several differently sized devices when using flat design.

I would suggest looking at Flat Grid Mega Meny – Responsiveas a resource for flat design grids and icons.

Key Principles of Flat Design

These are the features that need to be addressed when developing a flat design for a website:

Color

Let us start with color:flat design is hallmarked by its bold use of color ranges. Windows 8 was the first to use a grid of bright colours. Using color and size of element gives an easy flow to hierarchies. Color was used to increase efficiency but proved so aesthetically pleasing that it is now the outright style winner in being able to provide a stunning visual hierarchy. But the color does not need to be garish, tones of moody blues, greys, jade and lilac. Carefully choose a color palette and experiment.

A good way to get a connected range of color is to choose one then lower the hue and add gray to get a palette of related hues of the same colour. Minimal, stylish, individual.

Good use of color counters the common argument against flat design, that the lack of distinction between elements making it hard for users to know where to click. This can easily be overcome by using color, size, and text. Remember that the brighter the color the more dominant it appears.

You can look at flat design color resources like Flat UI Colors as a starting point.

Appropriate Affordance

An affordance is a signal on a website that something can be used to perform a task. ‘Click here’ is an affordance. Another example is an icon of a house for a home page.

Web developers have to make affordances obvious through their design and over the past thirty years this has been done intuitively by experts in the field of web development. Although, with flat design the qualities that make an item on a website afforded have been redesigned to be accessible by those users who are not expert. This is the reason why the appropriate affordance must be re-evaluated by all in the industry.

UI Patterns lists down various examples for affordance.

Explicit Affordance

When the purpose of an item on the web page is obvious to everyone with the barest knowledge of the internet then that is explicit affordance. A big button with ‘click here’ above it will make you want to click it.

There are two scenarios when it is very important to use explicit affordance: for those audiences that are new users and when the interface is new or unique.

Those users who are not technologically savvy need to be made confident so that they will soon climb up the tech knowledgeable ranks and begin to recognize the usual icons. Also innovative apps need to be explained even to the experienced so the affordance ‘swipe to return’ would indicate the action necessary to achieve the wished for result.

Remember that the young, elderly and those who live in areas that have poor access to the internet need to be catered for. This is a difficult balancing act because it is also important not to patronise. Also, the whole aim is to have an uncluttered page.

Pattern Affordance

This is when the convention has been established that a particular object performs a particular task. Click the heart and the site has been added to favourites. An underlined word is a link; if clicked on it will take you to another site. Pattern affordance is the most common type of affordance. Lovely uncluttered pages are ideal for flat design.

Hidden Affordance

Hidden affordance is when affordance only becomes apparent after an action has been taken – hovering over a drop down menu is a good example. Much of the navigation options can be hidden this way, which is essential because on the average website there are far too many options to display all at once.

Of course the danger is that the user may not find the affordance, so in flat design the most important functions are made dominant. However, users can get very adept at these affordances in a very short time.

Though,when you are designing a website, one vital question must always be asked: Could a user visit the site and leave, happy, without knowing about the feature? If the answer is yes then hidden affordance is the right decision.

False Affordance

The web is riddled with false affordance, clues, signals and patterns that indicate something will happen if you hover or click and then nothing, nada, nix. Sometimes it just a broken link, which is a digital crime in itself but,often, it is just because of poor graphic design. This is one of the major causes of user drop off.

Metaphorical Affordance

Colorful flat icons by Michael Dolejs.

It is quite simply the use of icons. For example, a printer icon enables (affords) a document to be printed. Here is the right place to say a word about skeuomorphism, making icons that are drawn in a detailed and realistic way; this is not the path of flat design. The metaphorical affordance of flat design only uses flat minimal images, reducing the object to an easily understood symbol. Dribbble has a good range of beautifully minimal flat icons to download for free should you want to.

See below a great example of skeuomorphism versus icon.

Typography

Flat design is by its very nature minimalistic and uncluttered and that has to express through the typefaces and communication design skills used to develop new sites.

Usually there is very little text and few large sections of text, so the few chunks there are must be well thought out.

Design purists would say that sans serif typefaces for headings and body text are the obvious essential. Despite this, go even further than this to get a crisp clean look.

Remove everything that is not essential.

Stop Using Initial Caps In Every Heading. Capital letters are for proper nouns and the first word of a sentence.

Finally, check all the punctuation of whether it really necessary? If you can comprehend the message without it then remove it.

Typographers adore metaphorical affordance because it harks back to the 1930’s and the work of Isotype (International System of TYpographic Picture Education) a method of displaying statistics that brought about the icon designs that are all around us today.

Class Project Ideas.

Mapping with Isotype

Flat Design Check-List

Before your web design is signed off for client evaluation check the following to ensure you are keeping to the flat screen design aesthetic:

• Are the images and icons crisp and clean with clear call-to-action icons?
• Is there a clear heading on every page that says exactly what the page does?
• Is the space maximised with minimal scrolling?
• Are all affordances working and appropriate?
• Are the hierarchies clearly displayed?
• Have you maximised the social validation of the site? Are social media sites one click easy to share?

The Future for Flat Design

It will be some while before flat design is superseded by another digital aesthetic. The more something is used the more powerful it becomes. Users will recognize all the elements and they will trust flat design sites.

When Apple decided to stop using rich design and skeuomorphism it was the death knell of the all singing all dancing websites, they began to look out dated and clumsy. I don’t feel that Apple had fully embraced flat design yet; their iOS 8 icons still look cluttered.

Interestingly Google has not gone completely flat design they continue to use a mixture of both flat and rich design. For example they still use gradients, so perhaps in the near future developers will start to sneak in more and more rich designs, and another style era will come about. Let’s be honest, the current design trend for flat is influenced by the designers of the 1920s and 1930s. That being so, we must also accept that it is ‘just’ a fashion. However, it is a useful and functional fashion.

Designers and developers will always want to put their stamp on their work and the very nature of flat design is submitting yourself to a strict minimalism. There is an art to knowing what to remove and how to simplify; but it takes will power to truly follow the flat design ethos of minimalism.

Nevertheless, I cannot see flat screen disappearing, it so very elegant, so simple and easy to use. It is a very pure design, and very adaptable.