William H. Bowers – Designing Look and Feel Cooper 19.

Slides:



Advertisements
Similar presentations
Choose the Proper Screen-Based Controls
Advertisements

contrast, repetition, alignment, proximity
Chapter 14. Creating Graphics © 2004 by Bedford/St. Martin's1 Graphics Are Important in Technical Communication Because They Can: Help you communicate.
LAYOUT OF PAGE ELEMENTS September 24 th, Importance of Layout  “Page layout is the art of manipulating the user’s attention on a page to convey.
38 1 Traditional Graphical Interfaces: Form Sus Lundgren.
Principles of Graphic Design with some background on Web 2.0 styles.
SIMS 213: User Interface Design & Development Marti Hearst Thurs Feb 8, 2001.
CMPUT 301: Lecture 25 Graphic Design Lecturer: Martin Jagersand Department of Computing Science University of Alberta Notes based on previous courses by.
Designing Pages and Screens Comm Arts II Mr. Wreford.
Chapter 6.1 Visual Design. 2 Visual Design The management and presentation of visual information Two dimensional & three dimensional communication The.
The four basic principles of design
Chapter 2 Web Site Design Principles Principles of Web Design, 4 th Edition.
ID-2050 The “Design” Lecture. Today Document Design Information Design Tufte’s “Data Maps” BREAK Graphical Excellence in practice.
Graphic Design: An Overview for Effective Communication.
14-Aug-15 Design Principles. Design principles In The Non-Designer’s Design Book: Design and Typographic Principles for the Visual Novice, Robin Williams.
Why.ppt? 2.How to approach? 3.Major elements? 4.Basic principle and Guidelines 5.Golden tips 4.
Copyright 1999 all rights reserved Human Visual Understanding System n Anything that is seen by our eyes has to be processed n The processing difficulty.
Process of __________, arranging, & ______________ visual elements of art to accomplish or address a particular purpose  Elements of Visual Design 
Basic Principles of DESIGN Bristol Community College Bristol Community College Paula Mailloux Sources: The Non-Designers Design Book The Non-Designers.
Introduction To Graphic Design. What is graphic design? Graphic design is the process and art of combining text and graphics and communicating an effective.
WEB DESIGN TIPS FOR DESIGNING A WEB PAGE. PURPOSE OF WEBSITE To inform To persuade To market/sell To entertain To advocate KNOW YOUR PURPOSE!
Designing User Interfaces User Interface: People’s perception of “The Product” Good UIs have two well-integrated conceptual parts: –Form / Visual Design.
Design Principles for PowerPoint
Design. Hard design - increase control. - Displays are more virtual / artificial. Marketplace pressure: - Adding operations cheaper. Adding controls expensive.
Multimedia & The World Wide Web winny HCI 201 Multimedia and the www.
the rhetorical situation  audience  purpose  context design principles  contrast  repetition  alignment  proximity.
© Anselm Spoerri Lecture 14 Course Review –Course Objectives –Design Principles Evaluation Criteria used for Term Project.
ART DESIGN AND STYLE TERMS. COMPOSITION The plan, placement, or arrangement of the elements in an art work.
Design Basics Introduction Color Type J187 Class 2 IIMM J187 Introduction to Interactive Multimedia.
Principles By: Donna Deerfield Design. Design Principles Contrast Repetition Proximity Balance Unity Alignment Click on the pictures to review each principle.
Principles of Good Screen Design
Understand the Principles of Good Screen Design. Introduction A well-designed screen: Reflects the capabilities, needs, and tasks of its users. Is developed.
the rhetorical situation  audience  purpose  context design principles  arrangement  emphasis  contrast  repetition  alignment  proximity (some)
Design Principles Web Design. Design Principles  Contrast  Repetition  Alignment  Proximity.
VERITAS Confidential Graphic Design Shashank Deshpande VERITAS Software July, 2003.
Chapter 2 Web Site Design Principles Principles of Web Design, Third Edition.
Designing User Interfaces User Interface: People’s perception of “The Product” Good UIs have two well-integrated conceptual parts: –Form / Visual Design.
Virtual University - Human Computer Interaction 1 © Imran Hussain | UMT Imran Hussain University of Management and Technology (UMT) Lecture 40 Observing.
Chapter 2 Web Site Design Principles Principles of Web Design, 4 th Edition.
PowerPoint: Beginner Level Pointers Mrs. L. Paschitti.
ELEMENTS OF VISUAL DESIGN Designing Cohesive Visuals for Print and Digital.
Presentation or Visual Design Gabriel Spitz 1 Lecture # 15.
Dr Dat Tran - Week 1 Lecture Notes 1 User Interface Design Programming Graphical User Interfaces PG (7110) University of Canberra School of Information.
Design Elements of Graphical Representation, (Factors supporting appearance and functionality of solutions). P0CCUAA.
Basic Design Tips for Web Pages. Alignment Left, right, center Choose one alignment and use it on the entire page Align form elements, table elements,
Visual design The “look” of your interface. Role of Graphic Design What someone initially encounters – Sets a framework for understanding content.
The basic Principles of Design The following is a brief overview of the principles of design. Although they are discussed separately, they are really interconnected.
0707 IAT 102 Graphic Design Design Basics Design Tools.
Step 3: Continue…. Grouping Aids in establishing structure and meaningful form In addition to providing aesthetic appeal, grouping has been found to:
Graphic Design. What is it? Process of combining text and graphics to communicate an effective message through the design of logos, graphics, brochures,
With a focus on screen design and CRAP. The Joshua Tree Epiphany.
Informational Design.  Informational Design involves determining a Web page’s content  Content – text and graphics  A successful Web page uses words.
Introduction to Interactive Media 09: Good Design is CRAP.
3461 Laying Out Components Principles of Good Screen Design Galitz, W. O., (2002) The Essential Guide to User Interface Design, 2nd Edition, Wiley Computer.
Olsavsky Presentations and PowerPoint John Olsavsky SUNY College at Fredonia.
EDS 2320 Lubbock Christian University. Presentation Design  Limit the use of text Short, bulleted text is best Use graphics instead of text, if possible.
Imran Hussain University of Management and Technology (UMT)
Four important design principles to improve your work
Principles of Good Screen Design
8/18/2016 Web Development and Interactive Media
Chapter 6.1 Visual Design.
Chapter 6.1 Visual Design.
Design Principles 8-Dec-18.
Introduction UI designer stands for User Interface designer. UI designing is a type of process that is used for making interfaces in the software or the.
Step-3: Principles of Good Interface and Screen Design
Cooper Part II Making Well-Behaved Products Visual Design
Design Principles 5-Apr-19.
Interface Design Interface Design
The four basic principles of design
The four basic principles of design
Presentation transcript:

William H. Bowers – Designing Look and Feel Cooper 19

William H. Bowers – Visual Art vs. Visual Design Artists produce artifacts to provoke an aesthetic response Artists produce artifacts to provoke an aesthetic response Art is self-expressive Art is self-expressive Art meets the artist’s goals Art meets the artist’s goals Visual design meets the goals of the user, not the designer Visual design meets the goals of the user, not the designer Communicates to the end user Communicates to the end user

William H. Bowers – Graphic Design and Visual Interface Design Design is within a functional framework Design is within a functional framework Designer must understand color, typefaces, form and composition Designer must understand color, typefaces, form and composition Also must understand interaction with and the behavior of the software Also must understand interaction with and the behavior of the software

William H. Bowers – Graphic Design and UIs Graphic design has been mostly print Graphic design has been mostly print Graphic designers understand visual principles Graphic designers understand visual principles Weaker understanding of software and UIs Weaker understanding of software and UIs

William H. Bowers – Visual Interface and Information Design Some graphic design skills necessary Some graphic design skills necessary Focus is on organizational aspects Focus is on organizational aspects Must be knowledgeable of interaction Must be knowledgeable of interaction Match visual structure with logical Match visual structure with logical

William H. Bowers – Visual Interface and Information Design Communicate program states to users Communicate program states to users In web design, content outweighs function In web design, content outweighs function Work closely with information architects Work closely with information architects

William H. Bowers – Visual Information Design Principles Avoid visual noise and clutter Avoid visual noise and clutter Use contrast, similarity and layering Use contrast, similarity and layering Provide structure and flow Provide structure and flow Be cohesive, consistent and appropriate Be cohesive, consistent and appropriate Integrate style and function Integrate style and function

William H. Bowers – Avoid Visual Noise and Clutter Superfluous visual elements Superfluous visual elements Makes it impossible to communicate Makes it impossible to communicate Over embellished elements Over embellished elements Overuse of lines and rules Overuse of lines and rules Jumbled, overcrowded screens Jumbled, overcrowded screens Too much functionality in too little space Too much functionality in too little space

William H. Bowers – Avoid Visual Noise and Clutter Keep non-entertainment UI’s simple Keep non-entertainment UI’s simple Use simple forms and graphics Use simple forms and graphics Muted (less saturated) colors Muted (less saturated) colors One or two fonts in one or two sizes One or two fonts in one or two sizes Make similar items appear similar Make similar items appear similar Use controls that can serve multiple purposes Use controls that can serve multiple purposes

William H. Bowers – Contrast Visual contrast between active and passive elements Visual contrast between active and passive elements Contrast between logical sets Contrast between logical sets Can indicate importance Can indicate importance Pseudo 3D Pseudo 3D Hue, saturation and brightness Hue, saturation and brightness Spatial (positional) contrast Spatial (positional) contrast Shape, orientation, size Shape, orientation, size

William H. Bowers – Layering Receding Receding –Dark –Cool –Desaturated –Small elements

William H. Bowers – Layering Advancing Advancing –Light –Warm –Saturated –Large elements

William H. Bowers – Figure and Ground We usually perceive We usually perceive –Light objects as figures –Dark objects as background Center the figures on the background Center the figures on the background Give figures and background equal weight Give figures and background equal weight

William H. Bowers – Visual Testing Squint Squint Use a mirror Use a mirror Invert the screen Invert the screen

William H. Bowers – Structure and Flow Grouping Grouping –Position or proximity –Alignment –Color –Texture –Size Shape Use clear, simple grids Use clear, simple grids

William H. Bowers – Alignment and Grids

William H. Bowers – Logical Flow

William H. Bowers – Symmetry and Balance

William H. Bowers – Appropriate Imagery Understand what needs to be communicated Understand what needs to be communicated Understand how the user thinks about what must be communicated Understand how the user thinks about what must be communicated Must know the visual language of the user’s domain and environment Must know the visual language of the user’s domain and environment Culturally dependent Culturally dependent

William H. Bowers – Function Oriented Icons Represent action and verb Represent action and verb Make sure meanings are appropriate for the audience Make sure meanings are appropriate for the audience Group related functions Group related functions Keep icons simple Keep icons simple Reuse elements, when possible Reuse elements, when possible

William H. Bowers – Branding Sum of interactions people have with a company Sum of interactions people have with a company First impressions of product are important First impressions of product are important Build customer relationships through branding Build customer relationships through branding

William H. Bowers – Principles of Visual Information Design Two problems (according to Tufte) Two problems (according to Tufte) –Difficult to display multidimensional information on 2D surface –Resolution does not support dense information

William H. Bowers – Tufte’s Grand Principles Enforce visual comparisons Enforce visual comparisons Show causality Show causality Show multiple variables Show multiple variables Integrate text, graphics and data Integrate text, graphics and data Quality, relevance and integrity Quality, relevance and integrity Show things adjacent in space Show things adjacent in space Don’t de-quantify quantifiable data Don’t de-quantify quantifiable data

William H. Bowers – Enforce Visual Comparisons Compare related variables Compare related variables Show trends Show trends Compare before and after Compare before and after Use previews Use previews

William H. Bowers – Show Causality Show consequences Show consequences Demonstrate cause and effect Demonstrate cause and effect

William H. Bowers – Show Multiple Variables Display if related Display if related Don’t sacrifice clarity Don’t sacrifice clarity

William H. Bowers – Integrate Text, Graphics and Data Separate keys and legends are less effective Separate keys and legends are less effective Shifting focus is distracting Shifting focus is distracting

William H. Bowers – Quality, Relevance and Integrity Insure data supports goals Insure data supports goals Insure quality of data Insure quality of data Poor quality or missing data destroys credibility Poor quality or missing data destroys credibility

William H. Bowers – Show Things Adjacent in Space Don’t superimpose Don’t superimpose Show sequential images Show sequential images

William H. Bowers – Don’t De-quantify Quantifiable Data Graphs are useful to see relationships Graphs are useful to see relationships Must retain numbers to be meaningful Must retain numbers to be meaningful

William H. Bowers – Text Text forms recognizable shapes Text forms recognizable shapes ALL CAPS ARE HARD TO READ ALL CAPS ARE HARD TO READ Visually show what Visually show what Textually show which Textually show which Use high contrast with background Use high contrast with background Don’t use less than 10 point fonts Don’t use less than 10 point fonts Keep text short Keep text short

William H. Bowers – Color Draws attention Draws attention Improves navigation and scanning speed Improves navigation and scanning speed Shows relationships Shows relationships Seven or more degrades use Seven or more degrades use Don’t put complementary colors together Don’t put complementary colors together

William H. Bowers – Standards and Guidelines Develop for the product Develop for the product Does not insure a good UI Does not insure a good UI Must evolve with technology Must evolve with technology Should not be rigid rules Should not be rigid rules Violate only when necessary Violate only when necessary

William H. Bowers – Questions & Discussion