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

What you'll 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

Requirements

A computer/laptop with access to the Internet.

A Figma account. A free plan is available on the Figma website.

No previous UX Design/UI Design experience is needed.

No previous Figma skills are needed.

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!

Overview

Section 1: Introduction

Lecture 1 Welcome to UX UI App Design Course

Lecture 2 Introduction to wireframes

Lecture 3 Introduction to prototype and different between wireframe and prototype

Section 2: Wireframe Basics

Lecture 4 Figma Introduction

Lecture 5 Design first wireframe for Gmail app

Lecture 6 Design second wireframe for YouTube Studio app

Lecture 7 Design third wireframe for Instagram

Lecture 8 Design fourth wireframe for Linkedin

Section 3: Design Wireframes for Food Delivery App

Lecture 9 Intro to design wireframe for food delivery app

Lecture 10 Design home page wireframe for food delivery app

Lecture 11 Design search page wireframe for food delivery app

Lecture 12 Design single food page for food delivery app

Lecture 13 Build cart page for food delivery app

Lecture 14 Build order confirm popup for food delivery app

Lecture 15 Design add to cart popup for food delivery app

Lecture 16 Do final touch up to wireframe before convert to prototype

Section 4: Create prototype of food delivery app

Lecture 17 Create prototype of food delivery app - Part 01

Lecture 18 Create prototype of food delivery app - Part 02

Lecture 19 Test food delivery app prototype

Section 5: First Assignment

Lecture 20 Assignment details

Section 6: UX Visual Design - Select Colors

Lecture 21 Introduction to UX Visual Design

Lecture 22 Selecting Colors Using Color Psychology

Lecture 23 Selecting a Primary Color

Lecture 24 The 60-30-10 Rule

Lecture 25 Creating the Color Palette

Lecture 26 Color Accessibility Check

Lecture 27 Bonus Lecture - Easy Ways to Select Colors

Section 7: UX Visual Design - Typography

Lecture 28 Fundamentals of Typography

Lecture 29 Message and Emotion in Typography

Lecture 30 How to Use the Google Fonts Website

Lecture 31 Selecting Fonts for a New Food Delivery App

Section 8: UX Visual Design - Iconography

Lecture 32 Iconography

Section 9: UX Design Basics

Lecture 33 Design System

Lecture 34 UX Principles and Laws

Lecture 35 Information Architecture (IA)

Section 10: UI Design with Figma

Lecture 36 Creating a Figma Account

Lecture 37 Grid Layout

Lecture 38 Auto Layout Basics

Section 11: Brand Logo

Lecture 39 Designing a Brand Logo

Section 12: Hi-Fi Mockups with Figma

Lecture 40 Sticker Sheet

Lecture 41 Hi-Fi Mockups Introduction

Lecture 42 Designing the Header

Lecture 43 Improving the Header

Lecture 44 All About Components

Section 13: Hi-Fi Mockups Design - Homepage

Lecture 45 Designing the Search Box

Lecture 46 Designing the Category Section

Lecture 47 Adding Content to Categories

Lecture 48 Designing Popular Foods Section

Lecture 49 Making Changes to Food Item Component

Lecture 50 Adding Content for Food Items

Lecture 51 Designing Recommended Foods Section

Section 14: Hi-Fi Mockups Design - Search Page

Lecture 52 Designing Search Page

Lecture 53 Designing Search Results Section

Lecture 54 Pro Tip to Improve UI Design Skills

Section 15: Hi-Fi Mockups Design - Single Food Page

Lecture 55 Designing Single Food Page

Lecture 56 Designing Dollar Amount Preview and Star Rating

Lecture 57 Creating Count Controller and Adding to Cart Button

Lecture 58 Adding Description Section

Lecture 59 Creating Reviews Section

Section 16: Hi-Fi Mockups Design - Cart Page

Lecture 60 Designing Cart Page

Lecture 61 Changing My Cart Design

Lecture 62 Designing Cart Items Summary Section

Lecture 63 Adding Content to the My Cart Section

Lecture 64 Designing Cart Page - Part 05

Lecture 65 Designing Cart Page - Part 06

Section 17: Fixing UI/UX Issues and design footer menu

Lecture 66 Fixing UI/UX Issues in the Design

Lecture 67 Designing Footer Menu

Section 18: HI-FI Prototype

Lecture 68 Prototype Introduction

Lecture 69 How to Use the Prototype Tab to Make Design Interactive

Lecture 70 Prototyping - Part 2

Lecture 71 Making Carousel Scroll

Lecture 72 Adding Footer Menu to Frames

Lecture 73 Adding Connection to Popup

Lecture 74 Adding Horizontal Scrolling to Review Section

Lecture 75 Making the Search Box Interactive

Lecture 76 Using Variables to Remove Cart Items

Section 19: Second Assignment

Lecture 77 Assignment and Thank you!

Anyone who like to become a UI/UX designer,Anyone who wants to start using Figma in their career & get paid for their user experience design skills.,Anyone who wants to learn the basics of wireframes and low-fidelity prototypes,Anyone who wants to learn the A-Z of building high-fidelity mockups and interactive prototypes!