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. Introduction to Tailwind CSS: A Utility-First CSS Framework

      Introduction to Tailwind CSS: A Utility-First CSS Framework

      Tutorial Intermediate

      Today I’m going to show you how to get started with Tailwind CSS, a highly customizable CSS framework that you can use to quickly build web pages and...

    2. Animate an Icon With SVGator, Figma and Envato Elements

      Animate an Icon With SVGator, Figma and Envato Elements

      Tutorial Intermediate

      In this tutorial we’ll be taking an SVG based icon from Envato Elements, doing some preparatory modifications in Figma, then animating it using SVGator....

    3. UI Design: A Practical Guide to Tabs

      UI Design: A Practical Guide to Tabs

      Tutorial Beginner

      Tabs represent a fundamental pattern for user interfaces. Learn the best way to create them in our new short course, UI Design: A Practical Guide to Tabs.

    4. Creativity: Rethinking the Exploration Phase of Design

      Creativity: Rethinking the Exploration Phase of Design

      Tutorial Beginner

      How to set the right conditions for creativity and new ideas in your work. How to start well in the early stages of any project.

    5. Find Out Why Your CSS Isn’t Working! New Firefox DevTools Features

      Find Out Why Your CSS Isn’t Working! New Firefox DevTools Features

      Tutorial Beginner

      In this article you’ll see how to use two new features available now in Firefox Nightly DevTools to help you find out what’s wrong with your CSS.

    6. What Step Comes Next? Cognitive Considerations In Web Design

      What Step Comes Next? Cognitive Considerations In Web Design

      Tutorial Beginner

      How to design websites to increase usability, minimize errors, and reduce cognitive overload in your users.

    7. New Course: Figma Grids in Under 30 Minutes

      New Course: Figma Grids in Under 30 Minutes

      Tutorial Beginner

      Grids are essential web design tools, and in our new course, Figma Grids in Under 30 Minutes, you'll get a clear introduction to the best ways of using them.

    8. New Course on Using HTML Tables the Right Way in 2019

      New Course on Using HTML Tables the Right Way in 2019

      Tutorial Beginner

      In our new course, A Short Guide to Using HTML Tables in the Modern Age, you'll learn how to use HTML tables the right way.

    9. 7 Principles of Good Website Design for Newspaper WordPress Themes

      7 Principles of Good Website Design for Newspaper WordPress Themes

      Tutorial Beginner

      In this article we’ll dive into seven principles for designing a quality newspaper theme. I’ll use some popular Newspaper WordPress themes on Themeforest as...

    10. What Your Web Typography Says About You

      What Your Web Typography Says About You

      Tutorial Beginner

      What do your type choices say about you and your business? (Hint: More than you think, read on to find out).

    11. Create a Stylish Dark Contact Form with HTML, CSS, and JavaScript

      Create a Stylish Dark Contact Form with HTML, CSS, and JavaScript

      Tutorial Intermediate

      In this tutorial, we’ll walk through the process of styling basic contact form elements. We’ll examine different ways for making a form beautiful and fully...

    12. Tips for Using Location-Based Photos on Your Website

      Tips for Using Location-Based Photos on Your Website

      Tutorial Beginner

      Here’s a look at some ways that location-based photography can grab a user’s attention and enhance your content.