Shares
Use arrow keys to navigate

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

Architecture Site by Oliur

Temperature Card by Bruno Passos

Temperature Card by Bruno Passos

Explore section by Patryk Adas

Explore section by Patryk Adas

Linkedin homepage concept by Emerson McIntyre 

Linkedin homepage concept by Emerson McIntyre

Mobile Quiz Page by Rosie Manning

Mobile Quiz Page by Rosie Manning

Magazine Template by Oliur

Magazine Template by Oliur

Clipboard by Oliur

Clipboard by Oliur

Dexterity Blog Magazine Layout by Oliur

Dexterity Blog Magazine Layout by Oliur

Ink- WordPress Content by Kyril Ku

Ink- WordPress Content by Kyril Ku

Google Cards Style by Ridhwan Razak

Google Cards Style by Ridhwan Razak

Select Card by Corey Haggard

Select Card by Corey Haggard

Etiolate Tumblr Theme by Oliur

Etiolate Tumblr Theme by Oliur

Google Now

Google Now

Dribbble

Dribbble - Show and tell for designers (20150729)

Mail Client Concept by Roman Shkolny

Mail Client Concept by Roman Shkolny

Simple Stats by Lina Bo

Simple Stats by Lina Bo

Pinterest

Pinterest-Discover and save creative ideas (20150729)

Silktricky

silktricky

Free Newsfeed App by Edi Gil

Free Newsfeed App by Edi Gil

ReaLync by Piper Lawson

ReaLync by Piper Lawson

App for tourists in Dubai by Volodymyr Kurbatov

App for tourists in Dubai by Volodymyr Kurbatov

Clean my Mumbai by Rahul Bhadauria

Clean my Mumbai by Rahul Bhadauria

Credit cards on wallet by Gleb Kuznetsov

Credit cards on wallet by Gleb Kuznetsov

Manual Magazine/Blog Content Layout by Oliur

Manual Magazine:Blog Content Layout by Oliur

Shop 360 interaction app by Budi Tanrim

Shop 360 interaction app by Budi Tanrim

Use arrow keys to navigate

Shares

Posted by Igor Ovsyannykov

I'm a digital nomad and entrepreneur bouncing around South East Asia. When I'm not working here, I'm out taking photos. Follow me on Instagram: @igorovsyannykov

Related Content

Leave a reply

Your email address will not be published. Required fields are marked *