Becoming A UI/UX Designer With Figma
Course Overview:
“Becoming a UI/UX Designer with Figma” is a comprehensive course designed to equip individuals with the necessary skills and knowledge to pursue a career in UI/UX design. The course focuses on utilizing the popular design tool Figma to create effective and user-friendly designs. By combining theory and practical exercises, learners will gain a solid foundation in UI/UX design principles, design thinking, prototyping, wireframing, and design system creation.
Who Needs the Course:
This course is suitable for anyone interested in pursuing a career in UI/UX design. It is particularly beneficial for:
- Aspiring Designers: Individuals who have a passion for design and want to specialize in UI/UX design will find this course invaluable. It provides a comprehensive introduction to the field and lays the groundwork for building a successful career.
- Graphic Designers: Graphic designers looking to expand their skill set and transition into UI/UX design will benefit from this course. It offers insights into the unique considerations and methodologies specific to user interface and user experience design.
- Web Developers: Web developers who want to enhance their understanding of UI/UX principles and improve their ability to create intuitive and engaging user interfaces will find this course beneficial. It provides insights into the design process and equips learners with the skills to collaborate effectively with designers.
- Product Managers: Product managers seeking to gain a deeper understanding of the UI/UX design process and improve their ability to provide valuable input to design teams will find this course valuable. It enables them to align design decisions with user needs and business objectives.
How Learners Will Benefit:
By enrolling in this course, learners will benefit in the following ways:
- Comprehensive Learning: The course covers a wide range of topics, from the fundamentals of UI/UX design to advanced concepts such as design systems and final compositions. Learners will gain a holistic understanding of the UI/UX design process.
- Practical Application: Through hands-on exercises and practical projects, learners will apply their knowledge in real-world scenarios. They will gain proficiency in using Figma, a widely-used design tool, and develop a portfolio of design projects.
- Industry-Relevant Skills: The course focuses on teaching the skills and techniques demanded by the industry. Learners will acquire expertise in sketching, prototyping, wireframing, design theory, accessibility, and design system creation, all of which are essential for a successful career in UI/UX design.
- Design Thinking Approach: Learners will develop a design thinking mindset, enabling them to empathize with users, identify their needs, and create intuitive and user-centered designs.
- Portfolio Enhancement: By completing the course projects and exercises, learners will have a portfolio of design work that showcases their skills and creativity. This portfolio will be invaluable for job applications and freelance opportunities.
- Collaborative Skills: The course explores the collaborative aspects of UI/UX design, including client meetings, feedback processes, and working with developers. Learners will gain the ability to effectively communicate and collaborate with team members, fostering a more efficient design workflow.
Overall, “Becoming a UI/UX Designer with Figma” provides aspiring designers with the essential knowledge, practical skills, and industry insights necessary to excel in the field of UI/UX design and create impactful user experiences.
SECTION 1: INTRODUCTION
-
1Introduction To Becoming A UI/UX Designer
-
2Meeting The Client
-
3The 2 Paths
-
4Exercise Building Your Logo
-
5Designer vs Developer
-
6Skills To Be A Top Designer
-
7Introduction To Sketching
-
8The Sketching Process
-
9Sketching User Flows Part 1
-
10Sketching User Flows Part 2
-
11Sketching User Flows Part 3
-
12Sketching User Flows Part 4
-
13Sketching Tips
-
14How To Stay Inspired
-
15How To Find Inspiration
-
16Introduction To Figma
-
17Figma Dashboard
-
18Figma Tools
-
19Layers & Pages
-
20The Top Bar
-
21Design Properties
-
22Prototyping With Figma
-
23Exercise Creating A Responsive Layout
-
24What Are User Flows
-
25The Do's And Don'ts
-
26Speed Up Workflow With Components
-
27Creating Our Own User Flows Part 1
-
28Creating Our Own User Flows Part 2
-
29Creating Our Own User Flows Part 3
-
30Introduction To Sitemaps
-
31Creating A Basic Sitemap
-
32Before You Start
-
33Creating A Sitemap Part 1
-
34Creating A Sitemap Part 2
-
35Tips For Getting Started
SECTION 2: EXPLORE & ITERATE - WIREFRAMES, PROTOTYPING, AND FEEDBACK
-
36What Is A Wireframe
-
37How To Create A Wireframe
-
38Wireframes In FIgma
-
39Creating Our Home Page
-
40Creating A Product Page
-
41Creating A Checkout Page
-
42Prototyping Basics In Figma Part 1
-
43Prototyping Basics In Figma Part 2
-
44Prototyping Basics In Figma Part 3
-
45Prototyping Basics In Figma Part 4
-
46Linking Together A Quick User Flow
-
47Working On Small Interactions
-
48Why Is Feedback Important
-
49Constructive Feedback
SECTION 3: VISUALLY DESIGNS + DESIGN THEORY AND ACCESSIBILITY
-
50What Is A Grid
-
51Grid Basics
-
52Responsive Grids And Breakpoints
-
53Making Our Grid In Figma
-
54Grid Guidelines
-
55Serifs
-
56Sans Serifs
-
57Display & Mono
-
58Picking Typefaces
-
59Choosing Typefaces For A Project Part 1
-
60Choosing Typefaces For A Project Part 2
-
61Choosing Typefaces For A Project Part 3
-
62Creating Our Own Type System
-
63Color Schemes
-
64Important Questions To Ask
-
65Creating Color Palettes
-
66Creating A Monochromatic Color Palette
-
67Applying Our Color Palette
-
68Expanding A Strict Color Palette
-
69Creating Our Own Color Palette
-
70What Are Forms + UI Elements
-
71Best Practices For Forms
-
72Best Practices For Inputs Part 1
-
73Best Practices For Inputs Part 2
-
74Best Practices For Inputs Part 3
-
75Best Practices For Inputs Part 4
-
76Best Practices For Buttons
-
77Creating Components In Figma
-
78Using Atomic Elements
-
79Using Instances In Figma
-
80Editing Instances
-
81Responsive Components
-
82Creating A Registration Form In Figma
-
83Visual Assets Introduction
-
84Working With Photos In Figma Part 1
-
85Working With Photos In Figma Part 2
-
86Working With Illustrations In Figma
-
87Figma Plugins And Icons
-
88Custom Icons
-
89What Is Accessibility
-
90Assistive Technologies
-
91Visual Patterns For Accessibility Part 1
-
92Tools To Make Your Design Accessible
-
93Visual Patterns For Accessibility Part 2
SECTION 4: DESIGN EXPLORATION - APPLICATION DESIGN + DESIGN SYSTEMS
-
94What Are Design Patterns
-
95Why Are Design Patterns Valuable
-
96How To Apply Design Patterns
-
97Analyzing Design Patterns
-
98Dissecting And Choosing Design Patterns
-
99Mobile Design Best Practices Part 1
-
100Mobile Design Best Practices Part 2
-
101Design Fidelity
-
102Style Exploration Part 1
-
103Style Exploration Part 2
-
104Style Exploration Part 3
-
105Style Exploration Part 4
-
106The Importance Of Motion
-
107The Purpose Of Motion
-
108Intro To Smart Animate
-
109The Power Of Smart Animate
-
110What Is A Microinteraction
-
111Why Microinteractions Are Important
-
112Creating Our Own Microinteraction Part 1
-
113Creating Our Own Microinteraction Part 2
-
114Using Figmotion Part 1
-
115Using Figmotion Part 2
SECTION 5: PUTTING IT ALL TOGETHER - DESIGN SYSTEMS AND FINAL COMPOSITIONS
-
116What Is A Design System
-
117Foundation - Color
-
118Foundation - Grids + Spacing
-
119Foundation - Iconography
-
120Foundation - Typography
-
121Components - Button
-
122Components - Inputs
-
123Components - Cards
-
124Recipes - Vertical Cards
-
125Recipes - Search
-
126Recipes - Order List
-
127Using Our Design System Part 1
-
128Using Our Design System Part 2
-
129Using Our Design System Part 3
-
130Final Prototypes Part 1
-
131Final Prototypes Part 2
-
132Final Prototypes Part 3
-
133Final Prototypes Part 4
-
134The Product Alignment Canvas
-
135Project Goals
-
136Target Users
-
137User Journey Map
-
138Risky Assumptions
-
139What Is A User Story Map
-
140Creating A User Story Map
-
141Is Bruno Happy
-
142Project Handoff
-
143How To Export And Place Designs
-
144Content For Your Portfolio
-
145Where To Host Your Web Portfolio
-
146Initial Setup - Figma Handoff
-
147Build UI - Adding Image Assets
-
148Build UI - Styling Image Assets
SECTION 6: BONUS
-
149Browsing The Web
-
150Breaking Google
-
151The Internet Backbone
-
152Traceroute
-
153Developer Fundamentals I
-
154What Does A Developer Do
-
155WWW vs Internet
-
156HTML, CSS, Javascript
-
157Developer Fundamentals II
-
158Developer History
-
159Build Your First Website
-
160Developer Fundamentals III
-
161HTML Tags Part 1
-
162HTML Tags Part 2
-
163Self Closing HTML Tags
-
164Anchor Tag
-
165Q& A index.html
-
166Q& A Relative Vs Absolute Path
-
167HTML Forms Part 1
-
168HTML Forms Part 2
-
169Submitting A Form
-
170HTML Forms Part 3
-
171HTML vs HTML Part 5
-
172Copy A Website
-
173HTML Challenge
-
174Your First CSS
-
175CSS Properties
-
176CSS Selectors
-
177Text and Font
-
178Images In CSS
-
179Box Model
-
180Px Vs Em Vs Rem
-
181Critical Render Path
-
182Flexbox
-
183CSS 3
-
184Responsive UI
-
185Exercise Robot Animation
-
186Bootstrap Introduction
-
187Bootstrap
-
188Bootstrap Grid
-
189Exercise Startup Landing Page Part 1
-
190Exercise Startup Landing Page Part 2
-
191Exercise Startup Landing Page Part 3
-
192Exercise Startup Landing Page Part 4
-
193Exercise Startup Landing Page Part 5
-
194EXER~1
-
195EXER~2
-
196EXER~3
-
197Developer Fundamentals IV
-
198Using Templates
-
199Introduction To CSS Grid
-
200CSS Grid vs Flexbox vs Bootstrap
-
201CSS Grid Part 1
-
202CSS Grid Part 2
-
203CSS Grid Part 3
-
204CSS Grid Part 4
-
205CSS Grid Part 5
-
206Exercise CSS Layout
-
207Solution Navigation Bar Part 1
-
208Solution Navigation Bar Part 2
-
209Solution Cover
-
210Solution Project Grid + Footer
-
211Solution Prettify
-
212The Truth About CSS