Graphical Design - University of Calgary

Graphical Design - University of Calgary

CRAP contrast, repetition, alignment, proximity Major sources: Designing Visual Interfaces, Mullet & Sano, Prentice Hall / Robin Williams Non-Designers Design Book, Peachpit Press Slide deck by Saul Greenberg. Permission is granted to use this for non-commercial purposes as long as general credit to Saul Greenberg is clearly maintained. Warning: some material in this deck is used from other sources without permission. Credit to the original source is given if it is known. CRAP

Contrast Repetition Alignment Proximity Robin Williams Non-Designers Design Book, Peachpit Press Saul Greenberg

CRAP Contrast

make different things different brings out dominant elements mutes lesser elements creates dynamism Repetition Alignment Proximity

1 2 3 4 5 Robin Williams Non-Designers Design Book, Peachpit Press Saul Greenberg

CRAP Contrast Repetition repeat design throughout the interface consistency creates unity 1

Alignment Proximity Robin Williams Non-Designers Design Book, Peachpit Press 3 2

4 Saul Greenberg CRAP Contrast Repetition Alignment

1 creates a visual flow visually connects elements Proximity 3

Robin Williams Non-Designers Design Book, Peachpit Press 4 2 Saul Greenberg CRAP

Contrast Repetition Alignment Proximity 1 groups related elements separates unrelated ones

2 3 Robin Williams Non-Designers Design Book, Peachpit Press Saul Greenberg Where does your eye go? CRAP combines to give you cues of how to read the graphic

title subtext three points main point sub point Robin Williams Non-Designers Design Book, Peachpit Press

Saul Greenberg Where does your eye go? Boxes do not create a strong structure CRAP fixes it

Robin Williams Non-Designers Design Book, Peachpit Press Saul Greenberg Where does your eye go? Some contrast and weak proximity ambiguous structure interleaved items

Robin Williams Non-Designers Design Book, Peachpit Press Saul Greenberg Where does your eye go? Strong proximity (left/right split) unambiguous

Robin Williams Non-Designers Design Book, Peachpit Press Saul Greenberg Where does your eye go? the strength of proximity alignment

white (negative) space explicit structure a poor replacement Mmmm: Mmmm: Mmmm: Mmmm:

Mmmm: Mmmm: Mmmm: Mmmm: Mmmm:

Mmmm: Mmmm: Mmmm: Mmmm:

Mmmm: Mmmm: Saul Greenberg Original

Proximity Alignment Contrast Repetition

Terrible alignment no flow Poor contrast cannot distinguish colored labels from editable fields Poor repetition

buttons do not look like buttons Poor explicit structure replaces proximity Webforms blocks compete with alignment Saul Greenberg

No regard for order and organization IBM's Aptiva Communication Center Haphazard layout Mullet & Sano

Repairing the layout Mullet & Sano Mullet & Sano Spatial Tension

Mullet & Sano Using explicit structure as a crutch Redesigning a layout using alignment and factoring Mullet & Sano

Recently Viewed Presentations

  • Age of Jefferson

    Age of Jefferson

    - Thomas Jefferson, April 13, 1820 Adams-Onis Treaty (1819) Era of Good Feelings Monroe Doctrine (1823) U.S. and Great Britain concerned about European expansion into Americas John Q. Adams authored Points Americas no longer to subject to European colonization Europe...
  • Powerpoint Jeopardy

    Powerpoint Jeopardy

    Write the equation. ANSWER: (-7°F; 14°F + -21°F = -7°F) Real Life - 50 Points QUESTION: A snorkeler descends into the Atlantic Ocean and reaches 285 feet. Write an integer to represent the situation below, and tell the value of...
  • Snímek 1 - zsnastrani.cz

    Snímek 1 - zsnastrani.cz

    a lodí přes oceán. Trvalo to dlouho; poslední vojáci opouštěli Vladivostok až v roce 1920. Legie se v Rusku střetly s novou ruskou bolševickou vládou, což přerostlo v ozbrojený konflikt.
  • THE HUTUS AND TUTSIS - Welcome to Mrs. Doyle's History Site!

    THE HUTUS AND TUTSIS - Welcome to Mrs. Doyle's History Site!

    Hutus used different "tools" or methods to carry out the genocide: assassinations, death lists, hate propaganda, demonizing, civilian militias, and rape. Almost one million people were killed during 100 days of genocide. The United Nations "estimated that at least a...
  • Interviews and Questionnaires (based on notes from Marilyn ...

    Interviews and Questionnaires (based on notes from Marilyn ...

    Run a pilot study to identify issues Gain acceptance Dress like the interviewee Learn about their world Interview practicalities 2 Ask them to sign informed consent form Indicate interview beginning & end to them If recording interview, check equipment in...
  • Challenges and healthy ageing: the role of resilience

    Challenges and healthy ageing: the role of resilience

    Challenges and healthy ageing: the role of resilience across the life course (ResNet) Meeting on May 19th 2009 at Bangor University Definitions and determinants of resilience
  • Elevation Comparison of Predation by Syrphid Flies on Willow ...

    Elevation Comparison of Predation by Syrphid Flies on Willow ...

    # Fly Eggs per Beetle Clutch. No Influence of Beetle Egg Clutch Size on Fly Presence % Flies present in Beetle clutches. Flies Not Found in Big Pine Creek. Egg clutch size. Drainage # Eggs per Clutch. Egg Clutch Size....
  • The Thomas-Killman Conflict Mode Instrument

    The Thomas-Killman Conflict Mode Instrument

    Gets to heart of issue. Moves people beyond polarized positions. Sets stage for mutual understanding. Leads to group cooperation. Sets stage for issue re-framing. Sets stage for generating creative options. Examples of two positions: The Thomas-Killman Conflict Mode Instrument No...