Free Course Image UI/UX Design

Free online courseUI/UX Design

Duration of the online course: 11 hours and 42 minutes

New course

Master UI/UX design with this free course! Learn UI design principles, avoid common mistakes, create stunning animations, and level up with Figma tutorials and more.

In this free course, learn about

  • Getting Started With UI/UX Design
  • Core UI Elements and Design Tools
  • Visual Styles and UI Quality
  • Introduction to Responsive Design
  • Text, Illustration Resources, and Dashboards
  • Layout Principles and Design Thinking
  • Growing as a Designer and Storytelling
  • Grids, Navigation, and Design Audits
  • Cards, AI, and Carousels
  • Job-Ready UI and Essential Plugins
  • Intermediate UI Animations
  • Scrolling and Auto Layout Enhancements
  • Advanced Layouts and Responsive Tables
  • Pen Tool, State Management, and Animation Basics
  • State Management and Auto Layout Updates
  • Design Variables and Core UI Course
  • Responsive Design With Variables
  • Wix Studio Foundations
  • Advanced Prototyping and Career Strategy
  • Responsive Grids and CMS in Wix
  • Interactive Components With Variables
  • 3D and Advanced Animation Techniques
  • Advanced Button and AI Features

Course Description

Embark on an immersive journey into the world of UI/UX design with our comprehensive course. With a total duration of 11 hours and 42 minutes, this course is meticulously crafted to transform beginners into skilled designers by covering a wide array of essential topics in the field.

Designed for aspiring UI/UX designers, this course delves into fundamental principles and advanced techniques, ensuring a well-rounded learning experience. The course begins with a foundational guide on how to become a UI/UX designer in 2023, offering valuable insights for beginners to kickstart their career.

Understand the core principles of UI design, familiarize yourself with common pitfalls to avoid, and learn how to design standout buttons using Figma. The course keeps you updated on industry trends, including the implications of Adobe’s acquisition of Figma, and provides a hands-on tutorial to master Figma's Auto Layout feature in just 15 minutes.

Explore the nuances of designing modern elements such as a glassmorphism card, and learn to elevate your designs by avoiding common mistakes. Enhance your skills further with essential tips for designing high-converting landing pages and responsive designs using breakpoints in Figma.

Embrace the potential of open-source tools with a comprehensive Penpot tutorial, and master responsive web design swiftly with our 10-minute Figma tutorial. Become proficient in animating text, creating modern dashboard UIs, and replicating intricate animations like those found on Apple's website.

Grasp the artistic use of the golden ratio in UI design and understand why certain platforms like Dribbble may not always be beneficial. Learn growth strategies for UI designers, discover the power of storytelling, and gain insights on acing UI/UX design interviews.

Create structured and dynamic elements such as responsive grids and animated slide menus in Figma. Unearth the secrets of conducting a thorough UI/UX design audit and designing stunning UI cards, while incorporating advanced tools like AI art, Midjourney, and ChatGPT into your workflow.

Get hands-on with practical Figma tutorials covering a range of animations and design elements, from image carousels and responsive tables to advanced typewriter animations and state management features. Stay abreast of the best mockup tools and must-have Figma plugins to enhance your design toolkit.

Other core topics include portfolio creation, harnessing Figma updates and variables, and mastering complex prototyping features. The course also addresses the integration between Figma and Wix Studio, providing you with structured guidance to build responsive websites step-by-step.

In this holistic UI/UX design course, you'll also explore advanced animations, responsive typography, and learn powerful techniques to make your Figma designs stand out. Whether you are beginning your journey or looking to sharpen your expertise, this is the definitive guide to mastering the art of UI/UX design in today's dynamic digital landscape.

Course content

  • Video class: How to Become a UI/UX Designer in 2023? | A Beginner's Guide 07m
  • Exercise: Why is it important to specialize in either UI or UX design rather than trying to master both simultaneously?
  • Video class: UI Design Principles | Everything You Need To Know 05m
  • Exercise: Which UI design principle is essential for creating an effective user interface by using colors, sizes, and shapes?
  • Video class: 10 UI Design Mistakes to Avoid 08m
  • Exercise: What is a common mistake in UI design concerning color usage?
  • Video class: How to Design Great Buttons in Figma? | UI Design 06m
  • Exercise: What is the minimum recommended height for a mobile button?
  • Video class: Adobe Buys Figma – Is It the End of Figma? 02m
  • Exercise: What is a possible benefit of Adobe acquiring Figma?
  • Video class: Figma Tutorial: Auto Layout | Master Auto Layout in 15 Minutes 15m
  • Exercise: What is the main feature of Figma's Auto Layout?
  • Video class: Create a Modern Glassmorphism Card in 4 Minutes | Figma Tutorial 04m
  • Exercise: What is the main purpose of using a background blur effect when designing a glass morphism card?
  • Video class: Level Up Your UI Design by Avoiding These 5 Mistakes 03m
  • Exercise: What is a common UI design mistake related to shadow use?
  • Video class: 5 Essential Tips to Design High-Converting Landing Pages 07m
  • Exercise: What is the primary purpose of a landing page in an online business?
  • Video class: Responsive Design in Figma Using Breakpoints 04m
  • Exercise: What is the purpose of the 'breakpoints' plugin in web design?
  • Video class: Penpot Tutorial - The Open Source Figma Alternative 21m
  • Exercise: What is a unique feature of Penpod that differentiates it from other design platforms?
  • Video class: Make Your Web Design Responsive in 10 Minutes | Figma Tutorial 11m
  • Exercise: How can you make a logo stay in the top left corner of a responsive design in Figma?
  • Video class: Animate Text in Figma Like a Pro | Figma Tutorial 05m
  • Exercise: In creating advanced text animations in Figma, what is the purpose of using frame selections?
  • Video class: Amazing Illustrations for UI Designers | UI/UX Design Resources 04m
  • Exercise: Which website offers a feature to preview illustrations within the site itself?
  • Video class: How to Design a Modern Dashboard UI in Figma - Full Course 47m
  • Exercise: When designing a dashboard UI in Figma, what is a recommended first step to ensure a consistent layout?
  • Video class: Apple's Website Animation in Figma | Beginner Tutorial 04m
  • Exercise: How can one achieve a smooth transition effect for a landing page animation in Figma?
  • Video class: The Golden Ratio in UI Design 03m
  • Exercise: How can the golden ratio be applied to UI design to create a balanced layout?
  • Video class: Why Should UI/UX Designers STOP Using Dribbble? 04m
  • Exercise: What is a potential drawback of using Dribble for design inspiration?
  • Video class: How to Grow as a UI Designer in 2024 | The Ultimate Guide 06m
  • Exercise: Which of the following is an essential practice for improving your UI design skills?
  • Video class: The Power of Storytelling in UI Design (Real Examples) 07m
  • Exercise: How can storytelling enhance UI design?
  • Video class: How to Ace Your UI/UX Design Interview | The Ultimate Guide 05m
  • Exercise: What is the primary purpose of a design challenge during a UI/UX design interview process?
  • Video class: Create a Responsive Grid System for Web 12m
  • Video class: Create an Animated Slide Menu in Figma 07m
  • Exercise: What technique is used in Figma to create a transition effect for icons and menus in the design described above?
  • Video class: Exposing my UI/UX DESIGN AUDIT Formula: 5 Critical Steps to Follow 03m
  • Video class: The BEST Way To Design Stunning UI Cards | UI/UX Design 05m
  • Exercise: In UI card design, what is considered an essential component for effectively guiding users' attention according to the principles described?
  • Video class: UI/UX Design Made Easy: Using AI Art, Midjourney and ChatGPT 05m
  • Video class: Create an Animated Image Carousel | Figma Tutorial 09m
  • Exercise: What is essential for successfully implementing a drag animation in an image carousel within a UI design tool?
  • Video class: 5 UI Design Mistakes That Will Cost You The Job 03m
  • Video class: 10 Must-Have Figma Plugins for UI/UX Designers (2023) 03m
  • Exercise: Which Figma plugin is used to remove backgrounds from images directly within the Figma environment?
  • Video class: How to Create Your UI/UX Design Portfolio? | Beginner's Guide 20m
  • Video class: Create an Animated Notification in 8 Minutes | Figma Tutorial 08m
  • Exercise: What is a crucial step when setting up a drag interaction in Figma to animate a component?
  • Video class: Advanced Typewriter Animation in Figma 08m
  • Video class: Best Mockup Tools for UI/UX Designers (2024) 02m
  • Exercise: Which tool mentioned is specifically designed to create 3D product mockups and animations?
  • Video class: 10 Figma Updates You Don't Want to Miss (2023) 04m
  • Video class: Figma Tutorial: Master Sticky Scroll in 8 Minutes 08m
  • Exercise: Which feature allows designers to keep certain UI elements visible at the top of the screen while scrolling in Figma?
  • Video class: Top AI Tools For UI/UX Designers in 2023 05m
  • Video class: Create an Animated Card Grid in 10 Min | Figma Tutorial 11m
  • Exercise: Which of the following actions allows you to move an illustration to any position within a Figma frame that uses Auto Layout?
  • Video class: AirPods Pro Animation in Figma | Beginner Tutorial 11m
  • Video class: Design a Responsive Table in Figma Using Auto Layout (2024) 10m
  • Exercise: What is the primary reason for setting the width of the main table frame to a fixed width initially in a responsive design using Figma?
  • Video class: Figma Tutorial: Master The Figma Pen Tool (2024) 08m
  • Video class: I Animated a 3D Render in Figma in 10 Minutes (Step-by-Step Tutorial) 11m
  • Exercise: What is an efficient method for animating a sequence of images in Figma without compromising image quality?
  • Video class: Figma Carousel Animation in 8 Minutes 08m
  • Video class: State Management in Figma (New Prototyping Feature) | Figma Tutorial 05m
  • Exercise: What is a key benefit of using the new State Management feature in Figma for prototyping?
  • Video class: Animate Charts in Figma Like a Pro | Figma Tutorial 04m
  • Video class: Figma Auto Layout Updates (2023) | Figma Tutorial 07m
  • Exercise: Which feature in Figma allows elements within an auto layout to wrap into a new line if there's not enough space available?
  • Video class: Figma Tutorial: Use Figma Variables Like a Pro ( Practice File) 30m
  • Video class: New Course: UI Design 03m
  • Exercise: What is one of the primary benefits of learning UI design principles?
  • Video class: Export Figma Animations with a Single Click | Figma Tutorial 07m
  • Video class: Make Your Web Design Responsive Using Variables | Figma Tutorial 15m
  • Exercise: Which of the following types of variables is most suitable for managing the visibility state of a UI component in responsive design?
  • Video class: Figma Tutorial: Master Figma Dev Mode in 8 Minutes 08m
  • Video class: 4 Figma Variables Updates You Probably Overlooked | Figma Tutorial 05m
  • Exercise: What is the purpose of the color scoping update in Figma?
  • Video class: Wix Studio Crash Course for Beginners 2024 21m
  • Video class: Horizontal and Vertical Scroll in Figma | Figma Tutorial 07m
  • Exercise: What is the essential step required to make a section scrollable in Figma?
  • Video class: Master Wix Studio Animations and Interactions 08m
  • Video class: Figma Tutorial: Advanced Prototyping With Variables ( Practice File) 32m
  • Exercise: What is required to use the advanced prototyping features in Figma as discussed in the course?
  • Video class: If I started UI/UX Design in 2024, I'd Do This! 08m
  • Video class: Top 10 Figma Plugins for UI/UX Designers in 2024 03m
  • Exercise: Which Figma plugin helps in enhancing the accessibility of a design by providing tools like a color contrast checker and vision simulator?
  • Video class: Create a Responsive Bento Grid for Web 11m
  • Video class: Figma to Wix Studio: Build a Responsive Website Step-by-Step 40m
  • Exercise: When using Wick Studio to convert a Figma design into a responsive website, what is the purpose of adjusting the 'responsive behavior' setting for elements like images and buttons?
  • Video class: Multi-edit: New Figma Update (2024) | Figma Tutorial 10m
  • Video class: Animated Dropdown Menu in Figma With Variables | Figma Tutorial 24m
  • Exercise: What is the primary purpose of creating string variables in the process of designing an interactive drop-down menu in Figma?
  • Video class: Full Page Scroll Animation in 10 Minutes | Figma Tutorial 12m
  • Video class: Responsive Typography With Variables | Figma Tutorial 11m
  • Exercise: What feature in Figma allows designers to connect typography variables to different text properties such as font weight and size?
  • Video class: Figma Tutorial: 3D Isometric Animation in 6 Minutes 06m
  • Video class: This Technique Will Make Your Figma Animations 100x Better | Figma Tutorial 07m
  • Exercise: What is a key step to ensure a smooth animation transition when designing card animations?
  • Video class: Create Animated Bento Cards in 9 Minutes | Figma Tutorial ( Practice File) 09m
  • Video class: This Figma Trick Will Make Your Buttons 100x Better | Figma Tutorial 07m
  • Exercise: What is the purpose of creating a gradient in the process of designing an animated glowing button in an interface design tool?
  • Video class: Figma Updates 2024: Figma AI Figma Slides 03m
  • Video class: Wix Studio CMS for Beginners 2024 (Crash Course) 24m
  • Exercise: What is a CMS and how does it benefit web development?

This free course includes:

11 hours and 42 minutes of online video course

Digital certificate of course completion (Free)

Exercises to train your knowledge

100% free, from content to certificate

Ready to get started?Download the app and get started today.

Install the app now

to access the course
Icon representing technology and business courses

Over 5,000 free courses

Programming, English, Digital Marketing and much more! Learn whatever you want, for free.

Calendar icon with target representing study planning

Study plan with AI

Our app's Artificial Intelligence can create a study schedule for the course you choose.

Professional icon representing career and business

From zero to professional success

Improve your resume with our free Certificate and then use our Artificial Intelligence to find your dream job.

You can also use the QR Code or the links below.

QR Code - Download Cursa - Online Courses

More free courses at UX - User Experience

Free Ebook + Audiobooks! Learn by listening or reading!

Download the App now to have access to + 3300 free courses, exercises, certificates and lots of content without paying anything!

  • 100% free online courses from start to finish

    Thousands of online courses in video, ebooks and audiobooks.

  • More than 48 thousand free exercises

    To test your knowledge during online courses

  • Valid free Digital Certificate with QR Code

    Generated directly from your cell phone's photo gallery and sent to your email

Cursa app on the ebook screen, the video course screen and the course exercises screen, plus the course completion certificate

+ 9 million
students

Free and Valid
Certificate

60 thousand free
exercises

4.8/5 rating in
app stores

Free courses in
video and ebooks