# UI Design Bootcamp (Self-Paced)

Canonical URL: <https://www.nobledesktop.com/classes/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](/classes/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

## Instructors

### Michael Suen — Instructor

Michael is an independent designer and creative director. For over a decade, he has run the design studio Weirdo, helping early-stage startups and enterprise companies alike clarify their unique value proposition and meaningfully engage their customers.

Drawing on his experience as a certified Design Sprint facilitator and former startup co-founder, Michael has worked side-by-side with leaders at LinkedIn, Bose, KonMari, Lovevery, IntelyCare, Hazel Health, and more to launch new brands, products, and services. His projects have been featured in the likes of _TechCrunch_,  _The_ _Wall Street Journal_, and _NPR_, and won awards at South by Southwest and Games for Change.

Prior to his position at Noble Desktop, Michael served as an adjunct professor at the City University of New York, where he co-created the user experience curriculum for their workforce training program. He has also taught user experience design at General Assembly and lectured on playful design at MIT and Haverford College.

In his former lives, Michael covered arts and culture as a journalist, shipped award-winning educational games as a digital producer, and participated in two successful startup exits as a founding designer (SwitchUp acquired by Optimal in 2018, VocaliD acquired by Veritone in 2022). Raised in Hong Kong and educated in Vermont, he now lives in Queens, NY.

### Christophe Drayton — Instructor

Christophe is the instructor for the UX & UI Design Certificate, Figma Advanced, and Generative AI courses at Noble Desktop, and the founder and Chief Design Officer of Kaaiind, which specializes in Applied Artificial Intelligence in the Creative field.

With over 20 years in Branding, UX Design, and Accessibility across Europe and the US, Christophe has positively impacted the digital experience of a large spectrum of companies, ranging from big data to startups, government entities to nonprofits, both in the private and public sectors.

As an Educator, Christophe has led transformative and award-winning UX programs at Thinkful, the City University of New York (CUNY), and the Brooklyn Public Library, which have opened doors for underrepresented groups in tech who have secured roles at top companies like Google, Uber, Citi, and IBM. Most recently, he has developed innovative curricula about AI in the workplace for the University of Phoenix, LinkedIn Learning, and Coursera.

Today, he focuses on developing Allie, one of the first AI-powered, patent-pending color-blind safe and WCAG-compliant design system generator, while concluding his 5-year fundamental research on color vision deficiencies in digital environments.

Christophe believes in hands-on, practical application of human-centered strategy and ethical and inclusive design. He is passionate about sharing his knowledge to inspire and empower the next generation of designers, especially those entering the field through nontraditional paths.

### Dan Rodney — School Director, Instructor, & Senior Course Developer

Dan Rodney has been a designer and web developer for over 20 years, creating coursework and leading innovative training initiatives at Noble Desktop. He teaches courses covering Figma, HTML & CSS, Adobe Photoshop, InDesign, Illustrator, and Power BI. Dan has also been at the forefront of integrating AI into design and business workflows, spearheading Noble Desktop’s latest AI course offerings. In addition to teaching and curriculum development, he writes custom scripts for InDesign (Make Book Jacket, Proper Fraction Pro, and more) and works with automation and AI-driven tools in his free time. You can find Dan on X (Twitter), LinkedIn, Facebook, and at danrodney.com.

Learn more about [Dan Rodney's](/dan-rodney) background and expertise.

## Pricing

**Tuition:** $1695
