Web Developer Fast Track

Winter 2022

Assignment 4 - Figma Mockup

Due: March 18

Assignment

Journal Entry 2

Due: March 20

Journal

Assignment 5 - Figma Prototype

Due: March 22

Assignment

Figma Prototyping

Figma Mockup Design

This is the next logical step after wireframing. It's when you design the basics of your layout and apply your design system + add assets such as images.

We will be aiming for medium resolution designs. You can and should create mobile versions for at least one of your pages, especially if you're attempting any challenging layouts to make sure that they render well. This will also help your development process by giving you a better visual of how your site content needs to flow.

What is a mockup?

A mockup is a depiction of what something will more or less look like when finished. Generally you'll put a mockup onto a template of a screen to show it in context.

Important Points

  • Use the grid
  • Apply a design system soon after starting
  • Stick with your design system
  • Group items logically (and don't be afraid to ungroup and change things)
  • Make use of plugins to speed up your process
  • Look to web pages that you would like to emulate, especially while learning

Activity: Draft a Home Page (20min)

  • This will work towards your Assignment 4
  • Work off of the design system that you had started on day 6
    • If you did not start one, begin designing and use your styles from there to create a design system (fonts, colors, components)

Debrief: Class Design Review

  • Showcase something that you like in your design
  • Discuss a design issue that you struggled with or want advice on
    • Class be respectful and offer insights
    • Take notes using comments in your design during discussion

Prototyping

Protoyping adds functionality to your design. This includes navigation between pages, navigation on pages, animations and movement of elements

Prototyping Basics

  • In the left panel, select Prototype
  • From here you'll be able to set prototype features onto your pages
  • To create good prototypes, you'll be duplicating your frames to set before and after states for your various prototype features
  • Be really happy with your mockup before you do too much prototyping (links get copied and this can get messy)
  • clean up your design

Main steps in prototyping

  • Group your frames based on the type of prototypes you're doing
  • Set up your before and after states
  • Make sure that you're on the prototype setting
  • Link the state changes
  • Set the interaction details
    • animation type
    • interaction
    • destination
    • time

Things to prototype

  • top bar navigation
  • mobile menu slide in
  • hover states (buttons)
  • image carosel
  • anchor links

Activity: Test out Prototyping (20min)

  • Duplicate your mockup
  • Change something on it (pick something that you would like to animate)
  • Set up the animation to work as discussed

Debrief

  • Show off your prototype behaviour

Assignment Discussion

  • Content for assignment 5 can be based off of assignment 4
  • But they cannot be the same figma file.

Lab Time

  • Work on Assignment 4
  • If you want to practice prototyping for assignment 5:
    • Start by cleaning up the labels on your mockup page and then duplicate it
    • Try:
      • creating a mobile site
      • Create a second page and set up navigation
      • Add animated buttons
      • Make things swoosh and move

Prep