Software, apps and user interfaces have recently focused on a flat design and minimal approach, in a significant departure from the 3D and skeuomorphism that has been the norm for years in Mobile app design. People have decided that ‘thin is in’ but first we need to look at what it is, and why it’s back.
What is Flat Design?
In simple terms, flat design is a more versatile and sophisticated form of minimalism. Though you can make flat design look great even under minimalist constraints, these designs can also be much more complex with a clarity and crispness that is only possible once the 3D effects have been removed. Generally speaking, flat design is useful for making user interfaces easier to navigate, ensuring websites are faster and more functional – it is also seen as a starting point for the streamlining of designs.
It could also be argued that ‘flat’ is a response against skeuomorphism, which involves incorporating the look of an object made from a different material into a design so it results in a loss of functionality for the sake of aesthetics. An example of skeuomorphism would be a plastic chair that has an identical design to its wooden counterpart. Computer versions of calculators and calendars are good examples.
Why We Love Flat Design
There are quite a number of factors, but I’ve quickly outlined a couple below:
- Reduces Clutter: As we are constantly creating, evaluating and filtering content and since the public has an insatiable appetite for new information, we are in danger of being the victims of information overload. This problem is exacerbated by the decreasing size of the screens we use. Flat design helps to reduce the clutter on the user interface thus making information easier to digest.
- Simplicity: We are seeing an increase in the number of apps and services online that offer basic features in a reversal of the usual trend, which involves lots of choices for high prices. Now customers can enjoy simple interfaces, fewer apps and a lower price.
- Content Focus: When new devices arrive on the market, we initially want to see how they improve interactivity but the focus always returns to the quality of content. As most Internet users consume content via video, text or audio, they want the interface to move aside and flat design allows this.
- Responsive Design: The increase in connected devices of different dimensions means that user interfaces have needed to become more fluid and the responsive design movement has come up trumps. It seems as if using flat design in user interfaces provides the best responsive design results. Another bonus is the reduction in the size of pages and subsequent reduced loading time.
Flat Design Inspiration
There are dozens of examples, but we focus on three global giants:
- Apple: The mobile operating system iOS7 is one of the best examples of flat design inspiration. While the design is not totally free of flourish and gradient, it is quite a journey down the minimalist path and is credited by many experts as helping to launch the flat design movement. It is still recognisably iOS, but the icons have been completely redesigned with a new colour palette and all the elements are noticeably flatter. The transition to flat is even more obvious when you compare the UI design to iOS6, where almost every surface utilised skeuomorphism, from the green gaming felt, to the sewn brown leather of the mobile app designs.
- Google: The Ice Cream Sandwich, otherwise known as Android 4.0 quickly evolved into a minimalist card type interface that can now be seen on many Google products and services. Google Now is another great example as it uses Roboto typeface and white spaces to create a clean and easily digestible layout.
- Microsoft: Not to be outdone, Microsoft released its ‘authentically digital’ interface when it launched Windows 8. You can see that the new Windows 8 Start screen is powered by Live Tiles and the interface does not include ‘non-essential’ elements such as textures, gloss and shadows.
Believe it or not, flat design can be very tricky because once you strip away shadows, bevels and other normal user interface tricks; it becomes apparent that the remaining elements are all vital. Before committing to a flat design, make sure that it aligns to the needs of your target audience.
- Review the Process: Use this opportunity to go back in time and review the work of great designers before the computer era. As you work on the project, continually ask yourself if you need a certain element and discard it if you don’t. Compare versions side-by-side and don’t be afraid to step away from the work now and again to let your mind clear.
- Grid: The grid is vital in much of interface design and you can use it to define functional groups and content. You’ll quickly discover that simple spacing and alignment helps users to better understand the structure of the interface.
- Colour: This now becomes critical when using minimalist user interfaces and since other elements have been stripped away, you are now free to experiment with a larger than normal palette without worrying about compromising functionality. Experiment with your palette at the start to make sure you have ample range to cover high-contrast and subtle elements.
- Typography: It is normally better to use sans-serifs as the font is cleaner while you should look for a font family that has various styles and weights. You could experiment with drastically different weights and styles to create some visual order. Always ensure that the chosen fonts are legible on every scale.
Just because you’re interested in flat design doesn’t mean that you should completely ignore effects and skeuomorphism. It is important to note that flat design isn’t always the right solution but when it is used in an appropriate manner, it can lead to a highly enjoyable user experience. It would be wrong to assume that flat design is just a passing trend, as it appears to be a simplification of core design principles.