# UI Design Bootcamp

Canonical URL: <https://www.graduateschool.edu/courses/ui-design-portfolio-bootcamp>

## Overview

UI (User Interface) or Visual Designers focus on the look and feel of apps, websites, and other products, ensuring they are visually appealing and effective.

### Learn to Design Webpages & Apps

With guidance from expert instructors, you’ll explore best practices for designing both websites and mobile applications.

### UI Design Essentials

What makes a website or app visually engaging? Learn key design principles such as color, typography, layout, standard interface conventions, UI patterns, and more.

### Learn by Creating & Build Your UI Design Portfolio

This project-based course provides 1-on-1 feedback on your work as you grow your skills. You’ll develop portfolio-ready projects to present to prospective employers or clients.

## What you'll learn

- Learn UI design concepts & best practices
- Design webpages and apps with Figma
- Get 1-on-1 help and feedback on your design work so you can learn and improve
- Develop projects for your portfolio to showcase your work as a UI Designer

## Prerequisites

Students should have knowledge equivalent to our [Figma Bootcamp](/courses/figma-bootcamp).

## Curriculum

### UI Fundamentals

#### How & when to use common UI patterns

- Menus
- Tabs
- Bottom tab bar
- Buttons (including “Call to action” or CTA)
- Accordion
- Carousel
- Breadcrumbs
- Modals
- Forms
- etc.

### Wireframing for UI Designers

#### Wireframing

- Why and Gow to Create Wireframes
- Issues to Solve
- Steps in Creating a Wireframe
- Designing on a Grid System (like Bootstrap)
- Get Critiques
- Incorporate Feedback & Improve Your Designs

#### Wireframe to Refined Design

- Iterate & Refine
- Understanding the Mobile Experience

### UI or Visual Design Concepts

#### Learning from Existing Websites & Apps

- What Works & What Does Not?

#### Color

- Color Harmonies
- Creating Contrast with Color
- Guidelines for Proper Color Usage

#### Typography & Fonts

- Display Text (Such as Headings) versus Body Text
- Legibility
- Type Trends
- Typeface Selection & Pairing
- Where to Get Web Fonts
- Ideal Line Height
- Column Width (Line Length)
- Hyphenation & Justification

#### Design Elements

- Proximity
- Similarity
- Continuity

#### Trends in Web & App Design

- Analysis of Example Websites & Apps

#### Design Patterns

- Example Design Patterns

#### Multiple Screen Sizes

- Responsive Web Design
- Mobile Considerations & Limitations
- Discoverability Challenges
- Mobile Navigation
- Phone vs Tablet App Design

## Schedule
- Jun 22, 2026 – Jun 26, 2026 — Live Online
- Jul 29, 2026 – Aug 24, 2026 — Live Online
- Oct 12, 2026 – Oct 16, 2026 — Live Online
- Jan 4, 2027 – Jan 27, 2027 — Live Online

## Pricing

**Tuition:** $1695