UI/UX Design - Mobile & Web
Instructor:
Duration:
8 Weeks
14th June
Starting Date:
Afzaal Shafi
Mode:
In-Person
For:
Professionals, small startups, and teams looking to train for client projects
Fee:
25,000/-
1-on-1 Counseling Session on Design Career Growth + UI/UX Design Bonus Session
Bonus:
Masterclass Overview
This masterclass is designed for individuals, teams, and professionals who want to master logo design, brand guidelines, and full-scale branding for businesses. Whether you're a freelancer, a creative professional, or a startup looking to enhance your team's skills, this training will equip you with the knowledge to create impactful brand identities.
By the end of this masterclass, you and your team will have the expertise to design logos from scratch, create brand guidelines, and build complete branding solutions for clients or your business.








𝗪𝗲𝗲𝗸 1:
𝗣𝗿𝗼𝘁𝗼𝘁𝘆𝗽𝗶𝗻𝗴 & 𝗜𝗻𝘁𝗲𝗿𝗮𝗰𝘁𝗶𝗼𝗻 𝗗𝗲𝘀𝗶𝗴𝗻
𝗧𝗼𝗽𝗶𝗰𝘀:
Difference between UI & UX
Overview of the design process (Research to Prototype)
User-centered design and design thinking
Introduction to tools: Figma (primary), Adobe XD, Sketch
𝗔𝗰𝘁𝗶𝘃𝗶𝘁𝗶𝗲𝘀:
Analyze existing websites and apps
Set up Figma account and create first project
𝗔𝘀𝘀𝗲𝘀𝘀𝗺𝗲𝗻𝘁:
Quiz + Redesign a poorly designed app screen
────────────────────────────────────────────────────────────────────────────────
𝗪𝗲𝗲𝗸 𝟮:
𝗨𝘀𝗲𝗿 𝗥𝗲𝘀𝗲𝗮𝗿𝗰𝗵 & 𝗣𝗲𝗿𝘀𝗼𝗻𝗮𝘀
𝗧𝗼𝗽𝗶𝗰𝘀:
Importance of user research in UX
Methods: interviews, surveys, usability observation
Creating empathy maps and user personas
Identifying user goals, needs, and frustrations
𝗔𝗰𝘁𝗶𝘃𝗶𝘁𝗶𝗲𝘀:
Draft personas for a mobile app
Group and analyze user feedback
𝗔𝘀𝘀𝗲𝘀𝘀𝗺𝗲𝗻𝘁:
Submit empathy map and 1–2 user personas
────────────────────────────────────────────────────────────────────────────────
𝗪𝗲𝗲𝗸 𝟯:
𝗨𝘀𝗲𝗿 𝗙𝗹𝗼𝘄𝘀 & 𝗪𝗶𝗿𝗲𝗳𝗿𝗮𝗺𝗶𝗻𝗴
𝗧𝗼𝗽𝗶𝗰𝘀:
What is a user flow?
Wireframes: low-fidelity vs high-fidelity
Mobile-first design approach
Common layout structures for apps and web
𝗔𝗰𝘁𝗶𝘃𝗶𝘁𝗶𝗲𝘀:
Create a user flow for sign-up or checkout
Sketch wireframes for 3 key screens
𝗔𝘀𝘀𝗲𝘀𝘀𝗺𝗲𝗻𝘁:
Submit user flow and wireframes for 3 screens
────────────────────────────────────────────────────────────────────────────────
𝗪𝗲𝗲𝗸 𝟰:
𝗩𝗶𝘀𝘂𝗮𝗹 𝗗𝗲𝘀𝗶𝗴𝗻 & 𝗨𝗜 𝗣𝗿𝗶𝗻𝗰𝗶𝗽𝗹𝗲𝘀
𝗧𝗼𝗽𝗶𝗰𝘀:
Visual design elements: color, typography, spacing
Design principles: hierarchy, balance, alignment
Consistency and use of components
Accessibility and contrast ratios
𝗔𝗰𝘁𝗶𝘃𝗶𝘁𝗶𝗲𝘀:
Create a simple design system (colors, fonts, buttons)
Redesign an interface with proper alignment and visual hierarchy
𝗔𝘀𝘀𝗲𝘀𝘀𝗺𝗲𝗻𝘁:
Submit a UI redesign + design system setup in Figma
────────────────────────────────────────────────────────────────────────────────
𝗪𝗲𝗲𝗸 𝟱:
𝗣𝗿𝗼𝘁𝗼𝘁𝘆𝗽𝗶𝗻𝗴 & 𝗜𝗻𝘁𝗲𝗿𝗮𝗰𝘁𝗶𝗼𝗻 𝗗𝗲𝘀𝗶𝗴𝗻
𝗧𝗼𝗽𝗶𝗰𝘀:
Prototyping in Figma (clickable & animated)
Transitions and interactions
Linking screens and building flows
Sharing prototypes for feedback
𝗔𝗰𝘁𝗶𝘃𝗶𝘁𝗶𝗲𝘀:
Create a prototype of a user journey
Review and test peer projects
𝗔𝘀𝘀𝗲𝘀𝘀𝗺𝗲𝗻𝘁:
Submit interactive prototype with 4+ linked screens
────────────────────────────────────────────────────────────────────────────────
𝗪𝗲𝗲𝗸 𝟲:
𝗥𝗲𝘀𝗽𝗼𝗻𝘀𝗶𝘃𝗲 𝗪𝗲𝗯 𝗗𝗲𝘀𝗶𝗴𝗻
𝗧𝗼𝗽𝗶𝗰𝘀:
Responsive layout design for mobile, tablet, and desktop
Breakpoints, fluid grids, and flexible UI
Auto-layout in Figma
Accessibility in responsive design
𝗔𝗰𝘁𝗶𝘃𝗶𝘁𝗶𝗲𝘀:
Convert mobile UI into tablet and web versions
Apply constraints and grids in Figma
𝗔𝘀𝘀𝗲𝘀𝘀𝗺𝗲𝗻𝘁:
Submit 3 versions of a responsive interface
────────────────────────────────────────────────────────────────────────────────
𝗪𝗲𝗲𝗸 𝟳:
𝗨𝘀𝗮𝗯𝗶𝗹𝗶𝘁𝘆 𝗧𝗲𝘀𝘁𝗶𝗻𝗴 & 𝗜𝘁𝗲𝗿𝗮𝘁𝗶𝗼𝗻
𝗧𝗼𝗽𝗶𝗰𝘀:
Conducting usability tests
Types of feedback: direct, behavioral, emotional
How to analyze and prioritize changes
Iteration cycles
𝗔𝗰𝘁𝗶𝘃𝗶𝘁𝗶𝗲𝘀:
Test a peer's prototype
Redesign one screen based on feedback
𝗔𝘀𝘀𝗲𝘀𝘀𝗺𝗲𝗻𝘁:
Submit before-and-after screen designs with explanation
────────────────────────────────────────────────────────────────────────────────
𝗪𝗲𝗲𝗸 𝟴:
𝗙𝗶𝗻𝗮𝗹 𝗣𝗿𝗼𝗷𝗲𝗰𝘁 & 𝗣𝗼𝗿𝘁𝗳𝗼𝗹𝗶𝗼
𝗧𝗼𝗽𝗶𝗰𝘀:
Define a real-world UI/UX challenge
Apply the complete design process
Create a project case study
Structure and publish your portfolio (Notion, Behance, etc.)
𝗔𝗰𝘁𝗶𝘃𝗶𝘁𝗶𝗲𝘀:
Work on a complete mobile/web app project
Prepare and present case study
𝗔𝘀𝘀𝗲𝘀𝘀𝗺𝗲𝗻𝘁:
Final project submission + portfolio presentation
Who Should Attend?
Graphic designers & UI/UX designers
Marketing teams & branding professionals
Freelancers & agencies working on client branding projects
Startups & business owners looking to create a strong brand
Teams that need in-depth training for handling branding clients
Key Learning Outcomes
✅ Create professional logos from sketch to digital execution
✅ Understand how to merge elements into a single iconic logo
✅ Learn from real-world brand guidelines and case studies
✅ Develop brand guidelines for businesses and client projects
✅ Build and present a full brand identity package
✅ Train your team to work on professional branding projects
Training Modes:
In-Person Training: CreatExc Office, 82/S Block 1st Floor, Imperial Garden Paragon City Lahore
Online Training: Live interactive sessions with hands-on exercises
Tools & Requirements:
Sketchbook & pencil (for initial sketches)
Laptop with Adobe Illustrator, Photoshop, or Figma installed
Stable internet connection (for online participants)
Apply Now for the Branding & Identity Design Masterclass!
Fill out the form with your basic info, experience, skills, and goals to join this hands-on training led by Afzaal Shafi. Whether you're a student, professional, or agency—this is your chance to master logo design and branding!
Office Phone
+92 423 719 38 20
learn@afzaalshafi.com
Mobile/ WhatsApp Number
+92 322 4024 862
Address
82/S Imperial Garden, Paragon City Barki Road Lahore
