# UI Design Bootcamp (Self-Paced)

Canonical URL: <https://www.careercenters.com/courses/ui-design-portfolio-bootcamp-online>

## Overview

UI (User Interface) Designers focus on creating visually appealing, intuitive layouts for websites, apps, and digital products. In this project-based course, you’ll learn best practices for designing webpages and mobile interfaces while building a foundation in color, typography, layout, UI patterns, and standard design conventions.

Guided by expert instructors, you’ll apply these concepts through hands-on projects, receive personalized 1-on-1 feedback, and develop a professional portfolio that showcases your UI design skills to potential 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/adobe-flash-cs6-level-2).

## 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

## Pricing

**Tuition:** $1695