9 inspirational cards ui design example

Cards UI is an emerging trend in web design. It is difficult to say what started it and how it came about. Some say it is due to the rise of mobile browsing whereby a card UI makes more sense. Others say that this is due to personalization, whereby information pieces from different sources are pieced together in a card UI for users to customize their information intake. No matter what is the real driving force behind this trend, I am seeing more interest in this area as more big companies are adopting such a UI design into their products. In this roundup, we will see a handful of such companies that have used cards UI successfully.


#1: Google cards UI

cards UI example 1

Google elegantly used a card UI to create a dashboard for different google services so that you can get everything in a glance.  One of the best thing about using a card UI is that it fits into the mobile displays very easily. You can see how the Google card UI for the web can be easily translated to the screen.


#2: Twitter card UI design

cards UI example 2

Twitter has also developed a card UI design for displaying a host of things including summary,  photo card,  player card etc.  The image display above is an example of the summary card. You can see how easy it is to see a summarized version of the information using this approach.


#3: Pinterest card UI design

cards UI example 3

Pinterest has started with card UI and is one of the first few websites that uses this concept as the basis for the entire site. It has proven its success with many copycat style rising up to mimic its style.


#4: Trello card UI design

cards UI example 4

Trello is a company that helps you to organize anything.  It uses a card UI design that is perfectly suited for such a task. Everything activity can be pinned to a card which can be easily on a mobile interface. You can see how it works light from the screenshot above.  Very nicely done.


#5: Citia card UI design

cards UI example 5

Citia uses smart card UI to help clients tell their stories in modular chucks that are easily digestible. It is a smart application of the card UI design concept which I am sure will see lots of copycats soon.


 #6: Amazon card UI design

cards UI example 6

Even Amazon has started using card UI design for its collection display. It basically looked Pinterest’s design but that shows you how powerful a card UI design is. Hence, expect this to become more of a trend next year and more folks choose to go for such a look on their website and mobile apps.


#7: Flipboard card UI example

cards UI example 7

Flipboard has been using a UI design that is very similar to card UI. It comprise block or cards that carry specific categories of content that is drawn from your social network.


#8: Work4labs job card UI design

cards UI example 8

This is an interesting application of the card UI concept. It is used to automatically summarize information about a job candidate and present it in a card UI that can be posted across different social networks. This design recognizes that this is how we consume information now so job information should be designed this to be in line with the change in our behavior.


#9:  Contact form using card UI example

cards UI example 9

This example is from QuickUI to show how its contact form works. As you can see, it is a perfect case of how card UI can be used for managing or display the contact of a website.

About the author

With a passion for Knowledge, Smashinghub has been created to explore things like Free Resources For Designers, Photographers, Web Developers and Inspiration.

Twitter Visit author website

Subscribe to Smashing Hub

Comments are closed.