Day 8 - Website UI Design II

Assignment and Achievements

• Assignment 4 UI Mockup
  • Due: Monday October 17 @ 11:59PM
  • Focus: Create a home page mockup with a design system
• Achievements UI Design
  • Due: Friday October 21 @ 11:59PM
  • Goal: Complete 4 design achievements

Design Systems

A design system is very useful for creating mockups and prototypes quickly and consistently. A design system is a set of rules regarding visual elements such as: color, typography, spacing, border radius, and pseudo states.

A design system also include commonly used components such as buttons, cards, panels. Just like with the style assets, you can take a very structured approach to your components, or you can set up a minimal system. It depends on the scope of the project.

We are going to create a design system in Figma. These will be applied to both our mockups as well as our actual code. This is possible by using Figma plugins to export stylesheets based on our design systems.

Important Plugins

• StyleList: Create text and color styles
• Color Designer]: Another color palette generator
• Color Scheme: Similar to StyleList for color generation
• CSS Export: Export Vanilla CSS
• Figma Tailwind: Export a Tailwind Configuration
• Tailwind Import: Import a tailwind configuration file into Figma

Design System Setup

• Figma Design System Best Practices

1. Pick colors and generate variations
2. Pick typography and generate variations
3. Create a couple simple components to generate:
   • border-radius
   • effect styles

Activity: Create a color scheme for your design system (15min)

• Use one of the above specified, or any other color palette generator
• Create a color palette that includes
  • a primary color
  • a secondary color
  • grayscale shades
• Set between 5 - 10 variations

Activity: Create a Typography Scheme for your design system (15min)

• Extra Reading: Typography
• Choose 2 fonts
  • Heading
  • Body Text
• Set up all of your font variations
  • Label them based on html font names or based on utility class styles

Debrief

• Show off your work
• Ask questions
• Learn from one another

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’s behaviour