This video is what I wish I had when I first learned about UI/UX design. It covers that 20% of UI design that you'll be dealing with 80% of the time. Hopefully it'll help you start your journey or at least know what you're stepping into. Happy creating!

// ✨ Check out the site we just designed together:
https://stacksorted.com

// ✨ Helpful links:
https://icons8.com/
https://spline.design/
https://freehandapp.com/
https://balsamiq.com/

// ✨ Become a supporter:
https://ko-fi.com/juxtopposedme

// ✨ Let's connect:
Twitter: https://twitter.com/juxtopposed
CodePen: https://codepen.io/Juxtopposed
Dribbble: https://dribbble.com/juxtopposed
Github: https://github.com/juxtopposed


———

// Timestamps:

00:00 Intro
00:20 Design starts with...
00:34 Step 1: User Flow
00:55 Step 2: Wireframes
02:21 Step 3: Design System
04:37 Step 4: Actual Designing
06:02 Bonus Step



--------

Music and sound effects:
https://www.youtube.com/watch?v=q1JB2uIpwL0
https://pixabay.com/users/shidenbeatsmusic-25676252/
https://pixabay.com/music/synthwave-neon-gaming-128925/

———

#uidesign #uxdesign #designcourse #webdesign #shortestUIdesigncourse

So you know Figma, but you want to know how to design a website, app, game or any other product.

UI design tools are easy to learn and hard to master.

What helps you master them is knowing what exactly you need to do.

No bullsh**, just what you need to get started.

Fundamentals, standard procedures, and helpful resources.

A designer starts with a main idea, a solution to a problem, or a use case.

For example, I really needed a web application to collect element-specific designs like these, so designers and developers like you and me can find inspiration.

The people you hope to use your product probably have certain expectations.

They're looking for some info, wanna buy something or just use the service.

You need to map out that main journey from the moment they land on your site till that key objective is achieved.

In this project, for example, when users land on the site, they should immediately find the category and the websites in it.

From the user flow diagram, we'll try to create corresponding screens or pages.

Each page or screen is supposed to contribute to reaching that key objective in a way.

If users are supposed to shop for something, then there's a store page, product page, cart, payment page, and success page.

You can start drawing layouts for different screens in the form of wireframes, which requires real hard thinking and analysis of user behavior.

Back in 1800s, we used pen and paper to draw wireframes, but thanks to technology nowadays, we're lucky enough to do them on tools like Balsamiq, Envision Freehand, or just Figma or Fake Jam like a normal person.

For example, in this project we want a simple and straight to the point design, so just 1 single screen.

We need some navigation in the header and footer.

Our main goal is showing users designs in different categories.

It has to be simpler and more accessible, like right in front of everyone's eyes.

How about just a simple sidebar with the categories, like Font Awesome for example?

We also want to showcase different designs, a lot of them, on this remaining site.

We have several sources of inspiration for this that have proven to work, like Dribbble.

So we need our designs in a little grid over here, and this grid should have a link to the source of the design, its name, and just a simple image preview.

What we just did was a brief version of user experience or UX design.

It can be extended and have you go through other steps as well, depending on how complicated your project is.

This marks the beginning of our user interface or UI design journey, where we deal with visuals.

Every design project is led by a guideline that specifies reusable components.

As you can imagine, this makes everything consistent, like colors, fonts, buttons, forms, boxes, cards, icons, and so on.

It can be very big or very small, like the 1 we have here.

Starting with colors, they should reflect your project's industry, value, or brand identity meaning logo, product, or brand colors.

For this project, I just know I want it to be in dark mode with mostly neutral colors like black, white, and gray and maybe 1 primary vivid color.

I'm not really sure what I want yet, so I'm using real-time colors to simulate my color choices on a real site, making sure they're accessible and look good.

But generally speaking, you want your colors to be as comprehensive as possible.

For example, background color, text color, primary, secondary, accent, and semantic colors.

Each of them can have different variations too, like shades, gradients, and transparent versions.

Next up, we have fonts, which directly impact the readability of your content.

Plus, the fonts can give off a certain vibe.

Funky, elegant, serious, childish, and oh god, what is this?

Again, I'm using real-time colors to test out some fonts from Google Fonts quickly, which lead me to 2 fonts, Space Grotesque and Ubuntu.

Then I'm using TypeScale to find a good ratio and readable sizes for these fonts and make a list of them on Figma.

I'm using the standard responsive sizes of 18 pixels for body text, 14 pixels for small text, and 32 pixels for the title.

For icons, there is a massive library of resources and plugins on Figma itself.

You can even make them yourself like I did here.

There are different types of icons like flat, skeuomorphic, glyph, duotone, 3d, outlined and so on.

Other major parts are buttons, inputs, cards and really whatever your project needs.

For example, for this project we need buttons, category inputs and website cards.

The style I'm choosing is outlined and transparent.

No, no, no, wait, wait, yeah, there's an infinite number of styles.

Actually, that's where you come in to design 1.

Good news is that there are many resources to get inspired, like Dribbble, Behance, and even the site we're designing right now.

Now you have all the ingredients and it's time to cook a design.

Keep these 6 basic design principles in mind.

Visual hierarchy helps show the order of importance among elements.

Contrast helps distinguish elements and make them readable or accessible.

Balance helps moderate the spacing, alignment, or the placement of different elements.

Consistency helps keep elements harmonical and avoids user confusion.

Simplicity keeps things clear and straightforward for users.

And for extra interaction, feedback keeps users engaged and gives them some clear reaction for their actions.

Now, designing is not just assembling the elements.

You will need to test, iterate, prototype, and refine a lot in this step.

Nowadays we browse tens of applications and websites on a daily basis and already have some expectations.

So you don't need to escape the matrix or calculate the answer to life, universe, and everything to come up with a design that users are already accustomed to.

The only remaining step is filling it up with some text like UX copy or marketing copy.

You either use some good old lorem ipsum dollar sit and med consecta tour a dip a sink a lid or hear me out writing some actual content even if they're not going to be used at all.

This helps with testing and creates realistic expectations of different sections before finalizing them.

By now we're also done assembling the design for this project, but still 1 step remains.

If you need to add graphics, there are thousands of free and paid resources that provide you with them.

You can make them yourself too, which is much cooler.

Luckily, you don't even need fancy software like Adobe Illustrator or Procreate to make illustrations.

You can literally just use Figma for most styles or Spline for 3D designing.

For this project we didn't really plan for any illustration because it's supposed to be very minimal.

The good news is that I've turned this design into a live site and now you can use it to get some inspirations for designing your own project elements.

You can contribute to it too by adding your favorite designs to it.

From here on you can build up on your knowledge by designing, designing and more designing.

If you liked it, make sure you do your magic down there, and see you on the next 1.


Speaker 0: So you know Figma, but you want to know how to design a website, app, game or any other product. UI design tools are easy to learn and hard to master. What helps you master them is knowing what exactly you need to do. So let's learn UI and UX design. No bullsh**, just what you need to get started.

Fundamentals, standard procedures, and helpful resources. A designer starts with a main idea, a solution to a problem, or a use case. For example, I really needed a web application to collect element-specific designs like these, so designers and developers like you and me can find inspiration. Got a good idea? Let's go step by step.

Step 1, user flow. The people you hope to use your product probably have certain expectations. They're looking for some info, wanna buy something or just use the service. You need to map out that main journey from the moment they land on your site till that key objective is achieved. In this project, for example, when users land on the site, they should immediately find the category and the websites in it.

We call this a user flow diagram. Step 2. Wireframing. From the user flow diagram, we'll try to create corresponding screens or pages. Each page or screen is supposed to contribute to reaching that key objective in a way.

If users are supposed to shop for something, then there's a store page, product page, cart, payment page, and success page. You can start drawing layouts for different screens in the form of wireframes, which requires real hard thinking and analysis of user behavior. Back in 1800s, we used pen and paper to draw wireframes, but thanks to technology nowadays, we're lucky enough to do them on tools like Balsamiq, Envision Freehand, or just Figma or Fake Jam like a normal person. For example, in this project we want a simple and straight to the point design, so just 1 single screen. We need some navigation in the header and footer.

Our main goal is showing users designs in different categories. How could we implement that? Maybe a little drop-down menu, a filter? It has to be simpler and more accessible, like right in front of everyone's eyes. How about just a simple sidebar with the categories, like Font Awesome for example?

That's a good inspiration. We also want to showcase different designs, a lot of them, on this remaining site. We have several sources of inspiration for this that have proven to work, like Dribbble. So we need our designs in a little grid over here, and this grid should have a link to the source of the design, its name, and just a simple image preview. What we just did was a brief version of user experience or UX design.

It can be extended and have you go through other steps as well, depending on how complicated your project is. Step 3. Design system. This marks the beginning of our user interface or UI design journey, where we deal with visuals. Every design project is led by a guideline that specifies reusable components.

As you can imagine, this makes everything consistent, like colors, fonts, buttons, forms, boxes, cards, icons, and so on. It can be very big or very small, like the 1 we have here. Starting with colors, they should reflect your project's industry, value, or brand identity meaning logo, product, or brand colors. For this project, I just know I want it to be in dark mode with mostly neutral colors like black, white, and gray and maybe 1 primary vivid color. I'm not really sure what I want yet, so I'm using real-time colors to simulate my color choices on a real site, making sure they're accessible and look good.

But generally speaking, you want your colors to be as comprehensive as possible. For example, background color, text color, primary, secondary, accent, and semantic colors. Each of them can have different variations too, like shades, gradients, and transparent versions. Next up, we have fonts, which directly impact the readability of your content. Plus, the fonts can give off a certain vibe.

Look at these fonts! Funky, elegant, serious, childish, and oh god, what is this? Again, I'm using real-time colors to test out some fonts from Google Fonts quickly, which lead me to 2 fonts, Space Grotesque and Ubuntu. Then I'm using TypeScale to find a good ratio and readable sizes for these fonts and make a list of them on Figma. I'm using the standard responsive sizes of 18 pixels for body text, 14 pixels for small text, and 32 pixels for the title.

For icons, there is a massive library of resources and plugins on Figma itself. You can even make them yourself like I did here. There are different types of icons like flat, skeuomorphic, glyph, duotone, 3d, outlined and so on. Other major parts are buttons, inputs, cards and really whatever your project needs. For example, for this project we need buttons, category inputs and website cards.

The style I'm choosing is outlined and transparent. How do you choose a style, you ask? Well, there are about 5? 10? No, no, no, wait, wait, yeah, there's an infinite number of styles.

Actually, that's where you come in to design 1. Good news is that there are many resources to get inspired, like Dribbble, Behance, and even the site we're designing right now. Step 4. The actual designing. Now you have all the ingredients and it's time to cook a design.

Let him cook! Keep these 6 basic design principles in mind. Visual hierarchy helps show the order of importance among elements. Contrast helps distinguish elements and make them readable or accessible. Balance helps moderate the spacing, alignment, or the placement of different elements.

Consistency helps keep elements harmonical and avoids user confusion. Simplicity keeps things clear and straightforward for users. And for extra interaction, feedback keeps users engaged and gives them some clear reaction for their actions. Now, designing is not just assembling the elements. You will need to test, iterate, prototype, and refine a lot in this step.

Nowadays we browse tens of applications and websites on a daily basis and already have some expectations. So you don't need to escape the matrix or calculate the answer to life, universe, and everything to come up with a design that users are already accustomed to. The only remaining step is filling it up with some text like UX copy or marketing copy. You either use some good old lorem ipsum dollar sit and med consecta tour a dip a sink a lid or hear me out writing some actual content even if they're not going to be used at all. This helps with testing and creates realistic expectations of different sections before finalizing them.

By now we're also done assembling the design for this project, but still 1 step remains. Bonus step, illustrations and visuals. If you need to add graphics, there are thousands of free and paid resources that provide you with them. You can make them yourself too, which is much cooler. Luckily, you don't even need fancy software like Adobe Illustrator or Procreate to make illustrations.

You can literally just use Figma for most styles or Spline for 3D designing. For this project we didn't really plan for any illustration because it's supposed to be very minimal. The good news is that I've turned this design into a live site and now you can use it to get some inspirations for designing your own project elements. You can contribute to it too by adding your favorite designs to it. This is just the beginning of a journey.

From here on you can build up on your knowledge by designing, designing and more designing. And that's all for this video. If you liked it, make sure you do your magic down there, and see you on the next 1.

See all Juxtopposed transcripts on Youtube

world's shortest UI/UX design course