SAIT WBDV

Web Developer Fast Track - Winter 2021

Visual Hierarchy in Design

Housekeeping

  1. Session videos
    • Students are invited to post chapter markers in the Recordings document listed in #winter-2021.
  2. Assessments
    • DSGN 270 Assignment 1 announced
    • Assessment guidelines:
      • All assignments will be submitted to Brightspace.
        • All assignments should be zipped, even if it’s just one file; text files sometimes get mangled by Brightspace.
      • Late penalties: 10% deducted per day late to a maximum of three days late.
      • Extensions will not be given the day an assignment is due.
      • There is a fine line between open source development and plagiarism.
        • If you are using work that you found online (and it’s openly licensed), list the original source (with a link to the code) as an Attribution in a README.md file included with your assignment. It’s expected that you refactor the code to match your own (variable names, indentation, etc).
        • If you solved a problem with a classmate, Attribute them in a README.md file. The student that helps their classmates the most will be eligible for Class MVP at the end of the program (worth bragging rights, not marks).
        • While you are encouraged to help your classmates, this is not an invitation to copy and paste solutions. This will be considered possible Academic Misconduct. Fair warning: Git is really good at finding identical code between files…
      • Marks should be returned within 10-days after submission, but some assignments take longer to mark than others.

Homework

  1. Tool Time
  2. Print Design
  3. Web Coventions
    • Skim: UI Design Patterns
    • Skim: Chapters 1, 2 and 3 of Don’t Make Me Think by Steve Krug (course textbook)
  4. Visual Hierarchy
    • Watch: 11 Visual Hierarchy Principles by Visme (many of their videos are about their proprietary presentation slide builder)
    • Find an example of print design in your immediate(ish) area (home, office, vehicle, etc) that you love, hate or wouldn’t normally notice. You will be discussing your find in a group of 3 or 4 tomorrow.

While this is not a design program, that doesn’t mean we have to develop ugly web applications. We will cover fundamental design principles that will (hopefully) make your websites and applications stand out in a crowd.

Objectives for the day

  • Get to know each other (more)!
  • Define design.
    • Briefly summarize the history of print design.
      • Explain ways to make content easier to read.
    • Discuss the underlying principles of visual hierarchy.
      • Explain some of the differences between designing for web and designing for print.
      • Find examples of websites that could be improved using these principles.
  • Define a usability convention.
    • List common website conventions.
    • Explain the relationship between information, organization and navigation.

Definitions

Tony’s very general definition of art:

Art
A process of creation that converts raw material (e.g. clay) into meaning (e.g. sculpture). Great art creates hidden meaning.
Design
A process that solves a problem. Great design is intuitive.

1. Web Conventions

The general usability principles we covered yesterday overlap heavily with those of visual heirarchy. These also extend to the world of web design in the form of conventions and design patterns.

One of the best ways to make almost anything easier to grasp in a hurry is to follow the existing conventions—the widely used or standardized design patterns.

Materials

2. Visual Hierarchy

In the context of print and graphic design, visual hierarchy is one of many tools that help the viewer find meaning from a “page” (e.g. resume, web page, business card, etc).

Materials

Clean Up Time!