HTMLcut blog

About PSD to HTML Conversion and More

Flat Web Design – What It Is, Flat vs. Skeuomorphism, and Examples

Flat Web DesignFlat web design is among the most interesting trends in the modern web design. Truth be told, flat design always was here but sometimes it was trendy, other times it was just one of possible alternatives. The difference of its recent emergence is that this time it looks like Microsoft’s response to Apple’s skeuomorphism. Though new flat designs – at least some of them – are lovely. I mean they are fresh, memorable, with a good conversion rate, and accessible.

Below you’ll find a collection of recent articles on what flat design is, comparison of the flat approach vs. skeuomorphism, opinions on the trend, and examples of websites developed with the help of this technique.

What Flat Design Is About

1). Flat Design: Can You Benefit from the Trend?
http://designmodo.com/flat-design/
by Carrie Cousins: “Flat design can be both beautiful and charming. Without lots of added embellishments, it can be a clean and simple way to communicate a message or promote a product or idea. It’s time to get in on the trend now before the next new wave happens.”

2). Flat Design and Accessibility
http://speckyboy.com/2013/02/05/flat-design-and-accessibility/
by The Shock Family: “…in this article, we will be taking a look at some of the recent accessibility improvements that Flat Design has brought and helping make the internet that little bit more open and accessible to everyone.”

3). Flat is trendy
http://www.thedigitalcube.com/articles/web-design/2/flat-is-trendy
by admin: “The new version of Microsoft’s main software introduce a structural visual change. Not because of the new ‘desktop’ made of tiles, not because of the deletion of the start button but with another deletion: the window shadows have been removed. Images are better than words.”

4). Metro UI interaction design guidelines @Microsoft Tech.Days 2011
http://www.slideshare.net/davidwkchen/metro-ui-interaction-design-guidelines-microsoft-techdays-2011
by David Chen: “Metro UI interaction design guidelines, shared at Microsoft Tech. Days 2011.”

Flat Design vs. Skeuomorphism

1). Flat design vs. skeuomorphism
http://www.webdesignerdepot.com/2013/01/flat-design-vs-skeuomorphism/
by Mike Redaelli: “It seems that there has been a line drawn in the sand. A few brave design pioneers have all but denounced skeuomorphic design as yesterday’s news and have voted it off of the proverbial island.”

2). Flat Pixels: The Battle Between Flat Design And Skeuomorphism
http://sachagreif.com/flat-pixels/
by Sacha Greif: “…if you answered ‘the app on the right, of course!’ then I’m sorry to say you got it wrong too! You see, this was a trick question. The correct answer is that both apps are skeuomorphs. Read on to find out why.”

3). Skeuomorphism in User Interface Design, What is It?
http://designmodo.com/skeuomorphism-ui-design/
by Paula Borowska: “In the last few weeks the debate over skeuomorphism has been getting more and more heated. I would like to make two points for you in this post. First, what skeuomorphism actually is – as I’ve seen so many people not fully understand it – and two some examples of it for you to get inspired by.”

Discussions

1). The Flat Design Aesthetic: A Discussion
http://speckyboy.com/2012/12/11/the-flat-design-aesthetic/
by Shawn Adrian: “In this article I’m going to talk about what flat design is, review what other designers are saying about it, and offer some tips on how to achieve it in your own designs.”

2). A Conversation: Is “Flat” the Next Trend in Design?
http://cantina.co/2013/02/11/a-conversation-is-flat-the-next-trend-in-design/
by Mitchel Ahern: “Every so often our consultants have an in-depth in-house email conversation on things that interest us. These conversations are often informative and entertaining, so I’ve been tidying them up and posting them to our blog. This session focuses on emerging design trends resulting, in part, from the higher resolution of new mobile devices.”

3). Is “Flat” UI design better?
http://branch.com/b/is-flat-ui-design-better
Geoff Stearns is talking with Allan Grinshtein, Cemre Güngör, Sasha L, Benjamin Kim, Ian Storm Taylor, Tyler Howarth, Caroline Keem, Piotr Siwiński: “Speaking for web and mobile application UI design, do you think that ‘Flat’ UI aesthetic is inherently better than more skeuomorphic designs? and other questions.”

Examples

1). 20 Great Examples of the Flat Trend in Web Design
http://line25.com/articles/20-great-examples-of-the-flat-trend-in-web-design
by Chris Spooner

2). Examples of ‘Flat’ in Web Design
http://speckyboy.com/2013/01/23/flat-design-in-web-design/
by Speckyboy Editors

3). Design Trends 2013 – Flat and Minimal
http://abduzeedo.com/design-trends-2013-flat-and-minimal
by Abduzeedo

4). Flat Design: 17 Examples Of Flat Web & App UI Designs
http://designwoop.com/2013/02/flat-design-17-examples-of-flat-web-app-ui-designs/
by admin

5). 43 Inspiring Examples of Flat Designs in Web Design
http://www.boostinspiration.com/web-design/flat-web-design/
by Waheed Akhtar

6). 90+ Beautiful Flat Icons of Social Media
http://graphicdesignjunction.com/2013/02/flat-icons-of-social-media/
by Muhammad Faisal

7). Showcase of Skeuomorphism in iPad Interface Design
http://line25.com/articles/showcase-of-skeuomorphism-in-ipad-interface-design
by Chris Spooner

 
Please note:
To find more (the most fresh) links on flat web design, follow our Pinterest board Flat Web Design.

About the Author
Sean Brown is the editor of HTMLcut blog. Starting as a software developer (FORTRAN, Lisp, C, C++, HTML / CSS / JS), now he is wearing the hat of marketing and copywriting manager.

 

Comments (6)

  1. Pingback: Flat Web Design – What It Is, Flat vs. Skeuomorphism, and Examples | Design News

  2. Nice post. Helped me very much, thank you.

    Amy

  3. Flat design is great, but if you want some realistic effects, you can stick to skeuomorphism. And there is an infographics about skeuomorphism http://www.templatemonster.com/infographics/skeuomorphic-design-infographic.php

    Helen Bailey

    • Hi Helen, thanks for the link! I know it too, and it’s mentioned on our Pinterest board Flat Web Design.

  4. Thanks for all these links, I really like this new flat style trend ! Check out my Free Adobe CS6 Custom Flat Icons Pack supercolortuts.com/adobe-cs6-custom-flat-icons-freebie/

    Adrien de Broglio

  5. Thanks for these awesome web design tips. I will remember these tips in my upcoming projects for great response.

    Sumit Web Designer

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>