2015-07-30

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.

Cards are simply those little rectangles filled with interactive images and information. They have become the choice of a lot of websites before because of responsiveness, clear aesthetics, and usability.

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. Despite the different techniques, it has the same basic concept and primary action – a chunk of information which the user can click through for further exploration and interaction.

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.

Don’t Forget Usability

Design isn’t just about aesthetics, but also about usability. Design should incite the user into action whether it is to click the subscribe button, read the rest of the article, or purchase an item. The ultimate goal of your interface is to provide easy interaction that will lead your users to any of those actions.

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.

Best-Rated Card-based WordPress Themes and Templates

Here are some WordPress themes and templates that have incorporated cards in some aspects of their design.



Liesel – Cafe, Dining and Bakery WordPress Theme

1. Liesel – Cafe, Dining and Bakery WordPress Theme ($58)

The Liesel theme is a good example of a card-based design where you can showcase your cafe and its menu in a beautiful and professional manner using the flipcard plugin. Developed by the Dahz team, the theme comes with a WordPress customizer, revolution slider, and portfolio galleries. Although designed specifically for restaurant and food businesses, it is also an ideal theme for personal portfolios.

Liesel Theme Best Features:

Portfolio post type

Parallax and page loader

Visual composer plugin

Multiple website layouts

Customizable sidebar and footer

Fancy header

View Demo and Purchase Theme Here



2. Flatoo – vCard, Resume, Personal WordPress Theme $48

Flatoo is a minimalist theme designed by Theme -Squared as a professional and multipurpose v Card to place your personal information in. Whether you are a creative, a tech person, or a businessman, the theme is a good start to create an impressive resume online.

Flatoo Theme Best Features

Drag and Drop Page Builder

3 Fully responsive layouts

Animated Image Grid background

Full-width background slideshow

Filterable portfolio

Pie chart skills

View Demo and Purchase Theme Here

AWSM – Responsive CV Portfolio Template

3. AWSM – Responsive CV Portfolio Template $14

AWSM is a funky and hip theme ideal as a CV or portfolio template. It contains different kinds of color schemes which will allow you to present your profile in a professional way. Other features that add to the professional feel of the theme are CAPTCHA and Google maps as well as CSS3 and jQuery animations.

AWSM Theme Best Features:

8 Color themes

Support for Google fonts

Filterable portfolio

Awesome Skills box

Awesome Projects box

jQuery Responsive Colorbox Gallery

View Demo and Purchase Theme Here

4. Spa Lab – Beauty Salon WordPress Theme $58

Created for hair salons, wellness centers, and other healthcare businesses, Spa Lab boasts of advanced features, such as menu card designs, shop and product, reservations, and many more. It also comes with powerful theme options to help you with your branding. The theme helps you create gallery pages for treatments, spread news using the blog, capture leads with news letters and special gifts.

Spa Lab Theme Best Features:

One Click Dummy Content Import

Unlimited Layout

Therapists / Procedures Pages

WooCommerce Shop

600+ Google Fonts for body, header, menu

Viusual Shortcode Generator

20 Preset Skins and Unlimited Color variation

Column management for every page & post, global settings also available

Sidebar Manager

View Demo and Purchase Theme Here

Sponshy – HTML5 / CSS3 Resume Template

5. Sponshy – HTML5 / CSS3 Resume Template $14

Sponshy has received an honorable mention on AWWWRDS for its responsiveness, clean design, and easy customization. Even its clients praise the theme for is clean and organized code. You can choose from three different styles and 14 pre-defined color schemes. It also comes with Mailchimp integration as well as a Flickr, Dribble, and Twitter feeds.

Sponshy Theme Best Features:

More than 600 icons

Font Awesome 4.2.0 integrated

Bootstrap 3.2.0 compatible.

Valid HTML5 Markup.

Smooth scroll.

Pricing tables.

Animated position text.

View Demo and Purchase Theme Here

Voxr – Responsive vCard WordPress Theme

6. Voxr – Responsive vCard WordPress Theme $38

Voxr is a fully responsive WordPress theme which works well with different devices, such as tablets, mobile phones, and desktops. It comes with demo data to let you set up your blog easily and an Admin Panel for fast and easy customization. It also has 6 pre-defined colors as well as an unlimited color option to help you customize your theme and make your own brand stand out.

Voxr Theme Best Features:

Bootstrap 3

2 custom widgets

More than 30 custom shortcodes

Animations

6 predefined themes & 12 predefined Patterns

Using jQuery

Lightbox

View Demo and Purchase Theme Here

Selfy – Responsive & Retina Ready WordPress Theme

7. Selfy – Responsive & Retina Ready WordPress Theme

Selfy is a theme that aims to promote you and your brand minus the technical hassles. Theme Canon especially designed this theme for those who do not know how to code and have little or no web design or development background. It comes with a video tutorial to walk you through the setup in a short time.

Selfy Theme Best Features:

2 Alternative homepage layouts

Full color and brand control

Full screen slider

Smart WordPress features

Blog and post options

4 Different gallery styles

Flex gallery plugin slider

View Demo and Purchase Theme Here

AgriTourismo – Responsive WooCommerce Theme

8. AgriTourismo – Responsive WooCommerce Theme $58

Although AgriTourismo is specially designed for wineries, it also works well with other businesses, such as an eCommerce store or a travel agency. The Page Builder allows you to choose from sliders, Twitter widgets, social share buttons, and many more. It also has a Visual Composer which allow you to drag and drop each element, saving you a lot of time.

AgriTourismo Best Features:

11 Different Blocks

Drag and Drop  Interface

Layer Slider

170+ 3D and 2D hardware accelerated transitions

BuddyPress Ready

WooCommerce Ready

View Demo and Purchase Theme Here

Doctype Persona – Responsive vCard Template

9. Doctype Persona – Responsive vCard Template $9

The Doctype Persona is a simple yet elegant business card template which has incorporated the card design to present your portfolio in an organized and professional manner. It has a reordering and sliding effects as well as contact information and resume page. If you are looking for a template to impress prospective clients, the Doctype Persona is a good one to start with.

Doctype Persona Best Features:

8 Different Background Patterns

Skeleton CSS Framework

jQuery Enhanced

Unlimited Color using LESS

Compatible with all major browsers

View Demo and Purchase Theme Here

Doe – Responsive Resume HTML Template

10. Doe – Responsive Resume HTML Template $14

Doe is another one-page HTML template which incorporates the use of card-based design in some of its features. The theme has a modern concept designed to impress clients and employers including sections that highlight each of your skills and work.

Doe Theme Best Features:

2 Layout Variations – Slider Parallax / Video Parallax

Skeleton Framework

One Page Parallax Design

Working Contact Form

Responsive Design

View Demo and Purchase Theme Here

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 includeproduct 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.

Conclusion

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.

Show more