UI/UX (BADL657B)lab Manual 2025
Experiment No 1: Chat App Redesign: Create a Wireframe and redesign any popular chat App
Aim: To redesign a popular chat app with a modern, user-friendly interface that enhances
usability, messaging efficiency, and visual appeal.
Wireframe Design(Hand-Written pencil sketch) Prototype Design
Frame1 Frame1
Frame1 Frame1
Artificial Intelligence and Data Science Engineering Academic Year: 2024-25 Page 1
UI/UX (BADL657B)lab Manual 2025
Experiment No. 2: Food App – Create a Wireframe, Design, and Prototype the UI Pages for a
Food Application
Aim: To design and prototype a user-friendly food application that streamlines food discovery,
ordering, and delivery with an engaging and intuitive interface.
Wireframe Design(Hand-Written pencil sketch) Prototype Design
Frame1 Frame1
Frame1 Frame1
Artificial Intelligence and Data Science Engineering Academic Year: 2024-25 Page 2
UI/UX (BADL657B)lab Manual 2025
Experiment No. 3: Social Media App – Create a Wireframe, Design, and Prototype a Social
Media Photo Sharing Application
Aim: To design and prototype a social media photo-sharing application that offers an intuitive
interface for uploading, sharing, and engaging with visual content.
Wireframe Design(Hand-Written pencil sketch) Prototype Design
Frame1 Frame1
Frame2 Frame2
Frame3 Frame3
Artificial Intelligence and Data Science Engineering Academic Year: 2024-25 Page 3
UI/UX (BADL657B)lab Manual 2025
Experiment No. 4: Product Website: Design and prototype a product website page. Create web
pages and rollovers for the web pages
Aim: To design and prototype a product website with interactive web pages and engaging
rollover effects for enhanced user experience and product showcase.
Wireframe Design (Hand-Written pencil Prototype Design
sketch)
Frame1 Frame1
Frame2
Frame2
Frame3
Frame3
Frame4
Frame4
Frame5
Frame5
Artificial Intelligence and Data Science Engineering Academic Year: 2024-25 Page 4
UI/UX (BADL657B)lab Manual 2025
Experiment No 5: Travel Agency Website: Create a wireframe, Design and prototype the UI
for the website including design for Home Page with search bar, Activities page, Client
Testimonial Page, Image Gallery
Aim: To design and prototype a user-friendly travel agency website featuring a search bar on
the home page, an activities showcase, a client testimonial page, and an interactive image
gallery for an engaging user experience.
Wireframe Design (Hand-Written pencil Prototype Design
sketch)
Frame1 Frame1
Frame2
Frame2
Frame3
Frame3
Artificial Intelligence and Data Science Engineering Academic Year: 2024-25 Page 5
UI/UX (BADL657B)lab Manual 2025
Experiment No 6: UI/UX Designer Portfolio Design: Create a wireframe, Design and
prototype a UI for a portfolio including design for About page, Work showcase page, Blog
page, contact page
Aim: To design and prototype a modern UI/UX designer portfolio website with dedicated pages
for About, Work Showcase, Blog, and Contact, providing a seamless and visually appealing
user experience.
Wireframe Design (Hand-Written pencil Prototype Design
sketch)
Frame1 Frame1
Frame2
Frame2
Frame3
Frame3
Frame4
Frame4
Artificial Intelligence and Data Science Engineering Academic Year: 2024-25 Page 6
UI/UX (BADL657B)lab Manual 2025
Experiment No 7: Dashboard Design: Create a wireframe, Design and Prototype Dashboard UI
page, add some Dashboard details, statistics and graphs, Add dropdown options for some
dashboard details
Aim: To design and prototype a modern dashboard UI that displays key statistics, interactive
graphs, and detailed insights with dropdown options for better data navigation and user
interaction.
Wireframe Design (Hand-Written pencil Prototype Design
sketch)
Frame1 Frame1
Frame2
Frame2
Frame3
Frame3
Artificial Intelligence and Data Science Engineering Academic Year: 2024-25 Page 7
UI/UX (BADL657B)lab Manual 2025
Experiment No. 8: E-Commerce Website: Create a wireframe, Design and prototype Web
pages including product category pages (example: mobiles, gaming consoles, speakers), product
pages in each category, Buy Now page, Add to Cart page
Aim: To design and prototype an intuitive e-commerce website with product category pages
(e.g., mobiles, gaming consoles, speakers), detailed product pages, and seamless Buy Now and
Add to Cart experiences for efficient shopping.
Wireframe Design (Hand-Written pencil Prototype Design
sketch)
Frame1 Frame1
Frame2
Frame2
Frame3
Frame3 Frame4
Frame4
Artificial Intelligence and Data Science Engineering Academic Year: 2024-25 Page 8
UI/UX (BADL657B)lab Manual 2025
Experiment No 9: Educational Website: Create a wireframe, Design and Prototype the UI for
an educational website –Include a Homepage with footer, About Us Page, Programs page,
Instructors page, Pricing page, Payments page with radial buttons. Design dropdowns for
programs button.
Aim: To design and prototype a user-friendly educational website featuring a Homepage with a
footer, About Us, Programs with dropdown options, Instructors, Pricing, and a Payments page
with radial button selections for seamless navigation and engagement.
Wireframe Design (Hand-Written pencil Prototype Design
sketch)
Frame1 Frame1
Frame2
Frame2
Frame3
Frame3 Frame4
Frame4
Artificial Intelligence and Data Science Engineering Academic Year: 2024-25 Page 9
UI/UX (BADL657B)lab Manual 2025
Experiment No 10: Music Player App: Create a wireframe, Design and prototype the pages
with a background and a Rollover button, and Song selection Page with a Home Rollover
button. The third page may include animated play and pause button, play music animation,
timer animation.
Aim: To design and prototype an interactive music player app with a dynamic background,
rollover buttons, a song selection page with a home rollover button, and an animated play/pause
interface featuring music and timer animations.
Wireframe Design (Hand-Written pencil Prototype Design
sketch)
Frame1 Frame1
Frame2 Frame2
Frame3
Frame3
Artificial Intelligence and Data Science Engineering Academic Year: 2024-25 Page 10
