Flat Design - Overview

Flat DesignOverview and Implications

Define Flat DesignFlat 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.

Define Flat DesignFlat 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.

Define Flat DesignFlat 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

Benefits of Flat DesignThe 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 consistentexperience on all of their devices.

Benefits of Flat DesignLess 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.

FastVector

FlexibleScalable

Accessible

Icon Fonts

Benefits of Flat DesignLess 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.

Examples

Poshly.com

Examples

Fitbit.com

Examples

ForgetfulChef.com

Examples

StitchFix.com

Examples

Template/Henry