PerI'm excited to announce that we've just launched this free Scrimba course on UI design fundamentals by the amazing Gary Simon.
Gary has been a UI designer and a front-end developer for the last 20 years, and he also runs the massively popular YouTube channel DesignCourse.
In just one hour, Gary will level up your UI design skills by helping you grasp the seven most important building blocks of all good user interfaces:
- White space
- Color
- Contrast
- Scale
- Alignment
- Typography
- Visual Hierarchy
The course contains a mix of lectures and interactive coding challenges, meaning you'll actually build UIs in the browser. So you'll need a basic understanding of HTML and CSS before enrolling. However, if you're just starting out, don't worry, there is a superb crash course on HTML and CSS on Scrimba you can do to lay out some groundwork.
As for the initial setup for this course - there are no prerequisites! The course is on Scrimba, so you can interact with the code as the course progresses!
Click here to start the course immediately, or continue reading if you'd like a breakdown of how the course is structured.
Chapter 1: White Space
In the first lesson, you're going to learn how to use white space. White space is the empty space between the elements in your UI.
Gary will show how by using just 3 CSS properties: padding, margin and line-height you can significantly improve the appearance of your text.
Chapter 2: Alignment
In this chapter, Gary shows how alignment can improve things with minimal code. Alignment is the process of ensuring that every element is positioned correctly in relation to other elements. Again, with just 3 properties: margin, transform and text-align.
Chapter 3: The Card Challenge
Welcome to the first challenge of the course. This and the following challenges are designed in such a way that you code a solution and try to push yourself a bit, with Gary showing his take afterward for you to compare.
In this challenge, he'll give you a few cards that you will need to improve whitespace and alignment.
When you're done, feel free to jump into the cast and see Gary's take on the solution.
Chapter 4: Contrast
In this screencast, you're going to learn about contrast. Contrast is defined as being in a 'strikingly' different state from something else. Gary will cover 'Contrast guidelines' and how to ensure that your design is accessible to those with visual impairment issues.
Chapter 5: Scale
It's time to talk about scale. Gary will show that by leveraging the scale of different elements, you can greatly improve a design.
Chapter 6: Fix an ugly UI
Good job, you've made it to the second challenge of the course. In this challenge, you're going to give you an even uglier design to start with.
So far, you've learned 4 design fundamentals: white space, alignment, contrast and scale.
This one clearly has an issue with all four. Try your best to fix it and be sure to check out my solution for the challenge.
Chapter 7: Typography
Typography requires the understanding of other fundamentals, along with a few other considerations. In this cast, Gary is going to give advice on how to effectively choose fonts, their size, spacing and a few more.
Color
Color is the first UI design fundamental that shapes the user's experience! Gary covers some key considerations when choosing colors for the target audience, some common dos and don'ts, and some color combination basics.
Chapter 8: The Colors Challenge
With colors being such an important aspect of your design, you'll need to do a challenge to solidify your color skills. You will be given the design below. It's intentionally in greyscale, so you can practice creating a few designs by using just the colors in the bottom right.
Try to have more than one, so you can really explore the possible options and combinations. When you have a couple of options ready, go ahead and compare if you and Gary have any similar designs in his take on the solution
Chapter 9: Visual Hierarchy
Visual hierarchy is how you establish the importance of elements on a user interface. Some elements are more important than others.
In this chapter, Gary uses a simple email sign up form to show how you can improve a fairly bland design by highlighting some key aspects of it and improving its visual hierarchy.
Chapter 10: Visual Hierarchy Challenge
Let's now practice and apply our knowledge. You'll be given a simple card and the only problem it has is its visual hierarchy is all over the place.
Try to improve it as much as you can and be sure to check out Gary's take on the solution.
Chapter 11: The Final Challenge
Welcome to our final chapter challenge, a design challenge. You have this layout with issues in the visual hierarchy, white space, color, and alignment. Your challenge is to address these 4 to improve this design as much as you could.
When you're done, you can watch Gary's take on a solution.
Closing Thoughts
If you reach this far: congratulations on finishing this course! You can be proud of yourself, as most people just start courses without finishing them. You now have a basic understanding of these UI design fundamentals:
- White space
- Color
- Contrast
- Scale
- Alignment
- Typography
- Visual Hierarchy
They are all equally important in order to get the design right. If the design is lacking in one of these areas, it's really easy to notice that something is not quite right with the quality of the design. So be sure to think about all these fundamentals the next time you're going to build an amazing UI.
Good luck :)
