Speaker Deck

Patterns of Card UI Design

by Chris Tse

Published July 8, 2014 in Design

*** NEW: A live recording of this talk is now available at https://vimeo.com/120858063

Card-based User Interface (Card UI) is the new hotness. Recent announcements from Google around the unification of their user interfaces across mobile and web using Material Design show that that the big players are firmly behind this new UI trend. It seems like when you are more than 50 million users, e.g. Facebook, Twitter, Pinterest, etc, you are using some sort of Card-based UI/UX in your app.

Aside from looking like pieces of card-sized tactile “material”, are there more to designing a good Card UI that deliver insights and drive actions? Christopher Tse, a technology/designer, has looked into the many card-based applications, and have discovered a common set of design patterns in how cards are constructed and assembled. He also cataloged the patterns shared between different types of containers, from those focused on storytelling to those facilitating discovery.

In this follow-up presentation to his popular “Stacking the Card Deck” talk, Chris delves deeper to the implication of Card UI design for the practicing UX professional. This new Card UI have the potential to bridge the divide between native app and responsive web design. UX practitioners that wish to set the trends and establish the conventions should invest time to understand what has been done thus us and how we can evolve this emerging field of Card UI design together. If you want to help contribute in a future design-athon or collaborate workshop, sign up for our mailing list at CardStack.io (http://cardstack.io).

Related Decks from Previous Talks:

Stacking the Card Deck [Manifesto]
https://speakerdeck.com/christse/stacking-the-card-deck-reclaiming-our-mobile-future-with-html5-based-cards

Card UI Architecture Design [Technical]
https://speakerdeck.com/christse/card-ui-architecture-design

Resources & Links:

Google Material Design Style Guide
http://www.google.com/design/spec

Guardian Beta: The Container Model and Blended Content
http://next.theguardian.com/blog/container-model-blended-content/

Kipin Hall: Sai Yerram, Founder
http://kipinhall.com
http://twitter.com/agileseeker

Notes from the NYC UX Acrobatics event by Elliot Noma
http://newyorktechtalksummaries.wordpress.com/2014/07/09/patterns-of-card-user-interface-design/

Follow @christse on Twitter for updates on the Card UI movement
http://twitter.com/christse