Unlock Your Design Potential in 2024: Become a Web & Mobile Design Maestro with UI/UX Mastery, Figma, Sketch, and More! with Complete Web & Mobile Design Bundle

Ready to take the design world by storm? In 2024, the demand for skilled designers is skyrocketing, and this course is your ticket to the top. Dive into the latest tools, techniques, and trends with our comprehensive program designed to transform you into a design powerhouse.

Join us on a journey to master the art of web and mobile design, UI/UX principles, Figma, Sketch, and beyond. Here's what awaits you:

• Craft stunning web and mobile projects using cutting-edge tools favored by industry leaders.
• Position yourself for lucrative design careers or flourish as a sought-after freelancer.
• Access 100+ premium assets and design templates to elevate your projects instantly.
• Harness the power of Figma to bring your designs to life, then seamlessly translate them into HTML and CSS websites.
• Cultivate a standout design portfolio curated by experts, setting you apart in the competitive market.
• Explore the intricacies of both web and mobile design, from initial sketches to polished, high-fidelity creations.
• Gain proficiency in designing for diverse devices, employing industry-standard tools for maximum impact.
• Transform your design visions into functional websites using HTML5 and CSS3.
• Acquire insider knowledge and best practices honed over years in the design industry.
• Create professional logos and branding solutions to captivate your audience.
• Navigate the UI/UX landscape with mastery, leveraging the latest industry trends to your advantage.
• Embrace the rare blend of design and web development skills, opening doors to unique career opportunities.

Zero prerequisites required – we guide you every step of the way from novice to master. Prepare to fall in love with design and unlock endless possibilities for your future projects.

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.

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

01 GETTING STARTED – Sketching, Inspiration + Structure

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

02 EXPLORE AND ITERATE – Wireframes, Prototyping, and Feedback

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

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

03 VISUAL DESIGN – Design Theory + Accessibility

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

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

04 DESIGN EXPLORATION – Application Design + Design Systems

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

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 Are Microinteractions Important?

What Is A micro-interaction?

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

05 PUTTING IT ALL TOGETHER – Using our Design System and Hi-Fi prototyping with Figma

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

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

09 PUTTING YOUR WEBSITE ONLINE

This brand new 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.

Step into the future of design with our fully updated course tailored to 2025 standards. Immerse yourself in the latest design methodologies and unleash your creativity with a curriculum meticulously crafted to propel you towards success.

Embark on a hands-on journey from design fundamentals to professional execution, guided by industry experts every step of the way. With a focus on practical skills and real-world applications, you'll transition seamlessly from novice to in-demand designer, equipped to tackle any challenge that comes your way.

This course is your gateway to design excellence if:

• You're a newcomer eager to break into the design world and carve out a thriving freelance career.
• You're a seasoned designer ready to command higher rates and tackle premium projects.
• You're a developer keen on enhancing your design prowess to unlock new career avenues.
• Want to build a successful career in design or freelance in Nigeria's thriving tech scene.
• Seek to enhance their tech skills to compete in Nigeria's competitive job market.
• Aspire to become design leaders and innovators in Nigeria's rapidly evolving tech ecosystem.

Join us and unlock your full design potential. Whether you aspire to launch a freelance empire, land your dream job, or simply master the art of design, our course offers the roadmap to success. Enroll today and embark on a transformative journey towards becoming a design virtuoso. See you in class!