— TABLE OF CONTENTS

New to the UX/UI world? Wondering how to fast-track your UI design skills?

After teaching hundreds of students face to face and over 500,000 on YouTube, here is my one piece of advice for anyone who wants to enter the UX/UI design world successfully.

UI design is your best chance in getting your foot in the door.

Studies show that a website’s appearance forms up to 75% of the website’s credibility. If a website, web or mobile app looks off, a person is less likely to trust anything on it. To be a great designer, you have to be able to make it look good, and that requires the right skills. 

Now, this also applies to landing a UX/UI design role as well.

Let me explain why.  

What Is UI Design?

What is UI Design?

UI design, or user interface, refers to the “graphical layout” of an application. Any and every sort of visual element, interaction, micro-interaction, or animation has to be carefully designed by someone. That person has to make sure the application’s interface looks good, works with the theme, and aligns with the personality of the app. 

That person is the UI designer. 

A UX designer, on the other hand, designs the user experience. The UX designer, as UX Planet puts it, is responsible for “how easy or difficult it is to interact with the user interface elements that the UI designers have created.” UI designers decide how the UI will look, and UX designers are responsible for how the UI operates.

In practice, UX and UI work have a symbiotic relationship: real-world UI can’t live without UX, and vice versa. At the end of the day, a UI designer will need to take into consideration the UX, and a UX designer will have to consider the UI.

For UX designers, adding UI design to your resume will expand your job opportunity horizons. As instructor Learn UI Design Erik Kennedy Price says; “it was clear I could offer more to my clients if my end product wasn’t sketched out boxes and arrows.”

The roles are quite differentiated between people, but rather depending on your seniority,  you will have more focus on one or the other.

But for now, here are the most effective ways I’ve found to learn UI design and create the way the pros do it. 

How To Learn UI Design (The Right Way) 

Grid Layout for 1440px

At the end of the day, UI design is a balance between creativity and mathematics. The measurements, grid layouts, and responsive designs are based on maths as well as creativity. 

Grid layouts have well-defined baselines 16px margins, and 8px gutters for mobile. Body base fonts should be 14px or 16px. If you haven’t learned the fundamentals, then you’re cooking without measurements.

Whether you’re working solo or on a team, you’ll always have to do basic maths if you’re working on high-fidelity prototyping. You might even find yourself doing basic geometry if the occasion calls for it. 

If you understand the systems behind the chaos, you’ll be able to work faster with fewer mistakes, and have less bumpy experiences while working with developers.

As UI designer Eric Bieller points out, knowing the fundamentals of UI design as well as the creative helps you to work better.  

“While there’s a huge sense of creative freedom when designing user interfaces, there are also predictable design patterns that can be used to make your job easier,” he says. 

Remember that in this competitive field, good visual design and well-crafted apps are a baseline requirement. Make sure you know your stuff. 

If you do want to fast track your learning, consider taking up our Figma & UI Masterclass Course. You’ll learn how to master all the most important UI design principles and the world’s leading UI design tool; Figma. It’s an end-to-end course that covers everything from design processes to advanced high-fidelity design techniques within Figma. Or pop over to my YouTube channel (it’s free education!)

The Most Effective Ways To Master UI Design

Learn About The Development World

VSCode

A little uncommon but one highly effective way to fast-track your UI learning is to explore the development world. 

Ultimately, as UI designers, our work must be presented through the web and mobile devices, and we should be designing with the developer in mind.

For those looking to find out how to learn UI design, I have this advice: a designer with some basic knowledge in development will always outshine those who don’t. This doesn’t mean you need to rethink your whole career, but it does mean that having even a base level of understanding is very advantageous.

Just understanding some basic concepts will save you in the future trying to deal with small miscommunication issues and endless corrections. Knowing what a developer needs in certain situations will help you to rethink how you want to frame something. 

It’s also useful to understand a little coding as there will be moments in your design career where one line of CSS can help you to achieve hours of hard work for you.

For example, using code to manipulate images and designs is easier and lower maintenance. If you rotated an image and then decided to rotate it back, you would have to go through the long and tedious effort of opening up your design tool, making sure you don’t lose image quality, and then rotate it back and save it out again.

Instead, you could just let a developer know to append a CSS Transform on the image. Wham, the job is suddenly done in 2 seconds.  and the job is done in 2 seconds.

CSS Properties every UI Designer Should Know

CSS3 Properties – Transform

Here are some of the CSS properties that I recommend to everyone: 

  • Transform – or CSS3 Transform contains multiple properties such as rotate, scale, and translate. Instead of rotating images in design, let CSS do it for you. That way, you’ll always have the original image/design to use. A super handy one to have in your arsenal.
  • Flexbox: also known as CSS Flexible Box is a CSS 3 web layout model used for responsive positioning. It allows responsive elements to align and distribute space within a container. It is supported in all browsers, you don’t have to worry about syntax, and it’s pretty easy to get started.
  • Box Model: essentially a box that wraps around every HTML element that consists of margins, borders, padding, and content.  
  • Border-Radius: You can round your corners using code.
  • Dropshadow: Like Border-Radius, you can hand off adding shadows and let code do it for you.

Here is a CSS3 cheatsheet for you if you are interested.

Learn From the Best of the Best

Polaris – Shopify Design System

Good news! You don’t have to reinvent the wheel, and you don’t have to start from scratch. 

Another excellent way to learn UI design is to study and watch how bigger companies do it. Don’t try to re-create what these industry giants have done, you’ll be designing for years, instead, look to bigger companies to see how they do it. 

By studying their processes, approaches, strategy, and even the design tool they use (most likely, Figma), you can pick up on a trick or two that you can apply to your own specific project.

It’s the secret art of reverse engineering.

These big companies have more money and team members to throw at a project, so they have room to trial and test certain strategies. Save yourself the time (and headaches) and let them do the learning for you.

For example, if you are designing an ecommerce project, you may want to investigate Shopify. Examine how they’ve created consistency within their ecommerce platform. 

To help you get started, here’s a list of bigger companies you can study to learn how to design UI the smart way:

Copy UI Designers You Admire (Literally!) 

Dribbble Showcase

You know those wonderful designers you’ve seen around who seem to create magic with a few buttons and some pixie dust? Well, good news! These hero designers are not only inspiring, but they’re also a good opportunity to master UI design. 

When you’ve found your hero UI designer, try to replicate and recreate what they’ve done, over and over again. Your first attempt probably won’t look anything like what they’ve done. But, as long as your computer doesn’t catch fire from it, you can just scrap, and start again. 

What you’re doing is building an eye for “good visual design.”

If you don’t have any hero UI designers, you can start by getting inspiration from platforms such as Dribbble, or Bēhance. It’s incredible to see what creative designers, in particular, the Figma users are capable of. 

The number of likes or views will help you to validate a visual style. Perhaps you notice a huge uptick in designs featuring graphics of puppies, as opposed to photos. It doesn’t mean that photos of puppies are a no-no, it just means that currently, graphics are trending. Use this as a guide, and see what you can learn from others. 

Where To Find Good UI Designers

Source: Emirhan Borucu Sidebar Design

There are so many incredible design showcases on Dribbble for UI design. Here is a quick example. “Sidebar Navigation” by UX/UI designer, Emirhan Akın Borucu. Emirhan displays a great use of contrast, spacing, and a showcase of interactions when someone clicks on a menu item. 

Behance has an entire category dedicated to UI/UX design and the creative community that it fosters. An Adobe-owned site, Behance houses some great Adobe XD UI designs that you can browse for inspiration

Some less common but still high-quality inspiration websites include Mobbin and pttrns.com

However, bear in mind during your search that you’re looking for visual inspiration. A lot of these UI mockup designs might look incredible, but they don’t emulate a real experience or product. Be inspired, but remember that UX is about how it works, whereas UI is just referencing just the visual design of the buttons. 

Be Aware Of Common UI Designer Mistakes

UI Design Mistakes
Common UI Mistakes

They say the devil is in the details. When it comes to creating high-quality UI designs, these tiny details are the make or break of the whole production. 

To avoid common UI designer mistakes, I always say it’s best to look towards world-class products and assess what have they done, and more importantly, what they’ve done well. 

Ask yourself, why does it look so great? You might not know straight away why you like their design, but over time and as your skills develop, you’ll be able to pick up why something works.

Top-level elements to take note of are:

  • Spacing and Padding: Do things look cluttered? Is the spacing between blocks uneven, or too small/big? See if you can check dimensions and spacing. Remember that basic maths will be the easiest way to see what’s happening
  • Colour: what colour palette is being used? Have they taken the user into consideration, or are they chasing a trend? How have they used branding in their colour choices? Are there too many colours, or not enough? 
  • Grid Layout: aligned elements are the key to having a balanced design. Have they aligned related items to the same sides? Are they using a 12 column grid or a baseline grid? 
  • Contrast: which elements are low contrast? Is it a hard-to-read interface? Do things look dull? How have they chosen to separate the background from the separate elements? Are their CTAs low or high contrast? 

Break down what they have done with their design, and see what happens when you adopt them in your own projects. The good news about studying world-class products is that higher-stake designs leave little room for designer error or pointless elements. There’s a reason for everything, and it’s up to you to figure out how they got there. 

If you’re unsure what to look for, I’ve check out this video where I run through the top 10 common UI design mistakes. Lots of designers don’t even realise they’re making these mistakes, and I want to make sure you stop doing them, too.

Don’t worry if you’re making these mistakes, too. That’s why I created my Figma & UI Masterclass Course to help you identify these small mistakes and stop them in their tracks before they become a habit. 

Where can I start learning UI Design?

UI design is, without doubt, the best and easiest way for you to begin your journey, and become a stand-out designer in the UX/UI world. The power that comes with being able to make something work well and look good is what sets good designers apart from great designers.

Learning the process and mathematics behind UI design is a transferable skill that will help to lay the groundwork, and you have a universe of hero UI designers to learn from and emulate. You can even delve deep to see exactly how the global giants make UI design work for them. How cool is that?

If you are looking to excel in your UI Design workflow, you should consider taking our Ultimate Figma & UI Design Masterclass. Over 700+ students have taken on and loved our course. It is a highly practical and real-world course, that covers everything you need to know from building a design system from scratch, all the way through to documenting your designs for developers. With an average rating of 4.9 stars, you can’t go wrong! See what some of our students have to say.