UI/UX Design Course | Figma, Web & App Design – Jains Computer

Learn UI Design, UX Research, Wireframing, Prototyping, Figma & Professional Website and App Design Skills

Learn UI/UX design, Figma, wireframing, prototyping, responsive design and user research with practical website and mobile app projects at Jains Computer.

Start your UI/UX Design learning journey with Jains Computer and build the skills to design user-friendly websites, mobile apps and digital products.

UI/UX Design Course | Figma, Web & App Design – Jains Computer

What You'll Learn

Understand UI and UX design fundamentals
Learn the difference between UI design and UX design
Understand user-centered design principles
Learn design thinking and problem-solving techniques
Conduct basic user research and competitor analysis
Create user personas and user journey maps
Understand information architecture
Create website and mobile app wireframes
Design professional user interfaces
Learn Figma from basic to advanced levels
Create interactive prototypes
Understand typography, colors and visual hierarchy
Apply spacing, alignment and layout principles
Design responsive website interfaces
Create mobile app designs for different screen sizes
Build reusable components and design systems
Understand usability testing and user feedback
Improve accessibility and user experience
Design dashboards, landing pages and app screens
Collaborate with developers and product teams
Build a professional UI/UX design portfolio
Practice real-world website and mobile app design projects
Develop creative thinking and problem-solving skills
COURSE INTRODUCTION

UI/UX Design Course Syllabus

Twenty-Two Modules

01.What Is UI Design?
02.What Is UX Design?
03.Difference Between UI and UX
04.Importance of UI/UX in Digital Products
05.Role of a UI/UX Designer
06.Responsibilities of a UI Designer
07.Responsibilities of a UX Designer
08.User-Centered Design Fundamentals
09.Understanding Digital Products
10.Website and Mobile App Design Basics
11.UI/UX Design Process
12.Introduction to Design Thinking
13.Common UI/UX Design Terminology
14.Examples of Good and Bad Design
15.Understanding User Needs
16.Introduction to Design Tools
01.Principles of Good Design
02.Visual Hierarchy
03.Balance and Alignment
04.Contrast and Emphasis
05.Proximity and Grouping
06.Repetition and Consistency
07.White Space and Negative Space
08.Grid Systems
09.Layout Fundamentals
10.Proportion and Scale
11.Visual Flow
12.Gestalt Principles
13.Consistency in Interface Design
14.Creating Clear Visual Structures
15.Common Design Mistakes
16.Analyzing Professional Interfaces
01.Introduction to Color Theory
02.Primary, Secondary and Tertiary Colors
03.Color Wheel and Color Relationships
04.Complementary and Analogous Colors
05.Creating Color Palettes
06.Understanding Color Psychology
07.Brand Colors and UI Colors
08.Background and Foreground Contrast
09.Typography Fundamentals
10.Serif and Sans-Serif Fonts
11.Font Pairing
12.Font Size and Weight
13.Line Height and Letter Spacing
14.Heading and Body Text Hierarchy
15.Readability and Legibility
16.Creating Typography Systems
17.Color and Typography Accessibility
01.What Is Figma?
02.Benefits of Using Figma
03.Creating a Figma Account
04.Understanding the Figma Interface
05.Creating and Managing Design Files
06.Frames and Pages
07.Shapes and Basic Tools
08.Layers and Groups
09.Text Tools
10.Images and Assets
11.Alignment and Distribution
12.Using Grids and Layout Guides
13.Working with Properties
14.Creating Reusable Design Elements
15.File Organization
16.Sharing Design Files
17.Collaboration and Comments
18.Essential Figma Keyboard Shortcuts
01.Introduction to UX Research
02.Understanding User Problems
03.Identifying Target Audiences
04.User Research Methods
05.User Interviews
06.Surveys and Questionnaires
07.Observational Research
08.Competitor Analysis
09.Analyzing Existing Products
10.Gathering User Requirements
11.Creating User Personas
12.Understanding User Goals
13.Identifying User Pain Points
14.Empathy Mapping
15.User Journey Mapping
16.Organizing Research Findings
17.Converting Insights into Design Decisions
01.What Is Information Architecture?
02.Organizing Website Content
03.Structuring Mobile App Content
04.Website Navigation Fundamentals
05.Creating Sitemap Structures
06.Categories and Content Hierarchy
07.Menu Design
08.Navigation Patterns
09.User Flow Fundamentals
10.Task Flow Creation
11.Mapping User Actions
12.User Flow Diagrams
13.Login and Registration Flows
14.E-Commerce Purchase Flows
15.Form Submission Flows
16.Reducing Unnecessary Steps
17.Practical Information Architecture Exercises
01.What Is a Wireframe?
02.Importance of Wireframing
03.Low-Fidelity Wireframes
04.Mid-Fidelity Wireframes
05.High-Fidelity Wireframes
06.Website Wireframe Creation
07.Mobile App Wireframe Creation
08.Layout Planning
09.Header and Footer Structures
10.Navigation Placement
11.Content Blocks and Sections
12.Button and Form Placement
13.Wireframing Landing Pages
14.Wireframing Dashboard Interfaces
15.Wireframe Review and Improvements
16.Converting User Flows into Wireframes
17.Practical Wireframing Exercises
01.Introduction to User Interface Design
02.Designing Website Headers
03.Navigation Bars and Menus
04.Buttons and Call-to-Action Elements
05.Input Fields and Forms
06.Cards and Content Blocks
07.Tabs and Accordions
08.Modals and Dialog Boxes
09.Dropdown Menus
10.Tooltips and Notifications
11.Icons and Icon Systems
12.Search Bars and Filters
13.Tables and Data Lists
14.Pagination Components
15.Empty, Loading and Error States
16.Designing Consistent Interfaces
17.Practical UI Component Exercises
01.Introduction to Responsive Design
02.Desktop, Tablet and Mobile Layouts
03.Responsive Grid Systems
04.Mobile-First Design
05.Breakpoints and Screen Sizes
06.Flexible Layouts
07.Responsive Typography
08.Responsive Navigation
09.Adapting Images and Visual Elements
10.Designing Responsive Cards
11.Responsive Forms and Buttons
12.Website Landing Page Design
13.Cross-Device Consistency
14.Understanding Touch-Friendly Interfaces
15.Responsive Dashboard Design
16.Common Responsive Design Mistakes
17.Practical Responsive Website Projects
01.Mobile App Design Fundamentals
02.Android and iOS Interface Considerations
03.Mobile Navigation Patterns
04.Bottom Navigation Bars
05.App Onboarding Screens
06.Login and Sign-Up Screens
07.Home Screen Design
08.Profile and Settings Screens
09.Mobile Forms and Input Fields
10.Touch Targets and Gestures
11.Mobile App User Flows
12.Notifications and Feedback
13.Error and Empty States
14.Mobile Accessibility
15.Designing E-Commerce Apps
16.Designing Productivity Apps
17.Mobile App Prototyping
18.Practical Mobile UI Projects
01.Introduction to Components in Figma
02.Creating Reusable Components
03.Main Components and Instances
04.Component Properties
05.Variants and States
06.Auto Layout Fundamentals
07.Spacing and Padding
08.Responsive Component Behavior
09.Constraints and Resizing
10.Reusable Buttons and Form Elements
11.Creating Component Libraries
12.Color Styles and Variables
13.Typography Styles
14.Design Tokens Fundamentals
15.Building a Consistent Design System
16.Documentation and Naming Conventions
17.Maintaining Design Consistency
18.Practical Design System Projects
01.What Is Prototyping?
02.Benefits of Interactive Prototypes
03.Low-Fidelity Prototypes
04.High-Fidelity Prototypes
05.Creating Connections Between Screens
06.Interactive Buttons and Links
07.Navigation Interactions
08.Overlays and Modal Interactions
09.Smart Animate Fundamentals
10.Transitions and Animations
11.Microinteractions
12.Hover and Press States
13.Form Interaction Design
14.Scrollable Frames
15.Simulating User Journeys
16.Testing Interactive Prototypes
17.Sharing Prototypes for Feedback
18.Practical Prototyping Exercises
01.Introduction to UX Writing
02.Importance of Clear Interface Text
03.Writing Button Labels
04.Form Labels and Instructions
05.Error Messages
06.Success Messages
07.Empty-State Messages
08.Onboarding Content
09.Navigation Labels
10.Confirmation Messages
11.Writing Helpful Tooltips
12.Creating Clear Call-to-Action Text
13.Maintaining a Consistent Tone
14.Reducing User Confusion
15.Writing Accessible Interface Content
16.Practical UX Writing Exercises
01.What Is Usability Testing?
02.Importance of User Feedback
03.Planning Usability Tests
04.Defining Testing Objectives
05.Preparing Test Scenarios
06.Moderated and Unmoderated Testing
07.Observing User Behavior
08.Identifying Usability Problems
09.Collecting User Feedback
10.Task Completion and Error Analysis
11.Basic Usability Metrics
12.Heuristic Evaluation
13.Nielsen's Usability Heuristics
14.Prioritizing Design Issues
15.Improving Designs Through Testing
16.Comparing Before-and-After Designs
17.Practical Usability Testing Exercises
01.Introduction to Accessibility
02.Understanding Inclusive Design
03.Designing for Different User Needs
04.Color Contrast and Readability
05.Accessible Typography
06.Keyboard Navigation Fundamentals
07.Clear Focus States
08.Screen Reader Awareness
09.Accessible Form Labels
10.Designing Helpful Error Messages
11.Touch Target Considerations
12.Avoiding Color-Only Information
13.Clear Navigation Structures
14.Accessible Icons and Controls
15.Accessibility Testing Basics
16.Understanding WCAG Fundamentals
17.Practical Accessibility Improvements
01.Introduction to E-Commerce UX
02.Understanding Online Shopping Behavior
03.Designing E-Commerce Homepages
04.Product Listing Pages
05.Product Detail Pages
06.Search and Filter Interfaces
07.Shopping Cart Design
08.Checkout User Flows
09.Payment and Order Confirmation Screens
10.Account and Profile Interfaces
11.Designing Trust Signals
12.Improving Product Discoverability
13.Reducing Checkout Friction
14.Designing Business Websites
15.Service Landing Page Design
16.Contact and Lead Generation Forms
17.Conversion-Focused UI Design
18.Practical E-Commerce Design Project
01.Introduction to Dashboard UX
02.Understanding Dashboard Users
03.Identifying Key Performance Indicators
04.Information Hierarchy for Dashboards
05.Designing Summary Cards
06.Tables and Data Lists
07.Charts and Graphs
08.Filters and Date Selectors
09.Search and Sorting Interfaces
10.Data Density and Readability
11.Designing Admin Panels
12.Financial Dashboard Design
13.Sales Dashboard Design
14.Analytics Dashboard Design
15.Empty, Loading and Error States
16.Responsive Dashboard Layouts
17.Practical Dashboard Design Project
01.Advanced Frame Management
02.Efficient Layer Organization
03.Component Libraries
04.Advanced Auto Layout Techniques
05.Component Variants
06.Variables and Reusable Properties
07.Design File Organization
08.Version History
09.Team Libraries
10.Collaboration and Comments
11.Developer Handoff Fundamentals
12.Inspecting Design Properties
13.Exporting Images and Assets
14.SVG and Image Export Basics
15.Preparing Files for Development
16.Design Documentation
17.Managing Feedback and Revisions
18.Professional Figma Workflow
01.Importance of a UI/UX Portfolio
02.Selecting Portfolio Projects
03.Understanding Case Study Structure
04.Defining the Problem Statement
05.Explaining Research Findings
06.Presenting User Personas
07.Documenting User Flows
08.Showing Wireframes and Iterations
09.Presenting Final UI Designs
10.Explaining Design Decisions
11.Demonstrating Prototype Interactions
12.Documenting Usability Testing
13.Showing Design Improvements
14.Explaining Project Outcomes Honestly
15.Creating Portfolio Presentation Slides
16.Designing a Personal Portfolio Website
17.Organizing Projects Professionally
18.Presenting Work to Recruiters and Clients
01.Website Landing Page Design
02.Responsive Business Website Design
03.Mobile App Login and Registration Screens
04.E-Commerce Mobile App Design
05.Shopping Cart and Checkout Flow
06.Admin Dashboard Design
07.Finance App Interface
08.Travel Booking App Design
09.Food Delivery App Design
10.Education Platform UI Design
11.User Research and Persona Creation
12.User Journey Mapping
13.Low-Fidelity Wireframe Creation
14.High-Fidelity Interface Design
15.Interactive Prototype Development
16.Usability Testing and Design Improvements
17.Creating a Reusable Design System
18.Presenting a Complete Design Project
01.Understanding UI/UX Career Roles
02.UI Designer vs UX Designer
03.Product Designer Fundamentals
04.Understanding Design Team Workflows
05.Working with Developers
06.Communicating Design Decisions
07.Receiving and Applying Feedback
08.Managing Design Revisions
09.Client Communication Basics
10.Project Planning and Time Management
11.Preparing a UI/UX Design Resume
12.Building a Professional Portfolio
13.Preparing for UI/UX Interviews
14.Common UI/UX Interview Questions
15.Presenting Design Case Studies
16.Freelancing Fundamentals
17.Understanding Design Briefs
18.Estimating Project Scope
19.Professional Design Presentation
20.Continuous Learning and Skill Development
01.Project 1 – User Research and Persona Creation
02.Project 2 – Website Wireframe Design
03.Project 3 – Mobile App UI Design
04.Project 4 – Interactive Figma Prototype
05.Project 5 – E-Commerce Website or App Design
06.Project 6 – Dashboard UI Design
07.Project 7 – Usability Testing and Improvements

Final Course Project – Complete UI/UX Design Case Study

Develop a complete digital product design from research to final prototype

Students develop a complete digital product design from research to final prototype. The project includes problem definition, user research, personas, user flows, wireframes, high-fidelity UI screens, reusable components, interactive prototyping, usability evaluation and a professional portfolio case study.

User Research & Personas
User Research & Personas
Website Wireframe Design
Website Wireframe Design
Mobile App UI Design
Mobile App UI Design
Interactive Figma Prototype
Interactive Figma Prototype
E-Commerce App Design
E-Commerce App Design
Dashboard UI Design
Dashboard UI Design
Usability Testing & Feedback
Usability Testing & Feedback
Complete UI/UX Case Study
Complete UI/UX Case Study

Real-world activities include user research and personas, website wireframes, mobile app UI design, interactive Figma prototypes, e-commerce interfaces, dashboard design, and usability testing.

Who Should Join

Who This Course Is For

This course is designed for students, beginners, creative professionals, and aspiring designers looking to master UI/UX design and Figma:

Students and college learners
Beginners interested in UI/UX design
Aspiring UI designers
Aspiring UX designers
Students and college learners
Beginners interested in UI/UX design
Aspiring UI designers
Aspiring UX designers
Students and college learners
Beginners interested in UI/UX design
Aspiring UI designers
Aspiring UX designers
Students and college learners
Beginners interested in UI/UX design
Aspiring UI designers
Aspiring UX designers
Mobile app design beginners
Creative professionals
Freelancers
Entrepreneurs and startup founders
Marketing professionals interested in landing page design
Mobile app design beginners
Creative professionals
Freelancers
Entrepreneurs and startup founders
Marketing professionals interested in landing page design
Mobile app design beginners
Creative professionals
Freelancers
Entrepreneurs and startup founders
Marketing professionals interested in landing page design
Mobile app design beginners
Creative professionals
Freelancers
Entrepreneurs and startup founders
Marketing professionals interested in landing page design
Professionals looking to change careers
Anyone interested in website and mobile app design
Graphic designers who want to learn digital product design
Web designers
Website developers
Professionals looking to change careers
Anyone interested in website and mobile app design
Graphic designers who want to learn digital product design
Web designers
Website developers
Professionals looking to change careers
Anyone interested in website and mobile app design
Graphic designers who want to learn digital product design
Web designers
Website developers
Professionals looking to change careers
Anyone interested in website and mobile app design
Graphic designers who want to learn digital product design
Web designers
Website developers

Requirements

No previous UI/UX design or advanced coding knowledge required.

You only need:

A computer or laptop with internet connection
A computer or laptop with internet connection
Basic computer knowledge and understanding of websites/apps
Basic computer knowledge and understanding of websites/apps
Interest in design, creativity, and willingness to practice
Interest in design, creativity, and willingness to practice
No previous UI/UX design or coding experience required
No previous UI/UX design or coding experience required

No previous UI/UX design or advanced coding knowledge required. Regular practice and project work are key to mastering the skills.

By the End of This Course

Understand the complete UI/UX design process, from identifying user problems and conducting basic research to creating wireframes, designing user interfaces and building interactive prototypes.

You will master essential UI/UX design disciplines and Figma capabilities:

UX Research
Wireframing
Figma
Visual Design
Mobile App UI
Responsive Web
Design Systems
Prototyping
Case Studies

Through real-world projects, you will develop job-oriented skills relevant to UI Designer, UX Designer, Junior Product Designer and other entry-level digital design roles. Start your UI/UX Design learning journey with Jains Computer and build the skills to design user-friendly websites, mobile apps and digital products.