Basic UI/UX + Figma

Attendance (Google Forms)

Secret word: ‘’Figma”

Announcements

• NO LECTURE TOMORROW!! We’re doing 2 topics today :)
• Vitamin 3 due tonight
• Vitamin 4 assigned today. Submission is a link on Gradescope. Make sure to get a peer’s (from this class) feedback and add their email. We will make an Ed post in case you need to find someone!
• Vitamin 4 graded on doing all the components and effort!!

Basic UI/UX

• What is Design?
• UX vs UI
• HCD Process
• UI Elements
• Design Systems
• Wireframing
• Activity: Spot the Similarity

Agenda

• What is Design?
• UX vs UI
• HCD Process
• UI Elements
• Design Systems
• Wireframing
• Activity: Spot the Similarity

Agenda

What is design?

• Design is the foundation to products and solutions all around us
• It is the instruction manual for developers and roadmap that allows us to achieve the goals of our products

Design is everywhere! 🌎

​

DESIGN IN DOORS 🚪

Doors

Doors

Norman’s Door

• A Norman’s Door is a door that is difficult or confusing to use
• They bring self doubt over how you may interact with it
• An example of bad design!

Door Handle Design

• A design should play onto a user’s instincts:
• Handles signify pulling
• Flat doors signify pushing
• Doorknobs imply both

Why is good design important?

Attractiveness ≠ good design!

Good design is a marriage of usefulness and beauty.

• What is Design?
• UX vs UI
• HCD Process
• UI Elements
• Design Systems
• Wireframing
• Activity: Spot the Similarity

Agenda

UX vs UI

UI: User Interface

• How it looks
• Visual experience
• Visual aesthetics
• Ex: colors, logo, spacing

UX: User Experience

• How it feels
• Customer experience
• User journey
• Ex: how a user interacts with the product

UX 🤝 UI

DESIGN IN WEBSITES 💻

How does this site make you feel?

How does this site make you feel?

How does this site make you feel?

What makes good design?

• User centered - understand what our users need/want
• Accessible - accommodate those with disabilities or impairments
• Seamless + Intuitive - understand how users interact with products
• Innovative - use creativity and think outside the box
• Direct - communicates brand vision effectively

​

​

How do we design in order to understand and meet user needs?

• What is Design?
• UX vs UI
• HCD Process
• UI Elements
• Design Systems
• Wireframing
• Activity: Spot the Similarity

Agenda

Human Centered Design Process

• Creative problem solving approach that finds and meets the needs, wants, and behaviors of people using the product
• This process informs UX design choices

HCD: Define the Problem Scope

• Before anything, you must understand your problem scope
• To clearly define your problem scope, many designers use “how might we” questions to guide their designing
• “HMW support users in their tax filing journey to create a seamless experience to reduce confusion and frustration?”
• “HMW educate incoming college freshmen about Berkeley culture in a virtual setting so they will be included and integrated into the school?”

​

​

HCD: Research

• Goal: understand your user group and their pain points/needs
• Methods:
• Interviews
• Surveys
• Diary Study
• Competitive Analysis
• Secondary Research
• Field Study

​

​

HCD: Synthesis

• Goal: break down and visualize data in more digestible pieces; consolidate and personify research and identify commonality between users
• Methods:
• Affinity Mapping
• User Personas
• Journey Maps

​

HCD: Synthesis

HCD: Ideation

• Goal: come up with possible solutions maintaining a user centered mindset based on research and synthesis findings
• Methods:
• Rapid ideation
• Crazy 8s
• 2x2 impact-effort matrix

​

​

HCD: Ideation

HCD: Prototyping

• Goal: decide and design your final product (within web development, this is your final high fidelity UI design)
• Common tools for prototyping in web development:
• Figma
• Sketch
• Illustrator

​

​

HCD: User Testing

• Goal: get feedback on your designs
• Things to do when testing:
• Give users your current prototype
• Questions, walk throughs etc…

​

​

HCD: Iteration

• Goal: improve design based on user testing feedback and repeating parts of the HCD process

​

This is a simple outline of the HCD process. It is not rigid or linear at all. You will likely loop back to different stages multiple times. Don’t be afraid of taking a few steps back!

​

​

• What is Design?
• UX vs UI
• HCD Process
• UI Elements
• Design Systems
• Wireframing
• Activity: Spot the Similarity

Agenda

UI Elements: What are they?

• Core building blocks of a site designed with intention and purpose
• Should reflect UX needs and your own desired product branding

UI Elements: Fonts/Typography

• The design of lettering; a particular set of glyphs that share a common design
• 1-3 fonts in a site
• Sans Serif vs Serif
• Hierarchy
• Weights
• Size

UI Elements: Colors

• 3-5 colors in a site
• Desired Branding
• Color Harmony
• Contrast & Accessibility

UI Elements: Cards

• Are used to aggregate individual pieces of information in one place

UI Elements: Nav Bar

• User’s directory; easy access to main pages and simplifies flows

UI Elements: Buttons

• Pressing a button allows the user to perform some sort of action

UI Elements: States

• Communicate the status of a UI element

UI Elements: Etc.

… and many more

• What is Design?
• UX vs UI
• HCD Process
• UI Elements
• Design Systems
• Wireframing
• Activity: Spot the Similarity

Agenda

As defined by the Nielsen Norman Group, design systems are “a set of standards to manage design at scale by reducing redundancy while creating a shared language and visual consistency across different pages and channels”

​

​

​

​

What is a design system?

TLDR…

• Set of reusable components and standards used to design products
• Goal: create a shared language to reduce redundancy

HCD DeCal

HCD DeCal

Glue

HCD DeCal

HCD DeCal

Design Systems Consist Of…

• Color Palette
• Typography
• Sizing and spacing
• Imagery
• Components
• Icons

So… why should I use a design system?

• What is Figma?
• What is Design?
• UX vs UI
• HCD Process and Research
• Design System
• Wireframing
• Activity: Spot the Similarity

Agenda

What are Wireframes?

• Static visual representation of an interface
• Low-fidelity → Mid-Fidelity → High-Fidelity

Low-fidelity

• Low time
• Low cost
• Low-ish energy
• No focus on colors, alignment, or fonts
• Elements represented abstractly; the skeleton
• Often created using paper, sketching apps, or Figma

Lo-fi

Mid-fidelity

• In between low and high fidelity
• More structure than low-fidelity (ex: spacing, shapes)
• Colorless
• Allows further understanding of visual hierarchy

Mid-fi

High-fidelity

• Provides a detailed and comprehensive visual representation of a user interface design
• Visually identical to a final/launched product
• Uses design system elements

Hi-fi

• What is Figma?
• What is Design?
• UX vs UI
• HCD Process and Research
• Design System
• Wireframing
• Activity: Spot the Similarity

Agenda

Websites are made of patterns and built on elements.

What are some similarities?

What are some similarities?

​

What are some similarities?

​

What are some similarities?

​

Users are familiar and most comfortable with these patterns. We don’t want to reinvent the wheel.

BUT know UX rules so you can break them properly.

Consider these examples

​

Intro to Figma

• What is Figma?
• Figma Basics

Agenda

• What is Figma?
• Figma Basics

Agenda

What is Figma?

• Collaborative tool for prototyping and designing interfaces
• Targeted towards UI/UX and Product Designers
• Features such as simulating clicks, buttons, swipes, animations, and live updates/collaboration

​

• What is Figma?
• Figma Basics

Agenda

Disclaimer:

Figma continuously updates their UI and adds new features.

Figma’s Layout

Left Sidebar

Toolbar

Right Sidebar

Workspace

Toolbar

Frames

• Act as containers for your design
• Every text box, shapes, and other elements should be placed inside of a frame
• 1 frame = 1 page of your product

​

Shapes

• Building block of many designs
• Ex: cards, buttons, images, etc. are just combinations of different shapes!
• Double click a shape to edit its points
• Located in Toolbar

Pen Tool

• Creates vector shapes and networks
• Often used to create complex shapes and lines
• Located in Toolbar , or P

Pencil Tool

• Rounded, freehand drawing
• Often used to sketch or annotate
• Located in Pen Tool Dropdown, or Shift + P

Commenting

• Allows users to provide and receive feedback, ask questions, and share opinions
• Useful for iterating on designs and teamwork
• Located in Toolbar, or C

Grouping

Grouping

• Method to have multiple layers act as a single layer
• Useful for keeping similar items together and treat as a single object
• Performed by right clicking → “Group Selection” or Command + G
• Name Groups for easier file navigation

Demo

Figma Link

https://tinyurl.com/fullstackfigmafa26

You Try!

1. Create a frame and name it [Your Name]
2. Create a fruit using Shapes & Pen Tool
1. Group the different parts of the fruit together.
• Use [Co mmand + G]

Components

Components

• Reusable elements that help with saving time and consistency
• Useful for recurring elements
• Ex: buttons, card styles
• Performed through right-hand toolbar, right clicking → “Create Component,” or Option + Command + K

Parent Component

Child

Component

• The original
• Should not be used in design
• Only edited when making changes impacting all child instance
• Keep parent components in separate section of file

• Instances of the parent
• Should be used in design
• Inherits changes made to parent component
• Obtained through copy and pasting the parent component

Component Variants

• For grouping and organizing similar components into a single component
• Ex: different buttons, status of toggles
• Obtained through selecting a component and clicking the diamond with a “+”

Demo

You Try!

1. Turn your fruit into a component
2. Make a variant of your fruit

Prototyping

Credits: Figma Decal

Prototyping

• Creates interactive user flows
• Demonstrates how to get from frame to frame through interactions
• Switch from Design to Prototyping Mode in the right hand bar

When can you use prototype interactions?

• Navigating to different page
• Navigating to different section of same page
• Pop-ups
• Button interactions
• Toggles and check-boxes
• Many more!

​

Demo

Plugins

Credits: Figma Decal

Plugins

• Tools to enhance design flow
• Obtained through right click → “Plugins”
• Popular examples:
• Stark - Contrast & Accessibility Checker
• Lorem Ipsum - lorem ipsum generator
• RemoveBG - removes background of images

​

Miscellaneous Tips + Good Practices

Miscellaneous Tips

• Hold Shift while dragging an element to move it in a straight line
• Hold Option while dragging an element to create a duplicate
• Hold Shift while clicking or drag mouse across screen to select multiple items
• Hold Option to see spacing between elements
• Press K to scale

Figjam

Credits: Figma Decal

Figjam

• Whiteboard tool used for collaborative brainstorming and diagramming
• Part of the Figma family!

Figjam Link

Link to figjam

Attendance (Google Forms)

Secret word: ‘’Figma”