Best Card Design Examples
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.
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.
Facebook is a great example of content-driven card design.
Cards allow relevant content to naturally reveal itself, making possible for users to dive deep into their interests. Take a look at
Behance , an online creative community which showcases creative work. Card-based design is the most suitable way for presenting such type of content. 24
Behance uses a card layout for maintaining an intuitive user interface. (
Large preview ) 26
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.
Image credit: Tinder. (
Large preview ) 28 Workflow
Cards are easily categorized for a list of tasks. The
Trello 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. 29
A Trello board is a canvas filled with cards. (
Large preview ) 31
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.
Image credit: Apple. (
Large preview ) 33 Dashboard
С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.
Material design . ( 35 Large preview ) 36 Card-Based Design Language
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.
Microsoft Windows 8. (
Large preview ) 38 Creating Card In More Detail
Link Cards And Simplicity
When you think about cards,
simplicity should be the number one thing to keep in mind. A great advice from Carrie Cousins 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. 39
ReaLync carries cards over to all of their listings in order to show the most important information about places. Credit:
piperlawson . ( 41 Large preview ) 42 Cards and Responsive Design
We all know
how important 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 43 compatibility with responsive frameworks — cards grids can restructure themselves to fit any breakpoint or screen size. 44
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:
The Verge 49 on mobile viewport. ( 46 Large preview ) 47
While for larger screens they can fall into a grid:
The Verge 49 on desktop screen. ( 46 Large preview ) 50
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.
Intercom . ( 52 Large preview ) 53 Cards and Typography
Everything about a card design should be easy to read and understand. You should design for maximum readability:
simple typefaces 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). 54 Try to limit the number of typefaces as well. For most card projects a single typeface is enough.
Image credit: Material Design. (
Large preview ) 56 Conclusion
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 app 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. 57
You can check out more inspiring projects created with Adobe XD on
Behance , 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 58 download and test it for free . 59
(ms, yk, il
1 http://adobe.ly/2dHuTKc 2 https://www.smashingmagazine.com/2016/10/in-app-gestures-and-mobile-app-user-experience/ 3 https://www.smashingmagazine.com/2016/09/the-thumb-zone-designing-for-mobile-users/ 4 https://www.smashingmagazine.com/2016/09/how-to-design-error-states-for-mobile-apps/ 5 https://www.smashingmagazine.com/2013/05/gesture-driven-interface/ 6 https://www.smashingmagazine.com/2013/03/sci-fi-interaction-designers-gestural-interfaces/ 7 https://www.smashingmagazine.com/wp-content/uploads/2016/10/1.jpg 8 http://www.oldvintagebaseballcards.com/shop/images/104-1.jpg 9 https://www.smashingmagazine.com/wp-content/uploads/2016/10/1.jpg 10 http://uxmyths.com/post/647473628/myth-people-read-on-the-web 11 https://www.smashingmagazine.com/wp-content/uploads/2016/10/2.png 12 https://www.google.com/design/spec/components/cards.html#cards-usage 13 https://www.smashingmagazine.com/wp-content/uploads/2016/10/2.png 14 https://www.behance.net/gallery/21199241/Cardsaround 15 https://blog.kissmetrics.com/boost-conversions-using-images/ 16 https://www.smashingmagazine.com/wp-content/uploads/2016/10/4-opt.png 17 https://www.google.com/design/spec/components/cards.html#cards-content 18 https://www.smashingmagazine.com/wp-content/uploads/2016/10/4-opt.png 19 https://www.smashingmagazine.com/wp-content/uploads/2016/10/5-opt.png 20 https://googleblog.blogspot.ru/2013/04/google-now-on-your-iphone-and-ipad-with.html 21 https://www.smashingmagazine.com/wp-content/uploads/2016/10/5-opt.png 22 https://www.behance.net/gallery/22981559/Mobile-Interaction-Design 23 https://www.smashingmagazine.com/wp-content/uploads/2016/10/7-opt.jpeg 24 https://www.behance.net/ 25 https://www.smashingmagazine.com/wp-content/uploads/2016/10/8-opt.jpg 26 https://www.smashingmagazine.com/wp-content/uploads/2016/10/8-opt.jpg 27 https://www.smashingmagazine.com/wp-content/uploads/2016/10/9-opt.png 28 https://www.smashingmagazine.com/wp-content/uploads/2016/10/9-opt.png 29 https://trello.com/ 30 https://www.smashingmagazine.com/wp-content/uploads/2016/10/10-opt.png 31 https://www.smashingmagazine.com/wp-content/uploads/2016/10/10-opt.png 32 https://www.smashingmagazine.com/wp-content/uploads/2016/10/11-opt.jpg 33 https://www.smashingmagazine.com/wp-content/uploads/2016/10/11-opt.jpg 34 https://www.smashingmagazine.com/wp-content/uploads/2016/10/12-opt.png 35 https://material.google.com/components/cards.html#cards-content 36 https://www.smashingmagazine.com/wp-content/uploads/2016/10/12-opt.png 37 https://www.smashingmagazine.com/wp-content/uploads/2016/10/14-opt.png 38 https://www.smashingmagazine.com/wp-content/uploads/2016/10/14-opt.png 39 https://designshack.net/articles/layouts/the-complete-guide-to-an-effective-card-style-interface-design/ 40 https://www.smashingmagazine.com/wp-content/uploads/2016/10/13-opt.png 41 http://piperlawson.com/ 42 https://www.smashingmagazine.com/wp-content/uploads/2016/10/13-opt.png 43 http://www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics/ 44 https://blog.intercom.com/why-cards-are-the-future-of-the-web/ 45 https://www.smashingmagazine.com/wp-content/uploads/2016/10/15-opt.png 46 http://www.theverge.com/ 47 https://www.smashingmagazine.com/wp-content/uploads/2016/10/15-opt.png 48 https://www.smashingmagazine.com/wp-content/uploads/2016/10/15_2-opt.png 49 http://www.theverge.com/ 50 https://www.smashingmagazine.com/wp-content/uploads/2016/10/15_2-opt.png 51 https://www.smashingmagazine.com/wp-content/uploads/2016/10/16-opt.png 52 https://blog.intercom.com/why-cards-are-the-future-of-the-web/ 53 https://www.smashingmagazine.com/wp-content/uploads/2016/10/16-opt.png 54 https://blogs.adobe.com/creativecloud/xd-essentials-typography-in-mobile-apps/ 55 https://www.smashingmagazine.com/wp-content/uploads/2016/10/17-opt.png 56 https://www.smashingmagazine.com/wp-content/uploads/2016/10/17-opt.png 57 http://adobe.ly/2dHuTKc 58 http://adobe.ly/1U9LS0E 59 http://adobe.ly/2dHuTKc
↑ Back to top
Tweet it Share on Facebook