graphic design 1
DESCRIPTION
Graphic Design 1. The “look & feel”. Agenda. Principles Examples SHW discuss. Who Needs Substance?. Graphic Design. The “look & feel” portion of an interface What someone initially encounters Conveys an impression, mood. Design Philosophies. My personal preferences: - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Graphic Design 1](https://reader036.vdocument.in/reader036/viewer/2022062308/56812db2550346895d92de34/html5/thumbnails/1.jpg)
Graphic Design 1
The “look & feel”
![Page 2: Graphic Design 1](https://reader036.vdocument.in/reader036/viewer/2022062308/56812db2550346895d92de34/html5/thumbnails/2.jpg)
Fall 2002 CS/PSY 6750 2
Agenda
• Principles• Examples• SHW discuss
![Page 3: Graphic Design 1](https://reader036.vdocument.in/reader036/viewer/2022062308/56812db2550346895d92de34/html5/thumbnails/3.jpg)
Fall 2002 CS/PSY 6750 3
Who Needs Substance?
![Page 4: Graphic Design 1](https://reader036.vdocument.in/reader036/viewer/2022062308/56812db2550346895d92de34/html5/thumbnails/4.jpg)
Fall 2002 CS/PSY 6750 4
Graphic Design
• The “look & feel” portion of an interface
• What someone initially encounters Conveys an impression, mood
![Page 5: Graphic Design 1](https://reader036.vdocument.in/reader036/viewer/2022062308/56812db2550346895d92de34/html5/thumbnails/5.jpg)
Fall 2002 CS/PSY 6750 5
Design Philosophies
• My personal preferences: Economy of visual elements Less is more Clean, well organized
![Page 6: Graphic Design 1](https://reader036.vdocument.in/reader036/viewer/2022062308/56812db2550346895d92de34/html5/thumbnails/6.jpg)
Fall 2002 CS/PSY 6750 6
Graphic Design Principles
• Metaphor• Clarity• Consistency• Alignment• Proximity• Contrast
![Page 7: Graphic Design 1](https://reader036.vdocument.in/reader036/viewer/2022062308/56812db2550346895d92de34/html5/thumbnails/7.jpg)
Fall 2002 CS/PSY 6750 7
Metaphor
• Tying presentation and visual elements to some familiar relevant items e.g., Desktop metaphor
If you’re building an interface for a grocery application, maybe mimic a person walking through a store with a cart
![Page 8: Graphic Design 1](https://reader036.vdocument.in/reader036/viewer/2022062308/56812db2550346895d92de34/html5/thumbnails/8.jpg)
Fall 2002 CS/PSY 6750 8
Example
www.worldwidestore.com/Mainlvl.htm
Overdone?
![Page 9: Graphic Design 1](https://reader036.vdocument.in/reader036/viewer/2022062308/56812db2550346895d92de34/html5/thumbnails/9.jpg)
Fall 2002 CS/PSY 6750 9
Clarity
• Every element in an interface should have a reason for being there Make that reason
clear too!
• Less is more
![Page 10: Graphic Design 1](https://reader036.vdocument.in/reader036/viewer/2022062308/56812db2550346895d92de34/html5/thumbnails/10.jpg)
Fall 2002 CS/PSY 6750 10
Clarity
• White space Leads the eye Provides symmetry and balance through
its use Strengthens impact of message Allows eye to rest between elements of
activity Used to promote simplicity, elegance,
class, refinement
![Page 11: Graphic Design 1](https://reader036.vdocument.in/reader036/viewer/2022062308/56812db2550346895d92de34/html5/thumbnails/11.jpg)
Fall 2002 CS/PSY 6750 11
Example
www.schwab.com
Clear, cleanappearance
Opinion?
![Page 12: Graphic Design 1](https://reader036.vdocument.in/reader036/viewer/2022062308/56812db2550346895d92de34/html5/thumbnails/12.jpg)
Fall 2002 CS/PSY 6750 12
Example
www.schwab.com
Clear, cleanappearance
Opinion?
![Page 13: Graphic Design 1](https://reader036.vdocument.in/reader036/viewer/2022062308/56812db2550346895d92de34/html5/thumbnails/13.jpg)
Fall 2002 CS/PSY 6750 13
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 14: Graphic Design 1](https://reader036.vdocument.in/reader036/viewer/2022062308/56812db2550346895d92de34/html5/thumbnails/14.jpg)
Fall 2002 CS/PSY 6750 14
Example
Home page Content page 1 Content page 2
www.santafean.com
![Page 15: Graphic Design 1](https://reader036.vdocument.in/reader036/viewer/2022062308/56812db2550346895d92de34/html5/thumbnails/15.jpg)
Fall 2002 CS/PSY 6750 15
Alignment
• Western world Start from top left
• Allows eye to parse display more easily
![Page 16: Graphic Design 1](https://reader036.vdocument.in/reader036/viewer/2022062308/56812db2550346895d92de34/html5/thumbnails/16.jpg)
Fall 2002 CS/PSY 6750 16
Alignment
• Grids (Hidden) horizontal and vertical lines to
help locate window components Align related things Group items logically
Minimize number of controls, reduce clutter
![Page 17: Graphic Design 1](https://reader036.vdocument.in/reader036/viewer/2022062308/56812db2550346895d92de34/html5/thumbnails/17.jpg)
Fall 2002 CS/PSY 6750 17
Alignment
• Grids - use them
![Page 18: Graphic Design 1](https://reader036.vdocument.in/reader036/viewer/2022062308/56812db2550346895d92de34/html5/thumbnails/18.jpg)
Fall 2002 CS/PSY 6750 18
Grid Example
![Page 19: Graphic Design 1](https://reader036.vdocument.in/reader036/viewer/2022062308/56812db2550346895d92de34/html5/thumbnails/19.jpg)
Fall 2002 CS/PSY 6750 19
Alignment
• Left, center, or right
• Choose one, use it everywhere
• Novices often center things No definition, calm, very formal
Here is somenew text
Here is some
new text
Here is some
new text
![Page 20: Graphic Design 1](https://reader036.vdocument.in/reader036/viewer/2022062308/56812db2550346895d92de34/html5/thumbnails/20.jpg)
Fall 2002 CS/PSY 6750 20
Proximity
• Items close together appear to have a relationship
• Distance implies no relationship
Time:
Time
![Page 21: Graphic Design 1](https://reader036.vdocument.in/reader036/viewer/2022062308/56812db2550346895d92de34/html5/thumbnails/21.jpg)
Fall 2002 CS/PSY 6750 21
Example
Name
Addr1
Addr2
City
State
Phone
Fax
Name
Addr1Addr2
CityState
PhoneFax
Name
Addr1Addr2
CityState
PhoneFax
![Page 22: Graphic Design 1](https://reader036.vdocument.in/reader036/viewer/2022062308/56812db2550346895d92de34/html5/thumbnails/22.jpg)
Fall 2002 CS/PSY 6750 22
Contrast
• Pulls you in• Guides your eyes around the interface• Supports skimming
• Take advantage of contrast to add focus or to energize an interface
• Can be used to distinguish active control
![Page 23: Graphic Design 1](https://reader036.vdocument.in/reader036/viewer/2022062308/56812db2550346895d92de34/html5/thumbnails/23.jpg)
Fall 2002 CS/PSY 6750 23
Contrast
• Can be used to set off most important item Allow it to dominate
• Ask yourself what is the most important item in the interface, highlight it
• Use geometry to help sequencing
![Page 24: Graphic Design 1](https://reader036.vdocument.in/reader036/viewer/2022062308/56812db2550346895d92de34/html5/thumbnails/24.jpg)
Fall 2002 CS/PSY 6750 24
Example
www.delta.com
Importantelement
![Page 25: Graphic Design 1](https://reader036.vdocument.in/reader036/viewer/2022062308/56812db2550346895d92de34/html5/thumbnails/25.jpg)
Fall 2002 CS/PSY 6750 25
UI Exercise
• Look at interface and see where your eye is initially drawn (what dominates?)
• Is that the most important thing in the interface?
• Sometimes this can (mistakenly) even be white space!
![Page 26: Graphic Design 1](https://reader036.vdocument.in/reader036/viewer/2022062308/56812db2550346895d92de34/html5/thumbnails/26.jpg)
Fall 2002 CS/PSY 6750 26
Example
Disorganized
![Page 27: Graphic Design 1](https://reader036.vdocument.in/reader036/viewer/2022062308/56812db2550346895d92de34/html5/thumbnails/27.jpg)
Fall 2002 CS/PSY 6750 27
Example
Visual noise
![Page 28: Graphic Design 1](https://reader036.vdocument.in/reader036/viewer/2022062308/56812db2550346895d92de34/html5/thumbnails/28.jpg)
Fall 2002 CS/PSY 6750 28
Example
Overuse of3D effects
![Page 29: Graphic Design 1](https://reader036.vdocument.in/reader036/viewer/2022062308/56812db2550346895d92de34/html5/thumbnails/29.jpg)
Fall 2002 CS/PSY 6750 29
Economy of Visual Elements
• Less is more• Minimize borders and heavy
outlining, section boundaries (use whitespace)
• Reduce clutter• Minimize the number of controls
![Page 30: Graphic Design 1](https://reader036.vdocument.in/reader036/viewer/2022062308/56812db2550346895d92de34/html5/thumbnails/30.jpg)
Fall 2002 CS/PSY 6750 30
Coding Techniques
• Blinking Good for grabbing attention, but use
very sparingly
• Reverse video, bold Good for making something stand out Again, use sparingly
![Page 31: Graphic Design 1](https://reader036.vdocument.in/reader036/viewer/2022062308/56812db2550346895d92de34/html5/thumbnails/31.jpg)
Fall 2002 CS/PSY 6750 31
SHW – Bad Designs
• Interesting ones?