Motion, Meaning and Shadow Shenanigans
When you start out with Google’s guidelines on Material, the first thing that strikes you is how well thought out the system is. The very first time I encountered any of the principles, was last year when I was exploring Canva I believe (I may be wrong), I saw this picture and thought a bit about how it came across as real in an unreal way. I didn’t get how shadows were created then, so I tried my best to recreate it and failed on several occasions. The whole time I was using Canva and thought that I couldn’t achieve the shape because of the tool I was using, not considering that there may actually be a gap in my understanding. Here is the principle I am refering to.
Motion provides meaning (By Google Design)
Well, on my journey, gradually, an understanding of the concept of shadows and their importance in conveying depth has been building and tonight I believe it lit in my head like a light bulb.
Over the weekend, I had a conversation with an acquaintance and we were musing around the different developments in UI and the best tools to use because rookie! He’s an expert and has designed major stuff in Nigeria. I brought up material and with a wave of a hand dismissed it as simply using shadows. That comment struck me, and I decided to go over things I had previously thought about conveying depth, the concepts of material design and how close they are to reality. I mean, the whole thing is like they taught us in School during art classes, making use of light and shadows. Google’s material takes it a step further and tells you just how much light and how much shadow to let on.
As for my canva mishap trying to recreate the picture above, I figured that rather than use 2 rectangles to create the shadow below, I should have just used one. SMH for me lol. See below.
and just because I can, here is another one for good measure hehehe.
Oh plus, I did it in Canva finally you figured right. The problem was me.