CRAP contrast, repetition, alignment, proximity Slide deck by Saul Greenberg. Permission is granted to use this for non-commercial purposes as long as.

Slides:



Advertisements
Similar presentations
contrast, repetition, alignment, proximity
Advertisements

Principles of Layout Design The purpose of this presentation is to demonstrate the four basic steps to effective layout designs. These steps can be applied.
Graphic Design, part 1.
#4 Visual literacy Gunnar Stevens Human Computer Interaction
Graphical Screen Design CRAP – contrast, repetition, alignment, proximity Grids are an essential tool for graphical design Other visual design concepts.
James Tam Graphical Screen Design CRAP (contrast, repetition, alignment, proximity) Grids are an essential tool for graphical design Other important graphical.
Saul Greenberg Graphical Screen Design Grids are an essential tool for graphical design Important graphical design concepts include visual consistency.
CRAP design model C ontrast R epetition A lignment P roximity William, R. (1994) The Non-Designer’s Design Book. Berkeley, CA: Peachpit Press.
SIMS 213: User Interface Design & Development Marti Hearst Thurs, Feb 27, 2003.
Saul Greenberg Graphical Screen Design Grids are an essential tool for graphical design Important graphical design concepts include visual consistency.
SIMS 213: User Interface Design & Development Marti Hearst Tues Mar 15, 2005.
Web Site Design Marti Hearst (UCB SIMS) SIMS 213, UI Design & Development April 6, 1999.
SIMS 213: User Interface Design & Development Marti Hearst Thurs Feb 8, 2001.
Saul Greenberg, James Tam Graphical Screen Design CRAP – contrast, repetition, alignment, proximity Grids are an essential tool for graphical design Other.
More Pathological Designs Usable, useful and aesthetic? Slide deck by Saul Greenberg. Permission is granted to use this for non-commercial purposes as.
Four Basic Design Principles
Screen Design. Guidelines for controls (Dix et al.) Place controls that are functionally related together. If controls are used sequentially, organize.
The Four Basic Principles C ontrast R epetition A lignment P roximity.
Basic Principles of DESIGN Bristol Community College Bristol Community College Paula Mailloux Sources: The Non-Designers Design Book The Non-Designers.
PRINCIPLES OF EFFECTIVE DESIGN: THE JOSHUA TREE EPIPHANY C ontrast R epetition A lignment P roximity.
Mario Čagalj University of Split 2013/2014. Human-Computer Interaction (HCI)
Graphical Screen Design Part 1: Contrast, Repetition, Alignment, Proximity Lecture /slide deck produced by Saul Greenberg, University of Calgary, Canada.
4 design principles for web publishing (the non-designer’s web book, by robin williams) Leong Lee, Ph.D. University of Missouri (MS&T) Assistant Professor,
The Non-Designer’s Design Book
Introduction to Visual Literacy. Essential Questions: What does it mean to be a “Visually Literate Person” (VLP)? Why is it important for teachers and.
Page Design CMPT 281. Announcements Outline Graphic design Components of visual languages Design factors in interfaces Techniques: – Clustering – Grids.
Graphical Screen Design Part 2: Analyzing designs and other visual design concepts Lecture /slide deck produced by Saul Greenberg, University of Calgary,
D ESIGN P RINCIPLES 1 “The point of design is to encourage and facilitate communication between the viewer and the media being viewed. Effective design.
Principles of Layout Design The purpose of this presentation is to demonstrate the four basic steps to effective layout designs. These steps can be applied.
IS1824: Introduction to Internet Multimedia Lecture 7: Style 1 (Layout and Colour) Rob Gleasure
This lesson has been adapted from “AIOT Graphic Design Lesson 7: Proximity, Alignment, Repetition, and Contrast” The original lesson and many other graphic.
The Non-Designer’s Design Book Design and Typographic Principles for the Visual Novice By Robin Williams.
Effective Graphic Design
Design Principles From The Non-Designer’s Design Book Second Edition by Robin Williams.
General principles of publication design Magazine Design and Production COMM 3003.
Non-designer’s design principles Dr. Shuyan Wang.
Basic Elements of Design
MARKETING 40S Four Basic Principles C.R.A.P. (Contrast, Repetition, Alignment, Proximity)
Presentation or Visual Design Gabriel Spitz 1 Lecture # 15.
Four Principles of Design Dr. Allene Cooper. I gratefully acknowledge the ideas and words of Robin Williams which I’ve used liberally in this presentation.
Instructional Design CARP Principles
Elements of Design Presentation designed by Dr. James Lenze Model: Williams R. (2004), The Non-Designer’s Design Book, Second Edition, Peachpit Press What.
Desktop Publishing D ESIGN P RINCIPLES 1 “The point of design is to encourage and facilitate communication between the viewer and the media being viewed.
Principles of Document Design Adapted from
Basic Design Principles Unlocking the Secrets to Creating Professional Documents.
Desktop Publishing CRAP.
DESKTOP PUBLISHING. WHAT IS DESKTOP PUBLISHING BASICS OF GRAPHIC DESIGN The elements of graphic designThe elements of graphic design ““ The principles.
With a focus on screen design and CRAP. The Joshua Tree Epiphany.
Creating an Effective Brochure Excerpted from The Non-Designer’s Design Book, 2 nd Ed. By Robin Williams. ©2004 Reprinted with permission of Pearson Education,
PRINCIPLES OF DESIGN Proximity, Alignment, Repetition & Contrast.
C R A P ONTRAST EPETITION ALIGNMENT ROXIMITY good design has By Kate Hansen - Adapted from Robin Williams The Non-Designer’s Design Book.
Introduction to Interactive Media 09: Good Design is CRAP.
Design Principles Allowing you to create more professional web pages.
D ESIGN P RINCIPLES 1 “The point of design is to encourage and facilitate communication between the viewer and the media being viewed. Effective design.
C.R.A.P. (OR C.A.R.P.) FORMULA The Non-Designer’s Design Book.
…so I typed in “bad design” in Pinterest …. The basic of all design: FORM FOLLOWS FUNCTION.
Conjunctiva Zonula Retina Aqueous humour Fovea Lens Pupil Optic nerve Cornea Iris Image by MIT OpenCourseWare.
Effective Poster Design: The Non-Designer’s Design Book by Robin Williams Dec 2010.
Desktop Publishing Business Cards Your LogoYour own footer.
Four important design principles to improve your work
Spreadsheet Design Using color C.R.A.P. Fonts and font effects.
Design basics for web, print, powerpoint, doodling on napkins, and more by Lisa Blankenship, rev
Previously Covered Material
Design for Effective Communication
Graphical Screen Design
Basics of Visual Design
C.R.A.P. Design Principles
C.R.A.P. Design Principles
Interface Design Interface Design
Presentation transcript:

CRAP contrast, repetition, alignment, proximity 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. Major sources: Designing Visual Interfaces, Mullet & Sano, Prentice Hall / Robin Williams Non-Designers Design Book, Peachpit Press

Saul Greenberg CRAP C ontrast R epetition A lignment P roximity Robin Williams Non-Designers Design Book, Peachpit Press

Saul Greenberg CRAP C ontrast –make different things different –brings out dominant elements –mutes lesser elements –creates dynamism R epetition A lignment P roximity Robin Williams Non-Designers Design Book, Peachpit Press

Saul Greenberg CRAP C ontrast R epetition –repeat design throughout the interface –consistency –creates unity A lignment P roximity Robin Williams Non-Designers Design Book, Peachpit Press

Saul Greenberg CRAP C ontrast R epetition A lignment –creates a visual flow –visually connects elements P roximity Robin Williams Non-Designers Design Book, Peachpit Press

Saul Greenberg CRAP C ontrast R epetition A lignment P roximity –groups related elements –separates unrelated ones Robin Williams Non-Designers Design Book, Peachpit Press 1 2 3

Saul Greenberg Where does your eye go? CRAP combines to give you cues of how to read the graphic Robin Williams Non-Designers Design Book, Peachpit Press title subtext three points main point sub point

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:  

Original

Proximity

Alignment

Contrast

Repetition

Saul Greenberg Webforms 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

IBM's Aptiva Communication Center No regard for order and organization

Haphazard layout Mullet & Sano

Repairing the layout Mullet & Sano

Spatial Tension Mullet & Sano

Using explicit structure as a crutch Mullet & Sano

Redesigning a layout using alignment and factoring Mullet & Sano