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.

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
  • 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
           
          Made with Slides.com