Webdesigntuts+ |
| Flat Design, iOS 7, Skeuomorphism and All That Posted: 27 Aug 2013 02:47 AM PDT  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. Skeuomoprhism: UnflatWhile 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.  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.   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.  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 GuysThere 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. MicrosoftMicrosoft 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.  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:
Check out Emulating Microsoft's Metro Design Language for a more detailed look at each of these principles.  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. AppleWhile 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.  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 QuietlyFlat 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. MinimalismMinimalism 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.  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. TypographyTypography 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.  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. ColourThe 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.  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.  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 AgnosticWith 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 TrendsFlat 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?)
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. ConclusionWhen 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 ReadingBecause you haven’t read enough about flat design..
 |
| You are subscribed to email updates from Webdesigntuts+ To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
| Google Inc., 20 West Kinzie, Chicago IL USA 60610 | |
No comments:
Post a Comment