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. Create a Fitness App Design in Affinity Designer

      Create a Fitness App Design in Affinity Designer

      Tutorial Beginner

      In this tutorial I’ll walk you through the process of designing a welcome screen for an iOS fitness application. We’ll be working with Affinity Designer, a...

    2. Designing an eCommerce Portfolio: the Index Page

      Designing an eCommerce Portfolio: the Index Page

      Tutorial Beginner

      The shop index page we’re designing is pretty straightforward. It will show all our products along with filtering, viewing and pagination options. Let’s begin.

    3. Designing an eCommerce Portfolio: Support Section and Footer

      Designing an eCommerce Portfolio: Support Section and Footer

      Tutorial Beginner

      Support is an important aspect of our selling themes. The people who buy your products will expect you to provide assistance if something goes wrong. That’s...

    4. Designing an eCommerce Portfolio: Store Front and Testimonials

      Designing an eCommerce Portfolio: Store Front and Testimonials

      Tutorial Beginner

      Our theme preview section will give visitors a glimpse of some of the other themes available for purchase. The testimonials will show quotes from people who...

    5. Color for Attention and Depth in 60 Seconds

      Color for Attention and Depth in 60 Seconds

      Tutorial Beginner

      The colors you choose in your designs can give the illusion of depth, making important things seem closer to the viewer and more likely to catch the eye....

    6. Designing an eCommerce Portfolio: Header and Hero

      Designing an eCommerce Portfolio: Header and Hero

      Tutorial Beginner

      Our site header should provide the navigation, that’s pretty much its main purpose. Of course, we do have the logo in there as well, and since we’re...

    7. “Copy to Clipboard” Made Easy with Clipboard.js

      “Copy to Clipboard” Made Easy with Clipboard.js

      Tutorial Intermediate

      Owing to browser restrictions, adding copy functionality to web pages used to be a real hassle. Fortunately now we have a JavaScript library that allows us...

    8. Designing an eCommerce Portfolio: Project Overview

      Designing an eCommerce Portfolio: Project Overview

      Tutorial Beginner

      When designing our eCommerce Portfolio, the first step we have to take is to plan the website. What will it do? What’s its purpose? We’ll cover the initial...

    9. Designing an eCommerce Portfolio: Introduction

      Designing an eCommerce Portfolio: Introduction

      Tutorial Beginner

      In this tutorial series you’ll learn how to design a minimal eCommerce theme in Sketch. You’ll not only learn the proper structure of an eCommerce website,...

    10. How to Build an Off-Canvas Navigation With jQuery.mmenu

      How to Build an Off-Canvas Navigation With jQuery.mmenu

      Tutorial Intermediate

      This tutorial will take you on a quick tour of mmenu.js, a jQuery plugin which helps create extensive website navigation. As we examine it, we'll see how we...

    11. Building a Draggable Off-Canvas Menu with GreenSock

      Building a Draggable Off-Canvas Menu with GreenSock

      Tutorial Intermediate

      This tutorial is a final two-parter as we end our GreenSock journey. We’ll begin by learning Draggable’s syntax, setup, and ending in the next tutorial with...

    12. How to Design an Engaging Onboarding Experience

      How to Design an Engaging Onboarding Experience

      Tutorial Beginner

      You don’t get a second chance to make a first impression! In this article, I’d like to define an engaging onboarding experience, review great examples and...