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

Complete Web & Mobile Designer in 2020: UI/UX, Figma + more
Complete Web & Mobile Designer in 2020: UI/UX, Figma + more
English | MP4 | AVC 1920×1080 | AAC 44KHz 2ch | 23.5 Hours | 5.74 GB

Get hired as a designer in 2020! This is the only design bootcamp you need to learn and master web & mobile design, UI & UX, and HTML & CSS

This Zero To Mastery design course is very hands-on. This course focuses on efficiently getting you from being a complete beginner to a point where you can get hired or win freelance contracts. You will learn:

  • The principles and fundamentals of graphic design
  • The latest best practices in Web Design and Mobile Design
  • User Interface and User Experience Design (UI/UX) fundamentals and best practices
  • To actually create your own beautiful, professional designs (not just watch us!) using the most in-demand, modern design tools and best practices for 2020
  • The skills to convert your designs into actual websites or apps using HTML and CSS

Along the way, you are going to go through the full design process and design an actual product for a company that you will be able to add to your portfolio. 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 you’ll need.

What you’ll learn

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

1 Course Outline
2 Meeting The Client
3 The 2 Paths
4 Exercise: Building Your Logo
5 Designer vs Developer
6 Skills To Be A Top Designer
7 Introduction To Sketching
8 The Sketching Process
9 Sketching User Flows
10 Sketching User Flows 2
11 Sketching User Flows 3
12 Sketching User Flows 4
13 Sketching Tips
14 How To Stay Inspired
15 How To Find Inspiration
16 What Are User Flows?
17 The Do’s And Don’ts
18 Speed Up Workflow With Components
19 Creating Our Own User Flows
20 Creating Our Own User Flows 2
21 Creating Our Own User Flows 3
22 Introduction To Sitemaps
23 Creating A Basic Sitemap
24 Before You Start
25 Creating A Sitemap
26 Creating A Sitemap 2
27 Tips For Getting Started
28 What Is A Wireframe?
29 How To Create A Wireframe
30 Wireframes In FIgma
31 Creating Our Home Page
32 Creating A Product Page
33 Creating A Checkout Page
34 Prototyping Basics In Figma
35 Prototyping Basics In Figma 2
36 Prototyping Basics In Figma 3
37 Prototyping Basics In Figma 4
38 Linking Together A Quick User Flow
39 Working On Small Interactions
40 Why Is Feedback Important?
41 Constructive Feedback
42 What Is A Grid?
43 Grid Basics
44 Responsive Grids And Breakpoints
45 Making Our Grid In Figma
46 Grid Guidelines
47 Serifs
48 Sans Serifs
49 Display & Mono
50 Picking Typefaces
51 Choosing Typefaces For A Project
52 Choosing Typefaces For A Project 2
53 Choosing Typefaces For A Project 3
54 Creating Our Own Type System
55 Color Schemes
56 Important Questions To Ask
57 Creating Color Palettes
58 Creating A Monochromatic Color Palette
59 Applying Our Color Palette
60 Expanding A Strict Color Palette
61 Creating Our Own Color Palette
62 What Are Forms + UI Elements?
63 Best Practices For Forms
64 Best Practices For Inputs
65 Best Practices For Inputs 2
66 Best Practices For Inputs 3
67 Best Practices For Inputs 4
68 Best Practices For Buttons
69 Creating Components In Figma
70 Using Atomic Elements
71 Using Instances In Figma
72 Editing Instances
73 Responsive Components
74 Creating A Registration Form In Figma
75 Visual Assets Introduction
76 Working With Photos In Figma
77 Working With Photos In Figma 2
78 Working With Illustrations In Figma
79 Figma Plugins And Icons
80 Custom Icons
81 What Is Accessibility?
82 Assistive Technologies
83 Visual Patterns For Accessibility
84 Tools To Make Your Design Accessible
85 Visual Patterns For Accessibility Part 2
86 What Are Design Patterns
87 Why Are Design Patterns Valuable
88 How To Apply Design Patterns
89 Analyzing Design Patterns
90 Dissecting And Choosing Design Patterns
91 Mobile Design Best Practices
92 Mobile Design Best Practices 2
93 Design Fidelity
94 Style Exploration
95 Style Exploration 2
96 Style Exploration 3
97 Style Exploration 4
98 The Importance Of Motion
99 The Purpose Of Motion
100 Intro To Smart Animate
101 The Power Of Smart Animate
102 What Is A Microinteraction?
103 Why Microinteractions Are Important
104 Creating Our Own Microinteraction
105 Creating Our Own Microinteraction 2
106 Using Figmotion
107 Using Figmotion 2
108 What Is A Design System?
109 Foundation – Color
110 Foundation – Grids + Spacing
111 Foundation – Iconography
112 Foundation – Typography
113 Components – Button
114 Components – Inputs
115 Components – Cards
116 Recipes – Vertical Cards
117 Recipes – Search
118 Recipes – Order List
119 Using Our Design System
120 Using Our Design System 2
121 Using Our Design System 3
122 Final Prototypes
123 Final Prototypes 2
124 Final Prototypes 3
125 Final Prototypes 4
126 Is Bruno Happy?
127 Project Handoff
128 Initial Setup – Figma Handoff
129 Build UI – Adding Image Assets
130 Build UI – Styling Image Assets
131 Browsing the Web
132 Breaking Google
133 The Internet Backbone
134 Traceroute
135 DEVELOPER FUNDAMENTALS: I
136 What Does A Developer Do?
137 WWW vs Internet
138 HTML, CSS, Javascript
139 DEVELOPER FUNDAMENTALS: II
140 Developer History
141 Build Your First Website
142 DEVELOPER FUNDAMENTALS: III
143 HTML Tags
144 HTML Tags 2
145 Self Closing HTML Tags
146 Anchor Tag
147 Q&A: index.html
148 Q&A: Relative vs Absolute Path
149 HTML Forms
150 HTML Forms 2
151 Submitting A Form
152 HTML Tags 3
153 HTML vs HTML 5
154 Copy A Website
155 HTML Challenge
156 Your First CSS
157 CSS Properties
158 CSS Selectors
159 Text and Font
160 Images In CSS
161 Box Model
162 px vs em vs rem
163 Critical Render Path
164 Flexbox
165 CSS 3
166 Responsive UI
167 Exercise: Robot Animation
168 Bootstrap Introduction
169 Bootstrap Grid
170 Exercise: Startup Landing Page
171 Exercise: Startup Landing Page 2
172 Exercise: Startup Landing Page 3
173 Exercise: Startup Landing Page 4
174 Exercise: Startup Landing Page 5
175 Exercise: Adding Email Subscribe Form With MailChimp
176 Exercise: Putting Your Website Online
177 Exercise: Putting Your Website Online 2
178 DEVELOPER FUNDAMENTALS: IV
179 Using Templates
180 Section Overview
181 CSS Grid vs Flexbox vs Bootstrap
182 CSS Grid 1
183 CSS Grid 2
184 CSS Grid 3
185 CSS Grid 4
186 CSS Grid 5
187 Exercise: CSS Layout
188 Solution: Navigation Bar
189 Solution: Navigation Bar 2
190 Solution: Cover
191 Solution: Project Grid + Footer
192 Solution: Prettify
193 The Truth About CSS