Design User-Centered Mobile Apps and Solve Real Problems : User Interface, User Experience design, UX Design with Figma
What you will learn
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
Description
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!
English
language
Content
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
Assignment details
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
Assignment and Thank you!