Creativity, Components + Community: In Conversation with SuperHi's UI Design Teacher

Faith: Welcome Par! We’re going to be talking about your new Intro to User Interface Design course today. Firstly, can you tell us a bit about your background?

Par: So my name is Par, I'm based in Brooklyn, New York. I've been a designer for a few years, specifically product design. My entry into design was actually not very linear. I didn't go to school for design, and I actually dabbled in a few other career choices before finding my way into it. Shortly before design, I was working in marketing and that led me to the world of design.

Did you take some extra courses?

Yeah. So design had always been a hobby, sort of like a part-time thing. I'd always been creative. And when I decided to pivot my career, I went back to school for design, which was a bootcamp. After I graduated from that bootcamp, I continued to lean into online resources. So whether it was online courses or online conversations in communities that continued to build my design skills. And that's how I actually found SuperHi as a student first. I took the Foundation course. That was the very first course I took at SuperHi and then they started to release design courses, so Visual Design + Branding, as well as Intro to UX. So I know SuperHi from a student perspective too.

I eventually became friends with Rik through these online conversations and communities and I indicated that I was interested in teaching. Rik and I had a chat and I wanted to help build out SuperHi's design curriculum, and just seeing what they had built out so far with Visual Design + Branding, which is kind of like a generic design generalist sort of course, and then Intro to UX, which starts to get into digital design and user experience thinking. It just felt really natural to make a course for user interface design as a complementary course to user experience design, because the two have a lot of overlap and they're often confused for one another. And especially since it just felt like a hybrid of Intro to UX and Visual Design + Branding, in a lot of ways to create Intro to UI because it touches on how to bring wireframes to life. It touches on design elements and principles in the context of digital design.

I feel like a lot of times people can think about digital design and graphic design as almost like they're two different categories. But there's a lot of overlap and give and take between the two. And they also depend on each other.

So a big conversation that's hot in design right now is design systems. Intro to UI just felt like a good beginner-level place to start to get people thinking about how to optimize their use of Figma, how to bring wireframes to life, not just populate them and put in a CTA, but how to really craft that experience and personalize it to the product that you're building.

Yeah, I've had a peek at the course and that appears quite early on, starting that design system process, right?

Yeah. I think a lot of people get confused between like, "Do I build my app first and then design system second? Or do I build my design system first and the app second?" And it really is a bit of a conversation. So I wanted students to get a glimpse of the process from my perspective, that is, I don't think there's one way to design. It's really such a lesson watching other designers design and seeing their process, it inspires you. You're like, "Oh, I wouldn't have thought to do it that way." Because there's 10 different ways to do things on Photoshop and a million different ways to do one thing on Figma.

That's cool. Is this course for complete beginners or is it for people who are designing already?

It is a beginner-level course but you are supposed to come with sort of understanding of using Figma as a tool, as well as just having some understanding of design concepts, both in graphic design and digital design. If you've taken Visual Design + Branding and Intro to UX, those are helpful.

And you've mentioned that we have the UX course. Can you explain the main differences between the two courses?

The UX course is about user experience and we touch a little bit on it in the Intro to UI course. User experience is when you're building out a product and you're really trying to understand the structure of it and the flow of it. It doesn't really touch on visual design. You'll see a lot of wireframes, a lot of gray boxes. You'll be doing a lot more research and user testing, but you don't really touch on visual design aspects of it. 

It goes further than that though because there's also interaction design. There are animations that you can think of in your app, so do you want your button to get slightly larger and then smaller when a user taps it? Things like that. Intro to UI is the first step from taking those gray boxes and then really just bringing them to life with the brand styles and elements.

So it's like the prettier course of the two?

Yeah, she's the pretty sister.

And the project that you've created, Mood Ring. Can you tell us about that?

Sure. Mood Ring is a mindfulness and astrology app. I've noticed a lot of people using more of these apps in general. It needed to be a personalized app, so we couldn't just make something like a gradient maker, for example, because you don't need to have a login for that. 

By designing a personalized app, students see more styles and components being in use as well as more screens. Something nice about onboarding screens is that they have different states. So we have error states if somebody enters their username or password wrong. We'll have check boxes if they want to subscribe to the mailing list. We'll have enabled and disabled buttons, so if they haven't input their information, they can't tap onto the next screen until they fill it out. And so there's just a bit more interaction there. 

Onboarding screens are part of our daily lives. We look at them all the time without realizing it. When I think about apps that are focused purely on me, those are my workout apps, mindfulness apps, astrology apps.

So it just felt natural to build out this project. You can personalize it to yourself. If students find that their app looks a little bit different or they want to apply more different gradients to it, they're welcome to do that. It's something that invites you to use your imagination. There are collages in the Figma files we provide that students are able to personalize. Of course we've created some for students as starters, but we provided them with a lot of imagery and resources where they're able to go in and create their own collages or scrap collages altogether and change the colors, change the font and make something that feels right to them.

That's cool. Do students need any other software aside from Figma? 

I mention in chapter one that students can use Adobe XD or Sketch if they prefer. I prefer Figma and I encourage students to use Figma because that's just easier to follow along with me and the course but a lot of these programs are similar in their interface, capabilities and shortcuts. In chapter two, we're going to dive into Chrome extensions and Google Inspect and use those tools to learn how to analyze a site and strip a site and really understand some design decisions.

I feel like the best way to learn design is to just open your mind to how it exists around us every day. Something that I started doing when I was trying to become a better designer is I would log in to a site and my mind automatically would click into this design mode. Even if I was on the Etsy site or something to shop, I would start to think about the user experience and the user interface from a design perspective. That strengthened my skills as a designer so much. So in chapter two, we cover how to think like a designer and how to strip sites and understand from what fonts they're using to, then get super granular to font sizing, spacing, styles, grids. All of this information is online and available to you. You just have to figure out some tricks to get there.

That's super cool. I love that thought process. So you mentioned that chapter two's coming out. And just to touch on what the beta launch is and how that's working, so can you explain how we're doing this and what the feedback process is? Because it's not available to everyone just yet.

Par: Yeah. So the beta testing is fairly new and it's for members only, and SuperHi launched memberships earlier this year. And with membership, there come a bunch of perks so you have access to all of the courses, you have access to beta and it's going to be a bunch of other releases as well. So this course coming into beta mode was... It's been a while since SuperHi has launched a design course and we just wanted to really make sure that we were in conversation with our students through the entirety of the process and iterating based on their feedback.

We launched just the first chapter to get a sense of how students feel about it and understand what might be some things that they are really enjoying and what might be pain points. We also have Office Hours where I walk through the course and its learnings and students tell us how they feel about it and ask me questions. It’s this idea of tech and community really coming together to create a successful product.

Great. So by the end of the course, what will students be able to do confidently?

They will get a better understanding of Figma. They'll just feel so much more confident in it. And of course, Figma has updated a lot since our other two design courses were released. Figma is really good at adapting to how designers are working today.

Things like design styles, components, and complex components are really valuable best practices in digital design right now. I want students to learn it really early on because it saves you from a lot of struggle later on in your design. It saves you from miscommunications with your team. Like if your hex code is slightly off, when you have that established as a design style, it's much harder to stray when you have this source of truth that you can always go back to, which is helpful when you're collaborating with a big team or freelancers. Even if you're working alone, you don't want to change every instance of something when you have the tools to create a style. If you update the master style, it shifts everything else.

When you're working with multiple screens or you're working on a large scale project, it can be very discouraging when you have to make small tweaks. It can get really cumbersome to apply it in every instance. Digital design is different that way because with visual design you probably have a set amount of things. Whereas digital, you could have so many screens on an app or website and it can very quickly scale. These design tools are built to support us in scaling. It's something that I wish I had learned earlier.

So it's laying the foundations for really solid systems...

Totally. In the past, in Photoshop a button was really text over a box and that's what it was. Then Figma came along and all these other programs and they introduced all the layout. Now your text is within the box, but if you add more text to it, the box responds and will get bigger with the text. Then they created components, which now means that if you're using the button across several screens, that's an instance and if you update the component, you can go and change that in one place and it'll update it through all screens. Then came the variants. So you'll sometimes have 10 different buttons. You'll have one for the standard button, you'll have it for press, you'll have it for focused, you'll have it for disabled. And you'll have different variations of that, like a primary button and a secondary button. And these complex components or variants accommodate all of your different buttons with... But it's all still just one button. And so the programs have gotten smarter and helped us. Even though an outsider might not understand all the different ways to get to this final place, behind the scenes in your Figma file, you can see all the secrets and you want it to be good. You want it to be good for yourself, your team, feature team.

Nice. And if you take this course, can you call yourself a UI designer? Is that it?

Yeah, so I feel like a lot of people don't actually call themselves UI designers. There are a lot of terms in design. You can call yourself a UI designer but the better term would be a digital product designer or a digital designer or UI/UX designer. We do cover some components of UX in this. I think it's useful for students to take UX course first because when you're at the UI stage, you need to understand how wireframes work so that you can honor the functionality and make sure that the visual design that you apply to it supports it. The two systems lean very much on each other.

Interested in taking Intro to User Interface Design? It's currently in beta and only available to SuperHi Unlimited members. For more info and to sign up, visit our Membership page!