Up until recently, websites used to have a linear look, only taking place on the X – Y axis. Surely fancy colours and gif images were widely used to make them look more pleasant. The web-scenery started changing with all the neat features that were introduced in CSS3 (such as shadows, animations and effects) and the high demand to adapt websites to the small screens of mobiles. Though the two are totally unrelated, they both played an important role to how design for the web evolved.
It’s been almost three years since Google shook the mobile industry with the introduction of Material design (or quantum paper). With the ever-growing need to turn to fully responsive websites, it would not take long for the whole web community to tag along and follow the Material guidelines as it not only looks good on mobile phones but it also solves many UX problems, if implemented the right way of course.
Many individuals like Federico Zivolo
did an excellent job bringing Material Design to the world of web design, blending material with Bootstrap. The way to a world of websites where depth is now a factor. No more stacking elements on top of the other, but bringing an element ‘up’ by defining the distance between the top element and the ones below it giving an illusion of a third dimension.
Take the image above as an example. As we observe on the right side, instead of treating each element as text and images, we take them as 3D objects that take a specified amount of space which consists of its height, width and depth. Each element casts its own shadow which is not deliberate, but is defined by the distance of the elements below it and the position of the light source (You can’t have a shadow without having light, can you?). So the closer it is to the elements below it, the smaller the shadow. By increasing the distance you also have to increase the shadow it casts. In order to achieve the desired levitation of the object, its size needs to also be increased. The increasement needs to be relevant to the levitation.
You can learn more about material design on the official website.
Technology is advancing rapidly. Not long ago VR glasses were introduced. It wouldn’t surprise me if we soon be able to really explore websites as cyber-places instead of “newspapers”.