We are living the digital life. Even those who hate the internet and everything it represents can’t deny the fact that this is the time and age of digitization. So much so that the common things and items we used pre-internet days are now being booted up to join the digital world. Case in point, a plain and simple card.
Back in the days, a card is just synonymous to Hallmark. Today, it’s a web design. A card, also known as a tile or a portrait, is a design that is fast becoming an online trend, thanks to Google, Facebook, and Twitter.
The name may sound new, but the concept isn’t. In fact, the card is an omnipresent web design. If you’ve used the internet, there’s no doubt that you’ve already seen it but are unaware of what the term covers.
Just like any old-school identification card, a card-based web design provides important information in a condensed manner. It also provokes engagement as most online cards highlight a “share” button. The prevalence of this design is due to its compatibility with smartphones and tablets which makes everything look cohesive and work seamlessly.
It’s possible to create a card-based web design on your own. But you have to make sure that you get these three factors right:
- The card must be informative. An online card is useless it can’t provide all the necessary information it should have. This includes the title of the site, username options, images, and icons. The flow of these pieces of information must always be readable so that card users can easily follow the chain of thought.
- The card must be responsive. This means that the design must work well on various screens of different sizes. So when a user switches from his PC to his smartphone, he shouldn’t have any problem with the card’s performance whatsoever.
- The card must be catchy. To make it easier for the user to digest all the information, a card-based web design must have a clever use of text and visuals for easy and smooth communication of thought and ideas.
How each content is arranged on the card is the key in making the design convenient for all users. Most of the cards online use boxes (squares and rectangles) to separate one content from another.
This makes for a well-structured and orderly content that enhances readability. And to round it all up, a card-based web design must also have a call-to-action that spurs a response from the user.
Here are 25 well-crafted examples of card-based design.
Architecture Site by Oliur
Temperature Card by Bruno Passos
Explore section by Patryk Adas
Linkedin homepage concept by Emerson McIntyre
Mobile Quiz Page by Rosie Manning
Magazine Template by Oliur
Clipboard by Oliur
Dexterity Blog Magazine Layout by Oliur
Ink- Wordpress Content by Kyril Ku
Google Cards Style by Ridhwan Razak
Select Card by Corey Haggard
Etiolate Tumblr Theme by Oliur
Google Now
Dribbble
Mail Client Concept by Roman Shkolny
Simple Stats by Lina Bo
Silktricky
Free Newsfeed App by Edi Gil
ReaLync by Piper Lawson
App for tourists in Dubai by Volodymyr Kurbatov
Clean my Mumbai by Rahul Bhadauria
Credit cards on wallet by Gleb Kuznetsov
Manual Magazine/Blog Content Layout by Oliur
Shop 360 interaction app by Budi Tanrim
