SuperHi FM

Search:

Catalog Cart About Sign in

BEGINNERCOURSE

Intro to User Interface Design

Build scalable design systems and bring wireframes to life through UI best practices, styles, components, and more.

Paras Memon

Taught by

Paras Memon

Design Elements + Principles for the Web, Patterns + Styles

Design Elements + Principles for the Web, Patterns + Styles

Lesson 01

A Brief History of the Graphic User Interface

Lesson 02

Understanding UI Design

Lesson 03

Introducing Patterns

Pattern-level Thinking, UI Elements + Components

Pattern-level Thinking, UI Elements + Components

Lesson 01

Introducing Components and Instances

Lesson 02

Naming and Understanding Components and Instances

Lesson 03

Looking for Components in the Wild

Complex Components (Variants) + Responsive Design

Complex Components (Variants) + Responsive Design

Lesson 01

Learning About Variants and Different States

Lesson 02

Understanding States in the Context of Accessibility

Lesson 03

Introducing Project Part 3: Designing Variants and Responsive Design for Mood Ring

Get access to Intro to User Interface Design

Practical, go-at-your-own pace learning, with help from our industry experts and experienced teachers
Projects and code that you can alter and include in your own sites and portfolio
Resources to get you started and going post-course

Your instructor

Paras Memon

Paras Memon

Senior Learning Designer

Course structure

Chapter 01

Design Elements + Principles for the Web, Patterns + Styles

Lesson 01
A Brief History of the Graphic User Interface
Lesson 02
Understanding UI Design
Lesson 03
Introducing Patterns
Lesson 04
Design Elements and Principles in the Context of UI Design
Lesson 05
Introducing Exercise 1: Design Styles
Lesson 06
Exercise 1: Design Styles in Figma
Lesson 07
Introducing Project 1: Mood Ring
Lesson 08
Project 1: Starting to Design Mood Ring
Lesson 09
Project 1: Implementing Styles + Working on Mood Ring’s Pattern Library
Lesson 10
Project 1: Designing Remaining Onboarding Screens for Mood Ring
Homework 01
Mood Ring: More Onboarding Screens

Chapter 02

Pattern-level Thinking, UI Elements + Components

Lesson 01
Introducing Components and Instances
Lesson 02
Naming and Understanding Components and Instances
Lesson 03
Looking for Components in the Wild
Lesson 04
Introducing Exercise 1: Building Components from the Wild
Lesson 05
Continuing Exercise 1: Building Components from the Wild Ctd
Lesson 06
Introducing Project Part 2: Mood Ring Log In
Lesson 07
Project Part 2: Starting Mood Ring Log In
Lesson 08
Project Part 2: Continuing Mood Ring Log In 1
Lesson 09
Project Part 2: Continuing Mood Ring Log In 2
Lesson 10
Project Part 2: Completing Mood Ring Log In

Chapter 03

Complex Components (Variants) + Responsive Design

Lesson 01
Learning About Variants and Different States
Lesson 02
Understanding States in the Context of Accessibility
Lesson 03
Introducing Project Part 3: Designing Variants and Responsive Design for Mood Ring
Lesson 04
Project Part 3: Introducing Tablet Styles
Lesson 05
Project Part 3: Updating Existing Components and Adding New Components
Lesson 06
Project Part 3: Applying New Styles and Components to Tablet Onboarding Screens
Lesson 07
Project Part 3: Designing Project Part 1 in Tablet
Lesson 08
Project Part 3: Designing Project Part 2 in Tablet

SuperHi students work at the best

Our students are based all over the world and work at creative companies large and small. Why not check out some of their work?

View student work

Feeling stuck?

Don’t worry, we are here to help you with:

Speedy help from one of our team members
Detailed, relevant solutions
Direct access to peer support through Discord!

Remember, there’s no such thing as a silly question, so don’t hesitate to reach out, we love hearing from you!

© 2024 SuperHi, Inc.

Learn

All courses Code Design Project management SuperHi Editor

Company

About Student work SuperHi for Business NEW Careers Newsletter

Support

Return policy Terms of use Discrimination policy Code of conduct Contact us

Are you interested in learning how user interface can improve the user experience? Our user interface design course teaches students how to bring wireframes to life by considering visual and design principles for the web, pattern-level thinking, Figma styles, components and complex components, and the importance of file hygiene.

You'll learn how to think like a UI designer and confidently build design systems that scale.

What you’ll learn

What the user interface is, when it was invented and why it's important
How to optimize your use of web design tools like Figma to create styles, components, complex components, and layouts
How to spot and analyze pattern-level thinking and design systems in everyday web
How to reduce design debt in your own designs by engaging in best practices for naming and organizing layers, frames and files
How to bring wireframes to life to create an interesting, thoughtful, and unique – yet familiar – interface.
How to continue to prioritize the user experience in user interface design

Requirements

A computer with Mac OS X 10.15 or above, Windows 10 or above, or a recent Linux version installed and a broadband internet connection. That’s it!

Target Audience

Anyone who wants to better understand how to incorporate creative design in the digital space while balancing systems thinking and learn how UX and UI can work in tandem to create a successful product.

You don’t need to have any experience with UI prior to taking this course or any coding knowledge. However, students are advised to have a basic understanding of Figma and UX.

Most of our students work in the creative and tech industries, but you can work in any industry to join the course.

Welcome to Intro to UI! In our first chapter, we’ll briefly cover the history of UI and UI design, as well as understanding UI’s relationship to other aspects of digital design. We’ll begin tackling some exercises, projects and homework in Figma, learning important tools, tricks, best practices, and the importance of patterns and styles in designing a successful UI.

In the second part of the project, students will incorporate reusable design elements, also known as components, into their designs. Using their knowledge of design styles, students will create and componentize design elements that will be used across several touch points on the site.

In our third and final part of the project, students will take their components to the next level with the introduction of variants, also known as component groups with properties and values, as well as responsive design. Students will see how organizational work in Chapter 1 & 2 come full circle to design out previous screens in tablet, further scaling their design system.

Paras (she/her) is a digital product designer, continually working to bridge the gap between products and ideas through colors, shapes and space. Prior to teaching, Par freelanced for small yet mighty Brooklyn brands such as Buffy, Cadence, Dripkit, The Recount, Rosemilk Ceramics, WriteyDrawey and more. Outside of SuperHi and weather-permitting, you can find her laying on a patch of grass with her sweet dog, Virginia Woof.