hostmonster-Host Unlimited Domains on 1 Account   coolhandle offering reliable webhosting since 2001
Unlimited Hosting Space - FREE Site Builder   Smart Website Solutions for Your Small Business=

Cards in Web Design: The Ultimate Guide


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

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.

2015_07_21_19_47_16_Featured_Dark_Roast

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

2015_07_22_08_36_56_Flato_

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

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

2015_07_29_18_57_14_spa_lab_Just_another_WordPress_site

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

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

Screen Shot 2015-07-23 at 1.45.35 PM

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

2015_07_29_19_02_48_Birch_by_Theme_Canon

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

2015_07_29_20_01_13_

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

2015_07_30_08_10_22_html.doctype_themes.com_personna_v1.2_portfolio

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

2015_07_30_10_10_17_Home_Resume_Site

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.

Article source: http://www.1stwebdesigner.com/cards-in-web-design/

Tags:


Submit a Review




If you want a picture to show with your review, go get a Gravatar.

1&1 has shared hosting and dedicated hosting solutions for every budget and free domains with all hosting packages!  StartLogic - Affordable hosting: Free setup/domain, unlimited emails, PHP, mySQL, CGI, FrontPage. As low as $3.95/month
Cloud ecommerce platform delivers more traffic, higher conversion and unmatched performance

© Copyright 2008 Tyconia International, Inc. All Rights Reserved.