UI/UX
FAB-252602
Module Overview
This 7-day introductory module is designed to familiarize first-year engineering students with the fundamentals of UI/UX (User Interface and User Experience) design. The course focuses on design thinking, problem-solving, and creativity through hands-on activities rather than heavy theory.
Curriculum
Course Overview
This 7-day introductory module is designed to familiarize first-year engineering students with the fundamentals of UI/UX (User Interface and User Experience) design. The course focuses on design thinking, problem-solving, and creativity through hands-on activities rather than heavy theory.
Students will understand how digital products such as mobile applications and websites are planned before development. Using Figma as a design tool, participants will create wireframes, apply basic visual design principles, and build an interactive prototype solving a real-world problem.
Learning Objectives
- Understand the difference between UI and UX using real-world examples.
- Develop user-centered thinking and problem-solving skills.
- Create user personas and write clear problem statements.
- Design low-fidelity wireframes on paper before digital execution.
- Use Figma to create digital wireframes and layouts.
- Apply basic visual design principles (color, typography, spacing).
- Create clickable prototypes to simulate user interaction.
- Present a complete mini UI/UX project confidently.
Course Content
Day 1: Introduction to UI/UX and Design Thinking
Understanding UI vs UX through real-life examples, identifying design problems, and group discussion on improving everyday user experiences.
Day 2: Understanding Users and Problem Definition
Learning about users, creating simple personas, writing problem statements, and selecting individual project ideas using the User + Problem + Solution formula.
Day 3: Wireframing and Idea Visualization
Introduction to low-fidelity design, sketching app layouts on paper, structuring screens, and defining user flow.
Day 4: Introduction to Figma
Basic overview of Figma tools including frames, text, shapes, alignment, and recreating paper wireframes digitally.
Day 5: Visual Design Fundamentals
Applying minimal design principles such as limited color usage, consistent typography, spacing, and improving usability.
Day 6: Prototyping and Interaction Design
Creating clickable prototypes in Figma, connecting screens, simulating navigation, and refining user flow.
Day 7: Project Completion and Presentation
Finalizing the prototype, presenting the problem and solution, peer review, feedback session, and showcasing projects.