Turning skeuomorphic design into flat design

Peter Vukovic

Let’s face it — skeuomorphic design has had its days. The famous design style has been limping for some time now, but it was pronounced dead when Apple introduced iOS7 and officially stabbed it in the back.

Now companies and designers all over the world are working like crazy to flatten their designs and prove they have what it takes.

So whether we like it or not, it’s a flat world out there, but you don’t have to start from scratch — your old skeuomorphic design is a great place to start building a new, flat one. Here are the steps involved.

Simplify, then some

cloud_app

From simple to simpler: one designer’s vision of a simplified CloudApp.

Flat design is about removing everything non-essential: bevels, textures, backdrops, gradients and other forms of decoration. It’s 100% about usability and 0% about slickness and visual mastery.

Knowing this, re-think the layout and remove every piece of design that has no functional value or purpose. If you’re thinking this will amount to dull, boring looking design, you are right — but only until you understand how to work with content.

Content is king

content

Limelight app, reimagined for iOS7. Notice how the movie covers dominate the new flat, design, as opposed to the 3D shelf of the current app.

Skeuomorphic designs are about making people fall in love with the interface — subtle textures, colors, glows and bevels can be very charming and friendly.

Flat design is about making people forget about the interface and fall in love with the content. In other words, it’s about the artist performing the song, not about the brushed-metal volume button. It’s about the book you should read, not about the 3D bookshelf.

Put content first and present it beautifully — good photography, type and color are your new best friend.

Think pictograms

pictograms

Top: iOS7 inspired icons. Bottom: National Park Service pictograms. Notice anything similar?

Flat design doesn’t tolerate elaborate icons — in fact, the current trend has icon design moving towards traditional pictograms.

A pictogram is a simple, easy to understand symbol used to guide or instruct. We see them on airports, metros and other public areas, and most people get their meaning without any special explanation.

Try following the same general idea when it comes to icon design — make sure each icon is not only “flat” but simply and accurately represents the action behind it.

Conclusion

Transforming a skeuomorphic design into a flat one does not require you to start from scratch. In a majority of cases, you can use the same layout and general approach but re-style the design so it better fits the new flat trend.

Simplification, focusing on content and using pictogram-style icons are key guidelines to follow, although flat design has many other subtleties you need to take care of — but that is a topic to discuss in another post.

In the meantime, check out these online resources:

What do you think about the flat design trend?

The author

Peter Vukovic
Peter Vukovic

Peter Vukovic is a seasoned designer & creative director with 10 years of experience in worldwide advertising agency. He is a proud member of the 99designs community. You can view his 99designs profile here.

Related articles

Descience shows off the versatility of flat design

Descience shows off the versatility of flat design

Mike Dicks (aka Descience) has long been a champion of flat design. He’s mastered the cohesive look, crafting everything from logos and icons to book covers and postcards. As a self-taught freelancer, the UK native works an eclectic set of jobs with a focus on design, checking in on 99designs nearly every day and selling prints and greeting…

99designers take on the line art trend

99designers take on the line art trend

With flat design and vintage trends capturing designers’ imagination for the past few years, it’s no surprise that line art, or line craft, is taking the design scene by storm. Casting off skeuomorphic textures for minimal, mono-weight lines, this trend takes the best aspects of retro style and simplifies it into charming graphics that will…

The big web design trends for 2015

The big web design trends for 2015

When thinking about web design, you must consider the full spectrum of possibilities that the internet presents. Done boldly, designers can push the limits of human interaction and imagination on a global scale – as is often seen with edgier industries, such as creative agency websites. In this article, we’ll boil down some of the…

Current Design Contests

Designers, check out these contests so you can start building your career.
0%