BEGINNERCOURSE
Intro to User Interface Design
Build scalable design systems and bring wireframes to life through UI best practices, styles, components, and more.
Taught by
Paras Memon
Taught by
Paras Memon
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.
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!
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.
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
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
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
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 workDon’t worry, we are here to help you with:
Remember, there’s no such thing as a silly question, so don’t hesitate to reach out, we love hearing from you!
