Professional Documents
Culture Documents
Product Design UI & UX
Product Design UI & UX
with the goal of meeting the needs of the target audience. A product designer takes
into consideration the user experience, functionality, aesthetics, and cost-
effectiveness of the product. A great Designer is becoming harder and harder to find
and it isn't rare to find designers make N2,000,000+ per month 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, adobe XD and Protopine to show you a full workflow from start to finish.
Our 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 computer training resource on Design skills!
Our 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 and become a better frontend
developer.
Course content
Introduction to Product Design
o 1. Sketching
Introduction To Sketching
The Sketching Process
Sketching User Flows
Sketching Tips
o 2. Inspiration
How to stay inspired
How to find inspiration online
o 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
o 3. User Flows
Getting Ready For This Section
The DOs and DON'Ts
User Flows in Figma — Onboarding
User Flows in Figma — Search
o 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
o 1. 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
o 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
o 3. Getting feedback
o 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
o 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
o 5. Forms + UI Elements
o 6. Accessibility
What Is Accessibility?
Assistive Technologies
Visual Patterns For Accessibility
Tools To Make Your Design Accessible
• 04 DESIGN EXPLORATION – Application Design + Design Systems
o 1. Design Patterns
o 2. Mobile Design
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
• 05 PUTTING IT ALL TOGETHER – Using our Design System and Hi-Fi prototyping with
Figma & XD
•
o 1. Design Systems
o 2. Execution
• 06 FROM FIGMA & XD TO WEBSITE (take a Figma design and convert it to a live
website using HTML and CSS)
• 07 HTML + HTML5 CSS + CSS3 - CSS Basics, CSS Grid, Flexbox, CSS Animations
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.
You will learn design principles and how to handoff to engineer, how to work in under a project
manager onsite and remotely. so that when you are done with the course you will never need to
. 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.
- You are a designer who is looking to charge more for your work
• Anyone who wants to start a Web or Mobile Design business on the side as a freelancer,
or work as a designer at a company
• Web Developers and Mobile Developers wanting to add another valuable skill to their
tool belt
• Anyone who wants to get hired as a Web Designer, Mobile Designer, UI/UX Designer
• Anyone who wants to learn about the latest CSS3 features like Flexbox, CSS Grid and
CSS Variables as well as HTML5