Exploring Card Layouts in Web Design

Web design is very dynamic. You can always see the web design landscape re-constructed with the emergence of new technologies, techniques, trends, and styles. Now, the landscape is changing once more with the use of the new design framework called cards.

Cards are almost omnipresent nowadays – from real estate to news websites, they are there. In fact the big names – Twitter, Facebook, and Google – are into cards already.

However, there are a lot of misconceptions about what a card-based design is. But one thing is certain – a card is NOT just a box or a rectangle in your website. It is NOT just a design. For a certain design to qualify as a card, it must have functionality and be self-contained. If it is possible, it should also be flippable.

Perhaps, the clearest metaphor you can use for a card-based design is a pancake – it is flat, but it has two sides. That is the first criterion for a card – it has to have two sides. It doesn’t have to be necessarily flipped, but each card should contain an overview of information and more options to get you further involved. A card doesn’t just contain one piece of information but embedded with an invitation to do more.

In short, a card isn’t just about a beautiful design, but about the usability of that beautiful design.

Different Types of Card Design Styles

Cards in web design have undergone significant changes in styles since its inception. It has embedded itself as a core pattern in magazines, grids, flat design, and pin-style design formats.

Here are the different card design styles:

1. Flat Design

The earliest example of the card-based flat design was introduced by Microsoft in 2006 and based on the Metro-typography design language, which is chunky and colorful. The modern version, however, takes more of gradients, shadow, and texture of the skeumorphic design technique.

2. Magazine-Style Design

The magazine-style design needs strong visual balance because of the multiple categories of the card. It contains a block with an image and text which serve as a “teaser” to more detailed information in another page or website. As the namesake suggests, it is used by magazines and news websites but is also ideal for other content-heavy sites, like a blog or portfolio, as well as sites which are regularly updated.

3. Pin Style

Pinterest embodies this style, which became a popular trend in WordPress themes. During its early stages, the cards only contain links and specific bits of content. It has now evolved with more links and content styles including videos, forms, images, and social sharing tools. In some interfaces, cards include mini-interactions, like the Facebook notifications.

4. Grid Style

Also called the masonry style, it contains block which are connected perfectly or spaced out throughout the layout. Some designs have container-style patterns which are woven together while others showcase images and graphics in a more purist grid.

How to Effectively Use Cards in Your Projects?

There are a number of reasons why card-style architecture is popular. Some of its advantages are:

A lot of design styles are compatible with this format, ranging from flat to complicated.

It works well with different types of content. It also makes content easier to understand.

It works well in responsive frameworks.

It gives an organized and structured look for a lot of information.

It is easily shareable.

There is no fixed rule for this type of design architecture. However, two elements are almost always present in an effective cards in web design layout – simplicity and rich content experience. There are also other design techniques which contribute to its overall aesthetics and functionality.

Here are some guidelines you need to remember when creating a card-based design.

Space, Space, Space

A common element in a card-based design is space – white space. Plenty of white space is necessary to place a spotlight on each element so they can be clearly seen and understood. Imagine all these elements to work in a 600-pixel area: a header, a CTA button, an image, and a link text.

Therefore, a lot of space around each element gives your users time to reset while looking from card to card. Putting plenty of padding between each element will also bring attention and focus to the card similar to how the content hierarchy works.

A Piece of Information is Enough

Having said enough about space and the elements included in each card, it is logical, then, to say that each card should only have one piece of information in it. This concept unifies both the image and all supporting text giving your design the cohesion it needs. It also makes different types of content work in the same space, looking organized and intentional. In addition, it allows your users to choose the type of content they want to read and share.

Choose a Clear, Crisp Image

In a card-based design, the image is the most important. Therefore, you need to use a great image, even when placed in a small space, that draws attention individually. If you don’t have an image, go for an art-style type or a very creative headline that will immediately attract users.

A Simple Typography will Do

Your typography should place the spotlight on your image, not take away from it. To do this, choose a simple typeface in easy-to-read colors, like black and gray. Some of the most popular typefaces are medium to round sans serif because of their neutral design feel and easy readability. It is also advisable to use only one kind of typeface in varying sizes.

Add an Unexpected Detail

An element of surprise works wonders. Try adding an unexpected detail, like a 3D effect or an angled edge, to give your design some flair and emphasis. Other techniques that prove effective are hover effects and color overlays. You could also put an effect only to the most significant parts of content to balance the visual weight of each card.

Make an Open Grid

As much as the elements inside each card is important, so is the space outside each element. Create a grid framework that contains some types of contrast as well as consistent spacing between each card to provide plenty of room for each element. This becomes even more important when you consider where breakpoints might fall in a responsive layout.

Aside from that, you should also consider how each interaction works, especially in a mobile platform. Therefore, you should also go beyond the clicks, and try swipes or taps instead. Also make sure that the buttons are highly visible and easy to use, with enough room between the objects to prevent touching the wrong button or action.

Categorizing Your Cards

After you have all the design sorted out, the next big question is what kind of information or content will you put in those cards. Some of the questions that might arise are: Should the information be grouped by type or subject? In which category does this FAQ belong to? The best way to do organize all these content in a user-friendly way is through card sorting.

You can do this using pen and paper or you can use card sorting websites, like ConceptCodify or Optimal Workshop. Each has their own advantages and disadvantages although the traditional method has a personal touch to it. If you decide to use the offline card sorting method, here are some tips to consider:

Prepare Your Cards

Create a spreadsheet that lists all the things or items you are going to test. These can include product categories, labelsm, or pages in a site map. Write each of these items in a single card and place a number on the opposite side. If you are going to create a vast system, break these tasks into chunks.

Choose Which Process to Use

When organizing and analyzing the results, you can choose whether to run an individual or group session. Your choice will depend on how complex the system you are building as well as the time and budget you have. If you are going to run a group session, the most ideal number of participants that will yield a statistically useful result is at least 15 people.

Look for Participants

Once you have all the tools and the process ready, it’s now time to look for participants. Look for people who are already website users or those who are familiar with the niche or system you are trying to build.

Get Everything Ready

Before the card sorting session starts, provide clear instructions to the participants. Explain that you want to organize the cards into groups that make sense to them and that there are no wrong or right answer. As the session progresses, you can also act as a moderator and answer questions that the participants might have.

Analyze

Once the sorting process is finished, it’s time for analysis. Understand the trends and things that correlate with each other by looking for items that appear most together, newly formulated labels, items that were placed into more than one grouping, and items which the participants had a difficult time classifying.

Cards are one of the most flexible layout formats which create a consistent user experience. They are also aesthetically pleasing to the eyes. And because users are constantly looking for ways how to get more information quickly, card-based design delivers it quick and easy.