Mockplus- Design, prototype and deliver your digital future
Get Started for Free
Blog > UX design > 30 Best Free UX/UI Design Tutorials(2019 Updated)

30 Best Free UX/UI Design Tutorials(2019 Updated)

Apr 7, 2017 1758032

An old Chinese proverb says sharpening your axe will not delay your work of cutting wood. Simply put, being well prepared may increase the speed at which you complete your work. I agree with this a hundred percent. In the field of UX/UI design, the saying applies perfectly. Facing great challenges, fierce competition, and picky users nowadays, UX/UI designers need to sharpen their skills to continuously improve, thus ensuring a steady source of inspiration for user experience projects.

The following 30 UX/UI design tutorials are the best resources to learn UX/UI design. This collection includes UI design tutorials for beginners. UI design tutorials from w3schools, UX design tutorials videos on YouTube, and more. I hope these resources will help you understand UX/UI better and inject new inspiration into your design.

5 Best-Rated UX/UI Design Tutorial on YouTube


1. UX Design Tutorial for Beginners (#1)


This is a video for newbies. It’ll give you a basic understanding of User Experience Design (UX) and web design essentials. In addition, the course will teach you the principles of making great websites and apps. You'll understand why UX/UI is the fastest growing tech sector. You will also have more confidence after you finish this tutorial.

What you will learn:

  • The essentials of UX/UI
  • The overall design process for a digital product
  • User-centred design process
  • How to make design-related decisions and put users first


2. The 2019 UI Design Crash Course for Beginners

Do you want to design a user interface that looks just as good as what you see on Dribbble and Behance? Do you want to become one of the top designers? If you do, take this tutorial as your complete beginner's guide on how to learn UI design. It provides you with a blueprint that's going to speed up your transition from producing ugly UIs as a beginner to producing fantastic UIs worthy of the pros

What you will learn:

  • The very important design fundamentals you need to understand first.
  • How to design from scratch using prototyping app Adobe XD
  • Design thoughts about UI


3. UX Design vs UI Design | What's the Difference? Which One is Right for Me?

There are some inherent similarities between UX and UI, but the two roles are quite different in nature. Do you know the difference? This tutorial focuses on this point and will help clear things up for you. Most importantly, it shares a few opinions on which is right for you to pursue.

It can be hard to know where to start and which road is the right one for you to take. If you are thinking of pursuing a career as a UI designer or UX designer and you’re not sure which path to take, then this video is for you.

What you will learn:

  • The roles, tools, and expectations of day to day life for UX and UI jobs
  • Useful UX/UI design learning links



This tutorial explains the difference between identity design and branding. It is very informative and straight forward. If you are building a brand, this tutorial is right for you. In addition, it also teaches logo design by putting together logo examples.

What you will learn:

  • The difference between identity and branding
  • How to define the brand
  • How to design and sketch


5. What is UX Design? Defining User Experience Design & Explaining the Process

In this tutorial, designers Jose and Chris explain what UX Design is by working on the redesign of The Skool's website. You'll also learn how to design more effective landing pages by thinking about and addressing users' challenges or pain points.

What you will learn:

  • What user experience design is
  • What user experience wheel is
  • How to redesign a website
  • How to define user personas and user challenges


6 UX/UI Design Tutorials With Design Examples

6. Adobe XD Auto Animate App Design - Tutorial

This tutorial teaches you how to design using Adobe XD, one of the most powerful design tools which can help you convert an idea into a product quickly. It is best for making an app with amazing animations.

What you will learn:

  • How to make graphs and animate numbers
  • How to get started with Adobe XD


7. UI Design Tutorial - Product Card | HTML CSS Speed Coding


In this UI Design tutorial, you will learn to design a product card using HTML & CSS. If you are interested in coding, this video is perfect for you. After all, it does help to know a bit of code when designing.

What you will learn:

  • How to design and build websites
  • How to use code in design


8. How to Design Template in Photoshop | Web UI/UX Design Tutorial Free

This is a Photoshop tutorial to make a website template, which is a popularly-shared design resource these days. You can also download the template designed in the video for your personal use.

What you will learn:

  • How to get started with Photoshop
  • How to design a web template


9. Log-in Page Mobile App Design Tutorial | UI/UX Design | How to Design a User Interface | #Maxpoint-Hridoy

In this Photoshop tutorial, you will learn how to design a mobile app login page. The page designed in the video is for the iPhone 6, so it features some flat design. This mobile app design tutorial also shows you the general process and steps for creating a cool mobile app.

What you will learn:

  • Material design
  • How to do mobile interface design
  • How to design an app mockup in Photoshop CC


10. Adobe XD Landing Page Design Tutorial with unDraw

This tutorial is for learning UI/UX design and how to use design tool Adobe XD. In this video, you will learn how to design a colourful landing page for a marketing company with unDraw illustrations and Adobe XD.

What you can learn:

  • What a landing page is
  • How to design a landing page


11. The Logo Design Process From Start to Finish

In this tutorial, you will be taken through a full logo design project, from start to finish. You’ll follow the designer as he sketches and moves on to make a grid system, ultimately creating the finished logo.



5 UX/UI Design Tutorials Using UI Design Software

12. UI Design in Photoshop - Simple Photoshop Tutorial

UI design software: Photoshop

Photoshop is a powerful UI design tool. It can do pretty much anything, all you need to do is to bring your own ideas and inspiration. In this video, you will learn how to create a minimalistic UI design in Photoshop. This tutorial also covers topics such as how to use the gradient tool, how to do website UI design and much more.


13. How to Duplicate Objects Around a Circle | Illustrator Tutorial

UI design software: Adobe Illustrator CC 2017

Adobe XD is a design & prototype tool. In this tutorial, you're going to learn how to design a mobile app UI in Adobe XD. You will learn how to animate the design with the app ProtoPie in the next episode. You will also learn to design responsive websites with powerful interactions, with zero coding required. The best thing? It’s all for free!


14. Mobile App UI Design in Adobe XD - 1 of 2

UI design tool: Adobe XD

Adobe XD is a design & prototype tool that we will be using to create this design. In this tutorial, you're going to learn how to design a mobile app UI in Adobe XD. You can learn how to animate the design with an app ProtoPie in the next episode. You can design responsive websites with powerful interactions, zero codings required, and all are free to get started here.


15. Design Nike Web App UI in Sketch - Speed Art Tutorial

UI design tool: Sketch

Sketch is a vector-based design tool. This tutorial demonstrates how to design a Nike Website UI in Sketch App.


16. Videos Using a Smart Prototyping Tool - Mockplus

UI design tool: Mockplus

A collection of videos showcasing the use of prototyping tool Mockplus, which is known to be faster, easier, and smarter than other tools in its class. It may not be as powerful as the giant Axure, but it does have incomparable advantages - especially for newbies. These videos featuring UI/UX design tutorials will make the start of your journey as easy as possible.


17. UX/UI Design Tutorial for Beginners in PDF

This tutorial is an intro to the world of User Experience and User Interface. It introduces basic design information, including UX, UI, defining your product, basic guidelines, and more.

Free download

UX/UI Design Tutorial for Beginners in PDF

18. A Design Course Which is Easy and Beneficial - hack design

Simple, useful, and also free, this UI/ UX design tutorial provides a wide variety of material including excellent blog posts, informative documentaries, etc. Moreover, you can easily apply what you have learned to your current design project, resulting in a more complete and balanced product. The course is mostly focused on the field of UI/UX design tutorials, but it also provides general design principles and brings relevant business and marketing ideas to the table.

hack design

19. A Question Worth Asking for All UI/UX Designers: What Is Design Thinking?

This video of UI UX Design tutorial will refresh your cognition of what design thinking is all about. UX UI is not just a formula essentially. The video provides you with a better understanding of UI UX design. Just enjoying this insightful explanatory video. Also, principles of design-thinking are also accessible on this video.


20. A UI UX Design tutorial simply specifies your design process - Foundations of UX: Prototyping by James Williamson

In James Williamson’s point of view, the design process consists of 5 steps :

  • Brainstorming
  • Project planning
  • Prototyping
  • Testing
  • Refining

Certainly, not all UI UX designers share the same design process. However, the common elements still count with different conditions. This video of UI UX design tutorial also clearly explains the importance of each step in the whole process.


21. 40 Excellent Design Examples of UI/UX Design Tutorials by Forty Agency

This tutorial is a big help of sparking your inspiration for your design project. It is common for every designer to experience a period of struggling with a new idea to do next design. In that case, those forty UI/UX Design tutorials might provide timely and insightful help. The video starts with the basics of UI/UX designs and goes on with some tips on how to do it properly.


22. UI UX Design Tutorials Help You Get to User’s Heart - Win User Loyalty by Targeting Logic and Emotions by Mike Donahue

This UI/UX Design tutorial provides ideas to win users’ loyalty by touching their emotions. It was actually a Conference talk, from Mike Donahue, on the UXPA2014 Conference held in London. Mike emphasizes the importance of making a lasting and deep connect with users on a deep emotional level. He strongly believes that in order for you to come up with great and effective user experience, you need to target emotions.


23. CSS User Interface - w3schools

As the leading global marketplace for teaching and learning, w3schools provides quality design video tutorials for UX/UI learners of all levels. By watching these video tutorials, you will have a confident understanding of UX/UI design and the design process for a digital product.

There are also more free UX/UI design courses online that you can explore.


Free download

UX/UI Design Tutorial [Articles]

24. Getting Started with Wireframes

This guide will cover what you need to know about wireframes, why and how you should use them in your workflow.

25. 5 Steps for a Successful Website Design

This article will walk you through 5 essential steps on how to design a website. The featured website design process will help you become a more productive and successful website designer.

26. Beginner's Guide on What is Website Design and How it Work

What is website design? How to become a web designer? These questions - and more - are answered in this article. Additionally, you’ll find the best web design resources, web online courses, tutorials, and web design tools.

27. How to Make Prototypes by Using Prototyping Tool Mockplus

Mockplus, a prototyping tool aimed at making prototyping faster and easier, is very easy to learn and hence is suitable for newbies. This resource will show you just how easy it is to use.

28. Definitive Guide to What Is a Wireframe - Website Wireframing Design

What is a wireframe? How to create a website wireframe? Which wireframing tool do you need? Everything about wireframing will be explained in this article.

29. Why Product Thinking is the next big thing in UX Design

Product thinking means thinking in terms of specific users’ problems, jobs to be done, goals, and revenues. If you want to be a top designer, you must be well-versed in product thinking.

30. UX Design for Mobile: Bottom Navigation

Design is more than good looks. It also covers how users engage with a product, whether it’s a website or an app. This tutorial shows how to make bottom navigation on mobile.

In Closing

Thank you for reading. I hope these UI/UX design tutorials help make you a better UX/UI designer. Remember, you can improve your design skills with hard work, a lot of practice, and diligence. And, if you spend a bit of time going through these UI UX Design tutorials, you may even double your effectiveness.

Free prototyping tool for web and mobile app design
Get Started for Free
Free prototyping tool for web and mobile app design
Get Started for Free
Free prototyping tool for web and mobile app design
Get Started for Free

Summer ye

In- house content editor, specialize in SEO content writing. She is a fruit lover and visionary person.

What's Mockplus?
Mockplus Cloud

Uploads design files from Sketch, Figma, Axure, Photoshop, and Adobe XD into our design handoff tool.

Mockplus RP

A free online prototyping tool that can create wireframes or highly interactive prototypes in just minutes.

Free web & app prototyping tool
Create wireframes or highly interactive prototypes in just minutes.
No time limit Up to 10 users
Get started
No, thanks, i'm good.