Dain Munro - Website Designer

Related Post Tags

subscribe to our newsletter

Stay up to Date

Would like to know more on my posts or my design work, feel free to subscribe to receive your next newsletter.

Video Hosting for Business - Wistia

Flat design 2.0 and why we should care about this new design trend.

What makes Flat Design
. focus on simple and great typography (sans-serif), big and bold
. no added effects like droop shadow, gradients or embossing
. a minimalist approach is taken, few elements included
. bold color palettes with bright hues used
. simple elements and icons used

The rules are a bit looser towards this concept of design

Why should i care about flat design?
Well a few years back flat design was all the rage with designers around the world it picked up a lot of steam in agency’s and studios.
Thinking about this type of design, it would be loads of fun to design with, bright colors, simple typefaces and focusing on minimalism added to some wonderful website designs. There were arguments about the design being that it was to flat and did not clarify what the user was meant to do and how the interface was meant to work, enter Flat 2.0

The new style is still flat but adds three dimensional back into the style, you could say its almost flat, now flat 2.0 helps to separate reality from the digital world.
Pretty much with this form of design allowances are made towards using shadows, gradients or layering, these form were not present in the design process before, breaking the old rules that were inherited.

Images and media have been added
Before photos and video were not included in flat design, mainly some thought this took away the intent for the flat design look, but with the help of Google and the emerging material design interface created and its Flat 2.0 aesthetic, we can now add images and videos into our designs, you will notice that content is now layered still in a flat design way but it gives more meaning to the site and actions required from the user.

Examples of Flat Design

Below are some examples of what flat design can offer
Trip Agent - curated city guides for travelers, not tourists

TripAgent

Build 2012

Build 2012

pluton - demo wordpress theme

Pluton

cashback corp - payment processing services, flat design header

Cashback Corp

Problem and Issues with this type of design

Since this style of design emerged in 2011, it has come with its problems and critics, users have been given blue underlines and self explanatory buttons to give them the hint, that this link or button is clickable but with flat design it has not been helpful in that area.

Conclusion

if we can find a balance between what is real and what is not for flat 2.0 and make it more helpful for the user to understand what is required of them to do then this will help improve bounce rates and better conversions, flat design does have its benefits with downloading of the site as pixels are much quicker than loading that big background image.

Resources

1. Flat Icons – SVG, PSD, PNG, EPS and Icon Fonts
2. Colorfilter CSS – Create a duotone effect
3. Flat UI – Flat design inspiration
4. Flat UI Colors – Choose your colors
5. 50 Examples of Flat Web Design – Speckyboy

Leave a Comment

comments