Complete Web & Mobile Designer in 2023: UI/UX, Figma

courslux-tutorials-ads courslux-tutorials-ads
Complete Web & Mobile Designer in 2023: UI/UX, Figma
  • 28h 8m Duration
  • 349 Lectures
  • 2778 Views

Complete Web & Mobile Designer in 2023: UI/UX, Figma

What you’ll learn

  1. Build beautifully designed web and mobile projects for your customers using modern tools used by top companies in 2023
  2. Get hired as a Designer or become a freelancer who can work from anywhere and for anyone. Designers are in high demand!
  3. Includes 100+ assets and premium design templates that you can keep and use to customize for all your future projects
  4. Master Figma for your design needs, then learn to convert your designs into a live HTML and CSS website.
  5. Have an amazing design portfolio customized and professionally completed by the end of the course (we provide it for you!)
  6. Master both Web and Mobile design principles and how to go from sketching to fully-fledged high-fidelity designs that will wow customers
  7. Learn to design for all types of devices using Figma and other tools used by some of the top designers in the world.
  8. Learn to use HTML5 and CSS3 to make your designs come to life and create fully working websites.
  9. Learn best practices that take years to learn in the design industry
  10. Learn to make professional logos and design choices for all branding needs
  11. Learn UI/UX best practices using the latest trends in the industry
  12. Learn to be a designer as well as a web developer at the same time (a rare combination of skills that is in high demand)!
  • Requirements

    1. No requirements. We teach you and show you everything from scratch! From Zero to Mastery
    2. Get ready to fall in love with Design and make everything you touch into beautiful projects for the rest of your life!

Description

It was just updated with all modern Design tools and best practices for 2023! Join a live online community of over 900,000+ students and a course taught by industry experts who have worked both in Silicon Valley and Toronto for top companies. A great Designer is becoming harder and harder to find, and it isn’t rare to find designers who make $160,000+ salaries now because it is such a valuable skill. We will teach you how to get there!
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!
The curriculum is going to be very hands-on as we walk you from start to finish of working as a Designer, all the way into learning how to create final professional designs and then converting them into actual websites or apps using HTML and CSS.
The topics covered in the course are…

00 Web & Mobile Design Principles +  Design vs Web Development
01 GETTING STARTED – Sketching, Inspiration + Structure
  • 1. Sketching
    • Introduction To Sketching
    • The Sketching Process
    • Sketching User Flows
    • Sketching Tips
  • 2. Inspiration
    • How to stay inspired
    • How to find inspiration online
  • 3. Figma Basics
    • Plans and Signup
    • Where to Use Figma
    • Figma UI — Structure
    • Figma UI — Files
    • Figma UI — Toolbar
    • Figma UI — Left Sidebar
    • Figma UI — Right Sidebar
    • Shapes and Tools — Frames
    • Shapes and Tools — Groups
    • Shapes and Tools — Basic Shapes and Boolean Operations
    • Designing in Figma — Images
    • Designing in Figma — Getting Started with Text
    • Designing in Figma — Constraints
    • Designing in Figma — Using Auto Layout
    • Designing in Figma — Auto Layout Properties
    • Resources and Collaboration — Community Files
    • Resources and Collaboration — Community Plugins
    • Resources and Collaboration — Sharing and Comments]
    • Project — Creating a Logo Using Basic Shapes
    • Project — Auto Layout Buttons
    • Project — Creating a Responsive Navigation
    • Project — Responsive Text
    • Project — Imagery and Gradients
    • Project — Strokes and Shapes
    • Project — Layout and Responsiveness
  • 3. User Flows
    • Getting Ready For This Section
    • The DOs and DON’Ts
    • User Flows in Figma — Onboarding
    • User Flows in Figma — Search
  • 4. Sitemaps
    • Introduction To Sitemaps
    • Creating A Basic Sitemap
    • Reusable Sitemap Assets
    • Figma Check-In — Basic Components and Variants
    • Sitemaps in Figma — The Top Layer
    • Sitemaps in Figma — Digging Deeper
    • Tips for Creating Great Sitemaps
02 EXPLORE AND ITERATE – Wireframes, Prototyping, and Feedback
  • 1. Wireframes
    • What Is A Wireframe?
    • How To Create A Wireframe
    • Figma Check-In — Basic Button Component]
    • Figma Check-In — Variants
    • How to Use Our Wireframe Components
    • Wireframes — Home
    • Wireframes — Cart
    • Wireframes — Profile
  • 2. Prototyping
    • Figma Check-In — Prototyping in Figma
    • Prototyping in Figma — Flows and Starting Points
    • Prototyping in Figma — Connections
    • Prototyping in Figma — Interactions
    • Prototyping in Figma — Animations
    • Prototyping in Figma — Prototype Settings
    • Prototyping in Figma — Prototype Presentation
    • Project — Navigation
    • Project — Removing an Item from Your Wishlist
    • Project — Finding a Product
  • 3. Getting feedback
    • Why Is Feedback Important?
    • Constructive Feedback
03 VISUAL DESIGN – Design Theory + Accessibility
  • 1. Spacing and Grids
    • What Is A Grid?
    • Grid Basics
    • Figma Check-In — Fixed and Fluid Grids
    • Figma Check-In — Breakpoints
    • Figma Check-In — Grid Style
    • Project — Mobile Layout Grid
    • Project — Desktop Layout Grids
    • Simple Rules to Follow
  • 2. Typography
    • Serifs
    • Sans Serifs
    • Display & Mono
    • Picking Typefaces
    • Figma Check-In — Text Properties
    • Exercise — Elevating a Brand
    • Exercise — Typeface Scenarios
    • Exercise — Google Fonts
    • Project — Typeface Exploration
    • Project — Pairing Font Families
    • Project — Headings, Body, and Labels
    • Project — Typeface System
    • Figma Check-In — Text Styles
  • 3. Color
    • Color Schemes
    • Important Questions To Ask
    • Creating Color Palettes
    • Figma Check-In — Paints
    • Exercise — Expanding Upon a Strict Color Palette
    • Exercise — Creating a Color Palette
    • Figma Check-In — Color Styles
    • Exercise — Using Color Styles
    • Project — Primary and Neutrals
    • Project — Accents
  • 4. Imagery and Iconography
    • Visual Assets Introduction
    • Figma Check-In — Image Plugins
    • Figma Check-In — Image Styles
    • Figma Check-In — Masks
    • Exercise — Image Exploration
    • Exercise — Text and Imagery Working Together
    • Figma Check-In — Illustration Plugins
    • Exercise — Adding illustrations to your designs
    • Figma Check-In — Icon Plugins
    • Figma Check-In — Pen Tool
    • Exercise — Custom Icons with the Pen Tool
  • 5. Forms + UI Elements
    • What Are Forms + UI Elements?
    • Best Practices — Forms
    • Best Practices — Basic and Advanced Inputs
    • Best Practices — Inputs
    • Best Practices — Buttons
    • Figma Check-In — Component Properties
    • Properties vs. Variants
    • Figma Check-In — Button Component Properties
    • Figma Check-In — Button Variants
    • Figma Check-In — Combining Components
    • Figma Check-In — Form Component Possibilities
    • Project — Registration Flow
  • 6. Accessibility
    • What Is Accessibility?
    • Assistive Technologies
    • Visual Patterns For Accessibility
    • Tools To Make Your Design Accessible
04 DESIGN EXPLORATION – Application Design + Design Systems
  • 1. Design Patterns
    • What Are Design Patterns?
    • Why Are Design Patterns Valuable?
    • How To Apply Design Patterns
    • Analyzing Design Patterns
    • Dissecting And Choosing Design Patterns
  • 2. Mobile Design
    • Mobile Design Best Practices
  • 3. Visual Style and Exploration
    • Design Fidelity
    • Visual Exploration — Navigation
    • Visual Exploration — Buttons
    • Figma Check-In — Effect Styles
    • Visual Exploration — Product Cards
    • Visual Exploration — Text Cards
    • Screen Design — Home
    • Screen Design — Product Page
  • 4. Motion and Microinteractions
    • The Importance Of Motion
    • Why Are Microinteractions Important?
    • What Is A micro-interaction?
    • Figma Check-In — Intro to Smart Animate
    • Figma Check-In — Smart Animate Properties
    • Exercise — Parallax
    • Exercise — New Message
    • Exercise — Overlays
    • Figma Check-In — Interactive Components
    • Exercise — Interactive Buttons
    • Project — Parallax Welcome Screen
    • Project — Drag Onboarding
    • Project — Cart Overlay
    • Project — Button micro-interaction
05 PUTTING IT ALL TOGETHER – Using our Design System and Hi-Fi prototyping with Figma
  • 1. Design Systems
    • Foundational Styles and Components vs. Product-Specific Components
    • Building Fidelity and Organizing Potential Components and Styles
    • Foundational Styles and Components
    • Components — Buttons
    • Components — Cards
    • Components — Headers
    • Components — Inputs
    • Components — List Items
    • Components — Navigation
    • Components — Misc. Elements
  • 2. Execution
    • Working Towards Our Final Designs
    • Execution — Introduction Screen
    • Execution — Onboarding Screens
    • Execution — Registration Screens
    • Execution — Home Screen
    • Execution — Wishlist Screens
    • Execution — Profile Screen
    • Execution — Cart and Checkout
    • Prototypes — Registration
    • Prototypes — Adding to Cart
    • Prototypes — Checkout
    • Prototypes — Lottie Files Plugin
    • Prototypes — Search and Filters
06 FROM FIGMA TO WEBSITE (take a Figma design and convert it to a live website using HTML and CSS)
07 HTML + HTML5
08 CSS + CSS3 – CSS Basics, CSS Grid, Flexbox, CSS Animations
09 PUTTING YOUR WEBSITE ONLINE
This brand new course will take you from the very basics, where we talk about principles and fundamentals of graphic design, all the way to creating beautiful products, learning about UX/UI and interactions, and creating a full design process for you to use with all of your future projects and clients. We pretty much cover it all so that the next time you are in charge of designing a product, you have the step-by-step outline and guide to work as a professional designer.
We are going to teach you the skills that will allow you to charge a lot of money for your time. Not to compete for a few dollars an hour on some random freelancing websites. The goal is to give you the skills of a top designer, and along the way, we are going to design an actual product for a company that you will be able to add to your portfolio.
This course is not about making you just watch along without understanding the principles so that when you are done with the course, you don’t know what to do other than watch another tutorial. No! This course will push you and challenge you to go from an absolute beginner to someone who is a top Designer who can get hired! Design is a valuable skill that doesn’t get outdated easily, like most technical skills. Trends change, but the skills and fundamentals you learn in this course will take you many years into the future.

This course is for you if:

  1. – You are a complete beginner looking to become a designer and freelance
  2. – You are a designer who is looking to charge more for your work
  3. – You are a developer who is looking to improve their design skills

Course Download Links

Download Instructions:
If Download link not loading or working then try with VPN.

Downoad all the parts then extract all zip files into 1 folder.

File Password: nulledsourcecode.com

DISCLAIMER

This course was obtained from a free source and is not hosted on the nulledsourcecode.com website. We can safely say that it is not our responsibility. Use this file whatever you like for your own purposes. Downloading copyrighted material is illegal, and all the files here are only for educational uses. Developers/creator/maker made it with difficulty. We request you to buy a genuine version from it creator/developer/owner's website.

Do You Have Questions ?

We'll help you to grow your career and growth.
Contact Us Today