Paul Hibbitts
Educator, interaction design practitioner and software developer.
Visual Design Basics
CMPT 363
“To design is much more than simply to assemble, to order, or even to edit; it is to add value and meaning, to illuminate, to simplify, to clarify, to modify, to dignify, to dramatize, to persuade, and perhaps even to amuse.”
– Paul Rand
Copyright by respective copyright owners. Used without permission under the Fair Use Doctrine. Source: http://www.logodesignlove.com/next-logo-paul-rand
Activity: Visual Design Examples
What is an example website with poor visual design? Why?
How about an example website with excellent visual design? Why?
Visual Design Basics
-
Typography
-
Visual hierarchy
-
Visual design principles
Typography
Typography is the design, selection, and placement of
typefaces for communication.
typefaces for communication.
Typeface Classes
Copyright by respective copyright owners. Used without permission under the Fair Use Doctrine. Source: http://dwarfplanetpress.wordpress.com/
What About Fonts?
A font is a specific rendering (i.e. size, weight, style, etc.) of a typeface. This is the same relationship as a song to a mp3 file.
Typeface Selection
Copyright by respective copyright owners. Used without permission under the Fair Use Doctrine. Source: http://bonfx.com/23-really-bad-font-choices/
Typeface Selection
Copyright by respective copyright owners. Used without permission under the Fair Use Doctrine. Source: http://webdesignledger.com/inspiration/
Typeface Selection
Copyright by respective copyright owners. Used without permission under the Fair Use Doctrine. Source: http://bonfx.com/23-really-bad-font-choices/
Typeface Selection
Copyright by respective copyright owners. Used without permission under the Fair Use Doctrine. Source: http://webdesignledger.com/inspiration/
Selecting Typefaces
- Context (i.e. environment)
- Legibility (i.e. for individual characters)
- Readability (i.e. for blocks of text)
Tips about Selecting Typefaces
-
Stick with classic combinations (check out
fontsinuse.com)
- Limited palette (i.e. often only 2 different typefaces)
- Consider your planned visual hierarchy
Type Anatomy
Copyright by respective copyright owners. Used without permission under the Fair Use Doctrine. Source: http://blog.rockymountaintraining.com/basic-typography-terms/
Type Measurement
-
72 points = 1 inch
-
6 picas = 1 inch
-
12 points = 1 pica
Kerning, Tracking, and Leading
Copyright by respective copyright owners. Used without permission under the Fair Use Doctrine. Source: http://designshack.net/articles/typography/
Leading: Before and After
Copyright by respective copyright owners. Used without permission under the Fair Use Doctrine. Source: http://martinsilvertant.deviantart.com/journal/
-
What we’ve covered so far
-
Typography
- Typeface classifications
- Typeface fonts
- Typeface selection
- Type anatomy
- Type measurement
- Kerning, tracking, and leading
-
Typography
-
Coming up
- Typography activity
Time for Questions & Discussion
Activity: Typography Analysis
Analyze the use of typography of
(the responsively designed)
microsoft.com
Consider the factors of typeface selections with regards to
context, legibility, and readability (i.e. 'CLR')
Visual Hierarchy
Visual hierarchy is the organization and prioritization of content in order to improve the communication of that content
Aspects of Visual Hierarchy
-
Size
-
Color
- Alignment
- Whitespace
Typographic Hierarchy: Before
Copyright by respective copyright owners. Used without permission under the Fair Use Doctrine. Source: http://webdesign.tutsplus.com/articles/
Typographic Hierarchy: After
Copyright by respective copyright owners. Used without permission under the Fair Use Doctrine. Source: http://webdesign.tutsplus.com/articles/
Activity: Visual Hierarchy
Analyze the visual hierarchy of your in-progress mockups
for assignment #4
- What we’ve covered in this section
- Visual hierarchy
- Coming up
- Visual design principles
Time for More Questions
and Discussion
Visual Design Principles
- Alignment
- Proximity
- Repetition
- Contrast
Alignment
Alignment refers to items on a page being lined up with each other
Effective Alignment
Primarily use only one type of alignment (e.g. left, right, centered) on a single page
Effective Alignment
While centered alignment easily provides visual balance, it is also less visually strong and can make multiple lines of text harder to read than other forms of alignment
Effective Alignment
Align horizontal elements, avoiding up/down/up/down situations, along an invisible baseline
Proximity
Proximity refers to the relationships that can be communicated between items on a page, based on how close they are to each other
Effective Proximity
Place objects that have strong relationships with each other close to each other
Effective Proximity
Perform a ‘squint test’ to help gauge proximity effectiveness by closing one eye, and then squinting the other eye until the page is out of focus
Be careful of too many visual groups, or equal spacing everywhere with the result of no visual focal point
- What we’ve covered so far
- Alignment
- Proximity
- Coming up
- Repetition
Time for More Questions
and Discussion
Repetition
Repetition refers to the repeated use of particular design elements on a page, and also between pages
Effective Repetition
Reuse visual design elements (e.g. color, font, graphics, layout, etc.) to help communicate a sense of design unity
Contrast
Contrast refers to how much visual difference there is between various items on a page
Effective Contrast
Use contrast to provide a visual hierarchy, and help guide the viewer’s eye around a page
Effective Contrast
If two items (fonts, graphics, etc.) are different then make them clearly visually distinct, otherwise make them identical
Effective Contrast
Use contrast to bring focus to the most important elements of a page. Again, a ‘squint test’ can help gauge contrast effectiveness
Visual Design Basics
-
Check alignment
-
Group similar items together
-
Create repetitive elements
-
Use contrast appropriately (esp. visual hierarchy)
Activity: Visual Design Principles
Review your assignment #4 sketches with the following principles:
- Alignment
- Proximity
- Repetition
- Contrast
References and Suggested Books
- The Non-Designers Web Book by Robin Williams
- Visual Usability: Principles and Practices for Designing Digital Applications by Tania Schlatter
CMPT-363-153 Visual Design Basics
By Paul Hibbitts
