UI / UX Design Tutorial – Wireframe, Mockup & Design in Figma

via freeCodeCamp

Start learning Write review

Details

Start learning

Provider

freeCodeCamp
Pricing

Free Online Course
Languages

English
Duration & workload

1-2 hours
Sessions

On-Demand

Found in

Overview

Learn the process of UI/UX design by building a full website design from scratch using wireframing, prototyping, and designing in Figma. The course aims to teach the skills of wireframing, UI layout, and mockup creation. The teaching method involves a tutorial video covering the entire design process. This course is intended for individuals interested in learning UI/UX design, particularly beginners looking to understand the fundamentals of designing user-friendly interfaces.

Syllabus

Introduction.
Wireframing.
UI Layout.
Mockup.

Taught by

freeCodeCamp.org

Reviews

4.4 rating, based on 69 Class Central reviews

Start your review of UI / UX Design Tutorial – Wireframe, Mockup & Design in Figma

Albus Yorium @yorium

It's a very informative and hands on tutorial. Learning through live examples/editing is really helpful and makes the learning easier. Thank You.
Aruna Nagahawatte @aknshan

This nice quick and simple tutorial for beginners to understand UX designing, wireframing and mickup.
JOSHWA DOSS

I recently had the opportunity to take the "UI / UX Design Tutorial – Wireframe, Mockup & Design in Figma" course offered by freeCodeCamp, and I must say it was an outstanding learning experience. The course provided a comprehensive and well-struct…

I recently had the opportunity to take the "UI / UX Design Tutorial – Wireframe, Mockup & Design in Figma" course offered by freeCodeCamp, and I must say it was an outstanding learning experience.

The course provided a comprehensive and well-structured introduction to UI/UX design principles, and the instructor did an excellent job explaining the concepts in a clear and concise manner. The use of Figma, a popular design tool, was a highlight of the course, as it allowed for hands-on practice in creating wireframes and mockups.

One aspect I particularly appreciated was the practical approach taken by the instructor. Throughout the course, real-world examples and case studies were used, giving me valuable insights into the design process and how to tackle common design challenges.

The step-by-step tutorials were easy to follow, even for someone like me who had limited prior experience in UI/UX design. By the end of the course, I felt confident in my ability to create well-structured wireframes and visually appealing mockups.

Furthermore, the course materials and videos were accessible anytime, allowing me to learn at my own pace and revisit specific topics whenever needed. The quizzes and assignments provided an opportunity to reinforce my learning and test my understanding.

Overall, I highly recommend the "UI / UX Design Tutorial – Wireframe, Mockup & Design in Figma" course to anyone interested in getting started with UI/UX design or looking to improve their design skills. The knowledge and skills I gained from this course have been invaluable in my design projects, and I am grateful to freeCodeCamp for providing such a valuable resource for aspiring designers.

A big thank you to the instructor and the freeCodeCamp team for creating this exceptional course
Muhammed Safar @Muhammedsafar

This is my first ui design class. i learned a lot tings from this course.nowi ave slight idea to how do this.thanks to class central.
Lakshmi Yuvaraj

UI/UX Design Tutorial offers an outstanding UI tutorial that seamlessly guides learners through foundational principles to advanced techniques. The hands-on approach, supported by real-world examples and case studies, ensures an engaging and practic…

UI/UX Design Tutorial offers an outstanding UI tutorial that seamlessly guides learners through foundational principles to advanced techniques. The hands-on approach, supported by real-world examples and case studies, ensures an engaging and practical learning experience. The instructor's clear communication and industry-focused content make complex concepts accessible. Emphasizing accessibility and inclusivity in design adds a socially responsible dimension. The tutorial's production quality, including high-resolution visuals and downloadable resources, enhances its value. Whether you're a beginner or a seasoned professional, this tutorial's well-structured curriculum and commitment to relevance make it a must-try, earning a solid five-star rating.
Radhika

The course exceeded my expectations, providing a comprehensive and engaging learning experience. The content was well-structured, with clear explanations and practical examples. The instructor demonstrated expertise, making complex concepts accessible. Interactive elements, such as quizzes and discussions, enhanced understanding and retention. The platform was user-friendly, facilitating seamless navigation. Regular updates and timely feedback created a supportive learning environment. Overall, the course not only met but surpassed my educational goals, equipping me with valuable skills and knowledge. Highly recommended for anyone seeking a well-rounded and effective learning journey.
Muhammad Ziddan Rachman

It's delightful to learn how crucial a Wireframe is in website design, where Wireframe serves as a site map or a guide for the elements needed in website development. Additionally, the explanations regarding mockups and the rough design of Wireframes have expanded my understanding of UI design. Surprisingly, it's not as complicated as I initially thought.
KRISHNADHARSHINI L

The tutorial's step-by-step approach is easy to follow, offering valuable insights into creating visually appealing and user-friendly interfaces. However, it might benefit from a more in-depth exploration of advanced features. Overall, it serves as a commendable starting point for those looking to grasp the fundamentals of UI/UX design in Figma.
Fivi Aulia

UI/UX Design Tutorial – Wireframe, Mockup & Design in Figma is a top guide for beginners. The instructor explains clearly and practically. However, some parts feel rushed. More in-depth explanations and focus on user research would enhance the course's usefulness.
It's Ok Bro

I recently completed the 'UI/UX Design Tutorial – Wireframe, Mockup & Design in Figma' course and found it to be incredibly informative, guiding me through Figma basics, wireframing, mockups, and essential UI/UX principles with clarity and practical examples.
Jana Marie Rodriguez

Learned a lot in this course especially about the process of creating wireframes and turning them into an actual website design. Course is very easy to follow and information are delivered very well in the simplest yet effective way
Ayomide Aboderin

It was a well detailed tutorial on how to make a comprehensive mock-up. I have learned a lot and believe I am leaving this course with substantial knowledge on how to start on my UI journey. Thank you FreeCodeCamp for this video!
KILLER KHAN GAMING

This course is a great introduction to UI/UX design using Figma. The instructor, Adrian, does a great job of explaining the different aspects of UI/UX design in a clear and concise way. He also provides plenty of opportunities for practice, so you c…

This course is a great introduction to UI/UX design using Figma. The instructor, Adrian, does a great job of explaining the different aspects of UI/UX design in a clear and concise way. He also provides plenty of opportunities for practice, so you can really solidify your understanding of the material. Overall, this is a great course for anyone who wants to learn UI/UX design or improve their skills in Figma.

Here are some of the things I liked about the course:

The instructor is very knowledgeable and experienced in UI/UX design.
The course is well-structured and easy to follow.
The instructor provides plenty of opportunities for practice.
The course is affordable and accessible to anyone.
If you're interested in learning UI/UX design or improving your skills in Figma, I highly recommend this course. It's a great way to learn from a knowledgeable instructor and practice your skills.

Enter a prompt here
Bard may display inaccurate or offensive information that doesn’t represent Google’s views.
Kavya SK

Really good course for beginners to glimpse a bit of what's ui and ux and how it works,so go for it without a second thought !
Mockups has are really good explanation to reve up our interest in this field
G SUBASHINI

Nice one .It help me to learn some basic concept about ui ux designing it is most welcoming course . I suggest everyone to go through the course.thanks for providing this.
Aroosha Irfan

Amazing course. Through this course I'm able to learn new things which i never knew.
I'm very happy with learning new skills from your site. I recommend this course to everyone
Isaac Oluwatosun Ilesanmi

I really enjoyed the course.
The method of explanation is perfect.
But if there is practical section like assignments will encourage more hands on real life situations.
Mariam Hussien Ismail

Thank you for this valuable information. I loved the simple explanation method. I worked to explain everything in an easy way so that everyone can understand it.
Trishna Ramesh

Very useful! Thanks for teaching a toughest course in easiet way!It’s better to hear and I can understand very easily no need to search of any meanings and so on!
Oladokun Olawale James

I have just undergone the simplest way of teaching while making a whole lot of sense at it!
i will recommend this to anyone who wants to learn design.