Professional UX/UI Design
Update Course Outline 2024
Total Class: 46 Class Duration: 2 Hours
About the Course:
"The Professional UX/UI Course offers a comprehensive blend of theory and hands-on
experience, providing a solid foundation for aspiring designers and seasoned professionals
alike. Covering key aspects such as user research, information architecture, wireframing,
prototyping, and usability testing, this course is designed by industry experts to align with the
latest trends and best practices in UX/UI design. Participants will engage in practical
projects, gaining proficiency in industry-standard tools and methodologies. Whether you're a
beginner entering the field or a professional seeking to elevate your skills, this program
ensures a holistic and cutting-edge approach to UX/UI, fostering creativity and critical
thinking for success in the ever-evolving digital landscape."
Class Information:
Sl. No Topic Name Number of Class
01 Fundamental & UI Principle 02
02 User Experience (UX) 10
Adobe XD 02
03 User Interface (UI)
Figma 15
04 Case Study 06
05 Marketplace 05
06 Design Task & Networking 03
07 Exam 03
Total Classes 46
Project Information:
Sl. No Topic Name Number of Class
01 Case Study 03
02 User Interface Design 16
Software Taught:
Course Prerequisite:
• Only Computer Basic Skills
• Computer / Laptop
• Internet Connection
Career Opportunities:
A career in UX/UI design presents exciting opportunities across various industries, as
organizations increasingly recognize the importance of delivering exceptional user
experiences. Professionals in this field can explore roles such as:
• UX/UI Designer
• UI Designer
• App UI Designer
• UX Designer
• UX Researcher
• Brand UI Designer
What you will get from this course:
1. UX Design 11. Website Design
2. UI Design 12. Mobile App Design
3. UX Law 13. Dashboard Design
4. User Research 14. Admin Panel
Techniques 15. Design sprint Case
5. User-Centered Design Study
Process 16. Team Project
6. UX Audit Research 17. Freelancing
7. Design Process Marketplaces
8. How to Apply AI in 18. Portfolio build
research and design 19. Case Study Design
9. Design System and 20. Job Preparation
Style Guide
10. Color Theory in UI
PART - A
User Experience
Class 01: Understanding Design thinking & UX Process
● What is UX
● The 5 Principle of UX
● What is UX Process
● 7 Factor of UX Design
HW: Submit reports (Mentor must Provide some UX blog)
Class 02: Brainstorming and UX Law
● What is Brainstorming
● How to create Brainstorming
● What is UX Law
● Why important is UX Law
● Hick’s Law
● Fitts’s Law
● Jakob’s Law
● Law of Proximity
● Miller’s Law
HW: Research and Submit report using Miro of Figjam
Class 03: Business Pitch and Understand the Users
● What is Business Pitch
● The 5 rules of Business Pitch
● What are Problem Statements
● What is Possible Solution
● Qualitative research
● Quantitative research
HW: Research some case study from Behance and submit report.
Class 04: UX Audit Research
● What is UX Audit Research?
● Why to Conduct a UX Audit?
● What are the Benefits for Business of UX Audit?
● How to create a UX Audit?
● Using AI for UX Audit research (ChatGPT)
Home work: Submit Report about Minimum 3 website audit research using AI
Class 05: Practical Create Problem Statements about
● Student Attendance app for a School
● Coffee shop
● Travel Etc.
HW: Research and create Problem Statements and Solutions about real products (02)
Class 06: User Research Techniques
● What is User Research
● What is User Persona and how to create
● What is Empathy mapping and how to create
● 3 Best rules for User Research
HW: Create User Persona and Empathy Mapping template (03)
Class 07: User Research Techniques
● How to focus Group discussion
HW: Focus group discussion about your project (Mentor must provide topic)
Class 08: User journey map & User flow
● What is User Journey Map
● How to create a User Journey Map
● What is User Flow
● How to create User Flow
HW: Create User journey map, User flow (2)
Class 09: Information Architecture & Card Sorting
● What is Card Sorting
● Why is Card Sorting important
● How to create Card Sorting
● What is Information Architecture
● Why is Information Architecture important
● How to create Information Architecture
HW: Create an Information Architecture (Subject providing by Teacher)
Class 10: Paper Wireframe & prototype
● What is Paper Wireframe
● Why we create Paper Wireframe
● Create Paper Wireframe and Prototype
HW: Draw a food ordering service app wireframe
Class 11: Usability testing & Heuristics
● What is Usability testing
● Why Usability testing is important
● What are Heuristics
● 10 Heuristics for Best UI Design
● Using AI for Usability Testing (maze.co/ai/)
HW: Testing existing websites & Apps using AI (3), Submit reports what you find.
Class 12: UX Final Exam –
● MCQ, Problem Solving & Case study presentation
PART - B
User Interface
Class 13: Understanding Of UI Design, Introduction to XD & working process
● Selection
● Art board
● Guide
● Using Shape
● Place image
● Lock/ unlock
● Using color
● Shadow
● Using Tex
● Export
HW: Login page (2), 404 page (2), Sign Up (2)
Class 14: Introduction to XD & working process
● Grid
● Stack Padding
● Background Blur
● Repeat grid
HW: Landing page hero (5)
Class 15: UI Elements
● What are UI Elements
● Why UI Elements is important
HW: Create 32 UI Elements
Class 16: Color Psychology
● What is Color
● Why Color is important for best UI Design
● 10 Rules for Best UI Design
● Choose best color for Design
● 10 Plugins for UI Design
HW: Submit report about color psychology
Class 17: Introduction to Figma & working process - 1
● Selection
● Frame
● Grid
● Guide
● Using Shape
● Place image
● Lock/ unlock
● Using color
● Using Tex;
● Group/Ungroup
● Export
HW: Redesign pricing (2), Redesign User profile (3)
Class 18: Introduction to Figma & working process - 2
● Effects
● Background Blur
● Plugin
● Community
● Auto Layout (Hug, Fixed, Fill)
● Max. Width and Min. Width
● Wrap
HW: OTP landing page Create Form with Auto Layout, Copy Landing Hero Page (05)
Class 19: Introduction to Figma & working process - 3
● Component
● Variant
● Component Properties
● Variables
HW: Create Button with Component Properties, Landing Hero Page (Own concept 05)
Class 20: Web template Theory
● Responsive Design
● Wireframe
● Typography rules
● Create wireframe Digital agency website
HW: Trace two website landing page wireframe
Class 21: UI Design Principles, Design Patterns & Redesign process
● 10 Principle of UI Design
● 4 types of Design Patterns
● 5 tips for Redesign process
● Create Mid-Fidelity using AI (www.relume.io)
HW: Redesign a website landing page maintain all Principles (5 section) using AI
Class 22: Design system VS Style Guide
● What is Design System
● Why is Design System important
● How to Create Design System
● What is Style Guide
● Why we create Style Guide
HW: Create Design system & Style Guide for Brightskills.com
Class 23: Dashboard Design
● What is Dashboard Design
● What is Market demand of Dashboard Design
● 5 Rules for create Dashboard Design
HW: Dashboard Design (5)
Class 24: Dashboard Design - 2
● Create practical Dashboard Design
● Create 3d elements with AI (Spline AI)
HW: Dashboard Design using AI (5)
Class 25: Redesign an E-learning Website
● Website redesign process
● 10 tricks for redesign
● Create website design from AI (Visily, Framer Ai)
● Image Background remove from AI (photoroom.com)
HW: Redesign Brightskills.com, Website redesign using AI (5)
Class 26: Practical Website Design (Own Concept)
● Responsive Website Design
● Create image from AI (Playground, Leonardo)
HW: Create full website your own concept using AI (2)
Class 27: Mobile App UI design
● What is Mobile App UI Design
● Market demand of Mobile App design
● Create Mobile App Layout
● 10 tips for Mobile App UI Design
● Create Mobile App from AI (UIzard)
HW: Trace Creative IT Institute app 10 screen using AI
Class 28: Practical Mobile App UI Redesign
● Practical Mobile App Design
HW: Trace WhatsApp or any apps (Min 20 screen)
Class 29: Uplabs Marketplace
● Create Account
● Setup Profile
● File ready and Submit
HW: Submit minimum 3 projects.
Class 30: Design Presentation, Product Case study and Showcasing for Dribbble and
Behance
● Create Account
● Setup Profile
● Create presentation for design
● File Offline SEO
● Submit file pro and Marketing
HW: Submit a minimum 30 projects before the end of the course.
Class 31: Figma Prototyping
● What is Prototyping
● Why is Prototype important
● Click
● Drag
● Hover
● Pressed
● Popup
● Loading
● Image Carousel
● Long Screen
● Map Location
HW: Create Mobile App Prototyping
Class 32: Real-world projects (Design Task)
● What is a Design Task
● Why is a Design Task important
● Client’s briefs and project requirements
● How to hack Design Task and get jobs
HW: Please complete minimum 2 design task ((Mentor provide topic)
Class 33: Master the Job Interview
● W10 best practices for job interview
HW: Apply minimum 2 jobs
Class 34: Fiverr account create & Gig research
● Create Account
● Setup Profile
● Research Gig
● Using AI for gig Research (ChatGPT, Bard.ai)
HW: Account Create & Gig Research using AI
Class 35: Fiverr Gig Publish
● Ready file for gig
● Create Gig and publish
HW: 1 Gig Publish
Class 36: Social Media Network
● Facebook
● LinkedIn
● Twitter
HW: Grow your network for your career growth
Class 37: UI Final Exam
● MCQ
● Problem Solving
● Submit assignment Full Website including Mobile and Tab View
Advice: Redesign the applications installed on your mobile devices.
PART - C
Product Design Sprint
Teamwork
Product Design Sprint - 1
Class 38: Product Design Sprint Day 1
● Problem statement
● Product analysis
● User research
● User observations
● User persona
● User journey
● Product roadmap
Class 39: Product Design Sprint Day 2
● Card sorting
● User flow
● Information architecture
Class 40: Product Design Sprint Day 3
● Low fi Wireframe
● Usability heuristics evaluation
● Prototyping & pre design Foundations
● Prepare case study
Class 41: Themeforest
● Create Account
● Setup profile
● Read file for submission
● Submit project
HW: File submit in Themeforest (01)
Product Design Sprint 2
Class 42: Product Design Sprint Day 1
● Product analysis
● user research
● user observations
● user persona
● user journey
● product roadmap
Class 43: Product Design Sprint Day 2
● Card sorting
● Information architecture
● User flow diagram
Class 44: Product Design Sprint Day 3
● Low fi Wireframe
● Usability heuristics evaluation
● Prototyping & pre design foundations
● Prepare case study
Class 45: Upwork & Exam preparation
● Create Account
● Setup Profile
● Create specialized profile
● How to write a cover letter for bid
HW: Create Account and send proposal (Min 02)
Class 46: Final Exam
● 1 Case Study
● 4 Landing Page Design
● 2 Category Mobile Apps With 8 Screen
