User Experience Design - Learn UI UX App Design with Figma from Udemy

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.

What's inside

Learning objectives

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

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

Syllabus

Introduction

Welcome to UX UI App Design Course

Introduction to wireframes

Introduction to prototype and different between wireframe and prototype

Wireframe Basics

Figma Introduction

Design first wireframe for Gmail app

Design second wireframe for YouTube Studio app

Design third wireframe for Instagram

Design fourth wireframe for Linkedin

Design Wireframes for Food Delivery App

Intro to design wireframe for food delivery app

Design home page wireframe for food delivery app

Design search page wireframe for food delivery app

Design single food page for food delivery app

Build cart page for food delivery app

Build order confirm popup for food delivery app

Design add to cart popup for food delivery app

Do final touch up to wireframe before convert to prototype

Create prototype of food delivery app

Create prototype of food delivery app - Part 01

Create prototype of food delivery app - Part 02

Test food delivery app prototype

First Assignment

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

Here are the steps you should take:

Open the Food delivery app Figma project from the Figma community. (Or you can use the Figma project that you designed in this class)
Create three frames on your Figma project: Hamburger menu, My profile, and Track order.
Then, start designing the wireframe for each frame.
After that, convert those frames to prototypes.
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

Introduction to UX Visual Design

Selecting Colors Using Color Psychology

Selecting a Primary Color

The 60-30-10 Rule

Creating the Color Palette

Color Accessibility Check

Bonus Lecture - Easy Ways to Select Colors

UX Visual Design - Typography

Fundamentals of Typography

Message and Emotion in Typography

How to Use the Google Fonts Website

Selecting Fonts for a New Food Delivery App

UX Visual Design - Iconography

Iconography

UX Design Basics

Design System

UX Principles and Laws

Information Architecture (IA)

UI Design with Figma

Creating a Figma Account

Grid Layout

Auto Layout Basics

Brand Logo

Designing a Brand Logo

Hi-Fi Mockups with Figma

Sticker Sheet

Hi-Fi Mockups Introduction

Designing the Header

Improving the Header

All About Components

Hi-Fi Mockups Design - Homepage

Designing the Search Box

Designing the Category Section

Adding Content to Categories

Designing Popular Foods Section

Making Changes to Food Item Component

Adding Content for Food Items

Designing Recommended Foods Section

Hi-Fi Mockups Design - Search Page

Designing Search Page

Designing Search Results Section

Pro Tip to Improve UI Design Skills

Hi-Fi Mockups Design - Single Food Page

Designing Single Food Page

Designing Dollar Amount Preview and Star Rating

Creating Count Controller and Adding to Cart Button

Adding Description Section

Creating Reviews Section

Hi-Fi Mockups Design - Cart Page

Designing Cart Page

Changing My Cart Design

Designing Cart Items Summary Section

Adding Content to the My Cart Section

Designing Cart Page - Part 05

Designing Cart Page - Part 06

Fixing UI/UX Issues and design footer menu

Fixing UI/UX Issues in the Design

Designing Footer Menu

HI-FI Prototype

Prototype Introduction

How to Use the Prototype Tab to Make Design Interactive

Prototyping - Part 2

Making Carousel Scroll

Adding Footer Menu to Frames

Adding Connection to Popup

Adding Horizontal Scrolling to Review Section

Making the Search Box Interactive

Using Variables to Remove Cart Items

Second Assignment

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Develops skills in UX UI mobile app design, which are core skills for roles ranging from designers to engineers

Taught by Gihan Akalanka, who are recognized for their work in UX UI app design

Uses Figma for Essential UX Design & UI Design, which is standard in industry

Builds a strong foundation for beginners in UX UI app design

Takes a creative approach to UX UI app design

Taught through practical application, which is valuable for designers

Reviews summary

User experience design course with figma

Learners say this beginner-friendly course on User Experience Design with Figma is structured and engaging, with easy-to-understand explanations. Students value the practical, hands-on approach, but note that some materials may be outdated.

Knowledgeable and friendly

"very knowledgeable and easy to understand"

"The Instructor is GREAT!!!"

"The content is well Described!"

Well-structured and engaging

"Easy to listen to and engaging"

"The course is interesting!!!"

"Easy to understand for beginners."

Some materials may be outdated

"Contents were good. However, there are some outdated codes which do not functional anymore."

"Update: The instructor reached out to address some concerns I raised, however I've already completed the course and don't wish to revisit it."

"Due to my complexity and errors in section 4, I thought I would take on the theoretical parts in section 9, then section 8, and then back and repeat section 4."

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in User Experience Design - Learn UI UX App Design with Figma with these activities:

Review Figma basics

Show steps

Familiarizing yourself with the basics of Figma will make it easier to follow along with the course materials and complete the assignments.

Browse courses on Figma

Show steps

Watch a tutorial on Figma basics.
Create a free Figma account and explore the interface.
Practice creating a few simple shapes and text objects.

Follow along with Figma tutorials

Show steps

Following along with tutorials will help you to learn how to use Figma to create UI designs and prototypes.

Browse courses on Figma

Show steps

Find some Figma tutorials online or in a book.
Follow the steps in the tutorials carefully.
Try to recreate the designs and prototypes yourself.

Complete Figma exercises

Show steps

Completing exercises will help you to solidify your understanding of Figma and to develop your UI design skills.

Browse courses on Figma

Show steps

Find some Figma exercises online or in a book.
Set aside some time each week to work on the exercises.
Don't be afraid to ask for help if you get stuck.

Four other activities

Expand to see all activities and additional details

Show all seven activities

Help other students with Figma

Show steps

Helping other students with Figma will reinforce your own understanding of the tool and will also help you to develop your communication and teaching skills.

Browse courses on Figma

Show steps

Join a Figma community or forum.
Offer to help other students with Figma-related questions.
Be patient and respectful when answering questions.

Create a Figma resource library

Show steps

Creating a Figma resource library will help you to organize and store your Figma files and to easily access them in the future.

Browse courses on Figma

Show steps

Create a new Figma file.
Add pages to the file for different categories of resources, such as UI elements, icons, and templates.
Import your Figma files into the resource library.
Share your resource library with others.

Design a UI for a mobile app

Show steps

Designing a UI for a mobile app will give you hands-on experience with the skills you are learning in the course.

Browse courses on UI Design

Show steps

Choose a mobile app idea.
Sketch out your ideas for the UI.
Create your UI design in Figma.
Share your design with others for feedback.

Write a blog post about Figma

Show steps

Writing a blog post about Figma will help you to solidify your understanding of the tool and to share your knowledge with others.

Browse courses on Figma

Show steps

Choose a topic for your blog post.
Do some research on the topic.
Write a draft of your blog post.
Edit and proofread your blog post.
Publish your blog post.

Career center

Learners who complete User Experience Design - Learn UI UX App Design with Figma will develop knowledge and skills that may be useful to these careers:

UI Designer

User Experience (UX) designers and UI designers basically do the same thing, but UX designers deal more with the user's entire experience with a product, while UI designers focus specifically on the visual elements of a product, like how it looks and feels.

See salaries and explore the career path for UI Designer

UX Designer

See salaries and explore the career path for UX Designer

Product Designer

Product designers are responsible for the entire product development process, from conceptualization to launch. They work closely with engineers, UX designers, and UI designers to bring a product to life.

See salaries and explore the career path for Product Designer

Interaction Designer

Interaction designers are responsible for designing the way that users interact with a product. They work closely with UX designers and UI designers to create a seamless and user-friendly experience.

See salaries and explore the career path for Interaction Designer

Information Architect

Information architects are responsible for organizing and structuring information in a way that is easy for users to find and understand.

See salaries and explore the career path for Information Architect

Web Designer

Web designers are responsible for the visual and interactive elements of a website. They work closely with UX designers and UI designers to bring a product to life.

See salaries and explore the career path for Web Designer

Front-End Developer

Front-end developers are responsible for the visual and interactive elements of a website or app. They work closely with UX designers and UI designers to bring a product to life.

See salaries and explore the career path for Front-End Developer

Graphic designer

Graphic designers are responsible for creating visual concepts, using computer software or by hand, to communicate ideas that inspire, inform, and captivate consumers.

See salaries and explore the career path for Graphic designer

Sales Manager

Sales managers are responsible for leading and managing a sales team to achieve sales goals.

See salaries and explore the career path for Sales Manager

Project Manager

Project managers are responsible for planning, executing, and closing out projects.

See salaries and explore the career path for Project Manager

Marketing Manager

Marketing managers are responsible for developing and executing marketing campaigns to promote a product or service.

See salaries and explore the career path for Marketing Manager

Business Analyst

Business analysts are responsible for analyzing business needs and recommending solutions.