Main Site →

Motion Graphics – Pushing Flat Design Skeuomorphic


It could pass for a B rated action film, flat design vs skeuomorphism. The conversation has been characterised as an all out battle of wills, in which there can only be one victor. Although it makes for a great blog title, we have in fact got it all wrong.

In case you missed the charade, skeuomorphism is referring to an element in design that imitates a real life counterpart. Objectively it is used to help the user make visual/auditory connections within the medium. Examples include notepad apps using handwriting typefaces or a trash can referring to the deletion of information.

Apple_Macintosh_Desktop
The Apple II was something new yet strangely familiar.

Bridging the gap between the real and digital came from a need. Although around prior, Steve Jobs popularised the movement with his introduction of the Apple operating system. Complete with icons that resembled floppy disks and calculators that looked like, well calculators. This made perfect sense back in 1977 when Jobs proudly announced the Apple II. Computers were not so affordable and those fortunate enough to use them needed to instinctively “get it”.

A generation later, design has matured alongside it’s user and is slowly forming it’s own unique language; the hamburger menu icon being one example. Screens are no longer foreign objects, and latest figures suggest that 3 billion of us are hooked up to the internet. We have a better understanding of the digital medium, it’s quirks and it’s distinguishing features.


Spot the Difference

contacts

In flat design, notably used within the Windows Metro OS, all excess has been stripped back leaving it to it’s core recognisable elements opting for block solid colours and shapes. Although we attribute the right image as being flat, both of the examples above are inherently skeuomorphic in design; both resemble their real life counterparts in different ways.

The ‘battle’ was actually conceded by realism, serving solely as an aesthetic, a guise for a digital UI. While today’s digital interfaces have lost some of the resemblance, they have jumped leaps and bounds into discovering a new visual language.


The internet is no longer static

Whilst the aesthetics of flat design are being refined to a universally accepted language, its way of communicating has altered drastically. Thanks to advancements in coding languages and internet speeds (particularly over mobile), we are now able to convey information more freely via the discipline of motion graphics. An interactive medium that consists of cause and effect (one of the key features of skeuomorpism) as a signifier, telling the user ‘I am doing something’. In motion design we refer to this as a transition.

Google understands this. As seen in the below example, their latest rebrand introduces the use of 4 dots to form it’s own narrative, combining both flat aesthetics and skeuomorph processes through motion. As they put it “A dynamic distillation of the logotype for interactive, assistive, and transitional moments.” Listening, thinking, replying, incomprehension, and confirmation are some of the digital processes they are able to convey. Quickly and intuitively.

google_dots-1

 


Heading towards disaster?

Arguably this is the golden age for motion design. With motion graphics being my main specialism here at Orbital this is great news, people are starting to embrace the power of animation and how it can add incredible value to a product. It can turn a dull user experience rich and exciting, help tell a meaningful story that strengthens the user journey.

Is it possible that motion design may also be steering itself over the edge of a cliff? Is there just too much fluff? With the rise of developer tools such as Invision, Framer, Adobe XD (which is just around the corner), and many others, everyone is in a rush to push the medium to it’s limits to see what can be achieved. However exciting this is, this easily empowers creators to ignore the fundamentals of design and add unnecessary clutter that serves no function but to look pretty.


Conclusion

It’s possible that motion design is just another trend, a shiny new toy in the arsenal of a developer/designer that will one day be seen as clutter, much like realism before it. It’s also conceivable that some features may stay behind even long after the trend has died out, similar to how flat has adopted some minor realistic features including subtle drop shadows and gradients. As it currently stands, don’t expect motion design to go away any time soon.

Skeuorphism is here to stay, in one form or another. Whilst some refer to this merger of styles Skeuominimalism it’s less about personal taste but more fundamentally about how to communicate most effectively. The battle for the most intuitive design method continues.

Get future articles delivered to your inbox ...

No spam or hard sells, just great content!