Description
Just updated with all modern Design tools and best practices for 2023! 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! 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. 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. SketchingIntroduction To SketchingThe Sketching ProcessSketching User FlowsSketching Tips2. InspirationHow to stay inspiredHow to find inspiration online3. Figma BasicsPlans and SignupWhere to Use FigmaFigma UI - StructureFigma UI - FilesFigma UI - ToolbarFigma UI - Left SidebarFigma UI - Right SidebarShapes and Tools - FramesShapes and Tools - GroupsShapes and Tools - Basic Shapes and Boolean OperationsDesigning in Figma - ImagesDesigning in Figma - Getting Started with TextDesigning in Figma - ConstraintsDesigning in Figma - Using Auto LayoutDesigning in Figma - Auto Layout PropertiesResources and Collaboration - Community FilesResources and Collaboration - Community PluginsResources and Collaboration - Sharing and Comments]Project - Creating a Logo Using Basic ShapesProject - Auto Layout ButtonsProject - Creating a Responsive NavigationProject - Responsive TextProject - Imagery and GradientsProject - Strokes and ShapesProject - Layout and Responsiveness3. User FlowsGetting Ready For This SectionThe DOs and DON'TsUser Flows in Figma - OnboardingUser Flows in Figma - Search4. SitemapsIntroduction To SitemapsCreating A Basic SitemapReusable Sitemap AssetsFigma Check In - Basic Components and VariantsSitemaps in Figma - The Top LayerSitemaps in Figma - Digging DeeperTips for Creating Great Sitemaps02 EXPLORE AND ITERATE - Wireframes, Prototyping and Feedback1. WireframesWhat Is A Wireframe?How To Create A WireframeFigma Check In - Basic Button Component]Figma Check In - VariantsHow to Use Our Wireframe ComponentsWireframes - HomeWireframes - CartWireframes - Profile2. PrototypingFigma Check In - Prototyping in FigmaPrototyping in Figma - Flows and Starting PointsPrototyping in Figma - ConnectionsPrototyping in Figma - InteractionsPrototyping in Figma - AnimationsPrototyping in Figma - Prototype SettingsPrototyping in Figma - Prototype PresentationProject - NavigationProject - Removing an Item from Your WishlistProject - Finding a Product3. Getting feedbackWhy Is Feedback Important?Constructive Feedback03 VISUAL DESIGN - Design Theory + Accessibility1. Spacing and GridsWhat Is A Grid?Grid BasicsFigma Check In - Fixed and Fluid GridsFigma Check In - BreakpointsFigma Check In - Grid StyleProject - Mobile Layout GridProject - Desktop Layout GridsSimple Rules to Follow2. TypographySerifsSans SerifsDisplay & MonoPicking TypefacesFigma Check In - Text PropertiesExercise - Elevating a BrandExercise - Typeface ScenariosExercise - Google FontsProject - Typeface ExplorationProject - Pairing Font FamiliesProject - Headings, Body and LabelsProject - Typeface SystemFigma Check In - Text Styles3. ColorColor SchemesImportant Questions To AskCreating Color PalettesFigma Check In - PaintsExercise - Expanding Upon a Strict Color PaletteExercise - Creating a Color PaletteFigma Check In - Color StylesExercise - Using Color StylesProject - Primary and NeutralsProject - Accents4. Imagery and IconographyVisual Assets IntroductionFigma Check In - Image PluginsFigma Check In - Image StylesFigma Check In - MasksExercise - Image ExplorationExercise - Text and Imagery Working TogetherFigma Check In - Illustration PluginsExercise - Adding illustrations to your designsFigma Check In - Icon PluginsFigma Check In - Pen ToolExercise - Custom Icons with the Pen Tool5. Forms + UI ElementsWhat Are Forms + UI Elements?Best Practices - FormsBest Practices - Basic and Advanced InputsBest Practices - InputsBest Practices - ButtonsFigma Check In - Component PropertiesProperties vs. VariantsFigma Check In - Button Component PropertiesFigma Check In - Button VariantsFigma Check In - Combining ComponentsFigma Check In - Form Component PossibilitiesProject - Registration Flow6. AccessibilityWhat Is Accessibility?Assistive TechnologiesVisual Patterns For AccessibilityTools To Make Your Design Accessible04 DESIGN EXPLORATION - Application Design + Design Systems1. Design PatternsWhat Are Design Patterns?Why Are Design Patterns Valuable?How To Apply Design PatternsAnalyzing Design PatternsDissecting And Choosing Design Patterns2. Mobile DesignMobile Design Best Practices3. Visual Style and ExplorationDesign FidelityVisual Exploration - NavigationVisual Exploration - ButtonsFigma Check In - Effect StylesVisual Exploration - Product CardsVisual Exploration - Text CardsScreen Design - HomeScreen Design - Product Page4. Motion and MicrointeractionsThe Importance Of MotionWhy Microinteractions Are Important?What Is A Microinteraction?Figma Check In - Intro to Smart AnimateFigma Check In - Smart Animate PropertiesExercise - ParallaxExercise - New MessageExercise - OverlaysFigma Check In - Interactive ComponentsExercise - Interactive ButtonsProject - Parallax Welcome ScreenProject - Drag OnboardingProject - Cart OverlayProject - Button Microinteraction05 PUTTING IT ALL TOGETHER - Using our Design System and Hi-Fi prototyping with Figma1. Design SystemsFoundational Styles and Components vs. Product Specific ComponentsBuilding Fidelity and Organizing Potential Components and StylesFoundational Styles and ComponentsComponents - ButtonsComponents - CardsComponents - HeadersComponents - InputsComponents - List ItemsComponents - NavigationComponents - Misc. Elements2. ExecutionWorking Towards Our Final DesignsExecution - Introduction ScreenExecution - Onboarding ScreensExecution - Registration ScreensExecution - Home ScreenExecution - Wishlist ScreensExecution - Profile ScreenExecution - Cart and CheckoutPrototypes - RegistrationPrototypes - Adding to CartPrototypes - CheckoutPrototypes - Lottie Files PluginPrototypes - Search and Filters06 FROM FIGMA TO WEBSITE (take a Figma design and convert it to a live website using HTML and CSS)07 HTML + HTML508 CSS + CSS3 - CSS Basics, CSS Grid, Flexbox, CSS Animations09 PUTTING YOUR WEBSITE ONLINEThis 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 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. This course is for you if:- You are a complete beginner looking to become a designer and freelance- You are a designer who is looking to charge more for your work- You are a developer who is looking to improve their design skillsTaught By: 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. 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. 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. 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.----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. 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. 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. 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. See you inside the courses!
