UI Design & Figma Mastery
Release date:2023, July
Author:Arash
Skill level:Beginner
Language:English
Exercise files:Yes
Enhance your UI design skills and master Figma with our comprehensive course. Delve into industry-leading techniques, create real projects, and build captivating user experiences.
Module 01: Design Fundamentals Start with the essentials—the bedrock of successful UI/UX design. Gain vital skills and knowledge crucial for exceptional design.
Module 02: Figma Academy Explore Figma from the ground up. Navigate its interface, learn advanced techniques, and craft intricate design systems and interactive prototypes.
Module 03: UI Elements Discover the core components of remarkable user interfaces. Understanding these elements is key to crafting intuitive and visually stunning designs.
Module 04: Color Theory Uncover the science behind colors and their impact on user experiences. Master color theory, create harmonious palettes, and ensure accessibility in design.
Module 05: Responsive Landing Page Design Craft your design system and build a responsive landing page. Learn to create design guidelines and implement adaptable designs for various devices.
Module 06: Design Challenges Put your skills to the test with real-world design challenges. Challenge your creativity, critical thinking, and problem-solving abilities.
Module 07: Prototyping & Animation Explore the transformative power of prototyping and animation. Elevate static interfaces into interactive, engaging experiences through seamless transitions and captivating animations.
01-Module 01 – Introduction
01-Introduction
02-Whats UI or UX Design
02-Module 02 – UI Design Principles
01- Intro to Design Principles
02- Layout
03- Visual Hierarchy
04- Visual Noise
05- Iconography
06- Typography
07- Contrast
08- Color Palette
09- Spacing
10- Grids
11- Consistency
12- Laws of UX
03-Module 03 – Figma Academy
01- Introduction to Figma
02- Figma Environment
03- Shapes
04- Images
05- Editing Shapes
06- Layers Basics
07- Pen & Pencil
08- Boolean Operations
09- Masks
10- Measurements
11- Text
12- Auto Layout
13- Figma Auto Layout Updates (2023)
14- Constraints and Adaptive Layouts
15- Styling Fill Stroke Effects
16- Text and Color Styles
17- Components
18- Variants
19- Interactive Components
20- Layout Grids
21- Plugins
22- Exporting
23- Collaboration and commenting
25- Variables
26- Dev Mode
04-Module 04 – UI Elements
01- Intro to UI Elements
02- Text Fields
03- Buttons
04- Sliders
05- Tooltips
06- Selection Controls
07- Cards
08- Dialogs
09- Lists
10- Tables
11- Navigation
12- Charts
13- Snackbars
05-Module 05 – Master Color in UI Design
01- The importance of colors in UI_UX design
02- Color Modes
03- The color ingredients
04- Master the color wheel
05- Different types of colors
06- Color Harmonies
07- Color Contrast
08- Real-world examples of harmonious color schemes
09- Introduction to Color Psychology
10- Gender differences in color preference
11- Required colors for UI design
12- How to create a color palette for your project
13- How to choose your base color
14- How to choose an accent colors
15- How to choose background colors
16- Semantic colors in UI design
17- What is a color scale
18- What is Grayscale
19- How to apply a color palette to your design
20- How to create great gradients-
21- What is color accessibility
22- Validate your color palette based on contrast ratio
23- Useful tools for accessibility
06-Module 06 – Web Design Project – Polio CRM Landing Page
01- Intro to the project
02- Whats Project Brief
03- Whats a Design System
04- Create a Design System part 1
05- Create a Design System part 2
06- Create a Design System part 3
07- Create a Design System part 4
08- Create a Design System part 5
09- Create a moodboard
10- Create a Wireframe (Part 1)
11- Create a Wireframe (Part 2)
12- Whats Box Model
13- Navbar
14- Hero Section
15- Social Proof Section
16- Features Section
17- CTA Section
18- Expanded Features Section
19- Integrations
20- Testimonials Section
21- FAQ Section
22- Footer Section
23- Responsiveness (Mobile)
24- Responsiveness (Tablet)
25- Responsiveness (Large)
26- Componentization
27- Breakpoints Prototype
28- Project Handoff
07-Module 07 – UI Design Challenges
01- Design Challenge 1 – Sign-in Page
02- Challenge 1 Soultion
03- Design Challenge 02 (Table)
04- Challenge 2 soultion (part 1)
05- Challenge 2 Solution (Part 2)
06- Design Challenge 3 (Sidebar Layout)
07- Challenge 3 Solution
08- How to practice UI design
09- Tips on Color Usage
08-Module 08 – Advanced Prototyping
01- Whats prototyping
02- Types of UI Animation
03- Basics of Prototyping in Figma
04- Animated Like Button
05- Variants & Interactive Components
06- Animated Buttons
07- Animated Switches
08- Animated Slider
09- Animated Card.mov
10- Animated Text
11- Interactive Dropdown Menu Final
12- Animated Notification
13- iPhones Dynamic Island
14- 3D Animation in Figma
15- Loading Animation
16- Animated Mesh Gradient
17- Scroll Animation
18- Animated Tab Bar
19- Animated Image Carousel
20- Animated Floating Action Button
21- Accordion Effect
09-Module 09 – Conclusion
[Design Mastery] UI Design & Figma Mastery.7z
[Design Mastery] UI Design & Figma Mastery_Subtitles.7z
Channel
Thank you