Turning skeuomorphic design into flat design

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

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

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.

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:

iOS7 Redesigns: a great before and after gallery of redesigned iOS apps

What do you think about the flat design trend?

The author

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.