# UX & UI Design Summer Program Online (High School)

Canonical URL: <https://www.nextgenbootcamp.com/classes/ux-ui-design-summer-program-online>

## Overview

### Dive into UX & UI Design

Learn how to make apps and websites that are easy and fun for people to use. In this hands-on summer bootcamp, you'll explore key UX & UI concepts and learn skills that are in high demand in world-class tech companies. You'll use Figma (a free prototyping app) to make clickable product designs and test them on users. No coding required!

This beginner-friendly course kicks off with an introduction to user interface (UI) design. You'll learn the common patterns and shared visual language that apps and websites use in their interface designs, and you'll apply that knowledge by creating your own UI designs with Figma. Next, the class will explore user experience (UX) design concepts. You'll learn about and use interviews, user personas, and journey maps for researching and planning your project. You'll then use Figma to translate your findings into clickable prototypes and refine them through testing to ensure your product is user-friendly. We'll also bring AI into the mix throughout the course. Designers today are using AI to accelerate user research and generate interface ideas faster than ever, so you'll see exactly how your new skills plug into the way modern products are built.

As you refine your projects, your instructor will cover essential topics for anyone interested in a UX & UI design education or career, including creative briefs, workflows, portfolio development, and more. You'll finish the course with a strong basis of knowledge and demonstrated skills in digital design.

## What you'll learn

- Learn key UX & UI principles for designing user-friendly websites and mobile apps
- Use Figma to design interfaces and build interactive, clickable prototypes
- Conduct user research through interviews and personas to shape your design decisions
- Sketch wireframes, map out user flows, and refine your prototypes through user testing
- Explore visual design elements including color theory, typography, layout, and responsive design
- Build case studies and a personal portfolio website with 1-on-1 feedback from your instructor

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

### Learn Figma

#### Create Visual Designs & Clickable Prototypes

- Learn how to use Figma to create clickable prototypes to show users for testing, or for clients to see your work.
- Design the UI (user interface of websites, apps, etc) in Figma. 

### UX Design Concepts

#### Intersection of Design, Technology, & Business

- Through critical analysis understand how user experience as a field sits in the intersection of different areas of the product.
- What is the difference between User Experience Design and User Interface Design?
- Learn about heuristics and apply heuristic evaluation to websites.
- Competitive Research

#### Knowing Your User

- Learn how to structure and conduct user interviews to better identify the needs and current behaviors of the user.
- Understand how to engage the user to work through assumptions and preconceived notions that arise during the process.
- Write down assumptions for your class project.

#### User Research Through Interviews

- Refine user interview questions.
- Interview classmates for your project.

#### Refining User Research and Creating Personas

- Create user personas from the interviews to represent the goals and behaviors of the users within the system.
- Develop user scenarios to show when and how the user engages with the system.

#### Synthesis of User Research, Journey Maps, and User Flows

- Continue to synthesize results of user research to find patterns.
- Create a journey map for your project.
- Think through the different features of the system by building user flows.
- Take the written narrative to the next level through sketching and improvising using techniques such as storyboarding and bodystorming.

#### Wireframing, Sketching, Prototyping

- Practice a sketching session for an existing website or mobile application of your choice. Start with sketching on a whiteboard or your notebook.
- Sketch wireframes for your class project.
- Learn the power of prototyping and testing an idea. Understand different methods of prototyping and their levels of fidelity.
- Discuss the motivation behind the prototyping, such as newly discovered user goals, business needs and improved functionality.

#### Prototyping & User Testing

- User testing methods and strategies.
- Do’s and don’ts of user testing.
- Do a user test on your project with a classmate.
- Clearly list the assumptions and test your concepts. Work on multiple iterations of the prototype based on the test results.

#### Iterating the Prototype and Further User Testing

- Report conclusions based on user testing.
- User testing reports.
- Rework the prototype based on user testing conclusions.

### Case Studies

#### Building Case Studies

- Look at case study examples.
- Finish your clickable prototype.
- Using a compilation of user research, prototypes, photographs, and user research, build your case study.
- Present class projects as case studies on-screen.

### Creative Briefs

#### Getting to Know a Project: Creative Briefs

- What is a Creative Brief?
- What to Include in a Creative Brief

### Wireframing for UI Designers

#### Wireframing

- Why and How 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

#### Workflow: Idea to Design

- Example Web & App Design Workflows

### The Business of UX & UI Design

#### The UX & UI Design Industry

- Getting into the business: strategies and ideas.
- Resources

### Portfolio Website & Job Preparation

#### Creating Your Portfolio Website

- Examples of UX & UI portfolio websites
- What you should include on your portfolio website
- Get 1-on-1 feedback on your case studies & portfolio website

#### Resume Development

- What you should include on your resume
- Get 1-on-1 feedback on your resume

## Schedule
- Jul 20, 2026 – Jul 24, 2026 — Live Online

## FAQ

### What’s included with my tuition?

- A hands-on learning experience working on projects and exercises, which is proven to boost comprehension, retention, and engagement
- Expert instructors who are industry professionals and experienced educators that are driven to help you succeed
- Top-notch curricula that have been tried and tested over many cohorts and are consistently improved for an optimal learning experience
- Supplemental materials to assist both during and after the course - please refer to specific course pages to see what supplemental materials are offered
- A certificate of completion to verify your accomplishment

## Pricing

**Tuition:** $1299
