Graphical Screen Design Part 1 Contrast Repetition Alignment
- Slides: 25
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 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.
- Contrast repetition alignment proximity examples
- Crap contrast repetition alignment proximity
- Crap contrast repetition alignment proximity
- Contrast repetition alignment proximity
- Contrast repetition alignment proximity
- Horizontal and vertical lines
- Graphical screen design
- Compare two sequences
- Pam1250
- Global alignment vs local alignment
- Global and local alignment
- Jonathan pevsner
- Screen small screen offscreen
- Double contrast vs single contrast
- Repetition in design
- Bandwagon in ads
- Basic principles of input design
- Principles of user interface design
- How to linearize a top opening parabola
- Design principles alignment
- Geometric design of railway
- Strategic choices in designing internal structure
- Alignment definition graphic design
- Menu screen design
- Screen design and layout in hci
- Screen layout design