1 / 16

Instructional Design CARP Principles

Instructional Design CARP Principles. MSET 593 Multimedia Literacy Dr. Kingsley. CARP contrast, alignment, repetition, proximity. Major sources: Designing Visual Interfaces, Mullet & Sano, Prentice Hall / Robin Williams Non-Designers Design Book, Peachpit Press.

tucker
Download Presentation

Instructional Design CARP Principles

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Instructional Design CARP Principles MSET 593 Multimedia Literacy Dr. Kingsley

  2. CARPcontrast, alignment, repetition, 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.

  3. CARP • Contrast • Alignment • Repetition • Proximity Robin Williams Non-Designers Design Book, Peachpit Press

  4. CARP • Contrast • make different things different • brings out dominant elements • mutes lesser elements • creates dynamism • Alignment • Repetition • Proximity Robin Williams Non-Designers Design Book, Peachpit Press

  5. CARP (aka: CRAP) • Contrast • Repetition • repeat design throughout the interface • consistency • creates unity • Alignment • Proximity Robin Williams Non-Designers Design Book, Peachpit Press

  6. CARP/CRAP • Contrast • Repetition • Alignment • creates a visual flow • visually connects elements • Proximity Robin Williams Non-Designers Design Book, Peachpit Press

  7. CARP • Contrast • Alignment • Repetition • Proximity • groups related elements • separates unrelated ones Robin Williams Non-Designers Design Book, Peachpit Press

  8. Where does your eye go? • CARP combines to give the viewer cues about how to read the graphic title subtext three points main point sub point Robin Williams Non-Designers Design Book, Peachpit Press

  9. Where does your eye go? • Sometimes boxes do not create a strong structure • CARP can fix it Robin Williams Non-Designers Design Book, Peachpit Press

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

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

  12. Examples: Where does your eye go? • 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 • blocks compete with alignment

  13. No regard for order andorganization IBM's Aptiva Communication Center

  14. Haphazard layout Mullet & Sano

  15. Repairing the layout Mullet & Sano

  16. Redesigning a layout using alignment Mullet & Sano

More Related