# UI Design Bootcamp Online

100% online training with expert live support

Canonical URL: <https://vdci.edu/courses/ui-design-bootcamp-online>

## Overview

UI Designers focus on creating visually appealing and intuitive layouts for websites, apps, and other digital products. In this project-based course, you will 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 will apply these concepts through hands-on projects, receive personalized 1 on 1 feedback, and build a professional portfolio that highlights your UI design skills for potential employers or clients.

## What you'll learn

- Develop a solid understanding of UI design fundamentals, including typography, color, and layout principles
- Design engaging, user-friendly interfaces for websites and mobile applications
- Use Figma to create wireframes, prototypes, and interactive designs
- Receive personalized feedback and expert guidance to strengthen your design skills
- Create portfolio-ready projects that showcase your UI design abilities
- Learn industry best practices and UI patterns used to produce effective digital products

## Prerequisites

Students should have knowledge equivalent to our 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

## Pricing

**Tuition:** $1695