Cards are everywhere, from the smallest webpage to the humongous app. You might have crashed into them while doing a payment on Google Pay, exploring the files in File Manager, or even selecting a song in Spotify. Such an omnipresent element should be able to connect more to the audience, it should be more human.
This article is the documentation of my attempt to make a set of more natural cards which turned out to be like this:
For the background color of the cards, I used light(top) to dark(bottom) gradient. The corner radius of the rectangle is 15% of height/width(whichever is greater).
To complement most of the current apps and websites, I decided to go with the geometric sans type font in this case “Montserrat” because of its modernity and cleanliness. The main text is 4 times the secondary text in this example, but it can be altered according to the specific needs of the design. Also, for the visual hierarchy, I gave the less necessary information in the main text a smaller size.
Here comes the interesting part, as you can see there is some space in the right portion of the card, it feels empty, now it depends on the background and surrounding stuff to what to put in that portion. It can be illustrations, picture, abstract shapes, anything, but to make it more elegant I tried to combine shapes which will depict the authenticity/importance of the card. In the current design, I used the shape of a flower and masked that shape on the rectangle.
To provide that design more depth, I applied the same gradient as the rectangle and added the shadow effect in the end.
Finally, after stacking the rectangle and masked shape, the result turned out to be like this:
Just for the presentation point of view, I added a button in the top-right corner and gave the whole card a shadow effect (with the dominant color of the design).
I created more cards by playing with different colors and shapes as you can see in the first image. This process also taught me the impact of depicting the text with an equivalent graphic. Overall, this was a fun experiment that turned out to be quite interesting.
Do give this post some claps if you find this documentation interesting and provided you with some insights into creating more natural cards. Want to know more about me? You can click on any of these links: Twitter, LinkedIn.