Left
All Post

The Best Way to Learn UI Design

Menu
UI Design
clock
8 min read
upload
September 11, 2021

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

Here at the Designership, we’ve taught hundreds of students (and over 500,000 on YouTube) and have one piece of advice for anyone who wants to enter the UX/UI design world successfully:

UI design is your best chance to get 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.

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

Let’s explore the reasons.  

What Is UI Design?

What is UI Design?

UI design, or user interface, refers to an application’s “graphical layout.” The UI designer must carefully consider any visual element, interaction, micro-interaction, or animation, making sure the application’s interface looks good, works with the theme, and aligns with the app’s personality.

UI designers decide how the UI will look, and UX designers are responsible for how the UI operates. As UX Planet puts it, the UX designer is responsible for “how easy or difficult it is to interact with the user interface elements that the UI designers have created.”

In practice, UX and UI work have a symbiotic relationship: real-world UI can’t live without UX, and vice versa. A UI designer will need to consider the UX, and a UX designer will consider the UI.

Adding UI design to your resume will expand your career horizons for UX designers. As Learn UI Design instructor Erik Kennedy Price says, “it was clear I could offer more to my clients if my end products weren’t sketched out boxes and arrows.”

Here are the most effective resources for learning UI design that helps you design UI like a pro.

How To Learn UI Design (The Right Way)

Grid Layout for 1440px

UI design balances creativity and mathematics, as measurements, grid layouts, and responsive designs are based on fundamentals, enhanced by 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 these fundamentals, then you’ll be baking without measurements.

Whether working solo or as part of 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 process calls for it.

By understanding the systems behind the chaos, you’ll be able to create more precise, efficient work. You’ll also find that communication with developers is more streamlined without friction or misunderstandings.

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,”

Remember that good visual design and well-crafted apps are a baseline requirement in this highly competitive field. Be sure to build a solid foundation.

The most effective ways to master UI design

Learn about the development world

VSCode

One underutilized but highly effective way to fast-track your UI learning is to explore the development world.

As UI designers, designs are ultimately presented through the web and mobile devices, and therefore, everything should be designed with the developer in mind.

For those looking to learn UI design, it is critical to understand that a designer with even basic knowledge in development will constantly outshine those who don’t.

This doesn’t mean you need to rethink your whole career, but it does mean that having a base level of understanding works to your advantage.

Understanding basic development concepts will save you from dealing with minor miscommunication issues and endless corrections in the future. Stepping into a developer’s shoes in certain situations will help you rethink how you want to frame something.

It’s also helpful to understand coding basics as there will be moments in your design career where one line of CSS can streamline hours of hard work and lessen your load.

For example, using code to manipulate images and designs is much lower maintenance. Generally, if you decide to undo an image rotation, you would have to go through the tedious effort of opening up your design tool, making sure you don’t lose image quality, then rotating it back and saving it out again. Instead, you could just let a developer know to append a CSS Transform on the image. You’re done in a blink of an eye.

CSS properties every UI designer should know

CSS3 Properties – Transform

Below is a list of CSS properties we recommend every UI Designer to learn about:

  • Transform: CSS3 Transform contains multiple properties such as rotate, scale, and translate. Instead of rotating images in design, let CSS do it for you, so you’ll always have the original image/design.
  • 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, so you don’t have to worry about syntax, and it’s pretty easy to get started.
  • Box Model: This is 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 let code handle adding shadows.

Learn from the best of the best

Polaris – Shopify Design System

In UI design, 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. We’re not advising you to re-create what these industry giants have done, as you’ll be designing for years. Still, 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 specific project.

It’s the secret art of reverse engineering.

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

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

If you’re looking for a design system to help you build world-class, responsive websites and web apps in minutes, don’t forget to check out Shipfaster 2.0—Figma’s leading design system. Get instant access to over 6,000+ easy-to-customize components to supercharge your design workflow, and learn from and alongside the best in the industry.

To help you get started, here’s a list of company UI systems you can learn from to create smarter, not harder:

Mimic UI designers you admire

Dribbble Showcase

Spend a little time around the UX/UI design world, and you’ll discover a world of incredible designers. Not only are these designers inspiring, but they are also an opportunity to hone your own talents.

Take note of designers you admire, and then see if you can note down what aspects of their work you like. Perhaps it’s a color scheme or a method of organizing components.

When you’ve found your hero UI designer, try to replicate and recreate what they’ve created.

If your design doesn’t quite match theirs, don’t be disappointed. It’s an opportunity to improve your skillset and get a good eye for 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 other designers, particularly the Figma users, are capable of creating.

The number of likes or views will help you validate a visual style. Perhaps you’ve noticed a huge uptick in designs featuring graphics of puppies, as opposed to photos. 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.

For example, “Sidebar Navigation” by UX/UI designer Emirhan Akın Borucu displays excellent use of contrast, spacing, and a display 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. Furthermore, you can also glean some high-quality inspiration from websites like Mobbin and pttrns.com.

However, bear in mind during your search that you’re looking for visual inspiration only. These UI mockup designs might look incredible, but they don’t emulate a real experience or product.

Be inspired, but remember that you’ll need UX to make it work, 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 will make or break the whole production.

Look towards world-class products and assess what they have done and, more importantly, what they’ve done well.

Ask yourself, why does it look so great? You might not know clearly why you like their design, but as your skills develop over time, 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 working.
  • Colour: what color palette is being used? Have they considered the user, or are they chasing a trend? How have they used branding in their color choices? Are there too many colors, 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? Do things look dull? How have they chosen to separate the background from the separate elements? Are their CTAs low or high contrast? Is the interface hard-to-read?

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 what those reasons are.

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

If you are making these common mistakes, why not enroll in our Ultimate Figma Design Masterclass. to help you stop them in their tracks before they become a habit?

Where can I start learning UI Design?

UI design is, without a doubt, the best and easiest way for you to begin your journey as a stand-out designer in the UX/UI world.

Not only does UI allow you to understand UX on a deeper level, but it also allows you to earn a higher salary or acquire high-paying clients.

The power that comes with making 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 lay the groundwork, and you have a universe of hero UI designers to learn from and emulate. You can delve deep to see exactly how the global giants make UI design work for them.

Michael Wong
Founder of Designership & z0 Studio

Mizko, also known as Michael Wong, brings a 14-year track record as a Founder, Educator, Investor, and Designer. His career evolved from lead designer to freelancer, and ultimately to the owner of a successful agency, generating over $10M in revenue from Product (UX/UI) Design, Web Design, and No-code Development. His leadership at the agency contributed to the strategy and design for over 50 high-growth startups, aiding them in raising a combined total of over $400M+ in venture capital.

Notable projects include: Autotrader (Acquired. by eBay), PhoneWagon (Acquired by CallRails), Spaceship ($1B in managed funds), Archistar ($15M+ raised) and many more.

You can learn more about me on:
Did you like this article?
Spread the word!
sunsun
moonmoon
Michael Wong
Writer
Contributor
Catch the latest updates
Subscribe to our newsletter and stay in the loop.
Thank you!
Oops! Something went wrong while submitting the form.
Table of content
socialsocial
Blogs

The design pulse

Tips, trends, and thought pieces on UX/UI design.
What's New

New website, course and product updates - April 2024

A lot happened this month. Take a look at what's coming.
Michael Wong
Apr 17, 2024
·
7 min read
UX Design

Using Quantitative and Qualitative Research in UX Design

What's the difference between qualitative and quantitative methods in UX research? Learn how to choose the best approach to enhance your user experience design in 2024.
Michael Wong
Feb 23, 2024
·
7 min read
UX Design

A Complete Guide to Primary and Secondary Research in UX Design

Unlock the secrets of UX success with our in-depth guide on primary and secondary research methods. Discover tools, strategies, and examples to elevate your user experience design projects. Perfect for beginners and seasoned professionals alike.
Michael Wong
Feb 19, 2024
·
7 min read
UI Design

10 Best Free Fonts for UI Design (2024 Edition)

UI Design Fonts don't have to be expensive to make your design stand out — some of the best ones are free. Find them here.
Michael Wong
Jan 30, 2024
·
10 min read
UX Design

The Ultimate Guide to UX/UI Design in 2024

Dive into the future of UX/UI design with our comprehensive guide for 2024. Discover cutting-edge trends, tools, and techniques that will shape the industry and empower you to create stunning, user-friendly designs.
Michael Wong
Jan 25, 2024
·
7 min read
UX Research

16 Best UX Research Tools in 2024: Gather Faster & Better Insights

Discover the 16 best UX research tools in 2024. From analytics to user testing, our guide helps you choose the right tools to elevate your user experience research and design.
Michael Wong
Jan 9, 2024
·
7 min read
UX Research

15 Most Effective UX Research Methods: Pros and Cons

Uncover the diverse world of UX research methods. From user interviews to usability testing, learn how different techniques can enrich your UX design process for optimal results.
Michael Wong
Jan 5, 2024
·
7 min read
Figma

The Ultimate Guide to Figma for Beginners (Updated 2024)

Unlock the full potential of Figma with our ultimate guide. Dive into the world of UI design and discover how Figma's powerful tools can transform your design process.
Michael Wong
Dec 15, 2023
·
7 min read
UX Research

The Ultimate Guide to UX Research (Updated 2024)

Master the art of UX research with our ultimate guide. Explore methodologies, utilize the best tools, and adopt industry best practices for impactful user experience research.
Michael Wong
Dec 8, 2023
·
15 min read

Join our newsletter

Get the latest updates, exclusive offers, and more straight to your inbox!
Please insert valid email
WELCOMESHIP5
Copy
Oops! Something went wrong while submitting the form.