Card design principles and case studies for municipal websites

[abby-lammers]

Current state: cards on Chicago.gov

The CDS will eventually include a variety of card styles for different content types. Cards are helpful for displaying content across different screen sizes and for displaying varying amounts of content. Chicago.gov is already using cards for some announcements and key links on the homepage:

Card principles

What is a card for?
A card is generally an entry point for a page (a link). Cards appear in card decks with other cards of the same category.

Here are some possible card categories based on current content of chicago.gov and other municipal websites:

• Announcement
• Featured content or resource
• Link to resource, guide, or information page
• Link to service or portal
• Link to action
• Person or team member
• News or event

Decision point: how should card design relate to the card category?

Cards will always be grouped by category. We need some visual way to note what category a card belongs to. There are two main ways of doing this:

1. Each category is visually distinct, which might involve the shape, size, color, font, and layout of that card. (See Boston.gov case study below)
2. Each category is distinguished by a color or icon. There are multiple card templates of different sizes, shapes, and layouts, and a category style (i.e. the color and icon) can be applied to any or multiple templates. (See Phila.gov case study below)

The CDS should aim to have the first type of card styles (visually distinct). However, the second option (distinguished by only color and iconography) may be easier for an initial version of development because it requires fewer designs.

Case study of Boston.gov card system: categories are visually distinct.

The Boston.gov website has, by my count, five categories of cards:

1. Key actions
2. News (cards associated with a date)
3. Person
4. Department
5. Resources, guides, etc.

While the styles aren't perfectly visually consistent, there are obvious visual categories.

Key action cards

Characteristics: square, black iconography, blue italicized font.

News and date cards

Characteristics: Ribbon with date, image to left, blue heading with gray subheading.

Person cards

Characteristics: Circular image, "send an email" link, blue heading and gray subheading.

Department cards

Characteristics: department icon, white background, rectangular.

Resource and guide cards

The most varied card type. No icons unless calling out a document or external link. Optional image. Three-across grid.

Case study of Phila.gov card system: card color and iconography determines category and can be applied to any card "template."

The Phila.gov website has, by my count, six categories of cards:

1. Announcement
2. Press release
3. Action guide
4. Featured
5. Post
6. Event

These cards can take a variety of shapes and can occupy a variety of grid layouts. Cards are clustered by category, but size, shape, and layout of cards do not relate to the category.

Color-coding for different cards

Various layouts that cards may take