Flat Design Resources

Material used at the November 2013 meeting on flat design.

Flat vs. Skeumorph

skeu·o·morph [skyoo-uh-mawrf]: an ornament or design on an object copied from a form of the object when made from another material or by other techniques, as an imitation metal rivet mark found on handles of prehistoric pottery.

Origin: 1889;  < Greek skeû ( os ) vessel, implement + -o- + -morph (cf. zoomorphic)

Related forms skeu·o·mor·phic, adjective

Source: <//dictionary.reference.com/browse/Skeuomorphic>

Apple

Skeuomorphic Design: What it is, Who uses it, and Why You Need to Know: <//medialoot.com/blog/skeuomorphic-design/>; //www.theguardian.com/technology/shortcuts/2013/jun/12/skeuomorphism-apple-ditched-ios7

iOS 6 vs iOS 7 design differences

Source: <//www.phonearena.com/news/iOS-6-vs-iOS-7-design-differences-comparison-the-end-of-skeuomorphism_id47545#2->

iOS 7 vs. iOS 6: Icon Face-Off

Source: <//mashable.com/2013/06/12/ios-7-apps-comparison/>

Microsoft

Flat Design Easily Explained for Everybody

Source: <//www.webdesign.org/flat-design-easily-explained-for-everybody.22318.html>

Flat And Thin Are In

Source: <//www.smashingmagazine.com/2013/09/03/flat-and-thin-are-in/>

Authentic Design

Source: <//www.smashingmagazine.com/2013/07/16/authentic-design/>

And Others

A Look At Microsoft, Google And Apple’s Approach To Flat Design

Source: <//www.hongkiat.com/blog/google-apple-microsoft-flat-design/>

No turning back from new Firefox design Australis

Source: <//news.cnet.com/8301-1001_3-57611605-92/no-turning-back-from-new-firefox-design-australis/?part=rss&subj=news&tag=title>

Elements

40 Free Fonts for Flat Design

Source: <//www.hongkiat.com/blog/flat-design-free-fonts/>

Making it Work: Flat Design and Color Trends

Source: //designmodo.com/flat-design-colors/#ixzz2kg0g3kjD

Source: <//designmodo.com/flat-design-colors/>

Free Flat Icons

Source: <//sixrevisions.com/freebies/icons/flat-icons-free/>

Examples

20 Stylish Examples of Flat Illustrations in Web Design

Source: <//line25.com/articles/20-stylish-examples-of-flat-illustrations-in-web-design>

35 Website Layouts using Flat Design Techniques

Source: <//spyrestudios.com/35-website-layouts-flat-design-techniques/>

10 superb examples of flat design done right

Source: <//www.creativebloq.com/web-design/10-great-examples-flat-design-6133294>

20 Beautiful Flat WordPress Themes to Spice Up your Site

Source: <//www.hongkiat.com/blog/flat-design-wordpress-themes/>

Is It Over?

We Can’t Rely on Color
Source: <//www.sitepoint.com/cant-rely-color/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+SitepointFeed+%28SitePoint+Feed%29>

Flat design casts a long shadow
Source: <//www.webdesignerdepot.com/2013/07/flat-design-casts-a-long-shadow/?utm_content=buffer998c2&utm_source=buffer&utm_medium=facebook&utm_campaign=Buffer>

How To Do It

Getting Started with Flat UI Design
Source: <//www.sitepoint.com/getting-started-flat-ui-design/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+SitepointFeed+%28SitePoint+Feed%29>

How To Create a Trendy Flat Style Nav Menu in CSS
Source: <//line25.com/tutorials/how-to-create-a-trendy-flat-style-nav-menu-in-css>