IIRF Online > Design > Web Design > Mobile App Design > Complete Web & Mobile Designer: UI/UX, Figma, +more
Complete Web & Mobile Designer: UI/UX, Figma, +more by Udemy
Become a UX/UI Designer! Master Mobile and Web Design, User Interface + User Experience (UI/UX Design), HTML, and CSS
Course Highlights
- 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)!
Skills you will learn!
Curriculum
11 Topics
Course Outline
Join Our Online Classroom!
Exercise: Meet Your Classmates & Instructor
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
8 Topics
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
2 Topics
How To Stay Inspired
How To Find Inspiration
28 Topics
Resources
Introduction
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
7 Topics
Getting Ready For This Section
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
10 Topics
Getting Ready For This Section
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
10 Topics
Getting Ready For This Section
What Is A Wireframe?
How To Create A Wireframe
What We Will Learn
Figma Check In — Basic Button Component
Figma Check In — Variants
How to Use Our Wireframe Components
Wireframes — Home
Wireframes — Cart
Wireframes — Profile
13 Topics
Getting Ready For This Section
What We Will Learn
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
2 Topics
Why Is Feedback Important?
Constructive Feedback
10 Topics
Getting Ready For This Section
What Is A Grid?
Grid Basics
What We Will Learn
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
15 Topics
Getting Ready For This Section
Serifs
Sans Serifs
Display & Mono
Picking Typefaces
What We Will Learn
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
12 Topics
Getting Ready For This Section
Color Schemes
Important Questions To Ask
Creating Color Palettes
What We Will Learn
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
13 Topics
Getting Ready For This Section
Visual Assets Introduction
What We Will Learn
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
16 Topics
Getting Ready For This Section
What Are Forms + UI Elements?
What We Will Learn
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 Part 1
Project — Registration Flow Part 2
Project — Registration Flow Part 3
6 Topics
Getting Ready For This Section
What Is Accessibility?
Assistive Technologies
Visual Patterns For Accessibility
Tools To Make Your Design Accessible
Visual Patterns For Accessibility Part 2
5 Topics
What Are Design Patterns?
Why Are Design Patterns Valuable?
How To Apply Design Patterns
Analyzing Design Patterns
Dissecting And Choosing Design Patterns
2 Topics
Mobile Design Best Practices Part 1
Mobile Design Best Practices Part 2
10 Topics
Getting Ready For This Section
What We Will Learn
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
16 Topics
Getting Ready For This Section
The Importance Of Motion
What Is A Microinteraction?
Why Microinteractions Are Important?
What We Will Learn
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
12 Topics
Getting Ready For This Section
What We Will Learn
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
15 Topics
Getting Ready For This Section
What We Will Learn
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
8 Topics
Getting Ready For This Section
The Product Alignment Canvas
Project Goals
Target Users
User Journey Map
Risky Assumptions
What is a User Story Map?
Creating a User Story Map
9 Topics
Is Bruno Happy?
Project Handoff
Next Step: Project Handoff
Thank You!
Learning Guideline
Become An Alumni
LinkedIn Endorsements
Course Review
The Final Challenge
4 Topics
Getting Ready For This Section
How To Export And Place Designs
Content For Your Portfolio
Where To Host Your Web Portfolio
4 Topics
Quick Note: Upcoming Videos
Initial Setup - Figma Handoff
Build UI - Adding Image Assets
Build UI - Styling Image Assets
10 Topics
Quick Note: Upcoming Videos
Browsing the Web
Breaking Google
Exercise: Break Google Yourself
The Internet Backbone
Traceroute
Exercise: Running traceroute
DEVELOPER FUNDAMENTALS: I
What Does A Developer Do?
Web Developer Monthly
6 Topics
WWW vs Internet
HTML CSS Javascript
DEVELOPER FUNDAMENTALS: II
Developer History
Exercise: Adding CSS and JavaScript to Tim's website
Optional Resource: More About the History of the Web
21 Topics
Build Your First Website
Resources: Your Text Editor
DEVELOPER FUNDAMENTALS: III
Quick Note About w3schools
How To Ask Questions
HTML Tags
HTML Tags 2
Self Closing HTML Tags
Anchor Tag
Q&A: index.html
Q&A: Relative vs Absolute Path
HTML Forms
HTML Forms 2
Submitting A Form
HTML Tags 3
HTML vs HTML 5
Copy A Website
HTML Challenge
HTML Lesson Files
Exercise: HTML Quiz
Optional Exercise: More HTML
23 Topics
Exercise Files: Code-Along
Your First CSS
CSS Properties
CSS Selectors
Optional Exercise: CSS Selectors
Text and Font
Images In CSS
Box Model
px vs em vs rem
Optional: PX EM REM % VW and VH
Exercise: CSS Quiz
Critical Render Path
Exercise File: Code-Along Images
Flexbox
Optional Exercise: Flexbox Froggy
CSS 3
Optional Exercise: Mastering Transitions and Transforms
Responsive UI
Image Gallery Files
Exercise: Robot Animation
Exercise: Robot Animation Starter Files
Solution: Robot Animation
Optional Exercise: CSS
28 Topics
Evolving Technology
Bootstrap Introduction
Quick Note: Upcoming Lesson
Bootstrap
Bootstrap 5 Update
Exercise: Changing Versions
Fast and the Furious Bootstrap
Exercise: Fast and the Furious Bootstrap Challenge
Bootstrap Grid
Free Resources For Our Project
Exercise: Startup Landing Page
Exercise: Startup Landing Page 2
Exercise: Startup Landing Page 3
Quick Note: The hr tag
Exercise: Startup Landing Page 4
Bootstrap 5.2+ Button Hover Update
Exercise: Startup Landing Page 5
Quick Note: Text Not Centered?
Quick Note: Mailchimp
Exercise: Adding Email Subscribe Form With MailChimp
Quick Note: Upcoming Videos
Exercise: Putting Your Website Online
Exercise: Putting Your Website Online 2
Quick Note: Upcoming Video
DEVELOPER FUNDAMENTALS: IV
Using Templates
Resources for FREE Templates
Startup Landing Pages by Students
17 Topics
Section Overview
CSS Grid vs Flexbox vs Bootstrap
Quick Note: grid-gap to gap
CSS Grid 1
CSS Grid 2
CSS Grid 3
CSS Grid 4
CSS Grid 5
Optional Exercise: CSS Grid
Exercise: CSS Layout
Solution: Navigation Bar
Solution: Navigation Bar 2
Solution: Cover
Solution: Project Grid + Footer
Quick Note: Upcoming Video
Solution: Prettify
The Truth About CSS
1 Topic
Special Bonus Lecture
Complete Web & Mobile Designer: UI/UX, Figma, +more
Thank You!
Your review has been submitted successfully.