Visual design The “look” of your interface. Project: What to do now Start brainstorming!! –...
-
Upload
kristian-thompson -
Category
Documents
-
view
216 -
download
1
Transcript of Visual design The “look” of your interface. Project: What to do now Start brainstorming!! –...
![Page 1: Visual design The “look” of your interface. Project: What to do now Start brainstorming!! – Lots of ideas, then narrow down to 3 or 4 Explore design space.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efb5503460f94c0e6e8/html5/thumbnails/1.jpg)
Visual design
The “look” of your interface
![Page 2: Visual design The “look” of your interface. Project: What to do now Start brainstorming!! – Lots of ideas, then narrow down to 3 or 4 Explore design space.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efb5503460f94c0e6e8/html5/thumbnails/2.jpg)
Project: What to do now
Start brainstorming!!– Lots of ideas, then narrow down to 3 or 4
Explore design space– Vary what you can – hardware, forms of input, forms of output,
features, requirement priorities, usability priorities
Be off the wall, crazy– This will lead to less crazy but original ideas
Project poster – March 4 Project report + prototype: April 1
![Page 3: Visual design The “look” of your interface. Project: What to do now Start brainstorming!! – Lots of ideas, then narrow down to 3 or 4 Explore design space.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efb5503460f94c0e6e8/html5/thumbnails/3.jpg)
Midterm review
How to study:– Look at slides for topics, bullets, vocabulary, etc.– Find details and examples in the book
Test format– 25-50% true/false, multiple choice, fill-in-blank– Rest short answer, with one longer answer
![Page 4: Visual design The “look” of your interface. Project: What to do now Start brainstorming!! – Lots of ideas, then narrow down to 3 or 4 Explore design space.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efb5503460f94c0e6e8/html5/thumbnails/4.jpg)
Review
What is usability? What is design? Why is it hard? The user centered design process
– General steps– various models – high level understanding– What is waterfall model?
![Page 5: Visual design The “look” of your interface. Project: What to do now Start brainstorming!! – Lots of ideas, then narrow down to 3 or 4 Explore design space.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efb5503460f94c0e6e8/html5/thumbnails/5.jpg)
Requirements Review
Functional vs. non functional What pieces are part of this?
– User characteristics, task analysis, environment, etc.etc. – Persona – what is it and what makes a good one?– Scenario – what is it and what makes a good one?– Stakeholders (primary, secondary, tertiary, facilitating)
How do you gather data? Tradeoffs?– Interview, questionnaire, observation, etc. etc.
Task models– Hierarchical task analysis - how to do it?– Use cases – what are they good for?
![Page 6: Visual design The “look” of your interface. Project: What to do now Start brainstorming!! – Lots of ideas, then narrow down to 3 or 4 Explore design space.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efb5503460f94c0e6e8/html5/thumbnails/6.jpg)
Humans review
What are issues concerning our senses? Model Human Processor model of memory
– What are pieces of memory (STM, LTM, etc.)– What’s a chunk? Why do we care?– What are implications? (recognition over recall,
externalizing, etc.)
Other processes – what are they? (attention, learning)– What are the implications?
![Page 7: Visual design The “look” of your interface. Project: What to do now Start brainstorming!! – Lots of ideas, then narrow down to 3 or 4 Explore design space.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efb5503460f94c0e6e8/html5/thumbnails/7.jpg)
Interaction Review
Command line WIMP Direction manipulation Pen & mobile Speech & natural language
Issues, advantages, disadvantages, etc.
![Page 8: Visual design The “look” of your interface. Project: What to do now Start brainstorming!! – Lots of ideas, then narrow down to 3 or 4 Explore design space.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efb5503460f94c0e6e8/html5/thumbnails/8.jpg)
Prototyping
Prototyping– What’s vertical vs. horizontal?– What’s low vs. high fidelity?– What are various methods?
Scenarios, mockups/sketches, etc. Issues and tradeoffs?
![Page 9: Visual design The “look” of your interface. Project: What to do now Start brainstorming!! – Lots of ideas, then narrow down to 3 or 4 Explore design space.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efb5503460f94c0e6e8/html5/thumbnails/9.jpg)
Role of Graphic Design
What someone initially encounters– Sets a framework for understanding content
![Page 10: Visual design The “look” of your interface. Project: What to do now Start brainstorming!! – Lots of ideas, then narrow down to 3 or 4 Explore design space.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efb5503460f94c0e6e8/html5/thumbnails/10.jpg)
Role of Graphic Design
What someone initially encounters– Sets a framework for understanding content
![Page 11: Visual design The “look” of your interface. Project: What to do now Start brainstorming!! – Lots of ideas, then narrow down to 3 or 4 Explore design space.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efb5503460f94c0e6e8/html5/thumbnails/11.jpg)
Role of Graphic Design
What someone initially encounters– Sets a framework for understanding content
![Page 12: Visual design The “look” of your interface. Project: What to do now Start brainstorming!! – Lots of ideas, then narrow down to 3 or 4 Explore design space.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efb5503460f94c0e6e8/html5/thumbnails/12.jpg)
Graphic Design
A comprehensible mental image Appropriate organization of data, functions, tasks
and roles High-quality appearances
The “look”
Effective interaction sequencing The “feel”
Classes at UNCC– http://www.uncc.edu/schedule/subject/artg.html
![Page 13: Visual design The “look” of your interface. Project: What to do now Start brainstorming!! – Lots of ideas, then narrow down to 3 or 4 Explore design space.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efb5503460f94c0e6e8/html5/thumbnails/13.jpg)
Graphic Design
Involves knowledge of:– Sequencing– Organization– Layout– Imagery– Color– Typography
![Page 14: Visual design The “look” of your interface. Project: What to do now Start brainstorming!! – Lots of ideas, then narrow down to 3 or 4 Explore design space.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efb5503460f94c0e6e8/html5/thumbnails/14.jpg)
Graphic Design Principles
Metaphor Clarity Consistency Contrast Alignment Proximity
![Page 15: Visual design The “look” of your interface. Project: What to do now Start brainstorming!! – Lots of ideas, then narrow down to 3 or 4 Explore design space.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efb5503460f94c0e6e8/html5/thumbnails/15.jpg)
Clarity
Every element in an interface should have a reason for being there
– Make that reason clear too!
White/open space– Leads the eye– Provides symmetry and balance– Strengthens impact of message– Allows eye to rest between elements of activity– Used to promote simplicity, elegance, class, refinement
![Page 16: Visual design The “look” of your interface. Project: What to do now Start brainstorming!! – Lots of ideas, then narrow down to 3 or 4 Explore design space.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efb5503460f94c0e6e8/html5/thumbnails/16.jpg)
Clarity via “White” Space
White = Open
![Page 17: Visual design The “look” of your interface. Project: What to do now Start brainstorming!! – Lots of ideas, then narrow down to 3 or 4 Explore design space.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efb5503460f94c0e6e8/html5/thumbnails/17.jpg)
Example
Clear, cleanappearance
Opinion?
![Page 18: Visual design The “look” of your interface. Project: What to do now Start brainstorming!! – Lots of ideas, then narrow down to 3 or 4 Explore design space.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efb5503460f94c0e6e8/html5/thumbnails/18.jpg)
Example
Does this convey different impressions?
![Page 19: Visual design The “look” of your interface. Project: What to do now Start brainstorming!! – Lots of ideas, then narrow down to 3 or 4 Explore design space.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efb5503460f94c0e6e8/html5/thumbnails/19.jpg)
Consistency
In layout, color, images, icons, typography, text, …
Within screen, across screens Stay within metaphor everywhere
Platform may have a style guide– Follow it!
![Page 20: Visual design The “look” of your interface. Project: What to do now Start brainstorming!! – Lots of ideas, then narrow down to 3 or 4 Explore design space.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efb5503460f94c0e6e8/html5/thumbnails/20.jpg)
Example
Home page Content page 1 Content page 2
www.santafean.com
![Page 21: Visual design The “look” of your interface. Project: What to do now Start brainstorming!! – Lots of ideas, then narrow down to 3 or 4 Explore design space.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efb5503460f94c0e6e8/html5/thumbnails/21.jpg)
Alignment
Western world– Start from top left
Novices often center things– No definition, calm, very formal
Grids– (Hidden) horizontal and vertical lines to help locate window
components– Align related things– Group items logically
![Page 22: Visual design The “look” of your interface. Project: What to do now Start brainstorming!! – Lots of ideas, then narrow down to 3 or 4 Explore design space.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efb5503460f94c0e6e8/html5/thumbnails/22.jpg)
Grids – use them
![Page 23: Visual design The “look” of your interface. Project: What to do now Start brainstorming!! – Lots of ideas, then narrow down to 3 or 4 Explore design space.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efb5503460f94c0e6e8/html5/thumbnails/23.jpg)
From http://www.cultsock.ndirect.co.uk/MUHome/cshtml/print/grids.html
Three Column Layout Grids
![Page 24: Visual design The “look” of your interface. Project: What to do now Start brainstorming!! – Lots of ideas, then narrow down to 3 or 4 Explore design space.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efb5503460f94c0e6e8/html5/thumbnails/24.jpg)
From http://www.cultsock.ndirect.co.uk/MUHome/cshtml/print/grids.html
Symmetry vs. Asymmetry
Beware of too much symmetry
![Page 25: Visual design The “look” of your interface. Project: What to do now Start brainstorming!! – Lots of ideas, then narrow down to 3 or 4 Explore design space.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efb5503460f94c0e6e8/html5/thumbnails/25.jpg)
Proximity
Items close together appear to have a relationship
Distance implies no relationship
Time:
Time
![Page 26: Visual design The “look” of your interface. Project: What to do now Start brainstorming!! – Lots of ideas, then narrow down to 3 or 4 Explore design space.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efb5503460f94c0e6e8/html5/thumbnails/26.jpg)
Example
Name
Addr1
Addr2
City
State
Phone
Fax
Name
Addr1Addr2
CityState
PhoneFax
Name
Addr1Addr2
CityState
PhoneFax
![Page 27: Visual design The “look” of your interface. Project: What to do now Start brainstorming!! – Lots of ideas, then narrow down to 3 or 4 Explore design space.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efb5503460f94c0e6e8/html5/thumbnails/27.jpg)
Two-level Hierarchy•indentation•contrast
Grouping by white space
Alignment connects visual elements in a sequence
Logic of organizationalflow
Slide fromSaul Greenberg
![Page 28: Visual design The “look” of your interface. Project: What to do now Start brainstorming!! – Lots of ideas, then narrow down to 3 or 4 Explore design space.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efb5503460f94c0e6e8/html5/thumbnails/28.jpg)
Economy of visual elements
– Minimize number of controls
– Include only those that are necessary eliminate, or relegate others to secondary windows (but don’t want too many extra windows!)
– Minimize clutter so information is not hidden
![Page 29: Visual design The “look” of your interface. Project: What to do now Start brainstorming!! – Lots of ideas, then narrow down to 3 or 4 Explore design space.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efb5503460f94c0e6e8/html5/thumbnails/29.jpg)
Example
Overuse of3D effects
![Page 30: Visual design The “look” of your interface. Project: What to do now Start brainstorming!! – Lots of ideas, then narrow down to 3 or 4 Explore design space.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efb5503460f94c0e6e8/html5/thumbnails/30.jpg)
Haphazard layoutfrom mullet & sano
![Page 31: Visual design The “look” of your interface. Project: What to do now Start brainstorming!! – Lots of ideas, then narrow down to 3 or 4 Explore design space.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efb5503460f94c0e6e8/html5/thumbnails/31.jpg)
Repairing a Haphazard layoutfrom mullet &sano
![Page 32: Visual design The “look” of your interface. Project: What to do now Start brainstorming!! – Lots of ideas, then narrow down to 3 or 4 Explore design space.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efb5503460f94c0e6e8/html5/thumbnails/32.jpg)
Contrast
Pulls you in – set off most important item Guides your eyes around the interface Supports skimming Add focus
![Page 33: Visual design The “look” of your interface. Project: What to do now Start brainstorming!! – Lots of ideas, then narrow down to 3 or 4 Explore design space.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efb5503460f94c0e6e8/html5/thumbnails/33.jpg)
![Page 34: Visual design The “look” of your interface. Project: What to do now Start brainstorming!! – Lots of ideas, then narrow down to 3 or 4 Explore design space.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efb5503460f94c0e6e8/html5/thumbnails/34.jpg)
Example
Visual noise
![Page 35: Visual design The “look” of your interface. Project: What to do now Start brainstorming!! – Lots of ideas, then narrow down to 3 or 4 Explore design space.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efb5503460f94c0e6e8/html5/thumbnails/35.jpg)
Color
Use for a purpose and sparingly Draw attention, communicate organization, to
indicate status, to establish relationships, aid search Use redundant cues
– Color-blindness– Enhances performance
Be consistent with color associations from jobs and cultures
![Page 36: Visual design The “look” of your interface. Project: What to do now Start brainstorming!! – Lots of ideas, then narrow down to 3 or 4 Explore design space.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efb5503460f94c0e6e8/html5/thumbnails/36.jpg)
How many small ovals?
![Page 37: Visual design The “look” of your interface. Project: What to do now Start brainstorming!! – Lots of ideas, then narrow down to 3 or 4 Explore design space.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efb5503460f94c0e6e8/html5/thumbnails/37.jpg)
Now how many small ovals?
![Page 38: Visual design The “look” of your interface. Project: What to do now Start brainstorming!! – Lots of ideas, then narrow down to 3 or 4 Explore design space.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efb5503460f94c0e6e8/html5/thumbnails/38.jpg)
Yellow– happy, caution, joy
Brown– warm, fall, dirt, earth
Green– go, on, safe, envy, lush,
pastoral
Purple– royal, sophisticated, Barney
Color Meanings: Contextually Specific
Red– aggression, love – hot, warning, stop, radiation
Pink– female, cute, cotton candy
Orange– warm, autumn, Halloween
Blue– cold, off
![Page 39: Visual design The “look” of your interface. Project: What to do now Start brainstorming!! – Lots of ideas, then narrow down to 3 or 4 Explore design space.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efb5503460f94c0e6e8/html5/thumbnails/39.jpg)
Color Meanings: Culturally Specific
http://www.ricklineback.com/culture2.htm
![Page 40: Visual design The “look” of your interface. Project: What to do now Start brainstorming!! – Lots of ideas, then narrow down to 3 or 4 Explore design space.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efb5503460f94c0e6e8/html5/thumbnails/40.jpg)
Legibility and readability
Characters, symbols, graphical elements should be easily noticable and distinguishable
Text set in Braggadocio
Text set in Helvetica
TEXT SET INCAPITOLS
Text set in Times Roman
Saul GreenbergU. Calgary
![Page 41: Visual design The “look” of your interface. Project: What to do now Start brainstorming!! – Lots of ideas, then narrow down to 3 or 4 Explore design space.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efb5503460f94c0e6e8/html5/thumbnails/41.jpg)
Legibility and readability
Proper use of typography – 1-2 typefaces (3 max)– normal, italics, bold– 1-3 sizes max
LargeMediumSmall
LargeMediumSmall
Readable
Design components to be inviting and attractive
Design components to be inviting and attractive
Unreadable
Design components to be inviting and attractive
Design components to be inviting and attractive
Saul GreenbergU. Calgary
![Page 42: Visual design The “look” of your interface. Project: What to do now Start brainstorming!! – Lots of ideas, then narrow down to 3 or 4 Explore design space.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efb5503460f94c0e6e8/html5/thumbnails/42.jpg)
Remember
Form follows function– Visual elements should help convey purpose and meaning
Be consistent Just like all design – iterate and get feedback!!
Let’s analyze:– http://www.cnn.com/– http://www.microsoft.com/