Intro to User Interface Design artwork

Intro to User Interface Design


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

Purchase this course for $149

Or... get a discount by building a bundle with our learning paths!

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

What you’ll get

7+ hours of video lessons – Covering the basics and best practices in UI

Student resources – Resources to get you started and keep you going post-course

Continued help post-course – Help from our expert instructors with years of experience in the industry

UI design projects – A portfolio-ready project and case study. Follow along or create a project you can use in your portfolio.

Access to the SuperHi community – Join our Slack network of thousands of students and alumni around the world

Homework exercises – Test your knowledge with exercises based on the course projects

Who this course is for

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.

What you’ll need

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!

Want to try our teaching before signing up? Join our free 'Plan, Design + Code Your First Website' course!


Chapter 1

Mood Ring, part 1

In the first part of the project, students will learn the value of design styles and documentation, and learn how to implement type, color and grid styles in Figma.

Using wireframes, they'll design out onboarding screens for Mood Ring using their newfound understanding of styles and systems.

Chapter 2

Mood Ring, part 2

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.

Using wireframes, they'll design out onboarding screens for Mood Ring using their newfound understanding of styles and systems.

Chapter 3

Mood Ring, part 3

In the 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. Students will also learn about responsive design, and creating styles, components and variants for different screens.

Using wireframes, they will design out all previous screens for Mood Ring in Tablet.

Your instructors

Our instructors have decades of professional experience, have spoken at international conferences and have won countless web design awards.

Paras Memon

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.

You might also like...


What can UX/UI folks learn from Game Design?


In just 30 minutes, learn how to analyse and test any interactive system with a game lens, using well established and very effective tools from the game designer’s toolkit.


The Responsible Technology Toolkit


Build digital services that care about people, society and planet


Plan, Design + Code Your First Website


Gain a whole range of new creative and digital skills so that you can design and build your first website from start to finish – all for free!

Free resources to get you started

View our growing collection of guides for creatives, featuring practical insights and advice on careers, making, and working.


If you like creating things and you're comfortable working with a computer, then yes! Also, design is for everyone.

Learning new and improving your existing skills is about being patient with yourself, building up your knowledge, and developing confidence through practice and with time. We've seen our students around the world do it, and so can you.

Our beginner courses are designed for people new to the subjects. The courses are designed to build your understanding so you grasp everything you need to start applying your new skills and will also give you a path to dig deeper, if you want.

Our teaching style is practical and straightforward and you'll have support from our expert instructors and community for as long as you need!

Still not sure if learning to design is right for you? Take our free Plan, Design + Code Your First Website course or dive into our First Steps to Design guide.

I'm interested in becoming a UI designer. Is this course for me?

This course will teach concepts and practical skills leading towards a career as a UI designer. Depending on the company, role, and specialty, you may also find it helpful to gain skills in UX or code, but Visual Design and Branding is an excellent foundation for any kind of UI role.

Will this course help me design a portfolio website?

Definitely! You'll work on several projects that you can actually include in your portfolio to showcase your skills. You'll learn about creating a visual and brand identity and how to design for the web, all of which you could apply to yourself and your portfolio. We also offer portfolio and resume reviews after you've completed the course. There isn't any coding involved in this course, so if you want to build a portfolio site from scratch and don't have code experience, we recommend taking this along with our code courses.

Will this cover designing for the web?

Yes! This course focuses primarily on digital design and branding for the web, and teaches important concepts such as designing responsive websites for desktop and mobile, designing with code in mind, and working with text on the web.

In lesson 6, we ramp things up and dedicate an entire two weeks to Designing for Screens. During those weeks we also cover the basic concepts of CSS you can know what kinds of layouts are best for the web.

I want to learn UX Design in a hands-on way. Is this course for me?

This course is a foundational course for anyone looking to start out or sharpen their skills in user experience design methods. Our lessons are full of practical content and everything you do in class can apply on your own. We even have a paper prototyping lesson where you'll watch, from start to finish, how we approach design by thinking through this phase with our bare hands. A true "hands-on learning" experience! Beyond that, we do a lot of UX design and prototyping directly in Figma. You won't be guessing at how things are done - you'll see it all in action!

What will I be able to do after this course?

We're all about teaching practical skills you can actually apply. You'll get to watch as we work through an actual brief and project through the course so that you understand how theory applies. After the course, you'll be able to apply UX theory and methods to various tools to research, design, and prototype your own projects!

I'm interested in pursuing UX Design as a career. How will this course help me?

This course will teach you the theory and practical skills needed to start a path towards becoming a UX Designer. After the course is over, you'll still have our support when it comes to things like career questions, resume, and portfolio reviews, all to help you get the job and career you want. Many of our students have made career changes and advancements, and we have the success stories to prove it!

All of our courses are unlocked and available for students to start their learning and go at their own pace. We do have a suggested weekly structure for some courses, which helps some students stay on track. However, you're definitely free to jump ahead or take as long as you need!

As soon as you checkout and pay, you'll have all the courses you paid for, in your student dashboard available to you immediately. If you're busy and can't start right away - no worries, you can pick it back up later.

Yes, we do! All you'd need to do is send the links to your completed projects over to at the end of your course. We will review them, provide feedback if necessary, and then issue your certificate!

Using Figma:

Here at SuperHi, we use Figma - it's a powerful design tool that's not only free but also used by professional designers at all levels. Most design work done by the SuperHi Team is through Figma! These are some of our courses that use Figma:

We're also happy to say that our SuperHi students have access to Figma Pro. To enjoy Figma Pro features, drop us an email at