Flat design is a buzz word in the web design industry today. In web design industry, the popularity of modern and minimalistic design increased the reputation of flat design. Flat design is modern, clean and minimalistic. There is no shadowing and gradients and the design only use just flat colors.

This style is becoming more and more popular and it is important for you, web designers or UI designers, to understand what is flat web design and why should you care.

Flat design became popular with the release of Microsoft’s Windows 8 and Apple’s IOS 7. It is a style giving emphasis to clean and simple graphical user interfaces. You need to understand the characteristics and features of previous design style to easily comprehend what flat design is and its pros and cons.

Skeuomorphism Design

Skeuomorphism is Greek word and it means ‘container’. Actually, it is a technique to make the new style friendlier to the users with familiar objects or elements.

In UI design, designers always tried to make the elements in a design more realistic by giving three-dimensional effects. These designs imitated real world and used real-world objects and their appearances to make the interface friendlier to the users. This kind of design is called skeuomorphism design. It is also called realism because the design incorporated realistic elements to the design.

Using icons of clock, tool, fixed phone and envelop to represent different apps is a feature of skeuomorphism design style.

Another feature is three-dimensional elements. You might have seen 3D icons with highlights and shadows that give a depth to the element. You can compare the icons in iPhone’s iOS 6 and iOS 7 (see the pic below) and figure out the difference. This becomes evident if you compare the old and new logos of Apple and Microsoft.

Skeuomorphism in Web Design

When it comes to web design, we use features like gradient, textures, and box-shadow to give a 3D effect to the design. We used shadows for different elements to give emphasis and textures to give visual interest.

These are a few examples of skeuomorphism in web design.

• The use of textures and patterns for background and sometime for large texts
• Shadows for different small boxes and sections
• Shadows and highlights for buttons and other small elements to make them appear three-dimensional

There are many more. You can check the photos below to understand this kind of design better.

Flat Design

The purpose skeuomorphism design is to provide the user a more realistic user interface by using real-world features.     

Now designers think that there is no need of using these visual clues because it clutters the design. Moreover, people are now familiar with the characteristics of graphical user interfaces and therefore, there is no need to add realism to the design.

Some designers argued that graphical interfaces are not supposed to look like the real world and therefore we don’t have to follow it. They removed 3D visual clues from their design that gave birth to a new design style: flat design.

In flat design, we use solid colors and don’t use shadows or any effects to make it look like real.

Features of Flat Design

Flat design is a departure from the skeuomorphism or realistic design. There are a few things that make a design flat design.

Simple Elements

Icons, graphics, and layout are clean and simple. Shadows, layer styles or gradients are not generally used. Clean and sharp graphics are another feature of flat design.

Lack of Details

The elements like buttons, icons, and graphics are 2D and lack details. There will not be shadows or highlights or textures on these elements. They have solid colors and don’t use any texture or pattern to add details.

Bright ad High Contrast Color Scheme

Designers generally use fully saturated and bright hues on the design. The number of colors may go beyond 4 which was not a recommended practice. Flat design use color schemes with high contrast to add visual interest in the design. The color schemes also help to highlight important elements and differentiate between sections.

Emphasis on Typography

The lack of details in the flat design makes it essential for the designers to use great typography. Large and sans-serif fonts are another feature of the typography.

Pros of Flat Design

Flat design is a departure from the traditional realistic design because that is not considered good for a UI design. The realism is sacrificed for a clean interface.

Sharp, Clean, and Contrast Design

The elements in the UI are sharp and clean. There are no textures or details on elements which helps to achieve a clean design. The icons, backgrounds, illustrations and all other elements have solid colors and they are very simple. Clean and simple elements enhance the contrast in the UI.

Overall, this helps designers to achieve a modern and minimalistic UI.

Easy to Make Responsive

Flat design can be easily made responsive and this makes it popular among the web designers. The simple design with a sharp difference between different elements makes it easier to apply the responsive design.

Set Mood, Create Emotion

The power of colors and layout helps the designers to set a mood. Bright and strong hues are one of the important features of the flat design. It can create a character a mood. 

Faster Loading

Experiments proved that websites with a flat design load faster than its counterparts. It should be noted that faster loading is not completely a direct effect of the flat design. It is true that the exclusion of many features makes the pages lighter. The faster loading is also a result of the modern design which emphasis minimalism.

Cons of Flat Design

There are many great things about Skeuomorphism design and we would miss them in flat design.

Lack of Realism

Users feel less connected to the interface because the flat design is less realistic. The textures and shadows in realistic design are familiar to the eyes and a design without them is uncomfortable for some people. The possibilities to add visual interest to the design is limited in flat design style.

Ironically, the fundamental principle of flat design is the exclusion of realistic elements. Some designers began to add shadows and gradients into the flat design and created a new style what is called flat 2.0 design.

Poor UX

Skeuomorphism or 3D design improved the experience of the users with the platform through a realistic UI and the lack of realism in the flat design cause poor user experience for some people. The 3D design clearly highlighted important elements.

In a realistic design, a button is appeared pressed when it active and not pressed when it not active. This kind of visual clues has a huge role in the UX of a design. Flat designs don’t recommend this kind of effects and this affect UX, at least for some people.

Poor Usability

Flat design is simple and users often don’t know what is clickable and what is not. There is no clue of what to do with different small elements in the design. The visual clues in the realistic design helped users to recognize the uses of different elements but that is not there in the flat design. 

Poor Typography

Typography plays a crucial role in the aesthetics of flat design but unfortunately, that is the most difficult part for designers. In skeuomorphic design or realistic design, poor typography becomes less obvious due to the rich interface but that is not the case in flat design.

Flat design is a kind of style in UI design which you can follow or not. While it makes it possible to design clean and sharp UI, it also creates some usability issues. It seems that people are not yet for this design. Therefore, we have to consider the users before using flat design.