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.