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

<div>Just updated with all modern Design tools and best practices! Join a live online community of over 900,000+ students and a course taught by industry experts that have actually 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 make $160,000+ salaries now because it is such a valuable skill. We will teach you how to get there!</div><div><br></div><div>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.</div><div><br></div><div>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!</div><div><br></div><div>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.&nbsp;</div><div><br></div><div>The topics covered in the course are...</div><div><br></div><div>00. Web &amp; Mobile Design Principles +&nbsp; Design vs Web Development</div><div><span style="font-size: 1rem;">01. GETTING STARTED – Sketching, Inspiration + Structure</span></div><div><span style="font-size: 1rem;">1. Sketching</span></div><div><ul><li><span style="font-size: 1rem;">Introduction To Sketching</span></li><li><span style="font-size: 1rem;">The Sketching Process</span></li><li><span style="font-size: 1rem;">Sketching User Flows</span></li><li><span style="font-size: 1rem;">Sketching Tips</span></li></ul></div><div><span style="font-size: 1rem;">2. Inspiration</span></div><div><ul><li><span style="font-size: 1rem;">How to stay inspired</span></li><li><span style="font-size: 1rem;">How to find inspiration online</span></li></ul></div><div><span style="font-size: 1rem;">3. Figma Basics</span></div><div><ul><li><span style="font-size: 1rem;">Plans and Signup</span></li><li><span style="font-size: 1rem;">Where to Use Figma</span></li><li><span style="font-size: 1rem;">Figma UI — Structure</span></li><li><span style="font-size: 1rem;">Figma UI — Files</span></li><li><span style="font-size: 1rem;">Figma UI — Toolbar</span></li><li><span style="font-size: 1rem;">Figma UI — Left Sidebar</span></li><li><span style="font-size: 1rem;">Figma UI — Right Sidebar</span></li><li><span style="font-size: 1rem;">Shapes and Tools — Frames</span></li><li><span style="font-size: 1rem;">Shapes and Tools — Groups</span></li><li><span style="font-size: 1rem;">Shapes and Tools — Basic Shapes and Boolean Operations</span></li><li><span style="font-size: 1rem;">Designing in Figma — Images</span></li><li><span style="font-size: 1rem;">Designing in Figma — Getting Started with Text</span></li><li><span style="font-size: 1rem;">Designing in Figma — Constraints</span></li><li><span style="font-size: 1rem;">Designing in Figma — Using Auto Layout</span></li><li><span style="font-size: 1rem;">Designing in Figma — Auto Layout Properties</span></li><li><span style="font-size: 1rem;">Resources and Collaboration — Community Files</span></li><li><span style="font-size: 1rem;">Resources and Collaboration — Community Plugins</span></li><li><span style="font-size: 1rem;">Resources and Collaboration — Sharing and Comments]</span></li><li><span style="font-size: 1rem;">Project — Creating a Logo Using Basic Shapes</span></li><li><span style="font-size: 1rem;">Project — Auto Layout Buttons</span></li><li><span style="font-size: 1rem;">Project — Creating a Responsive Navigation</span></li><li><span style="font-size: 1rem;">Project — Responsive Text</span></li><li><span style="font-size: 1rem;">Project — Imagery and Gradients</span></li><li><span style="font-size: 1rem;">Project — Strokes and Shapes</span></li><li><span style="font-size: 1rem;">Project — Layout and Responsiveness</span></li></ul></div><div><span style="font-size: 1rem;">3. User Flows</span></div><div><ul><li><span style="font-size: 1rem;">Getting Ready For This Section</span></li><li><span style="font-size: 1rem;">The DOs and DON'Ts</span></li><li><span style="font-size: 1rem;">User Flows in Figma — Onboarding</span></li><li><span style="font-size: 1rem;">User Flows in Figma — Search</span></li></ul></div><div><span style="font-size: 1rem;">4. Sitemaps</span></div><div><ul><li><span style="font-size: 1rem;">Introduction To Sitemaps</span></li><li><span style="font-size: 1rem;">Creating A Basic Sitemap</span></li><li><span style="font-size: 1rem;">Reusable Sitemap Assets</span></li><li><span style="font-size: 1rem;">Figma Check In — Basic Components and Variants</span></li><li><span style="font-size: 1rem;">Sitemaps in Figma — The Top Layer</span></li><li><span style="font-size: 1rem;">Sitemaps in Figma — Digging Deeper</span></li><li><span style="font-size: 1rem;">Tips for Creating Great Sitemaps</span></li></ul></div><div><span style="font-size: 1rem;">02. EXPLORE AND ITERATE – Wireframes, Prototyping and Feedback</span></div><div><span style="font-size: 1rem;">1. Wireframes</span></div><div><ul><li><span style="font-size: 1rem;">What Is A Wireframe?</span></li><li><span style="font-size: 1rem;">How To Create A Wireframe</span></li><li><span style="font-size: 1rem;">Figma Check In — Basic Button Component]</span></li><li><span style="font-size: 1rem;">Figma Check In — Variants</span></li><li><span style="font-size: 1rem;">How to Use Our Wireframe Components</span></li><li><span style="font-size: 1rem;">Wireframes — Home</span></li><li><span style="font-size: 1rem;">Wireframes — Cart</span></li><li><span style="font-size: 1rem;">Wireframes — Profile</span></li></ul></div><div><span style="font-size: 1rem;">2. Prototyping</span></div><div><ul><li><span style="font-size: 1rem;">Figma Check In — Prototyping in Figma</span></li><li><span style="font-size: 1rem;">Prototyping in Figma — Flows and Starting Points</span></li><li><span style="font-size: 1rem;">Prototyping in Figma — Connections</span></li><li><span style="font-size: 1rem;">Prototyping in Figma — Interactions</span></li><li><span style="font-size: 1rem;">Prototyping in Figma — Animations</span></li><li><span style="font-size: 1rem;">Prototyping in Figma — Prototype Settings</span></li><li><span style="font-size: 1rem;">Prototyping in Figma — Prototype Presentation</span></li><li><span style="font-size: 1rem;">Project — Navigation</span></li><li><span style="font-size: 1rem;">Project — Removing an Item from Your Wishlist</span></li><li><span style="font-size: 1rem;">Project — Finding a Product</span></li></ul></div><div><span style="font-size: 1rem;">3. Getting feedback</span></div><div><ul><li><span style="font-size: 1rem;">Why Is Feedback Important?</span></li><li><span style="font-size: 1rem;">Constructive Feedback</span></li></ul></div><div><span style="font-size: 1rem;">03. VISUAL DESIGN – Design Theory + Accessibility</span></div><div><span style="font-size: 1rem;">1. Spacing and Grids</span></div><div><ul><li><span style="font-size: 1rem;">What Is A Grid?</span></li><li><span style="font-size: 1rem;">Grid Basics</span></li><li><span style="font-size: 1rem;">Figma Check In — Fixed and Fluid Grids</span></li><li><span style="font-size: 1rem;">Figma Check In — Breakpoints</span></li><li><span style="font-size: 1rem;">Figma Check In — Grid Style</span></li><li><span style="font-size: 1rem;">Project — Mobile Layout Grid</span></li><li><span style="font-size: 1rem;">Project — Desktop Layout Grids</span></li><li><span style="font-size: 1rem;">Simple Rules to Follow</span></li></ul></div><div><span style="font-size: 1rem;">2. Typography</span></div><div><ul><li><span style="font-size: 1rem;">Serifs</span></li><li><span style="font-size: 1rem;">Sans Serifs</span></li><li><span style="font-size: 1rem;">Display &amp; Mono</span></li><li><span style="font-size: 1rem;">Picking Typefaces</span></li><li><span style="font-size: 1rem;">Figma Check In — Text Properties</span></li><li><span style="font-size: 1rem;">Exercise — Elevating a Brand</span></li><li><span style="font-size: 1rem;">Exercise — Typeface Scenarios</span></li><li><span style="font-size: 1rem;">Exercise — Google Fonts</span></li><li><span style="font-size: 1rem;">Project — Typeface Exploration</span></li><li><span style="font-size: 1rem;">Project — Pairing Font Families</span></li><li><span style="font-size: 1rem;">Project — Headings, Body and Labels</span></li><li><span style="font-size: 1rem;">Project — Typeface System</span></li><li><span style="font-size: 1rem;">Figma Check In — Text Styles</span></li></ul></div><div><span style="font-size: 1rem;">3. Color</span></div><div><ul><li><span style="font-size: 1rem;">Color Schemes</span></li><li><span style="font-size: 1rem;">Important Questions To Ask</span></li><li><span style="font-size: 1rem;">Creating Color Palettes</span></li><li><span style="font-size: 1rem;">Figma Check In — Paints</span></li><li><span style="font-size: 1rem;">Exercise — Expanding Upon a Strict Color Palette</span></li><li><span style="font-size: 1rem;">Exercise — Creating a Color Palette</span></li><li><span style="font-size: 1rem;">Figma Check In — Color Styles</span></li><li><span style="font-size: 1rem;">Exercise — Using Color Styles</span></li><li><span style="font-size: 1rem;">Project — Primary and Neutrals</span></li><li><span style="font-size: 1rem;">Project — Accents</span></li></ul></div><div><span style="font-size: 1rem;">4. Imagery and Iconography</span></div><div><ul><li><span style="font-size: 1rem;">Visual Assets Introduction</span></li><li><span style="font-size: 1rem;">Figma Check In — Image Plugins</span></li><li><span style="font-size: 1rem;">Figma Check In — Image Styles</span></li><li><span style="font-size: 1rem;">Figma Check In — Masks</span></li><li><span style="font-size: 1rem;">Exercise — Image Exploration</span></li><li><span style="font-size: 1rem;">Exercise — Text and Imagery Working Together</span></li><li><span style="font-size: 1rem;">Figma Check In — Illustration Plugins</span></li><li><span style="font-size: 1rem;">Exercise — Adding illustrations to your designs</span></li><li><span style="font-size: 1rem;">Figma Check In — Icon Plugins</span></li><li><span style="font-size: 1rem;">Figma Check In — Pen Tool</span></li><li><span style="font-size: 1rem;">Exercise — Custom Icons with the Pen Tool</span></li></ul></div><div><span style="font-size: 1rem;">5. Forms + UI Elements</span></div><div><ul><li><span style="font-size: 1rem;">What Are Forms + UI Elements?</span></li><li><span style="font-size: 1rem;">Best Practices — Forms</span></li><li><span style="font-size: 1rem;">Best Practices — Basic and Advanced Inputs</span></li><li><span style="font-size: 1rem;">Best Practices — Inputs</span></li><li><span style="font-size: 1rem;">Best Practices — Buttons</span></li><li><span style="font-size: 1rem;">Figma Check In — Component Properties</span></li><li><span style="font-size: 1rem;">Properties vs. Variants</span></li><li><span style="font-size: 1rem;">Figma Check In — Button Component Properties</span></li><li><span style="font-size: 1rem;">Figma Check In — Button Variants</span></li><li><span style="font-size: 1rem;">Figma Check In — Combining Components</span></li><li><span style="font-size: 1rem;">Figma Check In — Form Component Possibilities</span></li><li><span style="font-size: 1rem;">Project — Registration Flow</span></li></ul></div><div><span style="font-size: 1rem;">6. Accessibility</span></div><div><ul><li><span style="font-size: 1rem;">What Is Accessibility?</span></li><li><span style="font-size: 1rem;">Assistive Technologies</span></li><li><span style="font-size: 1rem;">Visual Patterns For Accessibility</span></li><li><span style="font-size: 1rem;">Tools To Make Your Design Accessible</span></li></ul></div><div><span style="font-size: 1rem;">04. DESIGN EXPLORATION – Application Design + Design Systems</span></div><div><span style="font-size: 1rem;">1. Design Patterns</span></div><div><ul><li><span style="font-size: 1rem;">What Are Design Patterns?</span></li><li><span style="font-size: 1rem;">Why Are Design Patterns Valuable?</span></li><li><span style="font-size: 1rem;">How To Apply Design Patterns</span></li><li><span style="font-size: 1rem;">Analyzing Design Patterns</span></li><li><span style="font-size: 1rem;">Dissecting And Choosing Design Patterns</span></li></ul></div><div><span style="font-size: 1rem;">2. Mobile Design</span></div><div><ul><li><span style="font-size: 1rem;">Mobile Design Best Practices</span></li></ul></div><div><span style="font-size: 1rem;">3. Visual Style and Exploration</span></div><div><ul><li><span style="font-size: 1rem;">Design Fidelity</span></li><li><span style="font-size: 1rem;">Visual Exploration — Navigation</span></li><li><span style="font-size: 1rem;">Visual Exploration — Buttons</span></li><li><span style="font-size: 1rem;">Figma Check In — Effect Styles</span></li><li><span style="font-size: 1rem;">Visual Exploration — Product Cards</span></li><li><span style="font-size: 1rem;">Visual Exploration — Text Cards</span></li><li><span style="font-size: 1rem;">Screen Design — Home</span></li><li><span style="font-size: 1rem;">Screen Design — Product Page</span></li></ul></div><div><span style="font-size: 1rem;">4. Motion and Microinteractions</span></div><div><ul><li><span style="font-size: 1rem;">The Importance Of Motion</span></li><li><span style="font-size: 1rem;">Why Microinteractions Are Important?</span></li><li><span style="font-size: 1rem;">What Is A Microinteraction?</span></li><li><span style="font-size: 1rem;">Figma Check In — Intro to Smart Animate</span></li><li><span style="font-size: 1rem;">Figma Check In — Smart Animate Properties</span></li><li><span style="font-size: 1rem;">Exercise — Parallax</span></li><li><span style="font-size: 1rem;">Exercise — New Message</span></li><li><span style="font-size: 1rem;">Exercise — Overlays</span></li><li><span style="font-size: 1rem;">Figma Check In — Interactive Components</span></li><li><span style="font-size: 1rem;">Exercise — Interactive Buttons</span></li><li><span style="font-size: 1rem;">Project — Parallax Welcome Screen</span></li><li><span style="font-size: 1rem;">Project — Drag Onboarding</span></li><li><span style="font-size: 1rem;">Project — Cart Overlay</span></li><li><span style="font-size: 1rem;">Project — Button Microinteraction</span></li></ul></div><div><span style="font-size: 1rem;">05. PUTTING IT ALL TOGETHER – Using our Design System and Hi-Fi prototyping with Figma</span></div><div><span style="font-size: 1rem;">1. Design Systems</span></div><div><ul><li><span style="font-size: 1rem;">Foundational Styles and Components vs. Product Specific Components</span></li><li><span style="font-size: 1rem;">Building Fidelity and Organizing Potential Components and Styles</span></li><li><span style="font-size: 1rem;">Foundational Styles and Components</span></li><li><span style="font-size: 1rem;">Components — Buttons</span></li><li><span style="font-size: 1rem;">Components — Cards</span></li><li><span style="font-size: 1rem;">Components — Headers</span></li><li><span style="font-size: 1rem;">Components — Inputs</span></li><li><span style="font-size: 1rem;">Components — List Items</span></li><li><span style="font-size: 1rem;">Components — Navigation</span></li><li><span style="font-size: 1rem;">Components — Misc. Elements</span></li></ul></div><div><span style="font-size: 1rem;">2. Execution</span></div><div><ul><li><span style="font-size: 1rem;">Working Towards Our Final Designs</span></li><li><span style="font-size: 1rem;">Execution — Introduction Screen</span></li><li><span style="font-size: 1rem;">Execution — Onboarding Screens</span></li><li><span style="font-size: 1rem;">Execution — Registration Screens</span></li><li><span style="font-size: 1rem;">Execution — Home Screen</span></li><li><span style="font-size: 1rem;">Execution — Wishlist Screens</span></li><li><span style="font-size: 1rem;">Execution — Profile Screen</span></li><li><span style="font-size: 1rem;">Execution — Cart and Checkout</span></li><li><span style="font-size: 1rem;">Prototypes — Registration</span></li><li><span style="font-size: 1rem;">Prototypes — Adding to Cart</span></li><li><span style="font-size: 1rem;">Prototypes — Checkout</span></li><li><span style="font-size: 1rem;">Prototypes — Lottie Files Plugin</span></li><li><span style="font-size: 1rem;">Prototypes — Search and Filters</span></li></ul></div><div><span style="font-size: 1rem;">06. FROM FIGMA TO WEBSITE (take a Figma design and convert it to a live website using HTML and CSS)</span></div><div><span style="font-size: 1rem;">07. HTML + HTML5</span></div><div><span style="font-size: 1rem;">08. CSS + CSS3 - CSS Basics, CSS Grid, Flexbox, CSS Animations</span></div><div><span style="font-size: 1rem;">09. PUTTING YOUR WEBSITE ONLINE</span></div><div><br></div><div>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.</div><div><br></div><div>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.</div><div><br></div><div>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 that is a top Designer that 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.</div><div><br></div><div>This course is for you if:</div><div><ul><li>You are a complete beginner looking to become a designer and freelance</li><li><span style="font-size: 1rem;">You are a designer who is looking to charge more for your work</span></li><li><span style="font-size: 1rem;">You are a developer who is looking to improve their design skills</span></li></ul></div><div><span style="font-size: 1rem;">Taught By:</span></div><div><br></div><div>Andrei is the instructor of the highest rated Development courses on Udemy as well as one of the fastest growing. His graduates have moved on to work for some of the biggest tech companies around the world like Apple, Google, Tesla, Amazon, JP Morgan, IBM, UNIQLO etc... He has been working as a senior software developer in Silicon Valley and Toronto for many years, and is now taking all that he has learned, to teach programming skills and to help you discover the amazing career opportunities that being a developer allows in life.</div><div><br></div><div>Having been a self taught programmer, he understands that there is an overwhelming number of online courses, tutorials and books that are overly verbose and inadequate at teaching proper skills. Most people feel paralyzed and don't know where to start when learning a complex subject matter, or even worse, most people don't have $20,000 to spend on a coding bootcamp. Programming skills should be affordable and open to all. An education material should teach real life skills that are current and they should not waste a student's valuable time. Having learned important lessons from working for Fortune 500 companies, tech startups, to even founding his own business, he is now dedicating 100% of his time to teaching others valuable software development skills in order to take control of their life and work in an exciting industry with infinite possibilities.</div><div><br></div><div>Andrei promises you that there are no other courses out there as comprehensive and as well explained. He believes that in order to learn anything of value, you need to start with the foundation and develop the roots of the tree. Only from there will you be able to learn concepts and specific skills(leaves) that connect to the foundation. Learning becomes exponential when structured in this way.</div><div><br></div><div>Taking his experience in educational psychology and coding, Andrei's courses will take you on an understanding of complex subjects that you never thought would be possible.</div><div><br></div><div>Daniel is a design leader in tech with extensive experience in helping startups build and iterate on their products. Daniel is passionate about teaching and empowering designers and working with other disciplines to build purposeful products that meet both user and business goals.</div><div><br></div><div>His approach to design is always thoughtful and iterative. Daniel often finds himself working collaboratively with his team whether that is sketching concepts and flows or leading design strategy with team leads and external stakeholders.</div><div><br></div><div>Daniel is a multi faceted designer who’s expertise expands across multiple design disciplines. This includes User Experience and Visual Design, User Research, Product Strategy, Lean and Agile Design Methodologies and much more. HIs work has helped to shape different solutions for a variety of industries such as housing, blockchain and health.</div><div><br></div><div>When he is not building products, Daniel has spoke and mentored at different meetups and events. He aims to give back to the design community that he has learnt and continues to learn so much from. Daniel aims to always help, teach and support other designers in their careers.</div><div><br></div><div>See you inside the courses!</div>

What you'll learn:

• Build beautifully designed web and mobile projects for your customers using modern tools used by top companies in 2025
• Get hired as a Designer or become a freelancer that can work from anywhere and for anyone. Designers are in high demand!
• Includes 100+ assets and premium design templates that you can keep and use to customize for all your future projects
• Master Figma for your design needs then learn to convert your designs into a live HTML an CSS website
• Have an amazing design portfolio customized and professionally completed by the end of the course (we provide it for you!)
• Master both Web and Mobile design principles and how to go from sketching to fully fledged high fidelity designs that will wow customers
• 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 best practices that takes years to learn in the design industry
• Learn to make professional logos and design choices for all branding needs
• Learn UI/UX best practices using the latest trends in the industry
• 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)!