dain munro - interiors / graphics / websites
  • Monday, January 25th, 2016
Website Design

Delicious Examples of Card Based Websites

Card based design is most prominent now is websites ranging from news websites to social media networks  for example Facebook, Twitter, Pinterest and Google to name a few. What is cards design i hear, well simply put they are rectangles filled with content or images containing information to keep the user interested or entertained. But saying that it is just not a rectangle in your website, it is much more than a design scheme. A card must have functionality, purpose and be self-contained, if possible it can be flippable to show the reverse side, see homepage of this site to see an example.

When thinking of cards, think of a business card or drivers licence, the front side has a image or company name and the reverse side is more detailed information about that person or company. When creating a card design scheme keep in mind usability should always comes first and beauty second.

[adsense]

Types of Card Design Styles

Flat Design
Involves gradients, shadows and textures for the design technique, think more of flat buttons and flatter blocks.

Magazine Style
The magazine style contains a block with an image with some text on top or underneath serving as a teaser and leads towards more detailed information in another webpage or website. As the name says this form of design is used in magazines and news websites, ideal for content heavy websites, think of blogs or websites that are regularly updated.

Pin Style (think of pinterest)
This form of style was mainly used by pinterest in its early stages, the pin style incorporates links and content styles including videos, forms, images and social sharing tools and also some designs have used the likes of the facebook notifications or twitter updates.

Grid Layout
Grid layout sometimes is also called masonary style, it contains blocks that are evenly spaced out in the design some using the gutter between blocks and are displayed within a grid or container. In some grid layout websites they also incorporate the likes of jquery and css3 to help it repond smoothly to mobile and tablet sized screens.

 

Some Examples of card design

pinterest Dash MCQ MAP Roger Townsend Faebric
(Visited 20 times, 1 visits today)

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Images provided by mediafire

Copyright © 2018 - Dain Munro