Web Design Resources

Cards

Description: add visual appeal to a landing page; big touchable area; images can provide information scent.


Do

  • group ideas into categories and emphasize multiple links in unordered lists
  • keep images above the header position
  • stay consistent with "whole card as link":  Human Identification Lab

Don't

  • use more than 6 cards
  • use cards as buttons
  • use generic images that provide no helpful visual insight to your subject
  • make the whole card a link if you have more than 1 sentence, less than 20 words text within it
  • mix linking and non-linking cards: Geography Majors
  • put an image inside a card if there is no other card content
  • use multiple links within a single card. Since the whole card can be clickable, having other links nested within the card will break it.