flat design - overview

Download Flat Design - Overview

Post on 11-Aug-2015




0 download

Embed Size (px)


  1. 1. Flat Design Overview and Implications
  2. 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. 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. 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. 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. Todays 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. 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. 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 dont have to add so many fixes to make our sites look good on older browsers.
  8. 8. Examples Poshly.com
  9. 9. Examples Fitbit.com
  10. 10. Examples ForgetfulChef.com
  11. 11. Examples StitchFix.com
  12. 12. Examples Template/Henry