Web Developer Fast Track

Winter 2022

Vector Design and SVG

Housekeeping

1. Figma Review

Materials

Activity: Pick a company/client/theme for your logo/mood board

Suggestions:

  • Create a random company/client using Tony's Namor App (with adjectives)
  • Redesign a logo/brand that already exists but needs a refresh
  • Build a logo for a friend, family member, yourself

2. Demo: Tracing with the Pen Tool

Materials

Activity: Trace a silhouette

  1. Find an image in our list of Openly Licensed Content (for example) that has a shape you'd like to trace.
  2. Place this image into a Frame in Figma, reduce the opacity and lock the layer.
  3. Practice tracing this shape using the Pen Tool (not the Pencil Tool).

There will be a show-and-tell for the best and worst creations after the activity.

3. Demo: Boolean operations (Pathfinder in Illustrator)

Materials

Activity: Create a custom shape

  1. Do a search for "sunset logo" (for example).
  2. Try to re-create this image in Figma using the tools/techniques learned in class.

There will be a show-and-tell for the best and worst creations after the activity.

4. Demo: Create Outlines from Fonts

Materials

Lab Time

Mood board challenge - Earn a 9am start tomorrow

Submit a screencap of a Logo Mood Board of at least 9 items to the #winter-2022 in Slack.

  1. Pick a general theme/company/client/project that you will build a logo for in Assignment 3.
  2. Do some research and screencap/collect inspiration that captures the mood of your logo subject, such as:
    • (minimalist) logo examples,
    • Images you can trace,
    • Illustrations and line art,
    • Typography and (Google) fonts,
    • Colour palettes,
    • Any other items that help you (or a hypothetical client) visualize your logo for Assignment 3.
  3. Organize your findings in a Figma/Figjam workspace. Start with a simple 3x3 grid of 9 images if you're having trouble.
  4. Screencap your mood board and post it to #winter-2022.

If 90% of the class submits a board by the end of class, we start at 9am tomorrow morning!

Prep

SVG Basics

  • SVG Design Tools Practical Guide

    This covers some basics about svg elements. It also provides comparisons between terminology between Illustrator, Sketch, and Figma.

  • Figma Best Practices Guide

    The landing page for Figma's best practices guide. There is a lot here so stick to things that answer questions you currently have from your past work with figma.

Design and Branding

  • Rebranding Tips

    This blog post covers rebranding logo design. It provides some popular examples and discussion on their redesigns throughout history.