Chinese Material Design – UX Collective

This Chinese Design Language will Make You Want to Switch.

Punit Web

China is known for having their own alternatives for Google, Facebook, Whatsapp and every other American service ever made. I was surprised to stumble upon a Material Design alternative, which might even be better in some aspects. In short, Ant Design is a complete Design language which has tools for Sketch, web development, UX design, animation and anything and everything around design you can possibly imagine.

UX Focused

The team who designed this language made sure they listed out the principles and values to follow at the time of implementation. There is a whole section dedicated to UX principles to remember while designing using this language. I’ve highlighted some of the principles down below:

Provide an Invitation

Ant design basically talks about call to action — both static call to action elements and dynamic one’s as well.

Static Invitation: By providing cues for interaction directly on the page we can statically indicate to the user the expected interface behavior. Static Invitations provide cues directly on the page.

Dynamic Invitations: Dynamic Invitations engage users at the point of the interaction and guide them through the next step of interaction.



This is a major design principle which states that — Out of a group of elements on a page or section, an element which looks different will stand out from the group or section.

Ant design divides contrast into three categories:

  • Contrast of Whole and Part

As seen above, a certain part of the card has been highlighted by using a thicker and larger font. What’s different about this is, that instead of using dividers or different backgrounds or shadows, they have simply differentiated based on the typeface. We generally use dividers in Material design to set sections apart, or a slight change in the background. They say this approach makes things more flexible and ‘rhythmic’. Well, I wont argue with that, since it definitely seems to work.

  • Contrast of Major and Minor Relationship

This one’s nothing new; help the user make a decision by highlighting what is more important.

What it does say about actions which are ‘neutral’, should be left alone with no highlighting. This basically means — Don’t highlight elements where the decision of the user doesn't need to be promoted or guided.

Here’s an example to showcase that:

The buttons are very basic and barebone. As a user, I’m not being called to click those buttons. I can take my time, read through the text(I can’t read mandarin), and then carefully take a decision. Smart.

Author: Punit Web

Collect by: