User:Aagrawa7/sandbox

Introduction

Cards are defined as concise, visual and interactive packages of information. Information is broken down into fragments, put into cards and are aggregated in card format so as to fit all the screen sizes. These cards usually come in the form of a rectangle. Cards are thought of to be a great way to share quick condensed packets of information and focus on content as well as user engagement.Cards have grown in popularity in the last few years, with many websites preferring to adopt them.Facebook, Google, Twitter, Pinterest are some of the major companies to switch to card based design in the recent past.

Why move to cards?

Card based web design is in trend because of the various features that it comes with. Cards are intuitive and allow the user to have a quick review of the information. Some of the major highlights of using card based design are discussed here.

Cards are creative, catchy, glance able Web developers are moving to card based web design. The internet is becoming user-centered and each website wants users to re-visit their page. The card based web design, allows the websites to share relevant information in a creative way to the user. The inventive style allows user to be more interested in the topic and ensures that he will return again to a particular web page. It not just about accessing information on a webpage; it is about how interactive the information is.

The ingenious information catches the attention of the user It causes the user to be engrossed by it, and yet at the same time, have more news headlines style information. S/He can access more information by clicking on the card. The card usually holds more information to the headline, when user interacts with it.

Provide relevant shots of information, informative, provide teaser to the actual content, addictive pieces of information. Cards summarize the content that is being displayed. The information is like a trailer to what more the card is hiding. The cards work in groups, a website displays multiple related pieces of information with the help of card based design.

Cards can be modified, they have a responsive design. They allow feed like layout. With the use of multiple size screen devices, cards allow the website to ‘fit’ according to the size of the screen. Even if user tilts the screen of his/her device, the cards allow the webpage to be displayed according to the screen orientation.

Enhances readability Cards make the information more structured. Focus with card based design is scan-ability- A user ‘scales’ more information as compared to a general website.

Cards just don’t mean a square piece of information, it has to provide further functionality Like,comment,attach,pin- The various 'features' that we know are basically interactively involving the user.

User centered, interested topics of user first, Important topics can be displayed first as per the user’s priorities. Example of this feature is Google now. Google now has been working on improving the services it provides with the help of card based web design. Users can get location based services, and his/her interested news first in feeds. And most of all, Cards are highly shareable, which probably is one of the major highlight of social networking websites: Sharing of information.

Types of Card

There are various ways to implement the card based designing. It depends on what kind of information a website wants to provide to its users. Depending on that, some basic structures are defined.

Magazine Style Card

This type of card is usually with a picture covering the top of the card, along with summary of the story. The earlier implementations limited it to news and magazines, but now it is been actively deployed to blogs and profiles. The card displays the summary, but it has additional links to expand the information or to take it to a new website.

Grid card

It displays just the photo of information along with a single line description. All the cards in perfect grid or have spaces between them. This style looks very neat and weaves the cards into a container. More popular with just showing pictures in grid style.

Pin Style

This styling was first used by Pinterest, which used 'pins' to mark a certain picture/content on the website while linking it back to the source website. This allows the users to share images efficiently with his 'followers'. Pin style cards are very common now and several implementations could be found on the internet.

Flat Style

It was developed by Windows in 2006, which could be stated as the earliest implementation of card design. The flat design now includes several texture, shadows, borders to make it look more appealing.

Popular examples

Card based web designs have been growing in popularity over the last few years due to the numerous advantages it offers. Various players both small and large, have opted for a card based design and it’s easy to see why. Some of the most well-known examples include Google Now, Facebook, Twitter and Pinterest. Each of them implement their own version of card based design that help in maximizing usability and the ability to interact.

Google Now

Google Now is Google’s very own virtual assistant that prides itself in presenting the user with the right information at the time without needing any initiation from the user. Google Now is one of the best examples of card based design. Many of its apps incorporate this design. Google Now is completely built using only cards and is prime example on how useful and actionable cards can be. It displays the weather , sports scores, traffic updates, friends’ birthdays, upcoming future appointments all in the form of simple, easy to read and actionable cards. Most of these cards require the user to interact with it such as snoozing, wishing someone, reply to the mail, dismissing the notification etc.

Facebook

The social networking giant is another fine example of card based design. The news feed that all of us view on our Facebook pages is based on cards. Here the cards are focused on content, be it updates, news, images or videos. Other than the content, the cards also have the options to like, comment and share. In addition to these, the card also displays how many previous users have liked, shared or commented on the posts. Hidden away under a drop down menu in the cards are options are to hide, un-follow etc which are negative interactions that are generally avoided by the users.Thus, Facebook uses a card based design that focuses on connecting in a positive manner and hides elements that result in unpleasant actions.

Twitter

Twitter is another networking site that mainly uses a card based design. All the tweets are cards with some form of media attached to them.The cards can include various forms of media such as pictures, videos, audio formats etc.All these are covered in an ocean of #tags. These cards promote users to reply, re-tweet and favorite as these are the things people like to do most on twitter. Similar to the previous example of Facebook that we discussed, negative interactions such as blocking and muting are tucked away in a corner so that its not easily accessible.

Pinterest

This popular image sharing site was one of the earliest adopters of card based design and also one of the most famous. Various websites have since then tried to implement something similar to this design. It uses a visual grid that allows to users to pin or add images onto virtual boards. In addition to this, hovering over a card gives the user the ability to pin it, send it, like it and edit it. You can also visit the website of the image by clicking on the pin. This implementation is a very good example of how cards can be considered as two sided and multi functional.

Best practices for implementation

Even though it seems very simple to implement a card based web design, it’s more complicated in practice. It requires actionable material which comes with rich user engagement and simple and minimal aesthetics. Although there are many parameters involved, generally, 2 elements are considered as the most important factors when it comes to card based design : Simplicity and rich content experience.The rest of the factors are generally involved in adding more functionality and aesthetic value to the design.

Other than the above there are some important suggested guidelines to follow such as:

• Restrict each card to one piece of information.
• Prefer using simple typography.
• Use as much space as possible.
• Always place usability ahead of design and visuals.
• Include a unique detail/ design element that makes this design stand out from the rest.
• Choose images that are clear, detailed and are scaled and sized appropriately.
• Try working with an open grid with consistent spacing between cards.

Pros and Cons

Pros

There is a reason that card based web design has been so wildly popular in the recent past. It offers many advantages that have helped it become of the trendiest web designs over the past few years.

• Simple design and responsive nature makes the cards very simple to use.This improves learn-ability and usability.Since it follows a generic rectangular shape it can be scaled easily across computer and mobile screens irrespective of sizes.
  

• Works wonderfully well for content aggregation. Cards are ideal for collecting material and information from various sources and presenting them in a single space.
  

• Easy sized content blocks that make it very simple for the users to scan and read any any information that they need with freedom.
  

• Cards are a very good tool to share content on social media. Most cards offer easy ways to share information on his/her favorite social networking sites.
  

• Cards can encompass a variety of styles and design aesthetics.It works well with various designs and is not restricted to specific visual styles.
  

Cons

Just like any other design, card based web design also has its own flaws.

• Requires great development skills. A lot of effort goes into making a card based design that looks simple and yet is powerful and functional and this requires a certain level of development and designing skills that are hard to master.
  

• This style can sometimes can sometimes feel a little stale and tiring. This happens often when creativity and originality are missing and when it is just an imitation of some popular website then this will significantly hamper the user experience.
  

• Possibility of visual overload.This might result in a cluttered feel if the cards are very content heavy and contain a lot of information.
  

• Maintaining a balanced and consistent visual design is hard to master. The card must be the perfect marriage of images, text and user actions and one cannot dominate the other in this design.
  

Future

Card based web design will continue to develop and evolve over time. A lot of emphasis will be based in the app design and responsive domains. With respect to this design, Google is expected to be a major player having a huge impact on this design evolution because of its significant interest in cards. Google’s recent material update for its android phones is heavily based on paper and card elements and this could spur further development in this field. In this day and age of information at a glance, rich media integrated content and social media sharing, cards will continue to play a vital role in delivering an enhanced user experience and might start featuring in more places. Its simple and interactive nature will continue to make it one of the most popular choices for web and mobile design for years to come.