About Course
Using the latest best practices in Web Design and Mobile Design as well as User Interface and User Experience Design (UI/UX), this course focuses on efficiently getting you from zero to a point where you can get hired or win freelance contracts. We will use in-demand tools like Figma to show you a full workflow from start to finish. Graduates of Andrei’s courses are now working at Google, Tesla, Amazon, Apple, IBM, JP Morgan, Facebook, + other top tech companies.
The course also includes 100+ assets and premium design templates that you can keep and use to customize for all your future projects. We guarantee you this is the most comprehensive online resource on Design skills!
What Will You Learn?
- 01 GETTING STARTED – Sketching, Inspiration + Structure
- • 1. Sketching
- o Introduction To Sketching
- o The Sketching Process
- o Sketching User Flows
- o Sketching Tips
- • 2. Inspiration
- o How to stay inspired
- o How to find inspiration online
- • 3. Figma Basics
- o Plans and Signup
- o Where to Use Figma
- o Figma UI — Structure
- o Figma UI — Files
- o Figma UI — Toolbar
- o Figma UI — Left Sidebar
- o Figma UI — Right Sidebar
- o Shapes and Tools — Frames
- o Shapes and Tools — Groups
- o Shapes and Tools — Basic Shapes and Boolean Operations
- o Designing in Figma — Images
- o Designing in Figma — Getting Started with Text
- o Designing in Figma — Constraints
- o Designing in Figma — Using Auto Layout
- o Designing in Figma — Auto Layout Properties
- o Resources and Collaboration — Community Files
- o Resources and Collaboration — Community Plugins
- o Resources and Collaboration — Sharing and Comments]
- o Project — Creating a Logo Using Basic Shapes
- o Project — Auto Layout Buttons
- o Project — Creating a Responsive Navigation
- o Project — Responsive Text
- o Project — Imagery and Gradients
- o Project — Strokes and Shapes
- o Project — Layout and Responsiveness
- • 3. User Flows
- o Getting Ready For This Section
- o The DOs and DON’Ts
- o User Flows in Figma — Onboarding
- o User Flows in Figma — Search
- • 4. Sitemaps
- o Introduction To Sitemaps
- o Creating A Basic Sitemap
- o Reusable Sitemap Assets
- o Figma Check-In — Basic Components and Variants
- o Sitemaps in Figma — The Top Layer
- o Sitemaps in Figma — Digging Deeper
- o Tips for Creating Great Sitemaps
- 02 EXPLORE AND ITERATE – Wireframes, Prototyping, and Feedback
- • 1. Wireframes
- o What Is A Wireframe?
- o How To Create A Wireframe
- o Figma Check-In — Basic Button Component]
- o Figma Check-In — Variants
- o How to Use Our Wireframe Components
- o Wireframes — Home
- o Wireframes — Cart
- o Wireframes — Profile
- • 2. Prototyping
- o Figma Check-In — Prototyping in Figma
- o Prototyping in Figma — Flows and Starting Points
- o Prototyping in Figma — Connections
- o Prototyping in Figma — Interactions
- o Prototyping in Figma — Animations
- o Prototyping in Figma — Prototype Settings
- o Prototyping in Figma — Prototype Presentation
- o Project — Navigation
- o Project — Removing an Item from Your Wishlist
- o Project — Finding a Product
- • 3. Getting feedback
- o Why Is Feedback Important?
- o Constructive Feedback
- 03 VISUAL DESIGN – Design Theory + Accessibility
- • 1. Spacing and Grids
- o What Is A Grid?
- o Grid Basics
- o Figma Check-In — Fixed and Fluid Grids
- o Figma Check-In — Breakpoints
- o Figma Check-In — Grid Style
- o Project — Mobile Layout Grid
- o Project — Desktop Layout Grids
- o Simple Rules to Follow
- • 2. Typography
- o Serifs
- o Sans Serifs
- o Display & Mono
- o Picking Typefaces
- o Figma Check-In — Text Properties
- o Exercise — Elevating a Brand
- o Exercise — Typeface Scenarios
- o Exercise — Google Fonts
- o Project — Typeface Exploration
- o Project — Pairing Font Families
- o Project — Headings, Body, and Labels
- o Project — Typeface System
- o Figma Check-In — Text Styles
- • 3. Color
- o Color Schemes
- o Important Questions To Ask
- o Creating Color Palettes
- o Figma Check-In — Paints
- o Exercise — Expanding Upon a Strict Color Palette
- o Exercise — Creating a Color Palette
- o Figma Check-In — Color Styles
- o Exercise — Using Color Styles
- o Project — Primary and Neutrals
- o Project — Accents
- • 4. Imagery and Iconography
- o Visual Assets Introduction
- o Figma Check-In — Image Plugins
- o Figma Check-In — Image Styles
- o Figma Check-In — Masks
- o Exercise — Image Exploration
- o Exercise — Text and Imagery Working Together
- o Figma Check-In — Illustration Plugins
- o Exercise — Adding illustrations to your designs
- o Figma Check-In — Icon Plugins
- o Figma Check-In — Pen Tool
- o Exercise — Custom Icons with the Pen Tool
- • 5. Forms + UI Elements
- o What Are Forms + UI Elements?
- o Best Practices — Forms
- o Best Practices — Basic and Advanced Inputs
- o Best Practices — Inputs
- o Best Practices — Buttons
- o Figma Check-In — Component Properties
- o Properties vs. Variants
- o Figma Check-In — Button Component Properties
- o Figma Check-In — Button Variants
- o Figma Check-In — Combining Components
- o Figma Check-In — Form Component Possibilities
- o Project — Registration Flow
- • 6. Accessibility
- o What Is Accessibility?
- o Assistive Technologies
- o Visual Patterns For Accessibility
- o Tools To Make Your Design Accessible
- 04 DESIGN EXPLORATION – Application Design + Design Systems
- • 1. Design Patterns
- o What Are Design Patterns?
- o Why Are Design Patterns Valuable?
- o How To Apply Design Patterns
- o Analyzing Design Patterns
- o Dissecting And Choosing Design Patterns
- • 2. Mobile Design
- o Mobile Design Best Practices
- • 3. Visual Style and Exploration
- o Design Fidelity
- o Visual Exploration — Navigation
- o Visual Exploration — Buttons
- o Figma Check-In — Effect Styles
- o Visual Exploration — Product Cards
- o Visual Exploration — Text Cards
- o Screen Design — Home
- o Screen Design — Product Page
- • 4. Motion and Microinteractions
- o The Importance Of Motion
- o Why Are Microinteractions Important?
- o What Is A micro-interaction?
- o Figma Check-In — Intro to Smart Animate
- o Figma Check-In — Smart Animate Properties
- o Exercise — Parallax
- o Exercise — New Message
- o Exercise — Overlays
- o Figma Check-In — Interactive Components
- o Exercise — Interactive Buttons
- o Project — Parallax Welcome Screen
- o Project — Drag Onboarding
- o Project — Cart Overlay
- o Project — Button micro-interaction
- 05 PUTTING IT ALL TOGETHER – Using our Design System and Hi-Fi prototyping with Figma
- • 1. Design Systems
- o Foundational Styles and Components vs. Product-Specific Components
- o Building Fidelity and Organizing Potential Components and Styles
- o Foundational Styles and Components
- o Components — Buttons
- o Components — Cards
- o Components — Headers
- o Components — Inputs
- o Components — List Items
- o Components — Navigation
- o Components — Misc. Elements
- • 2. Execution
- o Working Towards Our Final Designs
- o Execution — Introduction Screen
- o Execution — Onboarding Screens
- o Execution — Registration Screens
- o Execution — Home Screen
- o Execution — Wishlist Screens
- o Execution — Profile Screen
- o Execution — Cart and Checkout
- o Prototypes — Registration
- o Prototypes — Adding to Cart
- o Prototypes — Checkout
- o Prototypes — Lottie Files Plugin
- o Prototypes — Search and Filters
Requirements
- • No requirements. We teach you and show you everything from scratch! From Zero to Mastery
- • Get ready to fall in love with Design and make everything you touch into beautiful projects for the rest of your life!
Audience
- • Anyone who wants to start a Web or Mobile Design business on the side as a freelancer or work as a designer at a company
- • Web Developers and Mobile Developers want to add another valuable skill to their tool belt.
- • Anyone who wants to get hired as a Web Designer, Mobile Designer, UI/UX Designer
- • Anyone who wants to learn about the latest CSS3 features like Flexbox, CSS Grid, and CSS Variables, as well as HTML5.
Course Content
Section 1
-
Introduction
00:00 -
Course_Outline
00:00 -
Meeting_The_Client
00:00 -
The_2_Paths
00:00 -
Exercise_Building_Your_Logo
00:00 -
Designer_vs_Developer
00:00 -
Skills_To_Be_A_Top_Designer
00:00 -
Introduction_To_Sketching
00:00 -
The_Sketching_Process
00:00 -
Sketching_User_Flows
00:00 -
Sketching_User_Flows_2
00:00 -
Sketching_User_Flows_3
00:00 -
Sketching_User_Flows_4
00:00 -
Sketching_Tips
00:00 -
How_To_Stay_Inspired
00:00 -
How_To_Find_Inspiration
00:00 -
Introduction
00:00 -
Plans_and_Signup
00:00 -
Where_to_use_Figma.
00:00 -
Figma_UI_Structure
00:00
Section 2
-
Figma_UI_Files
00:00 -
Figma_UI_Toolbar
00:00 -
Figma_UI_Left_Sidebar
00:00 -
Figma_UI_Right_Sidebar
00:00 -
Shapes_and_Tools_Frames
00:00 -
Shapes_and_Tools_Groups
00:00 -
Shapes_and_Tools_Basic_Shapes_and_Boolean_Operations
00:00 -
Designing_in_Figma_Images
00:00 -
Designing_in_Figma_Getting_Started_With_Text
00:00 -
Designing_in_Figma_Constraints
00:00 -
Designing_in_Figma_Using_Auto_Layout
00:00 -
Designing_in_Figma_Auto_Layout_Properties
00:00 -
Resources_and_Collaboration_Community_Files
00:00 -
Resources_and_Collaboration_Community_Plugins
00:00 -
Resources_and_Collaboration_Sharing_and_Comments
00:00 -
Project_What_We_Are_Going_To_Build
00:00 -
Project_Creating_a_Logo_Using_Basic_Shapes
00:00 -
Project_Auto_Layout_Buttons.
00:00 -
Project_Creating_a_Responsive_Navigation
00:00 -
Project_Responsive_Text.
00:00
Section 3
-
Project_Imagery_and_Gradients
00:00 -
Draft Lesson
00:00 -
Project_Layout_and_Responsiveness
00:00 -
User_Flows_Explained
00:00 -
The_DOs_and_DON_Ts
00:00 -
What_We_Are_Going_To_Build
00:00 -
Reusable_User_Flow_Assets.
00:00 -
User_Flows_in_Figma_Onboarding
00:00 -
User_Flows_in_Figma_Search
00:00 -
Introduction_To_Sitemaps
00:00 -
Creating_A_Basic_Sitemap
00:00 -
What_We_Are_Going_To_Learn
00:00 -
Reusable_Sitemap_Assets.
00:00 -
Sitemaps_in_Figma_The_Top_Layer.
00:00 -
Sitemaps_in_Figma_Digging_Deeper
00:00 -
Sitemaps_in_Figma_Digging_Deeper_Cont.
00:00 -
Tips_for_Creating_Great_Sitemaps.
00:00 -
What_Is_A_Wireframe
00:00 -
How_To_Create_A_Wireframe.
00:00 -
What_We_Are_Going_To_Learn.
00:00
Section 4
-
Figma_Check_In_Basic_Button_Component.
00:00 -
Figma_Check_In_Variants.
00:00 -
How_To_Use_Our_Wireframe_Components.
00:00 -
Wireframes_Home.
00:00 -
Wireframes_Cart
00:00 -
Wireframes_Profile.
00:00 -
What_We_Are_Going_to_Learn
00:00 -
Figma_Check_In_Prototyping_in_Figma_Intro.
00:00 -
Prototyping_in_Figma_Flows_and_Starting_Points.
00:00 -
Prototyping_in_Figma_Connections.
00:00 -
Prototyping_in_Figma_Interactions.
00:00 -
Prototyping_in_Figma_Animations.
00:00 -
Prototyping_in_Figma_Prototype_Settings.
00:00 -
Prototyping_in_Figma_Prototype_Presentation.
00:00 -
Project_Navigation.
00:00 -
Project_Removing_an_Item_from_Your_Wishlist.
00:00 -
Project_Finding_a_Product.
00:00 -
Exercise_Imposter_Syndrome.
00:00 -
Why_Is_Feedback_Important.
00:00 -
Draft Lesson
00:00
Section 5
-
What_Is_A_Grid.
00:00 -
Grid_Basics.
00:00 -
What_We_Are_Going_to_Learn.
00:00 -
Figma_Check_In_Fixed_and_Fluid_Grids.
00:00 -
Figma_Check_In_Breakpoints.
00:00 -
Figma_Check_In_Grid_Style.
00:00 -
Project_Mobile_Layout_Grid.
00:00 -
Project_Desktop_Layout_Grids.
00:00 -
Simple_Rules_to_Follow.
00:00 -
Serifs.
00:00 -
Sans_Serifs.
00:00 -
Display_Mono
00:00 -
Picking_Typefaces
00:00 -
What_We_Are_Going_to_Learn
00:00 -
Figma_Check_In_Text_Properties
00:00 -
Exercise_Elevating_a_Brand
00:00 -
Exercise_Typeface_Scenarios.
00:00 -
Exercise_Google_Fonts.
00:00 -
Project_Typeface_Exploration.
00:00 -
Project_Pairing_Font_Families.
00:00
Section 6
-
Project_Headings_Body_and_Labels.
00:00 -
Project_Typeface_System
00:00 -
Figma_Check_In_Text_Styles
00:00 -
Color_Schemes
00:00 -
Important_Questions_To_Ask
00:00 -
Creating_Color_Palettes
00:00 -
What_We_Are_Going_to_Learn
00:00 -
Figma_Check_In_Paints
00:00 -
Exercise_Expanding_Upon_a_Strict_Color_Palette
00:00 -
Exercise_Creating_a_Color_Palette
00:00 -
Figma_Check_In_Color_Styles
00:00 -
Exercise_Using_Color_Styles
00:00 -
Project_Primary_and_Neutrals
00:00 -
Project_Accents
00:00 -
Visual_Assets_Introduction
00:00 -
What_We_Are_Going_to_Learn
00:00 -
Figma_Check_In_Image_Plugins
00:00 -
Figma_Check_In_Image_Styles
00:00 -
Figma_Check_In_Masks
00:00 -
Exercise_Image_Exploration.
00:00
Section 7
-
Exercise_Text_and_Imagery_Working_Together
00:00 -
Figma_Check_In_Illustration_Plugins
00:00 -
New_Exercise_Adding_Illustrations_to_Your_Designs
00:00 -
Figma_Check_In_Icon_Plugins
00:00 -
Figma_Check_In_Pen_Tool
00:00 -
Exercise_Custom_Icons_with_the_Pen_Tool
00:00 -
What_Are_Forms_UI_Elements
00:00 -
What_We_Are_Going_to_Learn
00:00 -
Best_Practices_Forms.
00:00 -
Best_Practices_Basic_and_Advanced_Inputs
00:00 -
Best_Practices_Inputs
00:00 -
Best_Practices_Buttons
00:00 -
Figma_Check_In_Component
00:00 -
Properties_vs_Variants
00:00 -
Figma_Check_In_Button_Component_Properties
00:00 -
Figma_Check_In_Button_Variants
00:00 -
Figma_Check_In_Combining_Components
00:00 -
Figma_Check_In_Form_Component_Possibilities
00:00 -
Project_Registration_Flow_Part_1
00:00 -
Project_Registration_Flow_Part_2
00:00
Section 8
-
Project_Registration_Flow_Part_3
00:00 -
What_Is_Accessibility
00:00 -
Assistive_Technologies
00:00 -
Visual_Patterns_For_Accessibility
00:00 -
ools_To_Make_Your_Design_Accessible
00:00 -
Visual_Patterns_For_Accessibility_Part_2
00:00 -
What_Are_Design_Patterns
00:00 -
Why_Are_Design_Patterns_Valuable
00:00 -
How_To_Apply_Design_Patterns
00:00 -
Analyzing_Design_Patterns
00:00 -
Dissecting_And_Choosing_Design_Patterns
00:00 -
Mobile_Design_Best_Practices_Part_1
00:00 -
Mobile_Design_Best_Practices_Part_2
00:00 -
What_We_Are_Going_to_Learn
00:00 -
Design_Fidelity
00:00 -
Visual_Exploration_Navigation
00:00 -
Visual_Exploration_Buttons
00:00 -
Figma_Check_In_Effect_Styles
00:00 -
Visual_Exploration_Product_Cards
00:00 -
Visual_Exploration_Text_Cards
00:00
Section 9
-
Screen_Design_Home
00:00 -
Screen_Design_Product
00:00 -
The_Importance_Of_Motion.
00:00 -
What_Is_A_Microinteraction
00:00 -
Why_Microinteractions_Are_Important
00:00 -
What_We_Are_Going_To_Learn
00:00 -
Figma_Check_In_Intro_to_Smart_Animate.
00:00 -
Figma_Check_In_Smart_Animate_Properties
00:00 -
Exercise_Parallax
00:00 -
Exercise_New_Message
00:00 -
Exercise_Overlays
00:00 -
Figma_Check_In_Interactive_Components
00:00 -
Exercise_Interactive_Buttons
00:00 -
Project_Parallax_Welcome_Screen
00:00 -
Project_Drag_Onboarding.
00:00 -
Project_Cart_Overlay.
00:00 -
Project_Button_Microinteraction
00:00 -
What_We_Are_Going_to_Learn
00:00 -
Foundational_Styles_and_Components_vs_Product_Specific_Components
00:00 -
Building_Fidelity_and_Organizing_Potential_Components_and_Styles
00:00
Section 10
-
Foundational_Styles_and_Components
00:00 -
Components_Buttons
00:00 -
Components_Cards.
00:00 -
Components_Headers
00:00 -
Components_Inputs
00:00 -
Components_List_Items
00:00 -
Components_Navigation
00:00 -
Components_Misc_Elements
00:00 -
What_We_Are_Going_to_Learn
00:00 -
Working_Towards_Our_Final_Designs
00:00 -
Execution_Introduction_Screen
00:00 -
Execution_Onboarding_Screens
00:00 -
Execution_Registration_Screens
00:00 -
Execution_Home_Screen.
00:00 -
Execution_Wishlist_Screens
00:00 -
Execution_Profile_Screen
00:00 -
Execution_Cart_and_Checkout.
00:00 -
Prototypes_Registration.
00:00 -
Prototypes_Adding_to_Cart.
00:00 -
Prototypes_Checkout
00:00
Section 11
-
Prototypes_Lottie_Files_Plugin
00:00 -
Prototypes_Search_and_Filters
00:00 -
The_Product_Alignment_Canvas
00:00 -
Project_Goals
00:00 -
Target_Users
00:00 -
User_Journey_Map
00:00 -
Risky_Assumptions
00:00 -
What_is_a_User_Story_Map
00:00 -
Creating_a_User_Story_Map
00:00 -
Is_Bruno_Happy
00:00 -
Project_Handoff
00:00 -
Thank You
00:00 -
How_To_Export_And_Place_Designs
00:00 -
Content_For_Your_Portfolio
00:00 -
Where_To_Host_Your_Web_Portfolio
00:00 -
Initial_Setup_Figma_Handoff
00:00 -
Build_UI_Adding_Image_Assets
00:00 -
Build_UI_Styling_Image_Assets
00:00
Instructors
Blemiss EDU
4.4
8 Students
7 Courses
No Review Yet
Hi, Welcome back!