Transcript Graphical Design - University of Calgary

Graphical Screen Design
Part 1: Contrast, Repetition, Alignment, Proximity
Lecture /slide deck produced by Saul Greenberg, University of Calgary, Canada
Image: R.Williams, Non-Designers Design Book, Peachpit Press
Notice: some material in this deck is used from other sources without permission. Credit to the original source is given if it is known
Learning CRAP
Contrast
Repetition
Alignment
Proximity
Grids
Other visual design concepts
•
•
•
•
consistency
organization
navigational cues
familiar idioms
relationships
legibility and readability
appropriate imagery
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
CRAP
Contrast
Repetition
• repeat design throughout the interface
• consistency
• creates unity
1
Alignment
Proximity
3
2
4
Robin Williams Non-Designers Design Book, Peachpit Press
CRAP
Contrast
Repetition
Alignment
1
• creates a visual flow
• visually connects elements
Proximity
3
4
2
Robin Williams Non-Designers Design Book, Peachpit Press
CRAP
Contrast
Repetition
Alignment
Proximity
1
• groups related elements
• separates unrelated ones
2
3
Robin Williams Non-Designers Design Book, Peachpit Press
Original
Proximity
Alignment
Contrast
Repetition
We still need to
tune this page, but
it’s a better starting
point
We still need to
tune this page, but
it’s a better starting
point
The Squint Test
Squint your eyes
• step back
• what stands out?
Things to look for
•
•
•
•
foreground / background
dominant vs. muted elements
connections and relationships
hierarchies
Robin Williams Non-Designers Design Book, Peachpit Press
Modifed from Robin Williams Non-Designers Design Book, Peachpit Press
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
You know now
Your graphical design friends
Contrast
Repetition
Alignment
Proximity
Interface Design and Usability Engineering
Goals:
Articulate:
•who users are
•their key tasks
Task
centered
system
design
Methods:
Participatory
design
Evaluate
tasks
Usercentered
design
Brainstorm
designs
Psychology of
everyday
things
Participatory
interaction
User involvement
Task scenario
Representation & walkmetaphors
through
low fidelity
prototyping
methods
Products:
User and
task
descriptions
Throw-away
paper
prototypes
Refined
designs
Graphical
screen
design
Interface
guidelines
Style
guides
Completed
designs
Usability
testing
Field
testing
Heuristic
evaluation
high fidelity
prototyping
methods
Testable
prototypes
Alpha/beta
systems or
complete
specification
Primary Sources
This slide deck is partly based on concepts as
taught by:
• Designing Visual Interfaces, Mullet & Sano, Prentice Hall
• Robin Williams Non-Designers Design Book, Peachpit Press
Permissions
You are free:
•
to Share — to copy, distribute and transmit the work
•
to Remix — to adapt the work
Under the following conditions:
Attribution — You must attribute the work in the manner specified by the author (but not in any way that suggests that
they endorse you or your use of the work) by citing:
“Lecture materials by Saul Greenberg, University of Calgary, AB, Canada.
http://saul.cpsc.ucalgary.ca/saul/pmwiki.php/HCIResources/HCILectures”
Noncommercial — You may not use this work for commercial purposes, except to assist one’s own teaching and training
within commercial organizations.
Share Alike — If you alter, transform, or build upon this work, you may distribute the resulting work only under the same or
similar license to this one.
With the understanding that:
Not all material have transferable rights — materials from other sources which are included here are cited
Waiver — Any of the above conditions can be waived if you get permission from the copyright holder.
Public Domain — Where the work or any of its elements is in the public domain under applicable law, that status is in no
way affected by the license.
Other Rights — In no way are any of the following rights affected by the license:
•
Your fair dealing or fair use rights, or other applicable copyright exceptions and limitations;
•
The author's moral rights;
•
Rights other persons may have either in the work itself or in how the work is used, such as publicity or privacy
rights.
Notice — For any reuse or distribution, you must make clear to others the license terms of this work. The best way to do
this is with a link to this web page.