hostmonster-Host Unlimited Domains on 1 Account   coolhandle offering reliable webhosting since 2001
Unlimited Hosting Space - FREE Site Builder   Smart Website Solutions for Your Small Business=

Designing Card-Based User Interfaces

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.

18
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 Behance19, an online creative community which showcases creative work. Card-based design is the most suitable way for presenting such type of content.

20
Behance uses a card layout for maintaining an intuitive user interface. (Large preview21)

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.

22
Image credit: Tinder. (Large preview23)

Workflow Link

Cards are easily categorized for a list of tasks. The Trello24 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.

25
A Trello board is a canvas filled with cards. (Large preview26)

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.

27
Image credit: Apple. (Large preview28)

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.

29
Image credit: Material design30. (Large preview31)

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.

32
Microsoft Windows 8. (Large preview33)

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 Cousins34 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.

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

Cards and Responsive Design Link

We all know how important38 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 frameworks39 — 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:

40
The Verge4441 on mobile viewport. (Large preview42)

While for larger screens they can fall into a grid:

43
The Verge4441 on desktop screen. (Large preview45)

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.

46
Image credit: Intercom47. (Large preview48)

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 typefaces49 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.
50
Image credit: Material Design. (Large preview51)

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 app52 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 Behance53, and also visit the Adobe XD blog54 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 free55.

(ms, yk, il

Footnotes Link

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

↑ Back to top

Tweet itShare on Facebook

Article source: https://www.smashingmagazine.com/2016/10/designing-card-based-user-interfaces/

Tags:


Submit a Review




If you want a picture to show with your review, go get a Gravatar.

1&1 has shared hosting and dedicated hosting solutions for every budget and free domains with all hosting packages!  StartLogic - Affordable hosting: Free setup/domain, unlimited emails, PHP, mySQL, CGI, FrontPage. As low as $3.95/month
Cloud ecommerce platform delivers more traffic, higher conversion and unmatched performance

© Copyright 2008 Tyconia International, Inc. All Rights Reserved.