This document defines and discusses flat design. It notes that flat design has become increasingly popular for both desktop and mobile interfaces as it provides a simple, clean look that scales well across devices. Flat design removes textures, patterns, shadows and other complex styling in favor of simplicity, clarity and consistency. It allows content to remain the focus. Benefits mentioned include being fast, scalable, accessible and working well on older browsers. Examples of websites using flat design successfully are provided.

1. Flat Design
Overview and Implications

2. Define Flat Design
Flat website design is a growing maturity within the industry. Both desktop and
mobile interfaces have seen a major uptick in trendy new user interfaces.
With responsive websites blurring the difference between desktop and mobile
devices, flat UI has bridged the gap for simplicity.

3. Define Flat Design
Flat website design removes a
lot of the more complicated style
elements previously found in
websites to focus on simplicity.
● Textures
● Patterns
● Shadows
● Bubbles
● Gradients
● Bevels
● Other shiny effects
Flat design can still use light shadows and edge effects
to imply interactivity, but subtlety is the key.

4. Define Flat Design
Flat design elements do not usually
intersect each other and the page
should flow very naturally.
Buttons are uncluttered, big, and
easy to identify on mobile

5. Benefits of Flat Design
The elements are visually simple and make the site feel easy to use.
● This keeps the consumer more focused on content and less on the site itself.
● Makes use of colors, typography, white space, and a strict grid system for a clear and usable
interface.
Scales well to smaller screens.
● This is in line with responsive design.
● Realistic images and other design effects can be difficult to scale.
● Flat design elements like color and typography can easily adapt to smaller screens.
Allows for a fully consistent experience across devices.
● Today’s path to purchase is not linear. Flat design works with
responsive design to ensure the consumer has a consistent
experience on all of their devices.

6. Benefits of Flat Design
Less time designing pages specifically for a mobile device.
● One code base to manage means less development time. Development time is exponentially
decreased when dealing with multiple brand sites.
Fewer images and less-complicated coding, resulting in a faster site.
● Most elements can be created using simple CSS, scaleable vector assets,
and icon fonts.
● Results in real resolution independence
● Eliminates the use for multiple, complex image sprites in various resolutions.
Fast
Vector
Flexible
Scalable
Accessible
Icon Fonts

7. Benefits of Flat Design
Less hassle with older browsers
● Some old browsers cannot handle things like CSS gradients and box-shadows.
● With flat design we don’t have to add so many fixes to make our sites look good on older
browsers.

8. Examples
Poshly.com

9. Examples
Fitbit.com

10. Examples
ForgetfulChef.com

11. Examples
StitchFix.com

12. Examples
Template/Henry