Designs trends: Skeomorphic and Flat UI

A few years ago there was a big debate amongst user interface designers and interface users about what was better,  skeuomorphic or flat design. Skeuomorphic design is interface design that uses real-world textures, shadows and other elements to mimic a real-life item, but in a digital world. Flat design is an interface where functionality is priority and shapes have no shadows or textures, and the whole design is it dictated entirely by a digital aesthetic. There is also a third category known as hybrid design or more recently material design where an interface looks modern and functional like flat design; however, a few textures and stylistic shadows are added to improve the user experience.

adammarsh.org.jpg

Skeuomorphic design is incredibly important because it allows digital design metaphors to look like their real-world counterparts.  When a company wants users to understand brand new technology, they often use digital metaphors. If somebody can understand how their credit card works in the physical world,  they should be able to understand how it works in a digital world too. If someone understands how to use a compass,  sliding switch or notebook in the physical world,  a skeuomorphic app design builds on that knowledge; so using the digital version is easy because they are already familiar with the look and feel.  This was crucial to the success of the first iPhone in 2007,  in which users were faced with an entirely new interface and a brand new way to interact with the device -  a multi touch screen. This new way to use a screen could potentially be daunting or off-putting to customers, so Apple adopted skeuomorphic design metaphors that made using it even more fun than the real world objects the apps were replacing.

adammarsh.org.jpg

Over the next few years, as the iPhone grew in success and popularity,  the mass public became familiar with how to interact and use the software, so there was less of a need for design metaphors and skeuomorphic mimicry. In 2012 when Apple's Senior Vice President of iPhone Software, Scott Forstall left the company due to problems with maps and Siri, world-renowned industrial designer Jonathan Ive led the design team for iOS 7.  He brought his simple, functional approach and learning from Apple's physical products to their digital ones too,  completely overhauling every aspect of iOS design. The team immediately got rid of all traces of skeuomorphism and metaphors in favour of functional,  flat design that worked intuitively. When iOS 7  launched, it split audiences as many people were familiar with the look of iOS 6,  however, in time the more functional approach became the norm, and its design aesthetic spread to Apple's other software such as tvOS, macOS and watchOS.

For a long time, Microsoft has struggled with user interface design. Apple has been introducing revolutionary after revolutionary interfaces and input devices. With the Macintosh and it's bitmap screen controlled by a computer mouse,  the iPod with click wheel that let you scroll through thousands of songs with ease,  to the iPhone which brought multi-touch displays and let software change its buttons based on what it needed to do. Microsoft has often tried to emulate Apple's efforts with Windows looking remarkably similar to the early Mac OS's, the Zune, looking like a budget iPod and Windows phones that weren't quite right. In this clip below you can see just how similar Microsoft tried to replicate Apple's Aqua operating system. In the past ten years, Microsoft has switched to the Metro design language which uses large flat, colourful buttons with no shadows, gradients or textures of any kind.

 
 

For Apple's ecosystem, there is now a consistent, modern design language that users understand across devices. At Google, however, discussions were in play over how to clean up the mess of fragmented Android app designs.  Android's biggest strength, it's openness, and less regulated platform had become a significant problem for security and app design. In 2014 Google unveiled Material Design, and intelligent solution to help ensure Android apps look consistent across different display sizes while maintaining a beautiful user experience. Material design built on the success of the flat design trend using functional shapes and buttons, however,  uses Shadows to establish a hierarchy and depth. In Apple's ecosystem, the hierarchy is established using what's known in the industry as blur material. Different sections of the design are blurred hinting at what's behind without bombarding the user with different colours and shadows. Material Design uses drop shadows to show buttons that hover over the content and establish a sense of place.

 Design trends are continually evolving to create more functional interfaces that add charm and personality to the operating system. Creating a purely functional design would be Boring, so these design decisions and creative licence add a bit of magic to the whole experience. Google, Apple and Microsoft now have their distinct design languages for the operating systems each of which believes they are at the forefront of modern interface design. It will be interesting to see how they adapt in the future and which one ultimately prevails.

Context, Craft, FMPAdam Marsh