Product design is the process of creating a new product or improving an existing one,

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

Introduction to Technology Project Management

Introduction to Software Architecture and Designs

• Web & Mobile Design Principles + Design vs Web Development

• 01 GETTING STARTED – Sketching, Inspiration + Structure

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

• 02 EXPLORE AND ITERATE – Wireframes, Prototyping and Feedback

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

 Why Is Feedback Important?

 Constructive Feedback

• 03 VISUAL DESIGN – Design Theory + Accessibility

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

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

o 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

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

 What Are Design Patterns?

 Why Are Design Patterns Valuable?
 How To Apply Design Patterns
 Analyzing Design Patterns
 Dissecting And Choosing Design Patterns

o 2. Mobile Design

 Mobile Design Best Practices

o 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

o 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

• 05 PUTTING IT ALL TOGETHER – Using our Design System and Hi-Fi prototyping with
Figma & XD
•
 o 1. 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

o 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 & 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

• PROTOTYING YOUR FINAL DESIGN WITH PROTOPIE

• PRESENTATION OF DESIGNED PROJECTS

• PUTTING YOUR WEBSITE ONLINE

• Introduction to Backend Development, Mysql and NoSQL and APis

• Networking and Growth hackathon.

• Handoff and working with PMP Software and Tools

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

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.

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

Who this course is for:

• 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