We may earn an affiliate commission when you visit our partners.
Course image
Udemy logo

Complete Web & Mobile Designer

UI/UX, Figma, +more

Andrei Neagoie and Daniel Schifano

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. 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

Read more

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. 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

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 Development

  • Sketching

    • Introduction To Sketching

    • The Sketching Process

    • Sketching User Flows

    • Sketching Tips

  • 2. Inspiration

    • How to stay inspired

    • How to find inspiration online

  • 3. Figma Basics

    • Plans and Signup

    • Where to Use Figma

    • Figma UI — Structure

    • Figma UI — Files

    • Figma UI — Toolbar

    • Figma UI — Left Sidebar

    • Figma UI — Right Sidebar

    • Shapes and Tools — Frames

    • Shapes and Tools — Groups

    • Shapes and Tools — Basic Shapes and Boolean Operations

    • Designing in Figma — Images

    • Designing in Figma — Getting Started with Text

    • Designing in Figma — Constraints

    • Designing in Figma — Using Auto Layout

    • Designing in Figma — Auto Layout Properties

    • Resources and Collaboration — Community Files

    • Resources and Collaboration — Community Plugins

    • Resources and Collaboration — Sharing and Comments]

    • Project — Creating a Logo Using Basic Shapes

    • Project — Auto Layout Buttons

    • Project — Creating a Responsive Navigation

    • Project — Responsive Text

    • Project — Imagery and Gradients

    • Project — Strokes and Shapes

    • Project — Layout and Responsiveness

  • 3. User Flows

    • Getting Ready For This Section

    • The DOs and DON'Ts

    • User Flows in Figma — Onboarding

    • User Flows in Figma — Search

  • 4. Sitemaps

    • Introduction To Sitemaps

    • Creating A Basic Sitemap

    • Reusable Sitemap Assets

    • Figma Check In — Basic Components and Variants

    • Sitemaps in Figma — The Top Layer

    • Sitemaps in Figma — Digging Deeper

    • Tips for Creating Great Sitemaps

  • Wireframes

    • What Is A Wireframe?

    • How To Create A Wireframe

    • Figma Check In — Basic Button Component]

    • Figma Check In — Variants

    • How to Use Our Wireframe Components

    • Wireframes — Home

    • Wireframes — Cart

    • Wireframes — Profile

  • 2. Prototyping

    • Figma Check In — Prototyping in Figma

    • Prototyping in Figma — Flows and Starting Points

    • Prototyping in Figma — Connections

    • Prototyping in Figma — Interactions

    • Prototyping in Figma — Animations

    • Prototyping in Figma — Prototype Settings

    • Prototyping in Figma — Prototype Presentation

    • Project — Navigation

    • Project — Removing an Item from Your Wishlist

    • Project — Finding a Product

  • 3. Getting feedback

    • Why Is Feedback Important?

    • Constructive Feedback

  • Spacing and Grids

    • What Is A Grid?

    • Grid Basics

    • Figma Check In — Fixed and Fluid Grids

    • Figma Check In — Breakpoints

    • Figma Check In — Grid Style

    • Project — Mobile Layout Grid

    • Project — Desktop Layout Grids

    • Simple Rules to Follow

  • 2. Typography

    • Serifs

    • Sans Serifs

    • Display & Mono

    • Picking Typefaces

    • Figma Check In — Text Properties

    • Exercise — Elevating a Brand

    • Exercise — Typeface Scenarios

    • Exercise — Google Fonts

    • Project — Typeface Exploration

    • Project — Pairing Font Families

    • Project — Headings, Body and Labels

    • Project — Typeface System

    • Figma Check In — Text Styles

  • 3. Color

    • Color Schemes

    • Important Questions To Ask

    • Creating Color Palettes

    • Figma Check In — Paints

    • Exercise — Expanding Upon a Strict Color Palette

    • Exercise — Creating a Color Palette

    • Figma Check In — Color Styles

    • Exercise — Using Color Styles

    • Project — Primary and Neutrals

    • Project — Accents

  • 4. Imagery and Iconography

    • Visual Assets Introduction

    • Figma Check In — Image Plugins

    • Figma Check In — Image Styles

    • Figma Check In — Masks

    • Exercise — Image Exploration

    • Exercise — Text and Imagery Working Together

    • Figma Check In — Illustration Plugins

    • Exercise — Adding illustrations to your designs

    • Figma Check In — Icon Plugins

    • Figma Check In — Pen Tool

    • Exercise — Custom Icons with the Pen Tool

  • 5. Forms + UI Elements

    • What Are Forms + UI Elements?

    • Best Practices — Forms

    • Best Practices — Basic and Advanced Inputs

    • Best Practices — Inputs

    • Best Practices — Buttons

    • Figma Check In — Component Properties

    • Properties vs. Variants

    • Figma Check In — Button Component Properties

    • Figma Check In — Button Variants

    • Figma Check In — Combining Components

    • Figma Check In — Form Component Possibilities

    • Project — Registration Flow

  • 6. Accessibility

    • What Is Accessibility?

    • Assistive Technologies

    • Visual Patterns For Accessibility

    • Tools To Make Your Design Accessible

  • Design Patterns

    • What Are Design Patterns?

    • Why Are Design Patterns Valuable?

    • How To Apply Design Patterns

    • Analyzing Design Patterns

    • Dissecting And Choosing Design Patterns

  • 2. Mobile Design

    • Mobile Design Best Practices

  • 3. Visual Style and Exploration

    • Design Fidelity

    • Visual Exploration — Navigation

    • Visual Exploration — Buttons

    • Figma Check In — Effect Styles

    • Visual Exploration — Product Cards

    • Visual Exploration — Text Cards

    • Screen Design — Home

    • Screen Design — Product Page

  • 4. Motion and Microinteractions

    • The Importance Of Motion

    • Why Microinteractions Are Important?

    • What Is A Microinteraction?

    • Figma Check In — Intro to Smart Animate

    • Figma Check In — Smart Animate Properties

    • Exercise — Parallax

    • Exercise — New Message

    • Exercise — Overlays

    • Figma Check In — Interactive Components

    • Exercise — Interactive Buttons

    • Project — Parallax Welcome Screen

    • Project — Drag Onboarding

    • Project — Cart Overlay

    • Project — Button Microinteraction

  • Design Systems

    • Foundational Styles and Components vs. Product Specific Components

    • Building Fidelity and Organizing Potential Components and Styles

    • Foundational Styles and Components

    • Components — Buttons

    • Components — Cards

    • Components — Headers

    • Components — Inputs

    • Components — List Items

    • Components — Navigation

    • Components — Misc. Elements

  • 2. Execution

    • Working Towards Our Final Designs

    • Execution — Introduction Screen

    • Execution — Onboarding Screens

    • Execution — Registration Screens

    • Execution — Home Screen

    • Execution — Wishlist Screens

    • Execution — Profile Screen

    • Execution — Cart and Checkout

    • Prototypes — Registration

    • Prototypes — Adding to Cart

    • Prototypes — Checkout

    • Prototypes — Lottie Files Plugin

    • Prototypes — Search and Filters

  • 06 FROM FIGMA TO WEBSITE (take a Figma design and convert it to a live website using HTML and CSS)

    • 07 HTML + HTML5

    • 08 CSS + CSS3 - CSS Basics, CSS Grid, Flexbox, CSS Animations

    • 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 skills

      Taught 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.. 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.

    Enroll now

    What's inside

    Learning objectives

    • Build beautifully designed web and mobile projects for your customers using modern tools used by top companies in 2023
    • 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)!
    • Show more
    • Show less

    Syllabus

    Introduction
    Course Outline
    Join Our Online Classroom!
    Exercise: Meet Your Classmates & Instructor
    Read more
    Meeting The Client
    The 2 Paths
    Exercise: Building Your Logo
    Design Resources
    Designer vs Developer
    Skills To Be A Top Designer
    ZTM Resources
    Monthly Coding Challenges, Free Resources and Guides
    Sketching
    Getting Ready For This Section
    Introduction To Sketching
    The Sketching Process
    Sketching User Flows
    Sketching User Flows 2
    Sketching User Flows 3
    Sketching User Flows 4
    Sketching Tips
    Inspiration
    How To Stay Inspired
    How To Find Inspiration
    Figma Basics
    Resources
    Plans and Signup
    Where to Use Figma
    Figma UI — Structure
    Figma UI — Files
    Figma UI — Toolbar
    Figma UI — Left Sidebar
    Figma UI — Right Sidebar
    Shapes and Tools — Frames
    Shapes and Tools — Groups
    Shapes and Tools — Basic Shapes and Boolean Operations
    Designing in Figma — Images
    Designing in Figma — Getting Started with Text
    Designing in Figma — Constraints
    Designing in Figma — Using Auto Layout
    Designing in Figma — Auto Layout Properties
    Resources and Collaboration — Community Files
    Resources and Collaboration — Community Plugins
    Resources and Collaboration — Sharing and Comments
    Project — What We Are Going to Build?
    Project — Creating a Logo Using Basic Shapes
    Project — Auto Layout Buttons
    Project — Creating a Responsive Navigation
    Project — Responsive Text
    Project — Imagery and Gradients
    Project — Strokes and Shapes
    Project — Layout and Responsiveness
    User Flows
    User Flows Explained
    The DOs and DON'Ts
    What We Are Going To Build
    Reusable User Flow Assets
    User Flows in Figma — Onboarding
    User Flows in Figma — Search
    Sitemaps
    Introduction To Sitemaps
    Creating A Basic Sitemap
    What We Will Learn
    Reusable Sitemap Assets
    Figma Check In — Basic Components and Variants
    Sitemaps in Figma — The Top Layer
    Sitemaps in Figma — Digging Deeper
    Sitemaps in Figma — Digging Deeper Cont.
    Tips for Creating Great Sitemaps
    Wireframes
    What Is A Wireframe?
    How To Create A Wireframe
    Figma Check In — Basic Button Component
    Figma Check In — Variants
    How to Use Our Wireframe Components
    Wireframes — Home
    Wireframes — Cart
    Wireframes — Profile
    Prototyping
    Figma Check In — Prototyping in Figma
    Prototyping in Figma — Flows and Starting Points
    Prototyping in Figma — Connections
    Prototyping in Figma — Interactions
    Prototyping in Figma — Animations
    Prototyping in Figma — Prototype Settings
    Prototyping in Figma — Prototype Presentation
    Project — Navigation
    Project — Removing an Item from Your Wishlist
    Project — Finding a Product
    Exercise: Imposter Syndrome
    Feedback
    Why Is Feedback Important?
    Constructive Feedback

    Good to know

    Know what's good
    , what to watch for
    , and possible dealbreakers
    Provides hands-on labs and interactive materials thereby sharpening the learnt concepts for better retention
    Develops expertise in Figma, which is the industry standard in the UX design domain
    Explores the latest industry trends and best practices in web design, mobile design, and UI/UX
    Taught by professional instructors who are highly experienced and acknowledged in the field
    Offers 100+ assets and premium design templates for practical application and enhanced learning
    Builds a strong foundation for beginners and aspiring designers with no prior knowledge

    Save this course

    Save Complete Web & Mobile Designer: UI/UX, Figma, +more to your list so you can find it easily later:
    Save

    Activities

    Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Complete Web & Mobile Designer: UI/UX, Figma, +more with these activities:
    Sketching out a user interface
    Revisiting UI basics and sketching out user interfaces can help you refresh the foundational design skills needed for this course.
    Browse courses on UI
    Show steps
    • Find a simple screen to draw.
    • Sketch it out on paper.
    • Do this for at least 3 different screens.
    Practice using Figma
    Investing some time in practicing with Figma can help familiarize you with tools and techniques commonly used in the field.
    Browse courses on User Interface Design
    Show steps
    • Explore Figma's interface and features.
    • Create a basic design using Figma.
    • Collaborate on a design project with a peer using Figma.
    Prototype a simple website
    Creating a prototype website will reinforce your understanding of design principles and enable you to visualize your designs.
    Browse courses on Prototyping
    Show steps
    • Choose a simple website to prototype.
    • Create a basic wireframe.
    • Add interactivity using a prototyping tool.
    • Test your prototype with users.
    Show all three activities

    Career center

    Learners who complete Complete Web & Mobile Designer: UI/UX, Figma, +more will develop knowledge and skills that may be useful to these careers:
    UI Designer
    As a UI Designer, you will be responsible for designing the visual appearance of websites and web applications. This course will teach you the principles of UI design and how to use Figma to create mockups of your designs. You will also learn how to work with developers to implement your designs.
    UX Designer
    As a UX Designer, you will be responsible for designing the user experience of websites and web applications. This course will teach you the principles of UX design and how to use Figma to create prototypes of your designs. You will also learn how to test your designs with users and get feedback.
    Product Designer
    As a Product Designer, you will be responsible for designing the overall user experience of a product, including the website, app, and packaging. This course will teach you the principles of product design and how to use Figma to create prototypes of your designs. You will also learn how to work with engineers and marketers to bring your designs to life.
    Web Developer
    As a Web Developer, you will be responsible for designing and developing websites and web applications. This course will teach you the skills you need to create beautiful and functional websites using HTML and CSS. You will also learn how to use Figma, a popular design tool, to create wireframes and prototypes of your designs.
    App Developer
    As an App Developer, you will be responsible for designing and developing mobile applications. This course will teach you the skills you need to create beautiful and functional apps using HTML, CSS, and JavaScript. You will also learn how to use Figma to create wireframes and prototypes of your designs.
    Front-End Developer
    As a Front-End Developer, you will be responsible for developing the user interface of websites and web applications. This course will teach you the skills you need to create beautiful and functional websites using HTML and CSS. You will also learn how to use Figma to create wireframes and prototypes of your designs.
    Interaction Designer
    As an Interaction Designer, you will be responsible for designing the interactions between users and products. This course will teach you the principles of interaction design and how to use Figma to create prototypes of your designs. You will also learn how to work with engineers to implement your designs.
    Graphic designer
    As a Graphic Designer, you will be responsible for creating visual content for websites, apps, and print materials. This course will teach you the principles of graphic design and how to use Figma to create mockups of your designs. You will also learn how to work with clients to bring your designs to life.
    UX Researcher
    As a UX Researcher, you will be responsible for conducting research on users and their needs. This course will teach you the principles of UX research and how to use Figma to create prototypes of your designs. You will also learn how to analyze data and make recommendations for improvements.
    Content Designer
    As a Content Designer, you will be responsible for creating written content for websites, apps, and other digital products. This course will teach you the principles of content design and how to use Figma to create mockups of your designs. You will also learn how to work with other designers and developers to bring your designs to life.
    Visual Designer
    As a Visual Designer, you will be responsible for creating the visual identity of a brand, including the logo, typography, and color palette. This course may teach you the principles of visual design and how to use Figma to create mockups of your designs. You will also learn how to work with other designers and developers to bring your designs to life.
    Motion Graphic Designer
    As a Motion Graphic Designer, you will be responsible for creating animated graphics for websites, apps, and other digital products. This course may teach you the principles of motion graphics and how to use Figma to create prototypes of your designs. You will also learn how to work with other designers and developers to bring your designs to life.
    Creative Director
    As a Creative Director, you will be responsible for overseeing the creative vision of a project, including the design, marketing, and advertising. This course may teach you the principles of creative direction and how to use Figma to create mockups of your designs. You will also learn how to work with other designers and developers to bring your designs to life.
    Art Director
    As an Art Director, you will be responsible for overseeing the visual design of a project, including the logo, typography, and color palette. This course may teach you the principles of art direction and how to use Figma to create mockups of your designs. You will also learn how to work with other designers and developers to bring your designs to life.
    Technical Writer
    As a Technical Writer, you will be responsible for creating written documentation for software and other technical products. This course may teach you the principles of technical writing and how to use Figma to create mockups of your designs. You will also learn how to work with other designers and developers to bring your designs to life.

    Reading list

    We've selected nine books that we think will supplement your learning. Use these to develop background knowledge, enrich your coursework, and gain a deeper understanding of the topics covered in Complete Web & Mobile Designer: UI/UX, Figma, +more.
    This classic book on UX design provides a comprehensive overview of the field. It covers the fundamental principles and processes of UX design, with a focus on creating user-centered and usable digital products.
    This practical guide to web usability offers simple and effective tips on how to make websites more user-friendly. It covers topics such as navigation, content organization, and error prevention.
    Provides a comprehensive catalog of UI patterns and best practices. It helps designers create user-friendly and intuitive interfaces by leveraging proven design solutions.
    Provides an overview of agile software development methodologies, including Scrum and XP. It covers topics such as iterative development, testing, and continuous integration.
    Provides advanced techniques for using CSS to create complex and visually appealing web pages. It covers topics such as layout, typography, animation, and responsive design.
    Provides techniques for optimizing JavaScript code for performance. It covers topics such as performance profiling, code optimization, and memory management.
    Provides a step-by-step guide to using design thinking to solve problems and create innovative solutions. It covers topics such as user research, ideation, prototyping, and testing.
    Introduces the fundamentals of HTML5, CSS3, and JavaScript. It provides a practical approach to building and deploying web applications, with a focus on responsive design and cross-platform compatibility.

    Share

    Help others find this course page by sharing it with your friends and followers:

    Similar courses

    Here are nine courses similar to Complete Web & Mobile Designer: UI/UX, Figma, +more.
    Try It: Fundamentals of Figma
    Most relevant
    UI UX Design Hybrid from Figma to HTML CSS and JavaScript
    Most relevant
    Designing a Low Fidelity Prototype in Figma
    Most relevant
    Learn Figma - UI/UX Design Essential Training
    Most relevant
    The Complete Figma Course – Designing Mobile & Web App...
    Most relevant
    Figma UI UX Design Essentials
    Most relevant
    Figma UI UX Design Advanced
    Most relevant
    UI Design using Material Design 3: Designing a Reminder...
    Most relevant
    Designing User Interfaces and Experiences (UI/UX)
    Most relevant
    Our mission

    OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.

    Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.

    Find this site helpful? Tell a friend about us.

    Affiliate disclosure

    We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.

    Your purchases help us maintain our catalog and keep our servers humming without ads.

    Thank you for supporting OpenCourser.

    © 2016 - 2024 OpenCourser