Humanizing UI Cards

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:

End Result

The Process

1. Background

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).

Background Characteristics

2. Content

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.

Content (Font and Hierarchy)

3. Humanizing

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.

Clipping shape on the background

To provide that design more depth, I applied the same gradient as the rectangle and added the shadow effect in the end.

Resultant cut out

Finally, after stacking the rectangle and masked shape, the result turned out to be like this:

Card with shape and content

4. Touch-ups

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).

Final Design

Conclusion

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 .

Thank You

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章