Designing Digital Scholarship Projects: CRAP design principles

Design principles & entry-level tools to begin developing digital scholarship projects
Need Help?

Ask us!

CRAP design principles

DesignLab (UW-Madison) uses the acronym CRAP for the four basic principles of design from graphic designer Robin Williams.

  • Contrast
  • Repetition
  • Alignment
  • Proximity

Contrast

Contrast draws attention to certain parts of a project. For designers, it's a way of getting audiences to focus on something. Contrast is the difference between elements where their combination makes some elements stand out from others.

  • Can be achieved through variations in size, color, line thickness, and spacing
  • Try to avoid elements that are weakly similar by making them strongly different

Emphasis

Contrast plays a large role in emphasis. The most contrasted element often appears to be th emost emphasized. Emphasis gives certain elements greater importance, significance, or stress. It often guides readers through the project as a whole in specific, emphasized ways.

Repetition

Repetition is the recurrence of elements throughout your project. For designers, it helps audiences move through a project. It may include navigation elements or a sense of identity across your project. Treating design elements consistently helps audiences understand the structure of your project.

  • Repeat visual elements such as color, shapes, textures, borders, and fonts to unify your design
  • Try to avoid too many differentiations that can confuse your audience

Alignment

Alignment refers to where text and images are positioned on a page or window. Placing elements next to or near each other or in alignment suggests they are related. For designers, alignment helps control how viewer's eyes move across a project space.

  • Place every element on the page with intention to create visual connections
  • Use “negative space” to avoid cramming too much into your project

Balance

Balance is the specifically vertical and horizontal alignmeant of elements across your page or window. Symmetrical designs create a sense of rest in the viewer. Asymmetrical designs suggest movement and guide viewers' eyes across your project space.

Proximity

Proximity involves placing ideas, images, and text that are related close or proximate to one another. Placing elements next to or near each other suggests they are related. For designers, proximity and placement helps suggest purpose to project audiences.

  • Placing elements close together creates a relationship between the elements
  • Similarly, adding “negative space” can create a disjoint
  • Make sure headings and labels are in close proximity to their relative content

Sources

DesignLab, "CRAP Principles" (University of Wisconsin–Madison): https://designlab.wisc.edu/resources/design-tips-and-tricks/crap-principles/.

Andrea Lunsford, Let's Talk: A Pocket Rhetoric (Norton, 2021).

Mike Palmquist and Barbara Wallraff, In Conversation: A Writer's Guidebook, third edition (Bedford/St. Martin's, 2023).

Cheryl E. Ball, Jennifer Sheppard, and Kristin L. Arola, Writer/Designer: A Guide to Making Multimodal Projects, third edition (Bedford/St. Martin's, 2022).