• Skip to secondary menu
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer
  • Blog
  • Web Design SIG Archive
  • WordPress SIG Archive
  • pacsnet.org

PACS WordPress SIG

A Special Interest Group of the Philadelphia Area Computer Society

  • .ORG
  • Codex
  • Design Resources
  • PACS Web SIGs
    • Python
    • JavaScript
You are here: Home / Flat Design Resources

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>

Primary Sidebar

Get SIG News & Meeting Invites

Notes and invites for upcoming meetings, wrap-ups from previous meetings.

  • This field is for validation purposes and should be left unchanged.

Posts By Category

Tags

accessibility backend Beaver Builder blocks block themes CodePen CoffeeCup Software color ColorZilla Content css CSS Grid design development ecommerce email firefox framework GDPR git Gutenberg HSTS HTTPS JavaScript layouts Lets Encrypt local development material design media library pagebuilders patterns plugins Rachel Andrew resources responsive RSS Security SMTP srcset SSL tools troubleshooting updates WooCommerce WordPress

Footer

Have an idea for a future meeting? Let us know.

  • This field is for validation purposes and should be left unchanged.

Search

PACS Disclaimers

Next Gathering

16 Dec
December 2023 - Virtual
16 Dec 23
  • View Upcoming Meetings
  • Email SIG Leader: Matt Ryan

    Privacy Policy · Terms & Conditions
    Copyright © 2023 PACS WordPress SIG · All Rights Reserved.
    Website by Cap Web Solutions
    Lifestyle Pro Theme on Genesis Framework
    Top of page