Download Complete Web & Mobile Designer in 2022: UI/UX, Figma, +more

Home
/
Mobile
/
Other

What you would learn in Complete Web & Mobile Designer in 2022: UI/UX, Figma, +more course?

Updated with all the latest design tools and the top techniques for 2022! Join an online community of more than 600,000+ students and industry experts employed at Silicon Valley and Toronto for top companies. A skilled Designer is getting increasingly difficult to find, and it's not uncommon to see designers earning an average of $160,000+ in salary due to it being an essential talent. We'll show you how to be successful!
Utilizing the most recent techniques employing the latest best practices in Web Design and Mobile Design and the latest best practices in User Interface as well as UX Experience Design (UI/UX), this course is focused on taking you from a blank slate to a stage where you can be hired or get freelance contracts. We will utilize in-demand tools such as Figma to demonstrate how to complete the process from start to end. Students who have taken Andrei's classes are now employed at Google, Tesla, Amazon, Apple, IBM, JP Morgan, Facebook, and other top tech companies.

The course also includes 100+ assets and designs that you can download and modify to suit your needs for future projects. We are confident that this is the complete online resource for Design abilities!

The program will be highly hands-on in that we guide you from beginning to the end of working as a designer through to learning how to design professional designs and then convert these into applications or websites with HTML as well as CSS.

The topics covered in this course include...

03 Web & Mobile Design Principles + Design vs. Web Development
01 START OFF Structure, Inspiration, and Sketching
- 1. Sketching
  - Introduction to sketching
  - Sketching UX flows
  - Sketching strategies
- 2. Inspiration
  - How do you stay motivated?
  - Where can I find inspiration online?
- 3. User Flows
  - What are the flows of users?
  - The rules of the road
  - Accelerating our workflow by using components
  - Designing your flows for users (Registration) Part 1.
  - Designing the user flow we want to create (Search) Part 2.
  - Designing the user flow we want to create (Checkout) Part 3.
- 4. Sitemaps
  - An intro to sitemaps
  - The process of creating a basic sitemap
  - What should you be doing before launching
  - The process of creating the sitemap (part 1)
  - Making an online Sitemap (part 2)
  - Tips for getting started
02 EXPLORE and ITERATE Wireframes, Prototyping as well as Feedback
- 1. Wireframes
  - What is a wireframe?
  - How can I create wireframes?
  - The speed of your workflow can be improved in Figma
  - Making our home page
  - The creation of a page for a product
  - Making a checkout webpage
- 2. Prototyping
  - Essential prototyping in Figma (Device and Triggers)
  - Prototyping the basics of Figma (Actions)
  - Prototyping the basics of Figma (Overflow)
  - Essential prototyping in Figma (Presentation plus Collaboration)
  - Linking up a simple user flow using Figma
  - Small interactions are being developed using Figma.
- 3. Feedback is needed
  - Why is feedback so important?
  - How do you get constructive feedback
03 Visual Design Conceptual Theory and Accessibility
- 1. Grids + SpacSpacing Grid and Spacing Basics
  - Reactive Grids within Figma
  - Making our grid using Figma
  - The grid's rules
- 2. Typography
  - Basics of Typography Part 1.
  - The typefaces that match an age
  - Basics of Typography Part 2.
  - Making the right choice of typeface
  - Typography Basics Part 3
  - Selecting the typeface
  - Does your typeface suit your scenario?
  - Expanding an existing system
  - Selecting typefaces from Google Fonts
  - Then narrow your typography options
  - The creation of a type system using Figma
- 3. Color
  - Color Schemes
  - Essential questions to inquire about before selecting colors
  - Practical tips for creating color palettes
  - Making an unichromatic color palette
  - By using our easy color palette
  - Expanding the color palette of a strict color scheme
  - Designing our color scheme
- 4. Forms + UI Elements
  - What are the UI elements?
  - Good practices Part I Part 1: Forms
  - Best practices Part 2: Inputs Part 1.
  - Best practices Part 2: Inputs Part 2.
  - Best practices Part 2: Inputs Part 3.
  - Best practices Part 2: Inputs Part 4.
  - Good practices 3 The Buttons
  - How do you create components in Figma
  - Utilizing atomic elements in Figma
  - Utilizing Instances in Figma
  - Making edits to instances to design new elements
  - Utilizing constraints to design flexible components
  - Forms to register in Figma
- 5. Imagery and Iconography
  - Techniques and resources to create unique visual assets
  - Working with images using Figma Part 1
  - Working with images using Figma Part 2
  - Making illustrations with Figma
  - Using Figma plugins to find Icons quickly
  - We can create our custom icons
- 6. Accessibility
  - Accessibility is what it's all about.
  - Assistive technology
  - Accessibility patterns in visual form (Part 1)
  - Tools that make your design easily accessible
  - Accessibility patterns in visual form (Part 2)
04 DESIGN EXPLORATION Application Design + Design Systems
- 1. Design Patterns
  - What are patterns of design?
  - Why are design patterns important?
  - How do you apply patterns for design?
  - Design patterns that are analyzed together
  - The process of analyzing and selecting design patterns in conjunction
- 2. Mobile Design
  - Mobile design best practices (Part 1)
  - Mobile design best practices (Part 2)
- 3. Utilizing Visual Design
  - Design Fidelity
  - Style exploration (Navigation)
  - Style exploration (Cards)
  - Style exploration (Interests)
  - Style exploration (New elements)
- 4. Motion
  - It is vital to move
  - Motion has a purpose.
  - Intro to Smart Animation
  - Showing the potential of Smart Animate
- 5. Microinteractions
  - How do you define microinteractions?
  - What are they, and why are they so important?
  - Making the micro interaction we want to create (Part 1)
  - The creation of ourselves microinteractions (Part 2)
  - Utilizing Figmotion (Part 1.)
  - Utilizing Figmotion (Part II)
05 Putting it all Together - Using the Design System and Hi-Fi prototyping using Figma
- 1. Design Systems
  - What is a design system?
  - Foundation (color)
  - The Foundation (grids as well as spacSpacingundation (typography)
  - Foundation (iconography)
  - Components (buttons)
  - Components (Inputs)
  - Components (cards)
  - Recipes (card layouts)
  - Recipes (search)
  - Recipes (orders)
- 2. Final Compositions
  - Using our design system (Search)
  - Using our design system (Product Description)
  - Using our design system (Cart)
06 06 FIGMA to the website (take the Figma design and convert it into an active website by using CSS and HTML)

07 HTML and HTML5

08 CSS + CSS3 CSS Basics, CSS Grid, Flexbox, CSS Animations
09 POSTING your website online

Course Content:

Create stunning mobile and web-based projects for your clients using the latest tools used by the top companies in 2022.
You can be hired as a designer or freelancer who can work anywhere and with anyone. Designers are in high demand!
Included are 100+ assets and high-quality design templates that you can keep and utilize to modify for future projects.
Master Figma to meet your design needs, then you can learn how to transform your designs into live HTML and CSS-based websites.
Get your fantastic portfolio professionally designed and completed by the end course (we offer it to you!)
Learn both Web and Mobile design principles and know how you can go from sketching up to fully-fledged, high-fidelity designs that impress customers.
Learn how to create designs for all kinds of devices with Figma and other tools employed by top designers worldwide.
Learn how to use HTML5 as well as CSS3 to help your designs come to life and to create fully functional websites
Find out the best practices to follow that take many years to master in the design field.
Learn how to create professionally designed logos, and make decisions to meet your branding needs
Find out the best practices in UI/UX with the most current technology in the industry.
Learn to become a designer and a web developer simultaneously (a unique combination highly sought after)!