Menu Search
Jump to the content X X

Sponsored Article Designing Card-Based User Interfaces

Web and mobile apps are moving away from pages towards completely personalized experiences. These new experiences are built on an aggregation of many individual pieces of content. The way this content is now being presented is in the form of cards. The card-based interaction model is spreading pretty widely, and you can see digital cards almost everywhere — from news sites to food delivery apps.

In this article, I’ll explain what cards mean to UI designers, and I’ll review three popular card-based services. If you’re interested in prototyping your own card-based user interface, you can download and test Adobe’s Experience Design CC1 for free and get started right away.

Further Reading on SmashingMag: Link

What Are Cards? Link

Cards are those little rectangles full of inclusive images and text that serve as entry points to more detailed information. The word ‘cards’ is an excellent metaphor since they look like real-world tangible cards in user interfaces.

Before web and mobile apps, cards were always all around us — business cards, baseball cards, and even sticky notes. Thus, it is more intuitive for us to know that these cards are representing piece of content just like in real life.

7
A baseball card is a good example from real-life objects: the basic information you needed to know about a player is contained on both sides of a small card. (Image credit: oldbaseballcards8) (Large preview9)

The Advantages Of Cards Link

Digital cards can be applied to a variety of contexts, implemented correctly, they can improve the user experience aspect of the app. Here are some examples to illustrate why cards can be good for your UI:

Chunking Content Link

Cards organize information into chunks of content, and users appreciate chunked content because it aids for scannability10: it helps avoid walls of text, which can appear intimidating or time-consuming and allows users to dive deep into their interests quicker. Cards divide content into meaningful sections, similar to the way text paragraphs group sentences into distinct sections. They can gather various pieces of information to form one coherent piece of content.

11
Cards are neat little containers for information. (Image credit: Google12) (Large preview13)

Easy to Digest Link

Cards are a great tool for communicating quick stories. Placing content in cards makes it digestible for users. Users can easily access the content that they are interested in, and this empowers users to engage in any way they want.

Users can quickly scan and swipe cards. Image credit: Behance14

Visually Pleasing Link

Card-based design usually heavily relies on visuals. Actually, going heavy on images is a strength of card-based design. Studies confirm15 that images elevate site and app design, because images draw the user’s eye efficiently and immediately. The emphasis on using images makes card-based design more attractive to the users.

Cards can tease users with visual information.16
Cards can tease users with visual information. (Image credit: Google17) (Large preview18)

Good For Varying Screen Sizes Link

The most important thing about cards is that they are almost infinitely manipulatable. They are a good choice for responsive design since cards act as content containers that easily scale up or down. This feature allows us to create a single aesthetic across multiple devices and to establish a consistent experience regardless of the device.

19
Cards are perfect for mobile devices and various screen sizes. (Image credit: Google20) (Large preview21)

Designed For Thumbs Link

Cards are made for thumbs. Cards are a style that seem just made for apps. Digital cards behave in the same way as physical cards. Users like the simplicity of the cards and intuitively understand the physics of turning a card over for more information or swiping for the next chunk of information.

Cards are almost infinitely manipulatable: they can take full advantage of animation and movement. (Image credit: Behance22)

Best Card Design Examples Link

Card-style design lies at the intersection of design for desktops and mobile devices, bridging the gap between interaction and usability. But in order to be successful, card-based interface requires both clean aesthetics and direct user engagement with a certain action.

Stream Link

Cards can appear in a stream, creating a timeline of events. For example, Facebook uses them to present a quick overview of recent events in the news feed. Facebook’s news feed is an endless stream, whereas cards are individual. The point of cards here is disaggregation. They’re taking things out of infinite stream, packetizing them, and making them sharable. This action also encourages users to share the content on social media.

23
Facebook is a great example of content-driven card design.

Discovery Link

Cards allow relevant content to naturally reveal itself, making possible for users to dive deep into their interests. Take a look at Behance24, an online creative community which showcases creative work. Card-based design is the most suitable way for presenting such type of content.

25
Behance uses a card layout for maintaining an intuitive user interface. (Large preview26)

Tinder is a great example of how utilizing discovery mechanism to present the next option has driven the app to emerge as one of the most popular mobile apps. Tinder has a terrifically simple card swipe interface — you swipe to the left if you’re not interested, to the right if you are. This card-swiping mechanism is curiously addictive, because every single swipe is gathering information — cards connect with users and offer the best possible options based on the made decisions.

27
Image credit: Tinder. (Large preview28)

Workflow Link

Cards are easily categorized for a list of tasks. The Trello29 task management app does a great job of using a card-style interface to create a dashboard for users, where each card represents a separate task.

30
A Trello board is a canvas filled with cards. (Large preview31)

Dialog Link

Since cards are content containers, they’re perfect for representing actions. Consider the AirDrop service on Apple devices. When you have an incoming request for data transfer, a card pops-up with a notification to accept or decline the transfer. Apple’s screenshots focus on photos, but developers can put anything in card — coupons, songs or web links.

32
Image credit: Apple. (Large preview33)

Dashboard Link

Сard design offers fantastic precision when it comes to organizing content from varying sources. Using cards, you can organize information collections into logical groups, aggregate your content and show it context specific. A selective content from many different content providers can be easily gathered together and redistributed as a “deck” of related information.

34
Image credit: Material design35. (Large preview36)

Card-Based Design Language Link

In 2010, Microsoft introduced its Metro design language. A key design principle is better to focus on the content of applications, which is achieved by using flat elements, relying more on typography and cards. A card for Metro design is more than just a design element; it’s an essential functional part which provides an easy interaction.

37
Microsoft Windows 8. (Large preview38)

Creating Card In More Detail Link

Cards And Simplicity Link

When you think about cards, simplicity should be the number one thing to keep in mind. A great advice from Carrie Cousins39 is “one piece of information per card”: card can contain multiple elements within a design, but each should focus on only one bit of information or content. This gives users the opportunity to select the parts of your content they want to consume or share.

40
ReaLync carries cards over to all of their listings in order to show the most important information about places. Credit: piperlawson41. (Large preview42)

Cards and Responsive Design Link

We all know how important43 it is to make your app or site look and work equally well across all devices. When we are designing for different screens, we should take full advantage of target environment and using cards we can adjust content quickly and easily depending on the size of the screen. Cards offer excellent compatibility with responsive frameworks44 — cards grids can restructure themselves to fit any breakpoint or screen size.

What’s nice about a digital card is that it can be manipulated in a variety of ways. For example, on mobile devices, cards can be stacked vertically, like an activity stream on a phone:

45
The Verge4946 on mobile viewport. (Large preview47)

While for larger screens they can fall into a grid:

48
The Verge4946 on desktop screen. (Large preview50)

Cards can be a fixed or variable height: You can set a fixed-width with variable height for your cards based on the device type.

51
Image credit: Intercom52. (Large preview53)

Cards and Typography Link

Everything about a card design should be easy to read and understand. You should design for maximum readability:

  • Opt for simple typefaces54 and easy to read color schemes (text is most legible when placed on a solid color background with a sufficient contrast ratio to the text).
  • Try to limit the number of typefaces as well. For most card projects a single typeface is enough.
55
Image credit: Material Design. (Large preview56)

Conclusion Link

Most of you probably have a better understanding why card-style design is so popular and will continue to increase in popularity. This trend won’t end anytime soon. Cards are here to stay and continue to be an essential part of app design.

What makes cards work is good design and great usability. Cards are more than just a look, they are one of the most flexible layout formats for creating rich content experiences. Today, people seek out information quickly, and cards serve it up well, regardless of device.

This article is part of the UX design series sponsored by Adobe. The newly introduced Experience Design app57 is made for a fast and fluid UX design process, as it lets you sketch out ideas, create interactive prototypes, test and share them all in one place.

You can check out more inspiring projects created with Adobe XD on Behance58, and also visit the Adobe XD blog to stay updated and informed. Adobe XD is being updated with new features frequently, and since it’s in public Beta, you can download and test it for free59.

(ms, yk, il

Footnotes Link

  1. 1 http://adobe.ly/2dHuTKc
  2. 2 https://www.smashingmagazine.com/2016/10/in-app-gestures-and-mobile-app-user-experience/
  3. 3 https://www.smashingmagazine.com/2016/09/the-thumb-zone-designing-for-mobile-users/
  4. 4 https://www.smashingmagazine.com/2016/09/how-to-design-error-states-for-mobile-apps/
  5. 5 https://www.smashingmagazine.com/2013/05/gesture-driven-interface/
  6. 6 https://www.smashingmagazine.com/2013/03/sci-fi-interaction-designers-gestural-interfaces/
  7. 7 https://www.smashingmagazine.com/wp-content/uploads/2016/10/1.jpg
  8. 8 http://www.oldvintagebaseballcards.com/shop/images/104-1.jpg
  9. 9 https://www.smashingmagazine.com/wp-content/uploads/2016/10/1.jpg
  10. 10 http://uxmyths.com/post/647473628/myth-people-read-on-the-web
  11. 11 https://www.smashingmagazine.com/wp-content/uploads/2016/10/2.png
  12. 12 https://www.google.com/design/spec/components/cards.html#cards-usage
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/2016/10/2.png
  14. 14 https://www.behance.net/gallery/21199241/Cardsaround
  15. 15 https://blog.kissmetrics.com/boost-conversions-using-images/
  16. 16 https://www.smashingmagazine.com/wp-content/uploads/2016/10/4-opt.png
  17. 17 https://www.google.com/design/spec/components/cards.html#cards-content
  18. 18 https://www.smashingmagazine.com/wp-content/uploads/2016/10/4-opt.png
  19. 19 https://www.smashingmagazine.com/wp-content/uploads/2016/10/5-opt.png
  20. 20 https://googleblog.blogspot.ru/2013/04/google-now-on-your-iphone-and-ipad-with.html
  21. 21 https://www.smashingmagazine.com/wp-content/uploads/2016/10/5-opt.png
  22. 22 https://www.behance.net/gallery/22981559/Mobile-Interaction-Design
  23. 23 https://www.smashingmagazine.com/wp-content/uploads/2016/10/7-opt.jpeg
  24. 24 https://www.behance.net/
  25. 25 https://www.smashingmagazine.com/wp-content/uploads/2016/10/8-opt.jpg
  26. 26 https://www.smashingmagazine.com/wp-content/uploads/2016/10/8-opt.jpg
  27. 27 https://www.smashingmagazine.com/wp-content/uploads/2016/10/9-opt.png
  28. 28 https://www.smashingmagazine.com/wp-content/uploads/2016/10/9-opt.png
  29. 29 https://trello.com/
  30. 30 https://www.smashingmagazine.com/wp-content/uploads/2016/10/10-opt.png
  31. 31 https://www.smashingmagazine.com/wp-content/uploads/2016/10/10-opt.png
  32. 32 https://www.smashingmagazine.com/wp-content/uploads/2016/10/11-opt.jpg
  33. 33 https://www.smashingmagazine.com/wp-content/uploads/2016/10/11-opt.jpg
  34. 34 https://www.smashingmagazine.com/wp-content/uploads/2016/10/12-opt.png
  35. 35 https://material.google.com/components/cards.html#cards-content
  36. 36 https://www.smashingmagazine.com/wp-content/uploads/2016/10/12-opt.png
  37. 37 https://www.smashingmagazine.com/wp-content/uploads/2016/10/14-opt.png
  38. 38 https://www.smashingmagazine.com/wp-content/uploads/2016/10/14-opt.png
  39. 39 https://designshack.net/articles/layouts/the-complete-guide-to-an-effective-card-style-interface-design/
  40. 40 https://www.smashingmagazine.com/wp-content/uploads/2016/10/13-opt.png
  41. 41 http://piperlawson.com/
  42. 42 https://www.smashingmagazine.com/wp-content/uploads/2016/10/13-opt.png
  43. 43 http://www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics/
  44. 44 https://blog.intercom.com/why-cards-are-the-future-of-the-web/
  45. 45 https://www.smashingmagazine.com/wp-content/uploads/2016/10/15-opt.png
  46. 46 http://www.theverge.com/
  47. 47 https://www.smashingmagazine.com/wp-content/uploads/2016/10/15-opt.png
  48. 48 https://www.smashingmagazine.com/wp-content/uploads/2016/10/15_2-opt.png
  49. 49 http://www.theverge.com/
  50. 50 https://www.smashingmagazine.com/wp-content/uploads/2016/10/15_2-opt.png
  51. 51 https://www.smashingmagazine.com/wp-content/uploads/2016/10/16-opt.png
  52. 52 https://blog.intercom.com/why-cards-are-the-future-of-the-web/
  53. 53 https://www.smashingmagazine.com/wp-content/uploads/2016/10/16-opt.png
  54. 54 https://blogs.adobe.com/creativecloud/xd-essentials-typography-in-mobile-apps/
  55. 55 https://www.smashingmagazine.com/wp-content/uploads/2016/10/17-opt.png
  56. 56 https://www.smashingmagazine.com/wp-content/uploads/2016/10/17-opt.png
  57. 57 http://adobe.ly/2dHuTKc
  58. 58 http://adobe.ly/1U9LS0E
  59. 59 http://adobe.ly/2dHuTKc

↑ Back to top Tweet itShare on Facebook

Nick Babich is a developer, tech enthusiast, and UX lover. He has spent the last 10 years working in the software industry with a specialized focus on development. He counts advertising, psychology, and cinema among his myriad interests.

  1. 1

    Great article Nick! You are right, card-based user interfaces are good for organizing content into chunks, making it faster for people to find what they are looking for, and easier for people to digest the information. Reminds me of Gestalt. Also, if the cards are made such that the entire card is one hyperlink to an article or page, it makes it easier to click on, especially for touch screens.

    5
  2. 2

    Nice and neat article Nick!

    0
  3. 3

    Great overview again, as I always have admired the depth and structure of this magazine’s posts from the moment I read my first one. Your overall ability and passion to deliver valid information in reasonable context is awsome and show best practice on how information should be transmitted to the audience.

    Cause I mentioned context: I think, card based design gives a splendid concept to deliver portions of information that are isolated against each other. This concept matches very well for products. But what to do if you want to bring to light the manifold and complex relations between elements? Let’s say you can portrait several componets of a complex network adequately. How do you display the interactions? Does the card based design provide methods do do so? If yes, it could emerge as a strong technique for explaining politics, jurisdiction, public transport, cooking recipes and so on …

    -3
  4. 4

    Ryan Malinoski

    October 12, 2016 1:27 pm

    Good thoughts! I am developing an app at the moment and it is card based. This definitely provides context to the thoughts and ideas I have tried to convey through the design. Thanks for bringing this into one place!

    1
  5. 5

    Great article Nick, thank you. At Cliqz, a Munich (Germany) based search start-up, we think the same way.
    Our mobile browsers apply cards rather than a list to represent search results. Cards representing one piece of information or destination (like Sue mentioned in her comment) are much easier to cognitively process, especially on-the-go. Thus they are the ideal interface to quickly decide for the right result NOW, just like Tinder that you mentioned.

    I would be happy if you had a look :) – the Android version is widely available, iOS only in Germnay atm, but ping me if you are intrested.
    https://cliqz.com/en/mobile

    2
  6. 6

    Did we really need a special fancy name for boxes?

    6
    • 7

      Clarus Dignus

      October 14, 2016 3:25 am

      Card design feels like the very confused grandchild of:

      1) Screen dimensions of smartphones.
      2) Mobile-first content boxes.
      3) Masonry/Metro
      3) Any content box in general.

      As one scrolls through the provision of exemplary screen-shots, the said confused meshing of design concepts is very much evident.

      0

Leave a Comment

You may use simple HTML to add links or lists to your comment. Also, use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support -js, -markup and -css for comments.

↑ Back to top