Advertisement
Industry

Flat Design, iOS 7, Skeuomorphism and All That

by

The notion of flat, "digitally authentic" design has been a popular topic of conversation and controversy recently, especially with the software design efforts of Apple, Microsoft, Google and their respective flagship operating systems. Subtle colours, light typography and the other commonalities of modern flat design have all found a working role in the construction of the neoteric design trends we're all coming to love (or hate). We're going to take a look at these trends in this article to see what all the fuss is about.


Skeuomorphism: Unflat

While many specifics of the constituent theories that form the concept of flat, digitally authentic design, one thing's for certain: it's been evolved as part of a much-welcomed move away from skeuomorphic, metaphorical design.

Skeuomorphism is the term we apply to a trend to essentially designing something new while retaining the themes of something older and more established. Skeuomorphism exists in many different industries – architecture is an oft-quoted example – but, in the context of web and software design, we know skeuomorphism primarily as the technique of using metaphors to induce familiarity.

Moody PSD Interface on Tuts+
Moody PSD Interface on Tuts+

I wrote a piece on metaphors in web design about two years ago and the core concept is still applicable. Metaphors of varying scale are employed to liken digital actions and ideas to real world counterparts. Skeuomorphism has been evident in digital design ever since the GUI was born to combat the learning curve involved with command line-based interface, ranging from the simple implementation of icons reminiscent of a floppy disk and recycling bin to the full-on illustration of books and a radio that Apple is known for.

When you see a button on the web, without even having clicked on one, you know it's something to be actioned because of its design, much like how you'll instinctively assume a message is bad when it's surrounded in red.

From Pete Orme's Principles for Successful Button Design
From Pete Orme's Principles for Successful Button Design
You know what to do..
You know what to do..

Skeuomorphism has been used to help those new to a platform learn the ropes and get around with minimal instruction. Flat design is a trend towards a philosophy free of superfluous elements and the emergence of subtler design true to the platform itself.

The BBC's Global Experience Language
The BBC's Global Experience Language

Whether you use Windows or OS X, Android or iOS, you're probably using  something designed with these philosophies or waiting for an update to bring them in.


The Big Guys

There are many examples of flat design out there but, to example the concepts today, we're going to focus on the efforts of Microsoft, Google and Apple due to their collective wide reach. Due to each of these companies presiding over a number of platforms and assets, they're also some of the most likely candidates to have established significant style guidelines that we can investigate in order to emulate their interpretation of flat design.

Microsoft

Microsoft opted for one of the most radical and controversial redesigns of recent times with Windows 8. Their creation of the design language formerly known as Metro (now known as the Microsoft Design Language, but with the former term still applied colloquially) was first seen in widespread use with Windows Phone (there was also Zune, but the less said about that the better, but since it was the platform's inaugural design, it wasn't so bad. It was down to Windows 8's 2012 release to really stir up controversy.

That controversy wasn't so much about the design itself – rather, it was the mere action of radically changing key concepts associated with Windows like the Start menu, which had became a skeuomorph in its own right – but with everyone from the web design community to mainstream media covering the backlash, the design, and therefore Metro as a design language, was brought into question.

Microsoft's efforts with the design of Windows 8 brought Flat Design into the mainstream spotlight.

Since Microsoft has long been an early proponent of flat, authentic design, its principles are probably the most developed and established. Microsoft defines Metro as four core principles: typography, motion, content not chrome and honesty. I wrote about these principles last year, but here's a summary:

  • The establishment of a visual hierarchy through the characteristics of typography, using it to form the basis of a layout and its navigation without the use of superfluous graphical features
  • That motion and the fluidity and performance of a design is equally as important to the aesthetics of a design
  • Putting content, not chrome, upfront to both put more focus on the actual body of content and allow designs to be scaled appropriately
  • Being "authentically digital" and holding honesty to the very fact that consumption of the design is digital, leaving the design of offline objects, offline

Check out Emulating Microsoft’s Metro Design Language for a more detailed look at each of these principles.

The Microsoft homepage, designed by Paravel Inc.
The Microsoft homepage, designed by Paravel Inc.

Google

With the release of Android 4.0 Ice Cream Sandwich, Google also started establishing its own internal design language, Holo. Holo has some defined principles, but since they're very specifically tied to application design, they're not as universally applicable as Microsoft's. However, Android 4.x is visually reminiscent of many of the same ideals as the Windows family, featuring light typography, monochrome icons outside of the home screen and a muted but universal colour scheme.

Apple

While Google and Microsoft were off making major changes to their design languages, Apple stuck by its skeuomorphic principles through multiple generations of its operating system. That changed only a few months ago with the announcement of iOS 7, taking a drastically different step in the design of the OS. Icons are flatter, typography is lighter and the metaphors are out.

iOS 7 is Apple's first major foray into Flat Design

This is particularly evident with iOS when you compare the current iteration of, say, the calculator app to its iOS 7 counterpart. That particular app has jumped from trying to resemble a physical device with buttons signified by gradient backgrounds to a completely flat design independent of any unnecessary metaphors.


Designing Flat and Quietly

Flat design is not a trend that we're writing about in retrospect, but rather one consistently being evolved and established. For these reasons, it's difficult to truly define the exact characteristics of flat design, but we can at least take a look at some of the common themes.

Minimalism

Minimalism is a key principle in flat design from a number of perspectives. Microsoft's Content, not Chrome philosophy is very true to this fact, suggesting that superfluous "chrome" – the extra interface elements that aren't the core content of the page – should be minimal and virtually non-existent when not necessary. The use of typography and the visual hierarchy established from it is key to successful execution of this type of minimalist UI, which we'll take a look at later.

A healthy use of negative space, margins and paddings also contributes to the overall feel of flat design, spacing elements out in lieu of the details that once distinguished them.

Safari's current icon on the left versus .app.icns's flat version.
Safari's current icon on the left versus .app.icns's flat version.  The latter foregoes the fake lighting, bevels and other details to create an attractive flat alternative while still retaining the compass metaphor.

However, minimalism is not only applicable to designs in their entirety. Rather, the very key to achieving flat design is through executing minimalism in individual elements of your design, foregoing surplus effects like shadows, lighting, unnecessary gradients and the like. Instead, the general rule of thumb is all your elements should look, as the name suggests, flat, without fake depth created through bevelling and other effects, a very different approach to the web experience we're used to being encased in unneeded embellishment.

Typography

Typography is a key element in flat design and successful typographical choices can result in successful execution of the overall design theory. Because, as discussed in the last section, a big part of flat design is about stripping away extra embellishments and unneeded detail, this leads to typography generally having a leading role in the form of the entire page.

flat-type

Because typography begins to have a founding role in the visual hierarchy of a page – or, at least, more so than in traditional designs – choosing and using the right font is a big decision. In a lot of flat designs, you'll generally find sans-serif primarily at play due to serifs themselves being unnecessary embellishments and a sign of formality rather than modernism. Of these sans-serif typefaces, you'll be looking for ones with availability in a variety of weights so that only one or two families are needed to populate your design's entire hierarchy, in order to keep up the minimalist, simple feel.

A combination of effective use of negative space and a well chosen font family can make your text an effective basis to your design and interfaces like Windows 8 are evidence of this working. Create clean cut, flat typography and your design will follow.

Colour

The principles of flat design can be applied to most colour schemes of your conjuration, but there's an evolving trend in colour theory being built alongside the induction of flat design.

flatuicolors.com
flatuicolors.com

Throughout every piece of literature on the topic and evidenced widely in examples of flat design, there's one strong trend: designers are using the flat design movement to introduce brighter colours in a higher frequency than just using one or two colours in a handful of shades.

 Take Windows 8, for example, where during setup you'll choose a scheme for the OS themed around one of many vibrant colour choices, and where every stock app is backed against something similar.

You can still embody flat design using shades of grey with an accent colour, but adopting new colour trends and creating a bright, diverse palette can help to create important contrast and help to recreate effects rivalled only by gradients, shadows and other outgoing embellishments. Multiple bright, bold colours are the signature of flat design.

Device Agnostic

With the web being consumed on more devices than ever, creating a design that is responsive, light and mobile comes hand-in-hand with flat design. You don't need to create a responsive layout to create a strong example of flat design, but aspects like clean, scalable typography and flat, vector-based iconography make it easier than ever to do so.

We've covered responsive design in depth and there's many other resources around the web ready to accommodate your interest in designing for scale across devices. Creating a responsive design that embodies minimalism with strong typography and a reducing reliance on superfluous textures and effects is something your users will thank you for and promote your work as machine independent.


Trends Are Trends

Flat design is a trend, not a requirement to design for the web. While a lot of major players in web design and technology are moving towards flat-centric designs, that doesn't mean every project has to, or that the aesthetics are right for every scenario. Trends come and go; there's a history full of once-popular design ethics that are no longer worth thinking about (remember when marquees were all the rage?)

Trends are fleeting and if you follow them like a bible, you’ll get left behind with the times.

With more and more big names signing up to using flat design, it seems like a natural move to jump on the bandwagon of the current trend. But it's important to avoid limiting the potential of any of your designs because you're trying to stay cool and up-to-date. Rather, treat every project differently and adopt only the features of this particular trend, if any, that you see fit. Flat design may be popular, but it's not a law and shouldn't be a limit to producing great design.

We could see radically different trends next year, but if you ensure you make appropriate choices and don't use this year's direction as a rigid template, your project should be good for many years to come.


Conclusion

When flat design does suit your project, your creation can be magnificent. Combining bold colours, sleek typography and an aura of minimalism, free of a fake third dimension and other unnecessary embellishments, can be as effective as it is efficient.

There's no doubt that the birth of flat design is largely a response to skeuomorphism; look onto to Apple's shift from iOS 6 to iOS 7 to see that. Flat design is like skeuomorphsim all grown up, knowing that the majority of web users now understand that a button is for pressing, without needing a bevel to appear like a button you might press in real life. Flat design is an independent concept that can be surprisingly complex, but, when executed well, can lead to beautiful designs across platforms.


Further Reading

Because you haven't read enough about flat design..

Related Posts
  • Web Design
    Roundups
    5 Awesome Ghost Themes You Can Learn FromGhost logo
    With the world near-saturated with the success of WordPress, along came Ghost, 2013's new blogging platform of note. Born from a simple concept, the project was successfully backed with nearly £200,000 of Kickstarter pledges and released to the world as an alternative open source platform. Much like WordPress, Tumblr or any major blogging platform, Ghost is supported by an ever-growing community of themes to customize the appearance of your blog. In this roundup, we're going to take a look at a handful of some of our favorite Ghost themes and analyse why they work so well.Read More…
  • Web Design
    Design Theory
    All About Trends in Web DesignDsfd trends retina
    As long as the web has been around there have been certain design trends which have popped up from time to time. Some of these trends have stuck around and, over time, some have disappeared. Think back to the time of Geocities, to the time of ‘Web 2.0’ designs and closer to home, with the “flat design” trend that’s popular now. Now, in 2013, the web industry is changing as rapidly as ever. New techniques, or ways of working, pop up every month, if not every week.Read More…
  • Web Design
    Design Theory
    Typography Basics for DevelopersDsfd typography retina
    Typography is a fundamental element in any design that you work on. The main reason we have websites in the first place is to display information, and for that information to be consumed by users who come across it. While there may be many other elements to a website, at the core is content. That content needs to be easily read, digested, understood and having a solid typographic base will only help with that.Read More…
  • Code
    Mobile Design
    Flat Design and SkeuomorphismMobile design flat flat icon 2x
    The design topics of flat design and skeuomorphism have been widely discussed as of late, particularly with the beta release of iOS 7. Despite this fact, many people are still unaware of these terms and their meanings. Today, we'll explore some of the key features of flat design and how this design trend is different from skeuomorphism.Read More…
  • Web Design
    Typography
    Emulating Microsoft's Metro Design LanguagePreview
    Over the past few years, Microsoft has adopted its incumbent design language to a significant extent. Metro is the aesthetic basis of Windows 8; Microsoft's next operating system shipping this October. Let's take a look at what Metro is, how we can emulate some of its desirable principles and take a look at where it's being used already.Read More…
  • Web Design
    Design Theory
    Skeuomorphism in Interface DesignPreview
    That's right, Skeuomorphism. Let's take a look at what this bizarre term means, when you should use it in interface design and what can happen when it goes awry.Read More…