Complete Web & Mobile Designer in 2021: UI/UX, Figma, +more (Udemy.com)

Become a Designer in 2021! Master Mobile and Web Design, User Interface + User Experience (UI/UX Design), HTML, and CSS

Created by: Andrei Neagoie

Produced in 2021

icon
What you will learn

  • Build beautifully designed web and mobile projects for your customers using modern tools used by top companies in 2021
  • 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

icon
Quality Score

Content Quality
/
Video Quality
/
Qualified Instructor
/
Course Pace
/
Course Depth & Coverage
/

Overall Score : 94 / 100

icon
Course Description

Just launched with all modern Design tools and best practices for 2021! Join a live online community of over 350,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!
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 Andreis 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 Development01 GETTING STARTED Sketching, Inspiration + Structure1. SketchingIntro to sketchingSketching UX flowsSketching tips2. InspirationHow to stay inspiredHow to find inspiration online3. User FlowsWhat are user flows?
The dos and dontsSpeeding up our workflow with componentsCreating our own user flows (Registration) Part 1Creating our own user flows (Search) Part 2Creating our own user flows (Checkout) Part 34. SitemapsAn intro to sitemapsCreating a basic sitemapWhat you should be doing before you startCreating a sitemap (part 1)Creating a sitemap (part 2)Tips for getting started02 EXPLORE AND ITERATE Wireframes, Prototyping and Feedback1. WireframesWhat is a wireframe?
How do I create a wireframe?
Speeding up your workflow in FigmaCreating our home pageCreating a product pageCreating a checkout page2. PrototypingPrototyping basics in Figma (Device + Triggers)Prototyping basics in Figma (Actions)Prototyping basics in Figma (Overflow)Prototyping basics in Figma (Presentation + Collaboration)Linking together a quick user flow in FigmaWorking on small interactions with Figma3. Getting feedbackWhy is feedback so important?
How to get constructive feedback03 VISUAL DESIGN Design Theory + Accessibility1. Grids + SpacingSpacing and Grid BasicsResponsive Grids in FigmaCreating our own grid in FigmaThe rules of the grid2. TypographyTypography basics Part 1Matching typefaces to an eraTypography basics Part 2Selecting the right typefaceTypography basics Part 3Picking a typefaceDoes your typeface suit your scenario?
Expanding an existing type systemChoosing typefaces in Google FontsNarrowing down your typography choicesCreating a type system in Figma3. ColorColor SchemesImportant questions to ask before picking colorsHelpful tips for creating color palettesCreating a monochromatic color paletteApplying a our simple color paletteExpanding a strict color paletteCreating our own color palette4. Forms + UI ElementsWhat are UI ElementsBest practices Part 1: FormsBest practices Part 2: Inputs Part 1Best practices Part 2: Inputs Part 2Best practices Part 2: Inputs Part 3Best practices Part 2: Inputs Part 4Best practices Part 3: ButtonsHow to create components in FigmaUsing atomic elements in FigmaUsing Instances in FigmaEditing instances to create new componentsUsing constraints to create responsive componentsCreating a registration form in Figma5. Imagery + IconographyResources and techniques to create great visual assetsWorking with photos in Figma Part 1Working with photos in Figma Part 2Working with illustrations in FigmaUsing Figma plugins to find Icons quicklyCreating our very own custom icons6. AccessibilityWhat is accessibility?
Assistive technologiesVisual patterns for accessibility (Part 1)Tools to make your design accessibleVisual patterns for accessibility (Part 2)04 DESIGN EXPLORATION Application Design + Design Systems1. Design PatternsWhat are design patterns?
Why are design patterns valuable?
How to apply design patternsAnalyzing design patterns togetherDissecting and choosing design patterns together2. Mobile DesignMobile design best practices (Part 1)Mobile design best practices (Part 2)3. Applying Visual DesignDesign FidelityStyle exploration (Navigation)Style exploration (Cards)Style exploration (Interests)Style exploration (New elements)4. MotionThe importance of motionThe purpose of motionIntro to Smart AnimateShowcasing the power of Smart Animate5. MicrointeractionsWhat are microinteractions?
Why are they so important?
Creating our own microinteractions (Part 1)Creating our own microinteractions (Part 2)Using Figmotion (Part 1)Using Figmotion (Part 2)05 PUTTING IT ALL TOGETHER Using our Design System and Hi-Fi prototyping with Figma1. Design SystemsWhat is a design system?
Foundation (color)Foundation (grids and spacing)Foundation (typography)Foundation (iconography)Components (buttons)Components (Inputs)Components (cards)Recipes (card layouts)Recipes (search)Recipes (orders)2. Final CompositionsUsing our design system (Search)Using our design system (Product Description)Using our design system (Cart)06 FROMFIGMATOWEBSITE (take a Figma design and convert it to a live website using HTMLand CSS)07 HTML + HTML508 CSS+ CSS3 - CSS Basics, CSS Grid, Flexbox, CSS Animations09 PUTTINGYOURWEBSITEONLINEThis 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 dont 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 doesnt get outdated easily like most technical skills. Trends change, but the skills and fundam

icon
Instructor Details

Andrei Neagoie

Andrei is the instructor of the highest rated Development courses on Udemy as well asone of the fastestgrowing.His graduates havemovedon to work forsome of the biggest techcompanies around the world like Apple, Google, Tesla, Amazon, JP Morgan, IBM, UNIQLO etc...Hehasbeen working as a senior software developer inSilicon Valley and Toronto for many years,andis now taking all that he has learned,to teachprogramming skills andto help youdiscover the amazing career opportunities that being a developer allows inlife.
Having beena self taught programmer,he understands that there is anoverwhelming number of online courses, tutorials and booksthat 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 materialshould teach real life skills that are current andthey should not waste a student's valuable time. Having learned importantlessons from working for Fortune 500 companies, tech startups, to evenfounding his own business, he is now dedicating 100% of his time toteaching others valuablesoftware development skillsin order to take control of their life and work in an exciting industry with infinite possibilities.
Andrei promises you that there are no other courses out there as comprehensive and as wel

icon
More courses by Andrei Neagoie

Complete React Developer in 2021 (w/ Redux, Hooks, GraphQL)

$11.99

The Complete Web Developer in 2021: Zero to Mastery

$11.99

Master the Coding Interview: Data Structures + Algorithms

$11.99

Learning to Learn [Efficient Learning]: Zero to Mastery

$11.99

Advanced JavaScript Concepts

$11.99

JavaScript: The Advanced Concepts

$11.99

icon
More ux design courses

User Experience (UX): The Ultimate Guide to Usability and UX

$11.99

User Experience (UX) Design For Engagement

$11.99

Brand & UX Design: Intro to User Experience for Brands

$11.99

The Complete Sketch 5 Course - Design Apps & Websites 2021

$11.99

Sketching for UX Designers - Boost UX work with pen & paper!

$11.99

UX Design Career Toolkit Pt 1: Is UX Right For You?

$11.99

icon
Reviews

4.7

64 total reviews

5 star 4 star 3 star 2 star 1 star
% Complete
% Complete
% Complete
% Complete
% Complete

By Rajiv Kumar on 11/21/2020

This course is very nice. I had no such idea about UI and UX. But after taking this course I learned a lot. Andrei and Daniel are both great instructor. They can teach and explain everything in a very beautiful way. Very nice.

By Petra Bencek on 11/21/2020

Great!

By Neil Bryan Galabin on 11/21/2020

well explained

By Peter S on 11/21/2020

The course starts actually fairly nice. But the trouble arises in Section 5
The scribble sections are good, it is really cool to see how easy you can in fact just sketch interfaces and workflows with just a few basic shapes.
But what is really frustrating is the User Flows Section. Here we go from a general Overview what User Flows are and the Dos and Donts just to Speeding up Workflows with Components in Figma with actually no real and proper introduction or whatsoever to this program.
You have no chance to follow anything the instructor does there, nor do you actually know why this is done, where the speeding up benefits are and so on because if you actually follow the course without ever worked with Figma before you have absolutely no clue what this is all about.
And the Figma interface is not really that intuitive. Lets be honest here. Almost no professional tools have intuitive interface but efficient interfaces you have to learn to use first.
Sure, a few links to the official documentation are provided but shouldnt that be a part of a course that promotes itself as "no prerequisites" and claims that you will be able to "master Figma" with this course? I think this is rather a weak excuse for a lack of quality content.
First you think that maybe this lesson is just accidentally put at a wrong position in the course, but at this early stage nothing of whats in the video makes sense to a student with no prior knowledge in Figma.
So you just plot along and hope for a proper introduction, but the following lessons just magically assume that you know how to handle this program now.
If that was the only Lesson where Figma was used, this would be confusin but you could just focus on the rest of the course.
The real issue is, that Figma is used throughout the course and if you dont know how to use it, you will probable not get much out of this course.
From Lesson 23 on the course just leaves students confused and frustrated. And you can see the questions and requests for a proper introduction to Figma in the comments section. Yet the instructor seems to not be able to see the problem that he completely left out this important part of the puzzle.
How about that user experience?
Please do yourself a favor and start reviewing your material before releasing it to the public.
Andreis prior courses used to be excellent and I bought quite a few of them but I sense a sharp drop in quality lately in many courses with co-instructors.
So, unless this course gets updated or youre fine with learning figma on youtube first just to come back to a course that claims to teach you those things, I cannot recommend this course to anyone.

By Rafael Anjos on 11/21/2020

In my opinion the course should have Assignment for we have feedback from the teachers, but the course is amazing very complete and detailed. All the sections are very well organised and explained very well.

By Shawn Gillespie on 11/14/2020

I originally come from a graphic design background. Moved to web design and now been focusing on web development. I've had to start working as a freelancer on a budget. That means I have to be a sort of one stop shop. This course is great for filling the gap of a skill I've neglected.

By Vladislav Boiko on 11/14/2020

A lot of great structured information. A good collection of tools and concepts. Would be great to have a larger section on UI design patterns, on aesthetics and have a clear path defined on how to make a design kick. All in all very satisfied.

By Glenn Reed on 11/14/2020

So far yes. I'm taking a similar course in school and this course sounds like it will fill in all the parts missing in that course.

By Willem Hendrik Lems on 11/14/2020

Before you start this course I would advice to get some introduction to Figma. This introduction is missing in the course and I think it would be a good idea to add it although the teachers claim it's on the job learning of Figma.
There are 3 lectures by a different teacher how to use the design in Figma as a developer which is taken from another course but they are very brief. Since this is a designer course I guess it's okay to only have a brief overview how this design in Figma gets used by a developer but that would be the part I'm mostly interested in so I hope that can be covered in more detail in maybe another course or some more bonus lectures?
The part by Andrei is just a bonus to this course and I already have this course but it is a nice overview for any interested designer. I like his teaching style.
And a note on the teaching style of Daniel. Daniel might be a good designer but unfortunately I have trouble staying focussed following some of his lectures. I really struggle to follow them till the end. There is some interesting material though. I guess I will review a few lectures to make them stick.
And... not sure yet what it has to do with web design... it's geared to mobile design only. And yes... mobile first design but do I get a nice website based on the mobile design? It's not covered at all so the title of the course is a bit misleading to me.

By Earnelle Johnson on 11/14/2020

I just started and i'm feeling really confident in what's being taught and the way it's being taught.

By Phongchayuth Chirutpadathorn on 11/14/2020

Thank you for creating this course. Makes you see the whole picture more clearly Thank you very much May be attached to missions Will study successfully.

By Yosua Wisnu Hendryatmaka on 11/14/2020

I serves multiple path to take whether you are new, experienced or already made your own product