3.5 out of 5
3.5
7 reviews on Udemy

User Experience Design – Learn UI UX App Design with Figma

Design User-Centered Mobile Apps and Solve Real Problems : User Interface, User Experience design, UX Design with Figma
Instructor:
Gihan Akalanka
3,337 students enrolled
English [Auto]
Become a Successful UI/UX designer.
Visual design fundamentals: Master color psychology, the 60-30-10 rule, select font that enhances readability and brand identity, and iconography.
Organization: Keep everything neat, finding what you need in a flash.
UX principles and laws: Build user-centered apps that anticipate needs and solve real problems.
Learn to design wireframes and low fidelity prototypes
Learn to build high-fidelity mockup and prototype by following best practices.
How to use Figma for Essential UX Design & UI Design

Ready to launch your UI UX app design journey or take your skills to the next level? This class is your rocket fuel!

We’re ditching dry theory and jumping right into pixel-perfect reality. Turn your vision into a stunning mobile app, one pixel at a time.

Here’s what you’ll master:

  • The importance of wireframes and prototypes in the early stages of the design process.

  • How to use the Figma design tool.

  • How to design low-fidelity wireframes.

  • How to design high-fidelity mockups.

  • How to create interactive prototypes.

  • Visual design fundamentals: Master color psychology, the 60-30-10 rule, select font that enhances readability and brand identity, and iconography.

  • Organization: Keep everything neat, finding what you need in a flash.

  • UX principles and laws: Build user-centered apps that anticipate needs and solve real problems.

  • UI design: build high-fidelity mockup and prototype by following best practices.

Who’s this class for?

Anyone who wants to learn the A-Z of creating wireframes and low-fidelity prototypes. then turn them to high-fidelity mockups and interactive prototypes! No prior experience is needed, just a passion for creating amazing apps.

Your co-pilot on this journey? Me! We’ll craft a delicious food-ordering app together, mastering UX/UI principles along the way. By the end, you’ll be ready to conquer any app you dream of.

Benefits? Buckle up!

  • Master visual design and UX principles: From colors and fonts to user journeys, you’ll build a rock-solid foundation.

  • Craft stunning high-fidelity mockups and prototypes: Say hello to your future portfolio!

  • Become a user-centered design champion: Build apps that truly solve problems and make life easier.

What are the requirements for taking this class?

  • A computer/laptop with access to the Internet.

  • A Figma account.

Ready to launch your UI/UX design journey? Let’s get started!

Introduction

1
Welcome to UX UI App Design Course
2
Introduction to wireframes
3
Introduction to prototype and different between wireframe and prototype

Wireframe Basics

1
Figma Introduction
2
Design first wireframe for Gmail app
3
Design second wireframe for YouTube Studio app
4
Design third wireframe for Instagram
5
Design fourth wireframe for Linkedin

Design Wireframes for Food Delivery App

1
Intro to design wireframe for food delivery app
2
Design home page wireframe for food delivery app
3
Design search page wireframe for food delivery app
4
Design single food page for food delivery app
5
Build cart page for food delivery app
6
Build order confirm popup for food delivery app
7
Design add to cart popup for food delivery app
8
Do final touch up to wireframe before convert to prototype

Create prototype of food delivery app

1
Create prototype of food delivery app - Part 01
2
Create prototype of food delivery app - Part 02
3
Test food delivery app prototype

First Assignment

1
Assignment details

You need to continue designing the wireframe set and create 3 more wireframes.

Here are the steps you should take:

  1. Open the Food delivery app Figma project from the Figma community. (Or you can use the Figma project that you designed in this class)

  2. Create three frames on your Figma project: Hamburger menu, My profile, and Track order.

  3. Then, start designing the wireframe for each frame.

  4. After that, convert those frames to prototypes.

  5. Copy the link to your Figma project file and submit it to the class project.

You can check the last video in this course, called " Assignment Details" for more information.

If you have any problems, please check the videos again or comment in the discussion section. I will reply to you within 1-3 days.

See you in the next section!!

UX Visual Design - Select Colors

1
Introduction to UX Visual Design
2
Selecting Colors Using Color Psychology
3
Selecting a Primary Color
4
The 60-30-10 Rule
5
Creating the Color Palette
6
Color Accessibility Check
7
Bonus Lecture - Easy Ways to Select Colors

UX Visual Design - Typography

1
Fundamentals of Typography
2
Message and Emotion in Typography
3
How to Use the Google Fonts Website
4
Selecting Fonts for a New Food Delivery App

UX Visual Design - Iconography

1
Iconography

UX Design Basics

1
Design System
2
UX Principles and Laws
3
Information Architecture (IA)

UI Design with Figma

1
Creating a Figma Account
2
Grid Layout
3
Auto Layout Basics

Brand Logo

1
Designing a Brand Logo

Hi-Fi Mockups with Figma

1
Sticker Sheet
2
Hi-Fi Mockups Introduction
3
Designing the Header
4
Improving the Header
5
All About Components

Hi-Fi Mockups Design - Homepage

1
Designing the Search Box
2
Designing the Category Section
3
Adding Content to Categories
4
Designing Popular Foods Section
5
Making Changes to Food Item Component
6
Adding Content for Food Items
7
Designing Recommended Foods Section

Hi-Fi Mockups Design - Search Page

1
Designing Search Page
2
Designing Search Results Section
3
Pro Tip to Improve UI Design Skills

Hi-Fi Mockups Design - Single Food Page

1
Designing Single Food Page
2
Designing Dollar Amount Preview and Star Rating
3
Creating Count Controller and Adding to Cart Button
4
Adding Description Section
5
Creating Reviews Section

Hi-Fi Mockups Design - Cart Page

1
Designing Cart Page
2
Changing My Cart Design
3
Designing Cart Items Summary Section
4
Adding Content to the My Cart Section
5
Designing Cart Page - Part 05
6
Designing Cart Page - Part 06

Fixing UI/UX Issues and design footer menu

1
Fixing UI/UX Issues in the Design
2
Designing Footer Menu

HI-FI Prototype

1
Prototype Introduction
2
How to Use the Prototype Tab to Make Design Interactive
3
Prototyping - Part 2
4
Making Carousel Scroll
5
Adding Footer Menu to Frames
6
Adding Connection to Popup
7
Adding Horizontal Scrolling to Review Section
8
Making the Search Box Interactive
9
Using Variables to Remove Cart Items

Second Assignment

1
Assignment and Thank you!

You need to continue designing the wireframe set and create 3 more wireframes.

Here are the steps you should take:

  1. Open the Food delivery app Figma project from the Figma community. (Or you can use the Figma project that you designed in this class)

  2. Create three frames on your Figma project: Hamburger menu, My profile, and Track order.

  3. Then, start designing the wireframe for each frame.

  4. After that, convert those frames to prototypes.

  5. Copy the link to your Figma project file and submit it to the class project.

You can check the last video in this course, called " Assignment Details" for more information.

If you have any problems, please check the videos again or comment in the discussion section. I will reply to you within 1-3 days.

See you in the next section!!

You can view and review the lecture materials indefinitely, like an on-demand channel.
Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don't have an internet connection, some instructors also let their students download course lectures. That's up to the instructor though, so make sure you get on their good side!
3.5
3.5 out of 5
7 Ratings

Detailed Rating

Stars 5
1
Stars 4
3
Stars 3
2
Stars 2
0
Stars 1
1
3eecc4c94dd71c7892dbc94f188a4b3a
FREE For First 1000 Enrolls

Includes

7 hours on-demand video
Certificate of Completion

External Links May Contain Affiliate Links read more

Join our Telegram Channel To Get Latest Notification & Course Updates!
Join Our Telegram For FREE Courses & Canva PremiumJOIN NOW