Every UI/UX Concept Explained in Under 10 Minutes

If you want to get good at UIX design, you got to start with the basics. So,

let's begin.

This one's easiest to explain with an example first. If I have three text and

example first. If I have three text and icon pairs, but I put a container around drinks and food, you know that they're related and dessert is not. Then, if I put a container around drinks, you know that it's selected and you can toggle

over to food. And if I gray this text out, you know that it's inactive and clicking it probably won't do anything.

See how you just knew all of that? I

didn't need to write instructions on how it worked because the UI was signifying how things worked. Good UI has many signifiers like a button press state, highlights on active nav items, hover

states, or even tool tips to tell the user what a UI affords or what it can do.

Now, take a look at this card. It

displays all of the information in a logical, repeatable format, but it looks like a spreadsheet, not a design. So,

let's give it some hierarchy, which is pretty intuitive. We have size,

pretty intuitive. We have size, position, and color to use to our advantage. Starting from the top, an

advantage. Starting from the top, an image always adds a great pop of color and makes scanning super easy. Just like

Uber, if in this case the item is the most important, we want that large and bold and at the top because otherwise it'll blend in with something like the time and day, which can be below and much smaller. And it's this contrast,

much smaller. And it's this contrast, the difference between small and big, or colorful and not that actually creates the hierarchy. It's also why price

the hierarchy. It's also why price should be at the top, right aligned, and blue. It's different than the rest,

blue. It's different than the rest, which draws the eye to it. The location

should be smaller and below like this.

But instead of just from and to, we can use icons and a line to demonstrate that it's moving from Jamesville to Syracuse without having to actually say that.

Now, with that said, it's not an exact science, and you could definitely end up with a design that looks like this instead. And it wouldn't be wrong, but

instead. And it wouldn't be wrong, but the same ideas apply. Most important

things near the top, bigger and colorful is more important, and images are used whenever possible. And as you start to

whenever possible. And as you start to design more and more, you'll notice that similar patterns arise when you need labels or buttons, which we're going to talk about in a minute.

Now, some people have this misconception that all of your content needs to align to a 12 column grid and be exactly 8 pixels apart, but these are just guidelines. For example, this design

guidelines. For example, this design doesn't line up with any of the columns, and that's not uncommon, especially for custom landing pages. But for highly structured pages like galleries, blogs

or any repeating content, they can actually be useful for responsiveness by giving guidelines for responsive behavior on tablet with eight columns and mobile with four. But much more

important than using excessive grids and layouts is whites space. Letting things

breathe. For example, in a simple section like this, the large text would have a font size and line height like this, and the subtext would have a font size and line height like so. buttons

would be similar and optionally a top announcement bar like this. Then simply

32 pixels between every item, but you can also group elements that just go together like the announcement and text or the text and subtext which is just another form of visual hierarchy. And

this is where we see the fourpoint grid system actually come into play.

Everything is a multiple, not because it inherently looks better, but because you can always split things in half, which creates consistency throughout a design.

Typography is really interesting because design is mostly just text. And for

picking a font, I can almost unilaterally say you'll never need more than one for any design. So find a nice sans sarah font like the ones on screen and stick to it. Over the last 7 years

of designing, I've rarely used any fonts other than what's on screen, and this shouldn't be where you're spending tons of time. I'm also not a big fan of

of time. I'm also not a big fan of calling any design skill a hack, but this one kind of is. This design looks okay right now, but our header text feels a little too loose. If you tighten

up the letter spacing on this by about -2 tog -3% and drop the line height to about 110 to 120%, it instantly makes any larger text look super pro real

fast. But hierarchy with typography is a

fast. But hierarchy with typography is a little bit more nuanced. And if we look at our previous example, text sizes can vary wildly. For landing pages and

vary wildly. For landing pages and websites, you generally don't want more than six font sizes, which can have a really large range. For things like dashboards, that range shrinks dramatically to where you don't normally

have text sizes larger than 24 pixels because of the increase in information density. But honestly, one of the most

density. But honestly, one of the most important concepts of design is getting inspiration and doing research from a good source like today's sponsor, Mobin, who curates hundreds of thousands of mobile and web apps along with landing

pages, too. So, you can always pull

pages, too. So, you can always pull inspiration from real designs built by the top design teams in the world. And

if you're struggling with a specific section, just go and search for it and instantly pull up real world examples with links to the live sites, too. If

you're interested, you can check out Mobin using the first link down below to get 20% off. Now, back to the video.

Colors are difficult and everyone has their own tastes, but I'm a big fan of starting with one primary color.

Generally, this is your brand color.

Then you can lighten it for a good background or darken it for text colors.

Both good ways to incorporate subtle color and make an otherwise drab design look much more interesting. And with all of that, we're already halfway to a color ramp, which is what large companies use to build out chips,

states, charts, and really anything else. But I also think it's important as

else. But I also think it's important as a beginner to let the color find you.

Like an announcement bar to grab attention or a focus state on an input or a green new chip on a link. These are

all semantic colors, which are colors that have meaning and provide signifiers to the user. Blue for trust, red for danger or urgency, yellow for warning, and green for success. Make sure you use

color for purpose, not just for decoration.

Now, designing in dark mode presents some pretty interesting challenges for us. First, this card is using a light

us. First, this card is using a light border, which creates a bit too much contrast, so we'll lower that down. In

dark mode, we don't have shadows like light mode. So, to create depth, we need

light mode. So, to create depth, we need to have a lighter card than the background. So, I'll make that

background. So, I'll make that adjustment. This chip is also far too

adjustment. This chip is also far too bright, so we can dim down the saturation and brightness and flip that for the text to create some hierarchy.

There's also a ton of flexibility for deep purples, reds, or greens, not just navy blue or gray.

But speaking of depth, shadows are a fantastic tool to use on light mode.

This shadow, along with most, is too strong. So reducing the opacity and

strong. So reducing the opacity and dialing up the blur helps a lot. The

strength you'll need depends on the foreground and background, but cards require less, while content that sits above other content, like popovers, will need stronger shadows. We can even use these techniques with inner and outer

shadows to create effects like raised tactile buttons. Just remember, if the

tactile buttons. Just remember, if the shadow is the first thing you notice on a design, you're not using it right now. To create strong designs, you'll

now. To create strong designs, you'll need icons. Most icons are generally too

need icons. Most icons are generally too large. So, the trick is to get the line

large. So, the trick is to get the line height of your font, in this case 24 pixels, and make the icons the same size. And then tighten up the text.

size. And then tighten up the text.

Sidebar links like this are actually just buttons without a background until you hover, which are often called ghost buttons. And if we isolate one and

buttons. And if we isolate one and center it, we've got a perfect standalone button. These are super

standalone button. These are super common when you have a primary and secondary CTA side by side. And a good guideline for padding on these is to double the height for the width. And

these can be done with or without icons, too.

A good rule of design is when a user does anything, there should be a response. For example, every button

response. For example, every button needs at least four states: default, hovered, active, or pressed, and disabled. Sometimes you'll need a

disabled. Sometimes you'll need a loading state, too, with a spinner.

Inputs are even more critical. You'll

need a focus state when the user clicks in, error states with red borders, and messages when something's wrong, and sometimes even warning states for optional issues. And this applies

optional issues. And this applies everywhere. loading spinners when data

everywhere. loading spinners when data is fetching, success messages when an action completes, even micro animations on scroll or swipe. Every interaction

needs a response.

And that brings us wonderfully into micro interactions. Micro interactions

micro interactions. Micro interactions are a form of feedback, but they set things up a notch. For example, this copy button has states and feedback when we hover and click, but we still don't

know that we've copied anything.

Instead, if we have this chip slide up, that's a micro interaction that confirms our action. And these can range from

our action. And these can range from highly practical to much more fun and playful.

Finally, overlays are really important because if you screw them up, you're going to ruin the image and the text, too. In this case, we can't leave it as

too. In this case, we can't leave it as is. So, we could add in a full screen

is. So, we could add in a full screen overlay, but it doesn't do the image justice. So instead add in a linear

justice. So instead add in a linear gradient that'll display the image then smoothly convert into a text readable background. Or if we're going for extra

background. Or if we're going for extra fancy we can add in a progressive blur on top of the gradient for an even more modern look. And that is more or less

modern look. And that is more or less every UIUX concept all wrapped up in 10 minutes. If you want to check out Mobin,

minutes. If you want to check out Mobin, it will be the first link down below and you can get the link to all of the Figma assets used in this video down there too. Thank you so much for watching and

too. Thank you so much for watching and I will see you in the next one.