UI/UX Design Curriculum: INTERMEDIATE (Level 2)

Total Duration: 36 Hours

● Tools: Figma

● One video to solve all your doubts or to refer - [Link]

v=kbZejnPXyLM&list=PLttcEXjN1UcHu4tCUSNhhuQ4riGARGeap

● DAY 1 AND 2 WILL BE A COMPLETE BRUSH

THROUGH OF EVERYTHING LEARNT IN BASICS
(LEVEL 1) OF UI/UX DESIGN CURRICULUM (8
HOURS)

Day 3: Advanced Wireframing Techniques (4 Hours)

1. Medium-Fidelity Wireframes: Adding more detail and structure.
2. Navigation Flows: Mapping user journeys.
3. Practical Exercise: Wireframe a multi-page app.
● Self-Paced Content:
● Video: A masterclass on how to learn advanced wireframing
[Link]
■ Hands-On Practice
● Creating a wireframe for a multi-page app

[Link]
Day 4: Deep Dive into Typography and Icons (4
Hours)
1. Advanced Typography: Hierarchy and spacing.
2. Custom Icons: Designing icons in Figma.
3. Practical Exercise: Redesign a webpage with advanced typography and
icon
● Self-Paced Content:
○ Lecture
■ Video: Designing icons in FIGMA
[Link]
■ Advanced Typography

[Link]

○ Hands-On Practice

■ The web-page which was designed previously, redesign the same

webpage with advanced typography and creating your own icons.
Day 5: UI Animation Basics (4 Hours)
1. Introduction to Animation in Figma:

o Micro-interactions and transitions.

2. Best Practices: Keeping animations intuitive.

3. Practical Exercise: Add hover effects and transitions to components.

● Self-Paced Content:

Lecture

● Video: Introduction to Animation in Figma

[Link]

Hands-On Practice

● Develop an interactive prototype: Figma Prototyping (Using your own animations)

Day 6: Intermediate Prototyping and Usability

Testing (4 Hours)
1. Interactive Prototypes: Adding more complex interactions.
 2. Usability Testing Methods: Conducting effective user tests.
3. Practical Exercise: Create an interactive prototype for a product.

● Self-Paced Content:

Lecture

● Conducting effective user tests

[Link]

Hands-On Practice

● Develop an interactive prototype: Figma Prototyping for a product (Using your own
animations and effective prototyping)

Day 7: UI/UX for Mobile Apps (4 Hours)

Mobile Design Principles: Constraints and considerations.

Designing for Touch: Hit areas and gestures.
Practical Exercise: Create a mobile app prototype.
 ● Self-Paced Content:

Lecture

● New layout and constraints

[Link]

Hands-On Practice

● Create a mobile app prototype

[Link]

Day 8: Final Project and Presentation (8 Hours)

Project: Design a responsive web app.

Presentation: Showcase intermediate-level skills.
Feedback Session: Discuss challenges and solutions.

Hands-On Practice

● Create a fully responsive mobile app using FIGMA

[Link]
Demo Project Title:

"Designing a Comprehensive Fitness and Wellness App"

Project Overview:
Create a complete fitness and wellness mobile application that helps users track workouts, set
fitness goals, monitor nutrition, and meditate. The project will be developed iteratively, with each
module enhancing the app's design and user experience. By the end of the course, students will
have a fully functional, user-centered, and visually appealing prototype.

Module-Wise Breakdown:
1. Module 1: Introduction to UI/UX Design and Terminology

○ Objective: Understand the fundamental differences between UI

and UX and familiarize with the Figma interface.

○ Task: Create basic UI elements for the app, including a logo,

splash screen, and home screen layout with navigation icons.

2. Module 2: UI/UX Design Principles

○ Objective: Apply design principles like visual process

hierarchy, alignment, balance, and contrast to improve app
aesthetics.

○ Task: Refine the home screen, workout listing, and nutrition

tracking screens using design principles to create a visually
balanced interface.
3. Module 3: User-Centered Design (UCD) and UX
Research

○ Objective: Conduct user research and develop personas and

user flows based on findings.

○ Task: Create 2-3 user personas representing different target

audience segments (e.g., a beginner, a fitness enthusiast, and
a nutrition-focused user) and develop user flows for key app
features like logging a workout and tracking meals.

4. Module 4: Wireframing and Prototyping

○ Objective: Develop low-fidelity wireframes and convert them

into a clickable prototype.

○ Task: Create wireframes for core screens such as the workout

dashboard, meal planner, and meditation section. Turn these
wireframes into a clickable prototype in Figma to demonstrate
the flow between different screens.

5. Module 5: User Interface Patterns

○ Objective: Implement common UI patterns to ensure

consistency and familiarity in the app design.

○ Task: Design and apply UI patterns like navigation bars, search

bars, form inputs, and cards for displaying workout plans and
meal details. Create a consistent design language across the
app.

6. Module 6: Interaction Design and Motion Design

○ Objective: Enhance user engagement with well-designed

interactions and animations.
 ○ Task: Design microinteractions for actions like button clicks,
swipe gestures, and loading animations. Add motion design to
the transition between screens, like a slide effect between the
workout and nutrition tabs.

7. Module 7: Responsive Design and Accessibility

○ Objective: Make the app accessible and responsive across

various devices and screen sizes.

○ Task: Adjust the design for different screen sizes (mobile,

tablet, desktop). Ensure accessibility by implementing proper
color contrast, text size, and alternative navigation methods like
voice commands or keyboard navigation.

8. Module 8: UX Writing

○ Objective: Create clear, concise, and helpful microcopy

throughout the app.

○ Task: Write engaging and guiding text for tooltips, error

messages, onboarding instructions, and call-to-action buttons
that enhance the user experience.

9. Module 9: Usability Testing and Iteration

○ Objective: Test the prototype with users, collect feedback, and

make necessary improvements.

○ Task: Conduct usability tests with peers or target users, gather

feedback on the navigation flow, clarity, and overall usability.
Implement changes based on the feedback to improve the
prototype.

10. Module 10: Capstone Project Presentation

 ○ Objective: Finalize the app design and present the
comprehensive prototype.

○ Task: Integrate all the elements developed throughout the

course into a polished, cohesive design. Create a presentation
that showcases the entire design process, from user research
to final prototype, highlighting key design decisions and
iterations.

Standard Operating Procedure (SOP) for the Project:

1. Project Planning and Research:

● 1.1 Define Objectives: Clearly outline the purpose of the fitness app, target users, and
core features (workouts, nutrition, meditation).
● 1.2 Conduct Research: Perform competitor analysis to identify gaps and opportunities.
Gather insights from potential users via surveys or interviews.
● 1.3 Create User Personas: Develop 2-3 personas that represent different user
segments based on the research findings.

2. Design Foundation:

● 2.1 Basic UI Elements: Create a design system including color schemes, typography,
and icons.
● 2.2 Information Architecture: Outline the app's structure and user journey through a
sitemap and user flows.
3. Low-Fidelity Wireframes:

● 3.1 Sketch Core Screens: Create low-fidelity wireframes for all core screens, focusing
on layout and content organization.
● 3.2 Feedback and Iteration: Share wireframes with peers or mentors for feedback and
refine accordingly.

4. High-Fidelity Prototyping:

● 4.1 Develop High-Fidelity Screens: Use Figma to create high-fidelity designs for each
screen, implementing UI patterns and interactions.
● 4.2 Create Clickable Prototype: Link screens together to simulate the user experience,
showcasing core flows like logging workouts, setting goals, and tracking meals.

5. Usability Testing:

● 5.1 Develop Test Plan: Define test scenarios and tasks for users to perform in the
prototype.
● 5.2 Conduct Testing: Observe users interacting with the prototype, noting areas of
confusion or friction.
● 5.3 Implement Feedback: Refine the design based on testing results, focusing on
usability improvements.

6. Finalization and Presentation:

● 6.1 Polish Design: Ensure consistency across all screens, check for accessibility, and
finalize the design.
● 6.2 Prepare Presentation: Create a detailed presentation covering the project overview,
design process, key decisions, and final prototype.
● 6.3 Present to Audience: Showcase the app design, highlighting improvements made
based on user feedback and design principles.

7. Documentation and Reflection:

● 7.1 Document Design Process: Write a case study detailing the design journey,
challenges faced, and how they were overcome.
● 7.2 Reflect and Evaluate: Assess personal growth and learning outcomes from the
project, identifying areas for further improvement.

Project List:

1. E-Commerce Platforms

Examples:
● Flipkart: [Link]
● Amazon: [Link]
 ● Myntra: [Link]
● Alibaba: [Link]
● eBay: [Link]
● Etsy: [Link]

Project Titles:
1. Product Listing Page Design: Create a visually appealing page showcasing product
listings with filters and sorting options.
2. Shopping Cart UI: Design a user-friendly shopping cart interface that allows easy
addition/removal of items.
3. User Registration & Login Mockup: Develop a streamlined user authentication
interface with clear calls to action.
4. Product Search Feature Design: Create a search bar and filter options for product
categories with a focus on user experience.
5. Order Management Interface: Design a dashboard for users to track their orders and
delivery statuses.
6. Checkout Experience: Develop a seamless checkout flow with emphasis on minimizing
user friction.

Sample Project Video:

● E-Commerce UI Design Walkthrough: E-commerce App Design in figma - | Fashion

Mobile App UI/UX Design | Figma Tutorials

2. OTT Streaming Platforms

Examples:
● Netflix: [Link]
● Amazon Prime: [Link]
● Disney+ Hotstar: [Link]
● Hulu: [Link]
● HBO Max: [Link]
● Peacock: [Link]

Project Titles:
1. Movie/TV Show Listing Page: Design a visually engaging page for browsing
movies/shows with posters and descriptions.
2. Video Player Interface: Create an intuitive video player UI with essential controls (play,
pause, volume).
 3. User Registration & Subscription Flow: Design a simple and effective user sign-up
interface.
4. Genre-Based Search Feature: Create a user-friendly search and filtering design for
discovering content.
5. Watchlist UI: Develop an interface for users to manage their favorite shows easily.
6. Recommendation System Mockup: Design a layout for displaying content
recommendations based on user preferences.

Sample Project Video:

● OTT Platform UI Design:How to Design App UI Design | Smart Home App | Figma
Design OTT

3. Booking and Reservation Systems

Examples:
● BookMyShow: [Link]
● MakeMyTrip: [Link]
● OYO: [Link]
● Airbnb: [Link]
● Expedia: [Link]
● RedBus: [Link]

Project Titles:
1. Event Booking Page Design: Create a user-friendly interface for booking events or
movie tickets.
2. Hotel Reservation UI: Design an attractive interface for users to check hotel availability
and book rooms.
3. Flight Booking Interface: Develop a seamless flight search and booking experience
focusing on clarity.
4. Bus Ticket Booking UI: Create a design for booking bus tickets with seat selection
options.
5. User Profile & Booking History: Design a user dashboard for managing past bookings.
6. Dynamic Pricing Interface: Develop a clear display for dynamic pricing based on
various factors.

Sample Project Video: How to create a Hotel Booking Mobile App UI Design in Figma
 ● Booking System UI Design Guide

4. Social Media Applications

Examples:
● Facebook: [Link]
● Instagram: [Link]
● Twitter: [Link]
● LinkedIn: [Link]
● TikTok: [Link]
● Reddit: [Link]

Project Titles:
1. User Profile and Feed Design: Create a social media feed layout showcasing user
profiles and posts.
2. Interaction Features: Design interfaces for liking and commenting on posts.
3. Direct Messaging Interface: Develop a clean and intuitive direct messaging UI.
4. Hashtag Search Functionality: Design a feature for users to search posts by hashtags.
5. Followers/Following UI: Create an interface to manage followers and follow other
users.
6. Image Upload & Post Creation Form: Develop a user-friendly design for uploading
images and creating posts.

Sample Project Video:

 ● Social Media App UI Design Walkthrough: Flat UI Design in Figma: Social Media App -
full course

5. Food Delivery Platforms

Examples:
● Zomato: [Link]
● Swiggy: [Link]
● UberEats: [Link]
● DoorDash: [Link]
● GrubHub: [Link]
● Postmates: [Link]

Project Titles:
1. Restaurant Listing & Menu Design: Create an inviting interface for displaying
restaurants and their menus.
2. Food Cart System UI: Design a user-friendly interface for managing food orders in a
cart.
3. Real-Time Order Tracking Interface: Develop a design for tracking food deliveries live.
4. Restaurant Dashboard UI: Create a dashboard for restaurant owners to manage
orders and view analytics.
5. Delivery Person Interface: Design an interface for delivery personnel to track their
deliveries.
6. User Ratings & Reviews Interface: Develop a clear and engaging layout for users to
submit ratings and reviews.

Sample Project Video:

 ● Food Delivery App UI Design Tutorial: Food App Design in Figma | Figma Tutorial |
UX/UI

6. Learning Management Systems (LMS)

Examples:
● Udemy: [Link]
● Coursera: [Link]
● edX: [Link]
● Khan Academy: [Link]
● Skillshare: [Link]
● LinkedIn Learning: [Link]

Project Titles:
1. Course Listing & Enrolment Page Design: Create an attractive course listing page
where users can browse and enroll.
2. Student Dashboard UI: Design a dashboard for students to view their courses and
track progress.
3. Instructor Interface Design: Develop a user-friendly interface for instructors to upload
materials and manage courses.
4. Quiz & Assessment UI: Create a layout for quizzes where users can take assessments
and view their scores.
5. Certificate Generation Interface: Design a system that displays certificates for course
completions.
6. Discussion Forum UI: Develop a user-friendly forum interface for course discussions.

Sample Project Video:

● LMS UI Design Guide: (FULL VERSION) Online Learning App UI Design in Figma | Web
Design Tutorial + Free .fig Project