Colour, typography and visual hierarchy

Housekeeping

Tony will be contacting you for one-on-ones during lab time next week.
Link example added to Journal Submission Instructions
Request from the Registrar:
- Check your MySAIT status to make sure you haven't been cancelled recently for non-payment.
Anyone want SAIT WBDV hoodies?
- Price: $55
- Description: Grey with a red SAIT block lettered logo and the program name embroidered underneath.
- 12 hoodie minimum for the program but there's no payment required to fill out the form.
- Order form
  - Note: The Web Developer program is waaaaaay down at the bottom of the list because they don't care about Cognitive Load.

We're hiring our Lab Facilitators soon! Let's add some Issues to the WBDV website repo to keep them busy by:

Critiquing the website's visual hierarchy:
- Size and scale
- Colour and contrast
- Spacing
- Typography
- Grids and alignment
Annotating some screencaps to propose some fixes;
Submit the screencaps as GitHub Issues for our Facilitators to fix or for future 260/262 demos.

The "Help Desk" and "Live Stream" buttons should probably be different colours.

Convert the blue hex code (#0896db)of the "Help Desk" button to HSL using the strategy from Reading color hex codes:
1. 3-digit shorthand
  - #09d
2. Line graph
3. Hue from shape
  - Azure
4. Lightness from total
  - 50% (middle)
5. Saturation from range
  - Washed(?); maybe saturated-ish
  - Middle Washed Azure
  - Guess hsl:
    - H: 200deg
    - S: 75%
    - L: 50%
We'll use a colour converter to check our result (no cheating!).]
- actual HSL
  - H: 200deg
  - S: 93%
  - L: 45%
- correction: Middle Saturated Azure
Let's pick a new colour for the "Help Desk" button using colour harmonies.
Using HSL, let's create some better hover and active colours for the global nav.

The Visual Hierarchy video on Typography above has a nice slide that would make a good test page for fonts and colour.

Let's build one in Codepen! (If we have time)

An easy-to-create method for a website colour pallette:
1. Find an image that that gives you a warm feeling inside, colour-wise.
2. Upload it to the Coolers Image Picker
3. Export the pallette or open in their generator tool.
4. Take each colour and convert them to HSL.
Improve the visual hierarchy of the WBDV website by submitting an Issue. Include screencaps as needed.
Select some Display and Text typefaces on Google Fonts for future projects.
- Feel free to cheat
For Tony: reverse order of code-journal posts to reduce scrolling.

Reading color hex codes
An excellent video where a colour-blind designer explains how digital colour modes work.
Colour Harmonies using HSL