addressalign-toparrow-leftarrow-rightbackbellblockcalendarcameraccwcheckchevron-downchevron-leftchevron-rightchevron-small-downchevron-small-leftchevron-small-rightchevron-small-upchevron-upcircle-with-checkcircle-with-crosscircle-with-pluscontroller-playcrossdots-three-verticaleditemptyheartexporteye-with-lineeyefacebookfolderfullheartglobegmailgooglegroupshelp-with-circleimageimagesinstagramFill 1light-bulblinklocation-pinm-swarmSearchmailmessagesminusmoremuplabelShape 3 + Rectangle 1ShapeoutlookpersonJoin Group on CardStartprice-ribbonprintShapeShapeShapeShapeImported LayersImported LayersImported Layersshieldstartickettrashtriangle-downtriangle-uptwitteruserwarningyahoo

Patterns of Card User Interface Design

Event Details:

Designers have looked to card-based UI to present units of content responsively across a wide range of mobile devices and screen sizes. We see this with Twitter cards, Google Now cards, Passbook passes, Pinterest tiles, Facebook Paper, etc. Recent announcements from  Google around the unification of their UIs using Material Design and from Apple about notifications widgets in iOS 8 show that that the big players are firmly behind this new UI trend. If you look more deeply into the current state of card-based UI, you can see that cards are growing out of just concentrated bits of content and are turning into mini-apps that can be embedded, capture data, and drive actions.

Key Takeaways:

To demonstrate how UX designers can apply the patterns of card UI to their own products, Saikiran Yerram, a veteran software developer/designer, will show a prototype of a card-based playlist app, created using Google’s Material Design guidelines, that brings multiple web-based educational tools into one unified learning experience.

Speaker Bios:

Christopher Tse, a technologist/designer, will show how the tactile movement across many types of cards may become how users will interact with complex web of services on the Internet. Instead of being forced into silos of individual native apps, HTML5-based cards built by different individuals and companies can be chained together by end users to tell stories, to work collaboratively, and to conduct business. Chris will present a set of card interaction patterns would help designers evaluate the right mix of cards (in terms of size, variety, purpose, relationship, and intent) for different workflow scenarios.

Saikiran Yerram: Been doing this for last 15 year or so. Started coding at age of 15 when I was fascinated to see a computer do exactly what I instructed it to do. I was part of a 2000 era startup with an exit in 2004. Now I have co-founded Kipin Hall, where we apply engineering and cognitive science to aid students in graduation. I recently got obsessed with usability, interfaces, prototyping and how it impacts user behavior.


7:00 - 7:25 PM - Check-in & networking

7:30 - 8:30 PM - Presentation

8:30 - 9:00 PM - Q&A

9:00 - 9:30 PM - Post Networking

Join or login to comment.

  • Jie Zhang J.

    will you host another instance of this, please?

    July 10, 2014

    • Marc N.

      Chris will be posting his talking schedule soon. And there is also a audio file forthcoming.

      July 11, 2014

  • Elliot N.

    My notes on the presentation are posted on

    3 · July 8, 2014

  • Christopher T.

    I just tweeted last night's deck with an additional "cheat sheet" on the 3 card types and the 4 container types. Retweet or favorite this if you find it helpful. Thanks so much for spreading the word!

    1 · July 9, 2014

  • Christopher T.

    Thank you very much for inviting me to speak to you all tonight. I had a lot of fun discussing how we can "make cards happen" in the networking time after the talk. Lots of possible tactics there.

    As promised, here are the slides from tonight's talk:

    Feel free to tweet it, download it, or excerpt from it. Use hashtag #CardUI so we can see all the related tweets together. I will share a copy of the audio-narrated slides for those who missed the event very soon.

    If you would like to help out:

    1. Sign up for the mailing list at (

    2. Follow me on Twitter @christse ( as I will announce new events and share new materials there.

    3. Email me at chris[dot]tse[at]gmail[dot]com if you want to offer your talent and time as we prepare for our busy Fall series of events. We need designers, marketers, and coders! Hope to see you all soon in a future event!

    - chris

    2 · July 9, 2014

    • David

      Great talk last night - loved the energy. The point you made at the end in response to Marc's comment: You already have demonstrated its value. What I found works to 'move people' is showing how it can be rewarding/profitable, which you made a case for as well.

      1 · July 9, 2014

    • Dennis C.

      I agree completely. It helps that Tse makes his points so compelling and engaging. Brilliant.

      1 · July 9, 2014

  • Paul R.

    Great, inspiring presentation! I will see cards with different eyes in the future!

    2 · July 9, 2014

  • Richard D H.

    A very thought provoking and wonderfully clear exposition on the card - folder - movement ... er ... "movement". Time well-spent. Very facile and committed speaker.

    2 · July 9, 2014

  • A former member
    A former member

    As a product person, I learned a ton from the talks last night. Thanks to Chris and Sai for an accessible but content packed discussion on cards architecture. Ping me if you're interested in learning more about creating digital learning experiences at Amplify. We're hiring aggressively for UX designers and developers that can work independently in cross-discipline teams. If you email me, I'll pass along some shots of the neat stuff that our designers have been doing not shown on our company website. jiliu[at]amplify[dot]com

    2 · July 9, 2014

  • A former member
    A former member

    Chris mentioned uploading the presentation. Is there a link? Would love to help share these amazing ideas.

    2 · July 8, 2014

Our Sponsors

  • O'Reilly Media

    As a member of O'Reiley user group we offer free book giveaways

  • Rosenfeld Media

    Community Sponsor

  • Moment

    Moment is sponsoring the Happy Hour for UX Sketch Camp NYC 2013

  • UIE


  • 3rd Ward

    3rd Ward is a multi-disciplinary workspace and education center.

People in this
Meetup are also in:

Sign up

Meetup members, Log in

By clicking "Sign up" or "Sign up using Facebook", you confirm that you accept our Terms of Service & Privacy Policy