Learn UX/UI

Try these UX and UI tutorials to learn the principles of user-centered design, prototyping, and wireframing. Learn to craft beautiful and intuitive user interfaces.

Getting started with UX/UI

  • 8 Usability Heuristics (Explained With Toasters)

    8 Usability Heuristics (Explained With Toasters)

    Maddy Beard
  • What is Information Architecture? (UX Tips and Examples)

    What is Information Architecture? (UX Tips and Examples)

    Andrea Eppy
  • All UX/UI tutorials:

    1. How to Fix Cropped Shadows or Overflowing Elements in Figma

      How to Fix Cropped Shadows or Overflowing Elements in Figma

      Tutorial Beginner

      In this quick tip I’ll show you how to fix cropped shadows and overflowing elements that you sometimes get in Figma.

    2. How to Self-Host Google Fonts on Your Own Server

      How to Self-Host Google Fonts on Your Own Server

      Tutorial Beginner

      Hosting Google Fonts locally on your own server has many advantages, such as better privacy and security, offline availability, and improved performance. In...

    3. Essential Figma Shortcuts for Working Efficiently

      Essential Figma Shortcuts for Working Efficiently

      Tutorial Beginner

      These essential Figma shortcuts will increase your productivity and allow you to work more efficiently. Let’s stop wasting time and jump right in!

    4. How to Create a Frosted Glass Effect in Figma

      How to Create a Frosted Glass Effect in Figma

      Tutorial Beginner

      In this quick tip you’ll learn how to create a frosted glass effect in Figma. This is a really popular effect and it’s actually extremely easy (just a couple...

    5. A Quick Guide to Figma’s Image Fill Settings

      A Quick Guide to Figma’s Image Fill Settings

      Tutorial Beginner

      In this tutorial you’ll learn all about Figma’s image fill settings. There are 4 in total, and each one allows you to manipulate an object’s image fill...

    6. 4 Ways to Resize Elements in Figma

      4 Ways to Resize Elements in Figma

      Tutorial Beginner

      In this quick tip I’ll show you 4 ways you can resize elements in Figma, in case the default method doesn’t behave as you expect it to. Let’s begin!

    7. What are Breadcrumbs in WordPress?

      What are Breadcrumbs in WordPress?

      Tutorial Beginner

      In this tutorial I’m going to explain all you need to know to get started using breadcrumbs in WordPress.

    8. 6 Best Practices for Building Responsive Dropdown Menus

      6 Best Practices for Building Responsive Dropdown Menus

      Tutorial Beginner

      In this guide, we’ll have a look at some best practices you can follow and a couple of code examples you can use when building a responsive dropdown menu.

    9. How to Add New Fonts to WordPress

      How to Add New Fonts to WordPress

      Tutorial Intermediate

      Find out how to add new fonts to WordPress from the popular free font repositories, Adobe Fonts and Google Fonts. Give your website a unique look and feel...

    10. How to Create a Resume CV Website Template in Adobe XD

      How to Create a Resume CV Website Template in Adobe XD

      Tutorial Intermediate

      In this Adobe XD tutorial you will learn how to create a resume web page design using a resume website template. You’ll also learn how to easily animate...

    11. How to Create a Finance App UI Design in Adobe XD

      How to Create a Finance App UI Design in Adobe XD

      Tutorial Beginner

      In this tutorial you will learn how to create a finance app design in Adobe XD, and (more importantly) how to easily animate parts of its UI.

    12. How to Customize Contact Form 7 for WordPress: Handmade SVG

      How to Customize Contact Form 7 for WordPress: Handmade SVG

      Tutorial Intermediate

      In a previous tutorial you learned how to create a responsive handmade SVG form. Today we’ll go a step further and make it dynamic. We’ll cover how to...