Imagine holding a piece of fruit in your hand - an orange if you will. Can you feel the texture of it? The lumps and crevices. How light it feels when you toss it up into the air and how it descends back down as you reach out to grab it? Or, imagine how given a gentle push it would roll across your desk. Now that you have that image in your head, try and translate the same principles of that lumpy, bashed about, fictional orange to the functionalities of a website.

Struggling? Don't worry we have a blog for that.

Back at the beginning of 2015, the ever ominous internet giant, Google, announced to the public what their design team had been working on for the past two years. A standard that would transform how we interact with a website, and more importantly, how it would interact with us - the user.

Google was focusing on bringing websites and apps to life. Throwing out the old ideas that everything was presented on a flat sheet of paper, animations were tossed in because...well...just because, and the constant loading screens. These functionalities unsettled Google and they thought "How can we give more substance to somewhat intangible platforms?" Thankfully, after the intellectual people of Google put their heads together, they came up with a solution - Material Design.
Material Design allows creatives and developers to image their work in 3-dimensional formats, rather than the old eagle-eyed perspective (2D). Movement and weight became a central theme to this new design philosophy.

Shadows give depth

With a shift in creative fads towards more flat, block web design, shadows had become somewhat passé of late. However Google maintained that, when used well, shadows create a critical sense of intent, depth and weight. For example, a shadow can be used to great effect on a button, whereby a user clicking the button causes the shadow to reduce and a darker colour overlay gives the impression that the button is physically being pressed inwards. This reflects the motion of a physical button pressing experience. Therefore, it clearly translates from a familiar and recognised action offline into a visual cue for the online function.
materialgoogleanimations

Or when clicking on a plus (+) sign on a calendar, the button would expand and open the linking section. Allowing the user to be taken to a different area without having the feeling they have been taken elsewhere on a site.

An area that could communicate to a user that actions were either accepted or unable to complete by making buttons bounce, change colour, shake side to side - almost like a shake of the head, and many other interactions.

Too many swipes right

To put this more into context, let's take the ever popular dating app, Tinder.

To those of the unaware, the app worked like this - swipe right if you liked the look (and description) of the person you were presented with, or swipe left if you thought otherwise. For those that were too eager to gain as many matches as possible, Tinder put a limitation as to how many "swipes" you could make in a day and shook the panel and made the dragging to the right unavailable to the user. On top of an image being displayed that indicated to the user that they were out of swipes, the functionality of the weight and movement of swiping became heavier and slower - a clever little design all thanks to Material Design.

Since its launch, many websites and apps have embraced this new design approach as developers and designers are now trying to bridge the communications gap between human interaction and the devices they are using.

Here at After Digital, we embrace this new design philosophy and strive to implement this throughout every aspect of our design processes - user experience, user interfaces, development, and design. Allowing all our clients the benefit of keeping on trend with the digital world and connecting the tangible with the intangible. Keep an eye out for our follow-up post on the benefits of a user experience evaluation process.