Complete Web & Mobile Designer UIUX, Figma, +more
Transform your creative ideas into professional visual experiences. Learn the tools, techniques, and psychological principles behind great design to b...
Rating
5 /5
Enrolled
0
Community
0 Q&A
Course Objectives
Master core concepts through structured step-by-step guidance.
Build real-world projects that you can feature in your portfolio.
Understand industry-standard best practices and advanced methods.
Acquire practical skills designed to help you succeed immediately.
What You'll Learn
Building a world-class Design Portfolio to attract high-end clients.
Exploring Generative Art and AI-Assisted Design tools.
Understanding Design Systems and Atomic Design methodology.
Understanding Logo Design and Brand Guideline creation.
Conducting Professional User Research and Usability Testing.
Understanding Print Design and Production processes.
Understanding color theory, typography, and visual hierarchy.
Learning to present and defend design decisions to clients.
Creating high-fidelity prototypes with Figma and Adobe XD.
Implementing responsive design for web and mobile platforms.
Learning Motion Graphics and Animation for interfaces.
Learning Packaging Design for physical consumer goods.
Mastering UI/UX design principles and user-centered workflows.
Mastering Photo Manipulation and Retouching (Photoshop).
Mastering Graphic Design for branding and social media.
Mastering Illustration and Vector art creation.
Learning 3D modeling and rendering fundamentals.
Mastering Icon Design and Custom Typography.
Developing a unique and cohesive visual style.
Implementing Accessible Design (WCAG) for all users.
Course Curriculum
31 Sections • 311 Lessons • 27h 39m Total Length
002 Introduction To Sketching
Locked003 The Sketching Process
Locked004 Sketching User Flows
Locked005 Sketching User Flows 2
Locked006 Sketching User Flows 3
Locked007 Sketching User Flows 4
Locked008 Sketching Tips
Locked001 How To Stay Inspired
Locked002 How To Find Inspiration
Locked002 Introduction
Locked003 Plans and Signup
Locked004 Where to Use Figma
Locked005 Figma UI — Structure
Locked006 Figma UI — Files
Locked007 Figma UI — Toolbar
Locked008 Figma UI — Left Sidebar
Locked009 Figma UI — Right Sidebar
Locked010 Shapes and Tools — Frames
Locked011 Shapes and Tools — Groups
Locked012 Shapes and Tools — Basic Shapes and Boolean Operations
Locked013 Designing in Figma — Images
Locked014 Designing in Figma — Getting Started with Text
Locked015 Designing in Figma — Constraints
Locked016 Designing in Figma — Using Auto Layout
Locked017 Designing in Figma — Auto Layout Properties
Locked018 Resources and Collaboration — Community Files
Locked019 Resources and Collaboration — Community Plugins
Locked020 Resources and Collaboration — Sharing and Comments
Locked021 Project — What We Are Going to Build
Locked022 Project — Creating a Logo Using Basic Shapes
Locked023 Project — Auto Layout Buttons
Locked024 Project — Creating a Responsive Navigation
Locked025 Project — Responsive Text
Locked026 Project — Imagery and Gradients
Locked027 Project — Strokes and Shapes
Locked028 Project — Layout and Responsiveness
Locked002 User Flows Explained
Locked003 The DOs and DON'Ts
Locked004 What We Are Going To Build
Locked005 Reusable User Flow Assets
Locked006 User Flows in Figma — Onboarding
Locked007 User Flows in Figma — Search
Locked002 Introduction To Sitemaps
Locked003 Creating A Basic Sitemap
Locked004 What We Will Learn
Locked005 Reusable Sitemap Assets
Locked006 Figma Check In — Basic Components and Variants
Locked007 Sitemaps in Figma — The Top Layer
Locked008 Sitemaps in Figma — Digging Deeper
Locked009 Sitemaps in Figma — Digging Deeper Cont
Locked010 Tips for Creating Great Sitemaps
Locked002 What Is A Wireframe
Locked003 How To Create A Wireframe
Locked004 What We Will Learn
Locked005 Figma Check In — Basic Button Component
Locked006 Figma Check In — Variants
Locked007 How to Use Our Wireframe Components
Locked008 Wireframes — Home
Locked009 Wireframes — Cart
Locked010 Wireframes — Profile
Locked002 What We Will Learn
Locked003 Figma Check In — Prototyping in Figma
Locked004 Prototyping in Figma — Flows and Starting Points
Locked005 Prototyping in Figma — Connections
Locked006 Prototyping in Figma — Interactions
Locked007 Prototyping in Figma — Animations
Locked008 Prototyping in Figma — Prototype Settings
Locked009 Prototyping in Figma — Prototype Presentation
Locked010 Project — Navigation
Locked011 Project — Removing an Item from Your Wishlist
Locked012 Project — Finding a Product
Locked013 Exercise Imposter Syndrome
Locked001 Why Is Feedback Important
Locked002 Constructive Feedback
Locked002 What Is A Grid
Locked003 Grid Basics
Locked004 What We Will Learn
Locked005 Figma Check In — Fixed and Fluid Grids
Locked006 Figma Check In — Breakpoints
Locked007 Figma Check In — Grid Style
Locked008 Project — Mobile Layout Grid
Locked009 Project — Desktop Layout Grids
Locked010 Simple Rules to Follow
Locked002 Serifs
Locked003 Sans Serifs
Locked004 Display & Mono
Locked005 Picking Typefaces
Locked006 What We Will Learn
Locked007 Figma Check In — Text Properties
Locked008 Exercise — Elevating a Brand
Locked009 Exercise — Typeface Scenarios
Locked010 Exercise — Google Fonts
Locked011 Project — Typeface Exploration
Locked012 Project — Pairing Font Families
Locked013 Project — Headings, Body and Labels
Locked014 Project — Typeface System
Locked015 Figma Check In — Text Styles
Locked002 Color Schemes
Locked003 Important Questions To Ask
Locked004 Creating Color Palettes
Locked005 What We Will Learn
Locked006 Figma Check In — Paints
Locked007 Exercise — Expanding Upon a Strict Color Palette
Locked008 Exercise — Creating a Color Palette
Locked009 Figma Check In — Color Styles
Locked010 Exercise — Using Color Styles
Locked011 Project — Primary and Neutrals
Locked012 Project — Accents
Locked002 Visual Assets Introduction
Locked003 What We Will Learn
Locked004 Figma Check In — Image Plugins
Locked005 Figma Check In — Image Styles
Locked006 Figma Check In — Masks
Locked007 Exercise — Image Exploration
Locked008 Exercise — Text and Imagery Working Together
Locked009 Figma Check In — Illustration Plugins
Locked010 Exercise — Adding illustrations to your designs
Locked011 Figma Check In — Icon Plugins
Locked012 Figma Check In — Pen Tool
Locked013 Exercise — Custom Icons with the Pen Tool
Locked002 What Are Forms + UI Elements
Locked003 What We Will Learn
Locked004 Best Practices — Forms
Locked005 Best Practices — Basic and Advanced Inputs
Locked006 Best Practices — Inputs
Locked007 Best Practices — Buttons
Locked008 Figma Check In — Component Properties
Locked009 Properties vs. Variants
Locked010 Figma Check In — Button Component Properties
Locked011 Figma Check In — Button Variants
Locked012 Figma Check In — Combining Components
Locked013 Figma Check In — Form Component Possibilities
Locked014 Project — Registration Flow Part 1
Locked015 Project — Registration Flow Part 2
Locked016 Project — Registration Flow Part 3
Locked002 What Is Accessibility
Locked003 Assistive Technologies
Locked004 Visual Patterns For Accessibility
Locked005 Tools To Make Your Design Accessible
Locked006 Visual Patterns For Accessibility Part 2
Locked001 What Are Design Patterns
Locked002 Why Are Design Patterns Valuable
Locked003 How To Apply Design Patterns
Locked004 Analyzing Design Patterns
Locked005 Dissecting And Choosing Design Patterns
Locked001 Mobile Design Best Practices Part 1
Locked002 Mobile Design Best Practices Part 2
Locked002 What We Will Learn
Locked003 Design Fidelity
Locked004 Visual Exploration — Navigation
Locked005 Visual Exploration — Buttons
Locked006 Figma Check In — Effect Styles
Locked007 Visual Exploration — Product Cards
Locked008 Visual Exploration — Text Cards
Locked009 Screen Design — Home
Locked010 Screen Design — Product Page
Locked002 The Importance Of Motion
Locked003 What Is A Microinteraction
Locked004 Why Microinteractions Are Important
Locked005 What We Will Learn
Locked006 Figma Check In — Intro to Smart Animate
Locked007 Figma Check In — Smart Animate Properties
Locked008 Exercise — Parallax
Locked009 Exercise — New Message
Locked010 Exercise — Overlays
Locked011 Figma Check In — Interactive Components
Locked012 Exercise — Interactive Buttons
Locked013 Project — Parallax Welcome Screen
Locked014 Project — Drag Onboarding
Locked015 Project — Cart Overlay
Locked016 Project — Button Microinteraction
Locked002 What We Will Learn
Locked003 Foundational Styles and Components vs. Product Specific Components
Locked004 Building Fidelity and Organizing Potential Components and Styles
Locked005 Foundational Styles and Components
Locked006 Components — Buttons
Locked007 Components — Cards
Locked008 Components — Headers
Locked009 Components — Inputs
Locked010 Components — List Items
Locked011 Components — Navigation
Locked012 Components — Misc. Elements
Locked002 What We Will Learn
Locked003 Working Towards Our Final Designs
Locked004 Execution — Introduction Screen
Locked005 Execution — Onboarding Screens
Locked006 Execution — Registration Screens
Locked007 Execution — Home Screen
Locked008 Execution — Wishlist Screens
Locked009 Execution — Profile Screen
Locked010 Execution — Cart and Checkout
Locked011 Prototypes — Registration
Locked012 Prototypes — Adding to Cart
Locked013 Prototypes — Checkout
Locked014 Prototypes — Lottie Files Plugin
Locked015 Prototypes — Search and Filters
Locked002 The Product Alignment Canvas
Locked003 Project Goals
Locked004 Target Users
Locked005 User Journey Map
Locked006 Risky Assumptions
Locked007 What is a User Story Map
Locked008 Creating a User Story Map
Locked001 Is Bruno Happy
Locked002 Project Handoff
Locked004 Thank You!
Locked002 How To Export And Place Designs
Locked003 Content For Your Portfolio
Locked004 Where To Host Your Web Portfolio
Locked002 template splash page
Locked002 Initial Setup Figma Handoff
Locked003 Build UI Adding Image Assets
Locked004 Build UI Styling Image Assets
Lockedexternal links
Locked002 Browsing the Web
Locked003 Breaking Google
Locked005 The Internet Backbone
Locked006 Traceroute
Locked008 DEVELOPER FUNDAMENTALS I
Locked009 What Does A Developer Do
Lockedexternal links
Locked001 WWW vs Internet
Locked002 HTML, CSS, Javascript
Locked003 DEVELOPER FUNDAMENTALS II
Locked004 Developer History
Lockedexternal links
Locked001 Build Your First Website
Locked003 DEVELOPER FUNDAMENTALS III
Locked006 HTML Tags
Locked007 HTML Tags 2
Locked008 Self Closing HTML Tags
Locked009 Anchor Tag
Locked010 Q&A index.html
Locked011 Q&A Relative vs Absolute Path
Locked012 HTML Forms
Locked013 HTML Forms 2
Locked014 Submitting A Form
Locked015 HTML Tags 3
Locked016 HTML vs HTML 5
Locked017 Copy A Website
Locked018 HTML Challenge
Locked019 html files
Locked001 project files
Locked002 Your First CSS
Locked003 CSS Properties
Locked004 CSS Selectors
Locked004 CSS Cheat Sheet.txt
Locked006 Text and Font
Locked007 Images In CSS
Locked008 Box Model
Locked009 px vs em vs rem
Locked012 Critical Render Path
Locked013 picture links.txt
Locked014 Flexbox
Locked014 picture links.txt
Locked016 CSS 3
Locked018 Responsive UI
Locked019 image gallery
Locked020 Exercise Robot Animation
Locked020 robot
Locked021 robot
Locked022 robotfriend
Lockedexternal links
Locked001 Evolving Technology
Locked002 Bootstrap Introduction
Locked004 Bootstrap
Locked005 Bootstrap 5 Update
Locked007 Fast and the Furious Bootstrap
Locked009 Bootstrap Grid
Locked011 Exercise Startup Landing Page
Locked011 startup files start
Locked012 Exercise Startup Landing Page 2
Locked013 Exercise Startup Landing Page 3
Locked015 Exercise Startup Landing Page 4
Locked017 Exercise Startup Landing Page 5
Locked017 startup of the year master
Locked020 Exercise Adding Email Subscribe Form With MailChimp
Locked022 Exercise Putting Your Website Online
Locked023 Exercise Putting Your Website Online 2
Locked025 DEVELOPER FUNDAMENTALS IV
Locked026 Using Templates
Lockedexternal links
Locked001 Section Overview
Locked002 CSS Grid vs Flexbox vs Bootstrap
Locked004 CSS Grid 1
Locked004 files
Locked005 CSS Grid 2
Locked006 CSS Grid 3
Locked007 CSS Grid 4
Locked008 CSS Grid 5
Locked008 files 1
Locked010 Exercise CSS Layout
Locked010 project start
Locked011 Solution Navigation Bar
Locked012 Solution Navigation Bar 2
Locked013 Solution Cover
Locked014 project layout
Locked014 Solution Project Grid + Footer
Locked016 project prettify
Locked016 Solution Prettify
Locked017 The Truth About CSS
Lockedexternal links
LockedCourse Description
Why This Course is Different
Comprehensive training in industry-standard software. Psychology-based approach to user interaction and behavior. Real-world project briefs that simulate professional agency work. Personalized portfolio reviews and career placement support.
A Comprehensive Learning Journey
From the very first module, you'll be immersed in practical, hands-on activities designed to bridge the gap between knowledge and action. We cover everything from foundational principles to advanced techniques that even many industry veterans overlook. By the end of this course, you won't just 'know' the subject; you will have the confidence and the evidence (through your projects) to prove your mastery to yourself and to the world at large. Welcome to the elite level of performance.
Requirements
- No prior drawing or design experience required.
- Creative curiosity and an eye for detail.
- A computer capable of running design software (e.g. Figma).
- Openness to receiving and applying constructive feedback.
Target Audience
- Aspiring UI/UX and Graphic Designers.
- Traditional artists looking to transition into digital design.
- Entrepreneurs wanting to design their own brand assets.
- Developers wanting to improve their front-end design skills.
Feedback Reviews
Course Price
This Course Includes:
Secure Payment Processing: SSL-AES256
Secured
Eternal
Flash
Total Price