Website design patterns: 4 dos and don'ts

In this article, we'll go over:

1. Callout Cards
2. Copy Design
3. Content Hierarchy
4. Headings on Images

1. Callout cards

Design purpose

Callout cards are a common pattern that groups content into a readable and scannable layout. This pattern works best for highlighting a collection of information and only touches on each item's main idea.

Character count suggestion: 60-90

Here's why:

The card on the left has too much information. It's harder to read because it's center-aligned and doesn't support scannability best practices. The card on the right calls out the subject's main idea, which should only be one or two sentences long, and it's quicker to scan.

If content reduction is not an option, consider using a design pattern that accommodates dense information.

2. Copy design

Design purpose

Copy design should come from a mobile-first strategy. Meaning, we are thinking and designing how people read, engage, and behave with websites on mobile devices. Mobile-first copy is concise and reads at an eighth-grade level.

Here's why:

We read websites by scanning headlines, body copy, and images to search for specific keywords. Why? Because we are looking for what's important and valuable to us.

A long paragraph could look daunting. If it does, we might ask ourselves, "Is it worth reading?"

3. Content hierarchy

Design purpose

Content hierarchy guides the user to the most essential information. Establishing an order can be done by combining different colors, font sizes, and/or content placement (top vs. bottom, left to right).

Content hierarchy supports scannability and readability. 

Here's why:

The top-left example doesn't distinguish the information below the image. The copy is in the same font size, weight, and color. This makes the text harder to scan, and it's unclear where our eyes are supposed to go, which means we could miss important information.

The bottom-left example has colors and font sizes that compete for attention, making all of the copy blend together in importance.

4. Headings on images

Design purpose

Adds a visual representation to the message or heading. The text placement over the image combines the words with the image to create visual messaging. The image and text work together to call attention.

Here's why:

Design perspective: The image and text are supposed to work together to drive a specific message or value. When text is placed over the image's main subject, we tell the user that the text is more important than the image. The image becomes noise and is less likely to support what we're trying to say.

Usability perspective: The text is also hard to read when placed on an image with a lot going on (different colors and multiple people in this example). A color overlay could improve usability, but then we are taking away the primary purpose of this design pattern. Consider using images with one main subject, empty space for text placement, and a more focused color palette.