Day 5 - Clickable links

Housekeeping

• Catching up on dailies

1. Watch Party!

• 60-30-10 Color Rule by Jesse Showalter

2. Colour models and you

Slides: Making sense of web colour

3. Clickable Links

See: Creating hyperlinks

Demo: Styling a links as buttons

1. Define a colour palette (see below for examples);
2. Create a simple Call-to-Action card with a paragraph and link;
3. Remove the underline with text-decoration;
4. Using the 60-30-10 Rule, set the following with your colour palette:
   • the page background (60%);
   • the card background (30%);
   • the link background (10%);
5. Make the link more “buttony” with padding;
   • optional: add a border and/or round the corners with border-radius;
6. Double-check your colour contrast;
7. Define a complimentary colour for the link :hover state;
8. Choose a contrasting colour for the link :active state.

4. Show and Tell @ 11am

• Eli - project demo
• Cordelle - one of two vague options
• Sebastian - website demo

Lab Time

Activity: White/black colour palette

Create a colour palette for a project:

1. Start with white and black;
2. Pick a Call-to-Action colour (10%) from one of your moodboards or from an online resource;
3. Choose of white or black as your neutral (60%) and primary 30% colours;
4. Using HSL and colour harmonies, make small tweaks to white and black to create light and dark complimentary colours to match your Call-to-Action colour.
5. Create a clickable link using your colour palette:
   • Neutral -> background colour
   • Call-to-action -> link background colour
   • Primary -> link text
   • Reverse link and link text colours on :hover
6. Add a paragraph with a box (i.e. card) to your link and build from there.

Activity: Screencap colour palette

Create a colour palette for a project based on a screencap you like:

1. Find a tool that creates a colour palette from an image;
2. Convert a screencap of your favourite movie scene/music video/photograph/etc;
3. Use the 60-30-10 Rule to choose three colours for your project palette;
4. Create a clickable link using your colour palette:
   • Neutral -> background colour
   • Call-to-action -> link background colour
   • Primary -> link text
   • Reverse link and link text colours on :hover
5. Add a paragraph with a box (i.e. card) to your link and build from there.

Prep

Watch list

• Read color hex codes by David DeSandro

Reading List

• Creating hyperlinks
• On Switching from HEX & RGB to HSL by Sara Soueidan

Search list

• “60-30-10 rule”