UI/UX Design - Mobile & Web

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

Email

learn@afzaalshafi.com

Mobile/ WhatsApp Number

+92 322 4024 862

Address

82/S Imperial Garden, Paragon City Barki Road Lahore