Let’s go back in time and think of all the UX/UI web trends/treatments plastered all over iOS screens and interfaces – what do you think stood out the most? You’ve got it! Skeumorphic design. If you’ve ever used an Apple product, it’s the calendars with faux leather-stitching, yellow note pads with lines and a margin, bookshelves with wood veneers, fake glass and paper-brushed chrome. If you’re unfamiliar with the term, Skeumorphic basically means incorporating the look of an object that was made in another material, into a design. Originally, this was to help evoke a sense of familiarity for the user when encountering a new concept/tool/app online. But does the visual metaphor really help with the overall user experience, or is it just a lot of visual noise?
I admit, I was quite a big fan of Skeumorphic Design back in the day, but creating photorealistic stuff for online and mobile web development was basically an opportunity for a designer to flex their muscles and show how good of a visual rendering they could create of a physical object. Skeumorphic Design took the world on quite a ride for so many years, but it seems to be fading away now, especially when Microsoft released their new radical redesign look and feel for Windows 8 in August 2012.
I believe that users have reached the stage in which we recognize buttons on phones, even if they don’t look like buttons. When was the last time you actually looked at the buttons on Facebook? Probably never. This is what lies behind the beauty of Flat Design. Flat Design is not about showcasing a designer’s capability with Photoshop; instead, it’s about the designer’s knowledge of good UX/UI and making things work in harmony with simple, minimalistic designs. With many new site redesigns and new websites using a Flat Design scheme, flat features and elements are appearing almost everywhere: on icons, websites and mobile application designs.
What is Flat Design?
Whether you realize it or not, Flat Design has always been around and it is making a comeback. Flat Design demonstrates the abandonment of realism in design. Its counterpart, Skeumorphic Design, relies on familiar, real-world interfaces and mimics textures of real objects. Flat Design is flat in its dimensions, with little to no embellishments in any of the elements that exist on a site. This means drastic drop shadows, bevels, embossing, gradients and pretty much anything that adds depth to an element are absent. Every single element from navigation tools to buttons are crisp and completely flat.
Many designers have questioned whether Flat Design is a lasting trend or just another passing fad. Regardless, Flat is clearly increasing in popularity. According to recent reports, Designers, industries, and big companies such as Microsoft, Google, Facebook and now Apple have already implemented Flat Designs, redesigning their interfaces to remove extra ornamentation.
Guidance for Flat Design
Basic guidelines for incorporating Flat Design into a platform include:
1. No Added Embellishments – Just because the term “Flat Design” means removing most of all traces of drop-shadows, flashy gradients and textures from the visual design doesn’t mean that your website will be plain and boring. It incorporates simple user interface elements such as icons, typography and buttons, and can be a clean and simple way to communicate a message or promote an idea.
2. Color is a Key Element–Flat Designs and Flat Design schemes focus on a lot of vivid color. Rather than limiting colors to the overused tones of “business blue” and “metallics,” designers are experimenting with newer shades. It is always important to use color not just because you see it on another “cool” site but to think about the company or product you are designing for and their main message; let this guide you in choosing colors accordingly.
3. Beautiful Typography – Good use of typography is a key foundation of Flat Design. Because you have stripped away all the visual fluff, there is a lot of room for good typography to shine.
4. Animations – For years, we either ignored the use of heavy animations on web sites or it was so overdone that it distracted from the purpose of the site. Simple animations using CSS3/HTML5 can go a long way (when done correctly) to making your site or application more user-friendly and engaging.
5. Minimalism in Mind – Less is more. Flat design forces designers to focus on content as the most central part of the site’s design. It enables us to think about how to present content in a simple and compelling way without any distractions. At times, even using simple colors and good typography will be enough for an effective web site design.
The Benefits of Flat Design
In addition to the current and stylish look of flat design, benefits of this approach include:
- The shedding of unnecessary styling for faster and cleaner pages, with less tarnished code
- Flexible, scalable, cross-browser and device-ready
- Allowing the visitor to concentrate on the main areas of focus, putting more emphasis on a product and removes 99% of the added “fluff”
- Simple and minimalistic designs as a starting point make websites faster and more functional
- Embracing the limits of the screen and working within those parameters rather than trying to disguise them with added embellishments
As a designer, I have seen numerous debates about Skeumorphism and Flat Design. As with any design trend, there will always be good and bad implementations of both. With mobile technology beginning to dominate the industry, the use of Flat Design boasts a lot of positive points in this medium and has the capability of making a site/app beautiful and functional in any browser or device. While Flat Design can be used to create beautiful, simple interfaces, it doesn’t necessarily mean we have to use Flat features on every single project. The most important thing to keep in mind is that there is no wrong or right way to design something. At the end of the day, our main goal isto be mindful of what the customer wants to communicate to their users/viewers. It is always important to plan your content, create your wireframes, and discuss your site’s overall goal to your clients/stakeholders.
I am truly excited about the future of Flat Design and I am already seeing the advantages in some of the projects I am currently working on here at Segue. Flat Design should be about simplicity and focus, which I believe is often something harder to do than Skeumorphic Design.
Links and references:
http://www.awwwards.com/flat-design-an-in-depth-look.html
http://www.creativebloq.com/graphic-design/what-flat-design-3132112
http://bits.blogs.nytimes.com/2013/04/23/the-flattening-of-design/?_r=1
http://uxmag.com/articles/a-look-at-flat-design-and-why-its-significant
http://pinterest.com/warmarc/flat-ui-design/