Foundations of Frontend Engineering: Sketch to Site

Design Principles

What Makes Good UI/UX?

Think about your favorite website:

• What makes it easy to navigate?
• What draws your attention?

Hierarchy and Contrast

• Distinguish key information quickly
  • Use different font sizes, colors, and spacing
  • Think of <h1>, <h2>, etc. in HTML
• Bring user attention to important elements

Alignment and Progression

• Easy-to-navigate layouts guide users through a website
• Grid systems improve readability
• Keep users engaged, even through long tasks

Containers

• Every UI is made of nested boxes
  • Some boxes hold other boxes (<div>)
  • Some boxes display content
• Containers allow easy alignment and scaling

CSS Layout Systems

• Flexbox: One-dimensional layout
  • Content adjusts to fill and distribute space
• Grid: Two-dimensional layout
  • Creates structured layouts for web pages
• Can be combined: Grid for layout, Flexbox for alignment

Page Hierarchy

• Think of a website as a tree
• Pages are nested to communicate structure

Consistency

• Implement consistent design across components and layouts
• Improves predictability and user experience

Components

• React components enable reusability
• Encourage design consistency
• Example: Reusable navigation links

Wireframes

Wireframes outline the flow and layout of an app without focusing on fine details.

Types of Wireframes

• Low-fidelity: Focus on layout and navigation (can be hand-drawn)
• Mid-fidelity: Cleaner designs with minimal text and color
• High-fidelity: Closest to a final product mockup

Why Wireframe?

• Focus on interaction and layout first
• Align team understanding of the application

Figma Introduction

What is Figma?

Figma is an interface design tool similar to Photoshop or Canva, used by designers and engineers.

Getting Started

• Create a Figma account (UCSD email recommended)
• Explore template designs
• Create a new design using the sidebar

Website: http://figma.com (opens in a new tab)

Common Figma Tools

• Select
• Frames
• Shapes
• Draw
• Text
• Comment
• Actions

Layers and Frames

• Layers: Show, hide, and organize elements
• Frames: Create wireframes for individual screens

Auto Layout

• Dynamically adjusts layout based on frame size
• Similar to CSS Flexbox and Grid

Documentation:
https://help.figma.com/hc/en-us/articles/360040451373-Guide-to-auto-layout (opens in a new tab)

Component Libraries

What Are Component Libraries?

• Pre-built, reusable UI components
• Save development time
• Ensure consistent design

Material UI (MUI)

• Popular React component library
• Based on Google’s Material Design

Useful MUI Components

• Container: Responsive layout wrapper
• Typography: Text formatting and styling
• Box: Enhanced <div>
• Button
• Themes