Speaker A
If you want to get good at UI UX design, you got to start with the basics.
A concise guide to fundamental UI/UX concepts including hierarchy, grids, typography, color, and dark mode design.
Key Takeaways
- Effective UI uses visual signifiers to communicate interactivity without instructions.
- Hierarchy through size, color, and position helps users quickly scan and understand content.
- Grids are helpful but flexible tools; white space and grouping are equally important.
- Typography and color choices should be purposeful and consistent to enhance usability.
- Dark mode requires thoughtful adjustments to maintain visual clarity and depth.
Summary
- UI/UX design basics start with clear signifiers like button states, hover effects, and tooltips to communicate functionality.
- Visual hierarchy is created using size, position, color, and contrast to guide user attention effectively.
- Grids and layouts, such as 12-column or four-point grid systems, serve as flexible guidelines for responsive and consistent design.
- White space is crucial to let elements breathe and improve readability and grouping of related content.
- Typography should be simple, typically using one sans-serif font with limited font sizes tailored to the context (e.g., landing pages vs dashboards).
- Color use should start with a primary brand color, incorporating semantic colors for meaning and user signifiers.
- Dark mode design requires adjustments in contrast, shadows, and color saturation to maintain depth and hierarchy.
- Shadows in light mode should be subtle and used to create depth without overpowering the design.
- Icon sizing should match font line height for visual balance, and ghost buttons are effective for secondary CTAs.
- Research and inspiration from real-world designs, such as those curated by Mobin, are essential for improving UI/UX skills.
Full Transcript — Download SRT & Markdown
Speaker A
So, let's begin.
Speaker A
This one's easiest to explain with an example first.
Speaker A
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.
Speaker A
Then if I put a container around drinks, you know that it's selected and you can toggle over to food.
Speaker A
And if I gray this text out, you know that it's inactive and clicking it probably won't do anything.
Speaker A
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.
Speaker A
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.
Speaker A
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.
Speaker A
So, let's give it some hierarchy, which is pretty intuitive.
Speaker A
We have size, position, and color to use to our advantage.
Speaker A
Starting from the top, an image always adds a great pop of color and makes scanning super easy, just like Uber.
Speaker A
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.
Speaker A
And date, which can be below and much smaller.
Speaker A
And it's this contrast, the difference between small and big, or colorful and not that actually creates the hierarchy.
Speaker A
It's also why price should be at the top, right aligned, and blue.
Speaker A
It's different than the rest, which draws the eye to it.
Speaker A
The location should be smaller and below like this.
Speaker A
But instead of just from and to, we can use icons and align to demonstrate that it's moving from Jamesville to Syracuse without having to actually say that.
Speaker A
Now, with that said, it's not an exact science.
Speaker A
And you could definitely end up with a design that looks like this instead.
Speaker A
And it wouldn't be wrong.
Speaker A
But the same ideas apply.
Speaker A
Most important things near the top, bigger and colorful is more important, and images are used whenever possible.
Speaker A
And as you start to design more and more, you'll notice that similar patterns arise when you need labels or buttons.
Speaker A
Which we're going to talk about in a minute.
Speaker A
Now, some people have this misconception that all of your content needs to align to a 12-column grid and be exactly eight pixels apart.
Speaker A
But these are just guidelines.
Speaker A
For example, this design doesn't line up with any of the columns, and that's not uncommon, especially for custom landing pages.
Speaker A
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.
Speaker A
But much more important than using excessive grids and layouts is white space.
Speaker A
Letting things breathe.
Speaker A
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.
Speaker A
Buttons would be similar and optionally a top announcement bar like this.
Speaker A
Then simply 32 pixels between every item, but you can also group elements that just go together.
Speaker A
Like the announcement and text or the text and subtext, which is just another form of visual hierarchy.
Speaker A
And this is where we see the four-point grid system actually come into play.
Speaker A
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.
Speaker A
Typography is really interesting.
Speaker A
Because design is mostly just text.
Speaker A
And for picking a font, I can almost unilaterally say you'll never need more than one for any design.
Speaker A
So, find a nice sans-serif font like the ones on screen and stick to it.
Speaker A
Over the last seven 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.
Speaker A
I'm also not a big fan of calling any design skill a hack.
Speaker A
But this one kind of is.
Speaker A
This design looks okay right now, but our header text feels a little too loose.
Speaker A
If you tighten up the letter spacing on this by about negative two to negative three percent, and drop the line height to about 110 to 120 percent, it instantly makes any larger text look super pro, real fast.
Speaker A
But hierarchy with typography is a little bit more nuanced.
Speaker A
And if we look at our previous example, text sizes can vary wildly.
Speaker A
For landing pages and websites, you generally don't want more than six font sizes, which can have a really large range.
Speaker A
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.
Speaker A
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.
Speaker A
Who curates hundreds of thousands of mobile and web apps along with landing pages too.
Speaker A
So you can always pull inspiration from real designs built by the top design teams in the world.
Speaker A
And if you're struggling with a specific section, just go and search for it.
Speaker A
And instantly pull up real-world examples with links to the live sites too.
Speaker A
If you're interested, you can check out Mobin using the first link down below to get 20% off.
Speaker A
Now, back to the video.
Speaker A
Colors are difficult.
Speaker A
And everyone has their own taste.
Speaker A
But I'm a big fan of starting with one primary color.
Speaker A
Generally, this is your brand color.
Speaker A
Then you can lighten it for a good background or darken it for text colors.
Speaker A
Both good ways to incorporate subtle color and make an otherwise drab design look much more interesting.
Speaker A
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.
Speaker A
But I also think it's important as a beginner to let the color find you.
Speaker A
Like an announcement bar to grab attention.
Speaker A
Or a focus state on an input.
Speaker A
Or a green new chip on a link.
Speaker A
These are all semantic colors, which are colors that have meaning and provide signifiers to the user.
Speaker A
Blue for trust, red for danger or urgency, yellow for warning, and green for success.
Speaker A
Make sure you use color for purpose.
Speaker A
Not just for decoration.
Speaker A
Now, designing in dark mode presents some pretty interesting challenges for us.
Speaker A
First, this card is using a light border, which creates a bit too much contrast.
Speaker A
So, we'll lower that down.
Speaker A
In dark mode, we don't have shadows like light mode, so to create depth, we need to have a lighter card than the background.
Speaker A
So, I'll make that adjustment.
Speaker A
This chip is also far too bright, so we can dim down the saturation and brightness.
Speaker A
And flip that for the text to create some hierarchy.
Speaker A
There's also a ton of flexibility for deep purples, reds, or greens.
Speaker A
Not just navy blue or gray.
Speaker A
But speaking of depth, shadows are a fantastic tool to use on light mode.
Speaker A
This shadow, along with most, is too strong, so reducing the opacity and dialing up the blur helps a lot.
Speaker A
The strength you'll need depends on the foreground and background, but cards require less while content that sits above other content, like pop-overs, will need stronger shadows.
Speaker A
We can even use these techniques with inner and outer shadows to create effects like raised tactile buttons.
Speaker A
Just remember, if the shadow is the first thing you notice on a design, you're not using it right.
Speaker A
Now, to create strong designs, you'll need icons.
Speaker A
Most icons are generally too large, so the trick is to get the line height of your font, in this case, 24 pixels.
Speaker A
And make the icons the same size.
Speaker A
And then tighten up the text.
Speaker A
Sidebar links like this are actually just buttons without a background until you hover.
Speaker A
Which are often called ghost buttons.
Speaker A
And if we isolate one and center it, we've got a perfect standalone button.
Speaker A
These are super common when you have a primary and secondary CTA side by side.
Speaker A
And a good guideline for padding on these is to double the height for the width.
Speaker A
And these can be done with or without icons too.
Speaker A
A good rule of design is when a user does anything.
Speaker A
There should be a response.
Speaker A
For example, every button needs at least four states: default, hovered, active or pressed, and disabled.
Speaker A
Sometimes you'll need a loading state too with a spinner.
Speaker A
Inputs are even more critical, you'll need a focus state when the user clicks in.
Speaker A
Error states with red borders and messages when something's wrong.
Speaker A
And sometimes even warning states for optional issues.
Speaker A
And this applies everywhere.
Speaker A
Loading spinners when data is fetching, success messages when an action completes, even micro animations on scroll or swipe.
Speaker A
Every interaction needs a response.
Speaker A
And that brings us wonderfully into micro interactions.
Speaker A
Micro interactions are a form of feedback, but they step things up a notch.
Speaker A
For example, this copy button has states and feedback when we hover and click.
Speaker A
But we still don't know that we've copied anything.
Speaker A
Instead, if we have this chip slide up, that's a micro interaction that confirms our action.
Speaker A
And these can range from highly practical to much more fun and playful.
Speaker A
Finally, overlays are really important because if you screw them up, you're going to ruin the image and the text too.
Speaker A
In this case, we can't leave it as is.
Speaker A
So, we could add in a full-screen overlay, but it doesn't do the image justice.
Speaker A
So instead, add in a linear gradient that'll display the image then smoothly convert into a text readable background.
Speaker A
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.
Speaker A
And that is more or less every UI UX concept all wrapped up in 10 minutes.
Speaker A
If you want to check out Mobin, it will be the first link down below.
Speaker A
And you can get the link to all of the Figma assets used in this video down there too.
Speaker A
Thank you so much for watching.
Speaker A
And I will see you in the next one.
Topics:UI designUX designvisual hierarchytypographycolor theorydark mode designgrids and layoutswhite spaceicon designuser interface
![The Wounded Spirit – Timothy Keller [Sermon] — Transcript](https://i.ytimg.com/vi/pkL3R27ZV1o/maxresdefault.jpg)
