Experiment: 1
Student Name: Milan Khandelwal UID: 24MCA20375
Branch: MCA (General) Section/Group: 5/B
Semester: III Date of Performance: 25/07/2025
Subject Name: UI/UX (LAB) Subject Code: 24CAH-712
Submitted to: Ms. Winky Bhatia
1. Aim: - To explore and evaluate a range of industry-standard tools used in UI/UX design,
wireframing, prototyping, and user flow planning. This includes hands-on experience
with tools such as Figma, Adobe XD, Sketch, Axure, InVision, Proto.io, Webflow,
FlowMapp, Balsamiq, VisualSitemaps, and Wireframe.cc.
1. Figma
• A cloud-based interface design tool used for creating wireframes, UI components, and
interactive prototypes.
• Enables real-time collaboration, making it ideal for design teams working remotely or
simultaneously.
2. Adobe XD
• A versatile tool by Adobe for UI/UX design and prototyping, with strong integration into
the Adobe Creative Cloud ecosystem.
• Supports vector design, prototyping, and interactive animations.
3. Sketch
• A Mac-exclusive vector-based design tool tailored for UI/UX and web design.
• Popular for its lightweight performance and use of reusable design components.
4. Axure RP
• A comprehensive UX tool for creating advanced wireframes and prototypes with logic-
based interactivity.
• Ideal for demonstrating dynamic behavior, form validation, and user flow conditions.
5. InVision
• A collaboration and prototyping platform where static screens can be turned into
interactive prototypes.
• Supports design feedback and workflow collaboration through commenting and version
control.
6. Proto.io
• A no-code, browser-based tool that allows the creation of high-fidelity prototypes.
• Especially useful for simulating native app behavior on mobile devices.
7. Webflow
• A visual development tool that combines design, animation, and publishing in one
platform.
• Allows designers to create fully responsive websites without writing code.
Wireframing Tools
8. Balsamiq
• A low-fidelity wireframing tool that imitates hand-drawn sketches to emphasize structure
and layout.
• Best suited for the early stages of design when brainstorming ideas and layout structures.
9. Wireframe.cc
• A minimalist wireframing tool designed for quick and simple UI layouts.
• Ideal for rough drafts and preliminary design concepts.
Flow & Navigation Planning Tools
10. FlowMapp
• A UX planning tool used for designing user flows, building sitemaps, and mapping user
journeys.
• Helps structure content and understand navigation logic before design begins.
11. VisualSitemaps
• Automatically generates visual sitemaps by crawling existing websites.
• Useful for analyzing site architecture for redesign or SEO planning.
Objective:
To design and prototype a user-centric interface for a social media application inspired by
Instagram, using Figma as the primary tool. The scope includes developing Login, Sign-Up, and
Home screens with a focus on modern UI aesthetics, intuitive navigation, and seamless user
interaction. The project emphasizes best practices in usability, accessibility, and responsive design.
2. Learning outcomes (What I have learnt):
• • Understood the fundamentals of UI/UX design, including layout, color schemes, typography, and alignment.
• • Gained hands-on experience with Figma for designing and prototyping mobile app interfaces.
• • Created responsive screen designs for Login, Sign-Up, and Home pages following a real-world app structure.
• • Improved design consistency using components, auto-layout, and reusable assets.
Evaluation Grid (To be created as per the SOP and Assessment guidelines by the faculty):
Sr. No. Parameters Marks Obtained Maximum Marks
1. Worksheet 8 Marks
2. Viva 10 Marks
3. Simulation 12 Marks
Total 30 Marks
