UI & UX Designing Course
Master UI/UX design concepts, visual design principles, wireframing, prototyping, Figma, Canva, Photoshop, and real-world user experience projects.
This comprehensive UI & UX Designing course equips learners with practical and creative skills in user interface design, user experience design, wireframing, prototyping, usability testing, and interactive design using industry-standard tools like Figma, Canva, and Adobe Photoshop. Students will build responsive and visually engaging digital experiences through real-world projects and portfolio development.
Course overview
This comprehensive UI & UX Designing course equips learners with practical and creative skills in user interface design, user experience design, wireframing, prototyping, usability testing, and interactive design using industry-standard tools like Figma, Canva, and Adobe Photoshop. Students will build responsive and visually engaging digital experiences through real-world projects and portfolio development.
Technologies
Learning Outcomes
Learning roadmap
Six phases. Each one ends with a portfolio build you can demo.
Introduction to UI & UX Design
Introduction to UI & UX - Why UI and UX is used? - Benefits and purpose of UI and UX - Difference between UI & UX - How do UI & UX process fit together - UCD Process and its phases
Adobe Photoshop
Introduction to Adobe Photoshop - Overview of tools (Adobe, Canva, Figma) - Adobe Installation - Interface and Tools in Photoshop - Shortcut Keys in Photoshop
Basics of Visual Design
Panels in Photoshop - Using Pen Tool - Photocollage - Working with layers in Photoshop - Colour theory and its application
Design with Photoshop
Creating UI elements in Photoshop (Buttons, Icons) - Clipping and Layer Masking - Image Editing and Manipulation
Designing
Poster Design - Instagram Post Design
Advanced Photoshop Techniques
Layer Styles & Blending Modes - Using Brush Tool - How to remove background - Exporting assets for mobile
UI Kit in Photoshop
Double Exposure - Dropdown Buttons - Radio Button - Check Button - Play Buttons
Animations in Photoshop
Creating UI Design Kit - Types of Buttons in Photoshop - GIF Animations - Colour Splashes
Introduction to Figma
Introduction to Figma - Figma Features - Setting up a Design Project in Figma - Interface and Tools in Figma - Boolean Operations in Figma
Figma Plugins and Integrations
Figma Plugins - Advantages of Plugins - Types of Plugins - Iconify - iUnsplash - Storyset - Remove Background - Blobs - Lorem Ipsum - Roundall
Introduction to Canva
Introduction to Canva - Creating Canva Account - Interface and Tools - Collaboration Features in Canva
Design with Canva
Designing Posters - Designing Banners in Canva - Using Canva for Quick Prototyping - Creating Social Media Graphics in Canva
Designing a Logo
Logo Designing - Colour Palettes - Uses of Colour Palettes - Importance of Colours
Design Process in UI & UX
Design Thinking Process - Brand Strategies - Typography and Logo Types - Colours and Types - Colour Psychology
Designing Basic Components in Figma
Ad Components in Figma - Variants - Grouping and Ungrouping - Adding Hover Effects for Components - Colour Pickers - Exporting Designs and Assets from Figma
UI/UX Case Study
Understanding User Research - Conducting User Interviews and Surveys - Creating Personas - Competitive Analysis
Prototyping
Working with Frames - Working with Layers - Prototyping in Figma - Creating Interactive Prototypes in Figma
Mapping in UI/UX
Introduction to UX Design Principles - User Journey Mapping - Mind Mapping - Sketching
Flowcharts
Information Architecture and Sitemap - Flowchart - Mermaid Code in draw.io
Wireframing
Wireframing - Creating Wireframing in Figma - Types of Wireframing - Low Fidelity Wireframing
Wireframing & Prototyping
Best Practices for Wireframing - From Wireframing to Prototyping - Case Study on Effective Wireframing
Design Systems
Introduction to Prototyping in UI/UX Design - Tools in Prototyping - Advanced Techniques for Prototyping
High Fidelity Prototyping
High Fidelity Prototyping in Figma - Designs in High Fidelity - Conducting Usability Testing
Microinteractions and Animations
Importance of Animation - Tools for Creating Animation - Vertical Scrolling - Horizontal Scrolling
Usability Testing
Usability Testing Methods and Best Practices - Feedback Loops - Analyzing User Test Results - Iterative Designs based on Feedback
Collaboration Technique in Figma
Advanced Collaboration Techniques in Figma - Sharing and Presenting Designs - Design Handoff to Developers - Case Study on Effective Design Systems
Collaborate with Teams
Collaboration in Figma - Working with Teams - Work with Community - FigJam
Real-world UI/UX Projects
Planning a UI/UX Project - Defining Project Goals and Objectives - Design for Different Platforms - Start a Real-world Project in Figma
Coding in UI/UX
Convert Design to Coding - Adobe XD - Difference between Adobe XD and Figma - Tips for Presenting Design Works
Final Project and Presentation
Finalizing the UI/UX Project - Creating a Project Presentation - Practice Presentation and Feedback - Final Project Presentation - Interview Preparation - Final Assessment - Course Certification
Meet Your mentors
Franklin
Trainer - UI/UX Design
Ready to start UI & UX Designing Course?
Book a consultation — we'll map your background to the right cohort and schedule.