Graphical Screen Design Part 1: Contrast, Repetition, Alignment, Proximity Lecture /slide deck produced by Saul Greenberg, University of Calgary, Canada.

Slides:



Advertisements
Similar presentations
Win8 on Intel Programming Course Win8 for developers, in detail Cédric Andreolli Intel.
Advertisements

Win8 on Intel Programming Course Desktop : WPF Cédric Andreolli Intel Software
10+10 Descending the Design Funnel Chapter 1.4 in Sketching User Experiences: The Workbook.
Intel Do-It-Yourself Challenge node.js
The State Transition Diagram
Internet of Things with Intel Edison GPIO on Edison
Win8 on Intel Programming Course Win8 and Intel Paul Guermonprez Intel Software
Why Should I Sketch? Chapter 1.2 in Sketching User Experiences: The Workbook.
Graphic Design, part 1.
The Keyboard Study Lecture /slide deck produced by Saul Greenberg, University of Calgary, Canada Notice: some material in this deck is used from other.
The Branching Storyboard Chapter 4.3 in Sketching the User Interface: The Workbook Image from:
Saul Greenberg User Centered Design Why User Centered Design is important Approaches to User Centered Design.
Graphical Screen Design CRAP – contrast, repetition, alignment, proximity Grids are an essential tool for graphical design Other visual design concepts.
CPSC 481 Foundations and Principles of Human Computer Interaction
Department of Computer Science
Saul Greenberg CPSC 481 Foundations and Principles of Human Computer Interaction James Tam.
CRAP contrast, repetition, alignment, proximity Slide deck by Saul Greenberg. Permission is granted to use this for non-commercial purposes as long as.
ESE Einführung in Software Engineering N. XXX Prof. O. Nierstrasz Fall Semester 2009.
Saul Greenberg CPSC 481 Foundations and Principles of Human Computer Interaction James Tam.
ESE Einführung in Software Engineering X. CHAPTER Prof. O. Nierstrasz Wintersemester 2005 / 2006.
Graphical User Interfaces Design and usability Saul Greenberg Professor University of Calgary Slide deck by Saul Greenberg. Permission is granted to use.
Foundations and Principles of Human Computer Interaction Slide deck by Saul Greenberg. Permission is granted to use this for non-commercial purposes as.
Metamodeling Seminar X. CHAPTER Prof. O. Nierstrasz Spring Semester 2008.
Saul Greenberg, James Tam Graphical Screen Design CRAP – contrast, repetition, alignment, proximity Grids are an essential tool for graphical design Other.
ESE Einführung in Software Engineering X. CHAPTER Prof. O. Nierstrasz Wintersemester 2005 / 2006.
N. XXX Prof. O. Nierstrasz Thanks to Jens Palsberg and Tony Hosking for their kind permission to reuse and adapt the CS132 and CS502 lecture notes.
James Tam CPSC 481 Foundations and Principles of Human Computer Interaction James Tam.
CP — Concurrent Programming X. CHAPTER Prof. O. Nierstrasz Wintersemester 2005 / 2006.
12. eToys. © O. Nierstrasz PS — eToys 12.2 Denotational Semantics Overview:  … References:  …
SWOT Analysis Strengths Weaknesses SWOT Opportunities Threats.
Sequential Storyboards Chapter 4.1 in Sketching the User Interface: The Workbook Image from:
CPSC 581 Human Computer Interaction II Interaction Design Lecture /slide deck produced by Saul Greenberg, University of Calgary, Canada Notice: some material.
PRINCIPLES OF EFFECTIVE DESIGN: THE JOSHUA TREE EPIPHANY C ontrast R epetition A lignment P roximity.
Collecting Images & Clippings Chapter 2.3 in Sketching User Experiences: The Workbook.
Win8 on Intel Programming Course Modern UI : Sensors Cédric Andreolli Intel Software.
Win8 on Intel Programming Course Modern UI : Features Cédric Andreolli Intel Software.
Win8 on Intel Programming Course The challenge Paul Guermonprez Intel Software
Graphical Screen Design Part 2: Analyzing designs and other visual design concepts Lecture /slide deck produced by Saul Greenberg, University of Calgary,
Win8 on Intel Programming Course Modern UI HelloWorld in HTML5/JS Cédric Andreolli Intel.
What is a sketch? Chapter 1.2 addendum Sketching User Experiences: The Workbook.
Internet of Things with Intel Edison Compiling and running Pierre Collet Intel Software.
© Copyright Showeet.com I NSERT YOUR TITLE HERE. © Copyright Showeet.com Insert Your Title Here 2 Master text styles –Second level Third level –Fourth.
The Animated Sequence Chapter 5.1 in Sketching User Experiences: The Workbook.
Internet of Things with Intel Edison CylonJS Pierre Collet Intel Software
© 2015 Core Knowledge Foundation. This work is licensed under a Creative Commons Attribution- NonCommercial-ShareAlike 3.0 Unported License.
The Sketchbook Chapter 1.4 in Sketching User Experiences: The Workbook.
Mario Čagalj University of Split 2014/15. Human-Computer Interaction (HCI)
Sketching Vocabulary Chapter 3.4 in Sketching User Experiences: The Workbook Drawing objects, people, and their activities.
Instructional Design CARP Principles
Win8 on Intel Programming Course Paul Guermonprez Intel Software
Design of Everyday Things Part 2: Useful Designs? Lecture /slide deck produced by Saul Greenberg, University of Calgary, Canada Images from:
With a focus on screen design and CRAP. The Joshua Tree Epiphany.
EngageNY.org ©2012 Core Knowledge Foundation. This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.
The Narrative Storyboard Chapter 4.4 in Sketching User Experiences: The Workbook.
Images of pesticides By: Leslie London, University of Cape Town This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 2.5.
Introduction to Interactive Media 09: Good Design is CRAP.
Design Principles Allowing you to create more professional web pages.
Conjunctiva Zonula Retina Aqueous humour Fovea Lens Pupil Optic nerve Cornea Iris Image by MIT OpenCourseWare.
Controlled Experiments Part 2. Basic Statistical Tests Lecture /slide deck produced by Saul Greenberg, University of Calgary, Canada Notice: some material.
Controlled Experiments
Sketching Vocabulary Chapter 3.4 in Sketching User Experiences: The Workbook Drawing objects, people, and their activities.
Methodology Overview basics in user studies Lecture /slide deck produced by Saul Greenberg, University of Calgary, Canada Notice: some material in this.
Task-Centered Walkthrough
Agenda Video pre-presentations Digital sketches & photo traces
Methodology Overview 2 basics in user studies Lecture /slide deck produced by Saul Greenberg, University of Calgary, Canada Notice: some material in this.
Graphical Screen Design
Cognitive Walkthrough
FOTW Worksheet Slides Christopher Penn, Financial Aid Podcast Student Loan Network.
Interface Design Interface Design
Interface Design and Usability
Presentation transcript:

Graphical Screen Design Part 1: Contrast, Repetition, Alignment, Proximity Lecture /slide deck produced by Saul Greenberg, University of Calgary, Canada Notice: some material in this deck is used from other sources without permission. Credit to the original source is given if it is known Image: R.Williams, Non-Designers Design Book, Peachpit Press

Learning CRAP C ontrast R epetition A lignment P roximity Grids Other visual design concepts consistency relationships organization legibility and readability navigational cues appropriate imagery familiar idioms

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

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

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

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

Original

Proximity

Alignment

Contrast

Repetition 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 Robin Williams Non-Designers Design Book, Peachpit Press title subtext three points main point sub point

You know now Your graphical design friends C ontrast R epetition A lignment P roximity

Articulate: who users are their key tasks User and task descriptions Goals: Methods: Products: Brainstorm designs Task centered system design Participatory design User- centered design Evaluate tasks Psychology of everyday things User involvement Representation & metaphors low fidelity prototyping methods Throw-away paper prototypes Participatory interaction Task scenario walk- through Refined designs Graphical screen design Interface guidelines Style guides high fidelity prototyping methods Testable prototypes Usability testing Heuristic evaluation Completed designs Alpha/beta systems or complete specification Field testing Interface Design and Usability Engineering

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. 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.