LABORATORY MANUAL

Semester : VI
Subject : UI/UX Lab
Subject Code : BCGL606
UI/UX Lab BCGL606

UI/UX Lab Semester VI

Course Code BCGL606 CIE Marks 50
Teaching Hours/Week (L: T:P: S) 0:0:2:0 SEE Marks 50
Credits 01 Exam Hours 2
Examination type (SEE) Practical
Course objectives:
• To explore and understand the nuances of User Experience and User Interface
• To gain mastery over the usage of Figma for designing and prototyping UI/UX
• To understand user requirement and translate it into UI/UX protype
• To analyze apps and websites and understand how they can be continually improved
• To understand the UI components and interactions being used in different apps and websites
SL.NO Experiments (Designing and Prototyping using Figma)
NOTE: Wire frames can be hand-drawn and recorded by the students. Designing and Prototyping can be
done using Figma.
1 Chat App Redesign: Create a Wireframe and redesign any popular chat app.

2 Food App: Create a wireframe, Design and Prototype the UI Pages for the food application.

3 Social Media App: Create a wireframe, Design and Prototype social media photo sharing app.

4 Product Website: Design and prototype a product website page. Create web pages and
rollovers for the web pages.
5 Travel Agency Website: Create a wireframe, Design and prototype the UI for the website
including design a for Home Page with search bar, Activities page, Client Testimonial Page,
Image Gallery.
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.
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.
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.
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, Payment’s page with radial buttons. Design dropdowns for programs button.
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.
Course outcomes (Course Skill Set):
At the end of the course the student will be able to:
• Apply the basics of wireframing in designing apps and Websites.
• Make use of Figma for designing and prototyping UI/UX for different types of apps and
Websites.
• Analyze user requirements and translate the requirements to design prototypes.
• Demonstrate the UI/UX concepts applied when designing the prototype of apps and Websites.
• Develop (redesign) the existing apps & Websites with customized design

[email protected] 2
UI/UX Lab BCGL606

Assessment Details (both CIE and SEE)

The weightage of Continuous Internal Evaluation (CIE) is 50% and for Semester End Exam (SEE) is
50%. The minimum passing mark for the CIE is 40% of the maximum marks (20 marks out of 50) and
for the SEE minimum passing mark is 35% of the maximum marks (18 out of 50 marks). A student shall
be deemed to have satisfied the academic requirements and earned the credits allotted to each subject/
course if the student secures a minimum of 40% (40 marks out of 100) in the sum total of the CIE
(Continuous Internal Evaluation) and SEE (Semester End Examination) taken together.
Continuous Internal Evaluation (CIE):
CIE marks for the practical course are 50 Marks.
The split-up of CIE marks for record/ journal and test are in the ratio 60:40.
• Each experiment is to be evaluated for conduction with an observation sheet and record write-
up. Rubrics for the evaluation of the journal/write-up for hardware/software experiments are
designed by the faculty who is handling the laboratory session and are made known to
students at the beginning of the practical session.
• Record should contain all the specified experiments in the syllabus and each experiment write-
up will be evaluated for 10 marks.
• Total marks scored by the students are scaled down to 30 marks (60% of maximum marks).
• Weightage to be given for neatness and submission of record/write-up on time.
• Department shall conduct a test of 100 marks after the completion of all the experiments listed
in the syllabus.
• In a test, test write-up, conduction of experiment, acceptable result, and procedural knowledge
will carry a weightage of 60% and the rest 40% for viva-voce.
• The suitable rubrics can be designed to evaluate each student’s performance and learning
ability.
• The marks scored shall be scaled down to 20 marks (40% of the maximum marks).
The Sum of scaled-down marks scored in the report write-up/journal and marks of a test is the
total CIE marks scored by the student.
Semester End Evaluation (SEE):
SEE marks for the practical course are 50 Marks.
• SEE shall be conducted jointly by the two examiners of the same institute; examiners are
appointed by the Head of the Institute.
• The examination schedule and names of examiners are informed to the university before the
conduction of the examination. These practical examinations are to be conducted between the
schedule mentioned in the academic calendar of the University.
• All laboratory experiments are to be included for practical examination.
• (Rubrics) Breakup of marks and the instructions printed on the cover page of the answer script
to be strictly adhered to by the examiners. OR based on the course requirement evaluation
rubrics shall be decided jointly by examiners.
• Students can pick one question (experiment) from the questions lot prepared by the examiners
jointly.
• Evaluation of test write-up/ conduction procedure and result/viva will be conducted jointly by
examiners.
General rubrics suggested for SEE are mentioned here, writeup-20%, Conduction procedure and result
in -60%, Viva-voce 20% of maximum marks. SEE for practical shall be evaluated for 100 marks and
scored marks shall be scaled down to 50 marks (however, based on course type, rubrics shall be
decided by the examiners)
Change of experiment is allowed only once and 15% of Marks allotted to the procedure part are to be
made zero.
The minimum duration of SEE is 02 hours
Suggested Learning Resources:
• https://www.figma.com/
• UX Programming for Beginners, August, 2022
• https://www.udemy.com/course/learn-figma-web-design
• https://www.udemy.com/course/figma-2023-master-class-realtime-uiux-web-projects

[email protected] 3
UI/UX Lab BCGL606

1) Chat App Redesign: Create a Wireframe and redesign any popular chat app.

Design Process:

1. Frame Setup
• Selected Android Compact frame.
• Added status bar.

2. Header Design
• Create a header container.
• Add a WhatsApp branding text.
• Include utility icons.

3. Body Structure
• Implement a search container with icon and placeholder text.
• Create filter buttons section with three options:
o "All", "Unread" and "Groups" buttons.

4. Contact List Elements

• Design contact container with:
o Profile picture
o Contact name
o Time indicator
o Last message preview.
o Status indicators (pinned, etc.)
• Duplicate and customized for multiple conversations

5. Navigation Bar
• Create bottom navigation with four sections:
o Chats (active, highlighted in green)
o Updates, Communities, and Calls (inactive)

[email protected] 4
UI/UX Lab BCGL606

2) Food App: Create a wireframe, Design and Prototype the UI Pages for the food
application.
Design Process:

1. Base Setup
• Use Android Compact frame.
• Add a status bar.

2. Navigation Structure
• Create a top navigation bar.
• Implement a main navigation options: Delivery, Dining, Nightlife, and Blinkit.

3. Location & Search Elements

• Design a location container with:
o Location icon
o Place name
o Address text with dropdown arrow
• Create search bar.
• Add a veg toggle switch.

4. Category Navigation
• Implement a horizontally scrollable food type container.
• Add category icons with labels (Fast Food, etc.).

5. Filter System
• Create filter buttons.
• Include common filters.

6. Restaurant Listings
• Design restaurant cards with:
o Restaurant image
o Name and ratings
o Cuisine tags and estimated delivery time
o Special offer indicators

7. Restaurant Detail Page

• Create restaurant header with navigation options.
• Implement rating, distance, and timing information.
• Add offers section with horizontal scroll.
• Design menu section with categorized food items.

8. Prototype Connections
• Connect restaurant cards to detail page.
• Add back button functionality to return to main screen.

[email protected] 5
UI/UX Lab BCGL606

3) Social Media App: Create a wireframe, Design and Prototype social media photo
sharing app.
Design Process:
Home Screen Elements:
1. Branding Container
• Instagram logo with dropdown.
• Notification and messaging icons.
2. Stories Container
• "Your Story" with add button.
• User stories with gradient outlines.
3. Post Structure:
• Header with profile picture, username and options
• Image container
• Interaction buttons (like, comment, share, bookmark)
• Caption and comments section
4. Navigation Bar
• Home, Search, Create, Reels, Profile icons
Profile Page Elements:
1. Profile Header
• Back button, username, options menu
2. Profile Information
• Profile picture
• Posts/Followers/Following counts
• Bio text
• Action buttons (Follow, Message, Add)
3. Content Navigation
• Grid view, Reels, Tagged tabs
4. Posts Grid
• 3-column layout
Interactive Prototype
• Connect profile navigation between home and account pages.
• Implement navigation between sections.

[email protected] 6
UI/UX Lab BCGL606

4) Product Website: Design and prototype a product website page. Create web
pages and rollovers for the web pages.
Design Process:
Navigation Elements:
1. Navigation Bar
• Google logo.
• Product category links (Phones, Earbuds, etc.).
• Search, Cart, and Profile icons.
• Set to fixed position for scrolling.
Main Content Sections:
1. Hero Section
• Gradient heading: "Oh hi, Gemini".
• Product subheading and interactive "Browse Phones" button.
• Featured Pixel devices image.
2. Recommendations Section
• "Our Top Recommendations" heading.
• Horizontal scrollable product container.
• Individual product cards with:
o Product image on light background
o "New" tag where applicable
o Product name in bold
3. Product Showcase
• "New. Now. Wow." Heading.
• Wrapped layout of varying-sized product containers:
o Large containers for Pixel phones
o Wide container for Pixel Fold
o Tall containers for wearables
o Product description and "Learn More" button
Interactive Elements:
1. Button Components
• Browse Phones button with hover state
• Learn More button with hover state
2. Scrolling Behavior
• Vertical overflow for main page
• Horizontal overflow for product recommendation carousel

[email protected] 7
UI/UX Lab BCGL606

5) Travel Agency Website: Create a wireframe, Design and prototype the UI for the
website including design a for Home Page with search bar, Activities page, Client
Testimonial Page, Image Gallery.
Design Process:
Navigation Elements:
1. Navigation Bar
• Fixed position navigation bar with Travel Advisor logo.
• Main navigation buttons (Discover, Tips, Review, Forums).
• Secondary buttons (Currency, Sign In).
• Secondary navigation bar with service categories (Search All, Hotels,
Things to do, etc.).
Home Page Components:
1. Hero Section
• Search bar with icon and button.
• "Plan your kind of trip" call-to-action.
• AI trip builder feature highlight.
2. Destinations Section
• "Explore the world's most stunning seasides" heading.
• Grid display of featured destinations.
• Gradient overlay on destination images for text legibility.
Explore Page Components:
1. Directory Structure
• Breadcrumb navigation showing current location.
• Page heading "Best of the Best Beaches in the World".
2. Featured Beach Section
• Hero image with gradient overlay, Badge and awards information,
Location details with icons.
3. Review Section
• Rating display, Review cards with user comments, User identification
elements.
Interactive Elements:
• Expandable search bar with popular destinations suggestions.
• Connection between pages using prototype links:
o World destinations card links to Explore page.
o Logo links back to Home page.

[email protected] 8
UI/UX Lab BCGL606

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.
Design Process:
1. Homepage Implementation

• Design hero section with name, title and brief introduction.

• Add navigation menu with smooth scrolling functionality.
• Implement a skills section using icons or progress bars.
• Create a featured projects preview grid
2. Project Showcase

• Design project cards with:

o Featured image or screenshot
o Project title and brief description
o Technologies/tools used
o Call-to-action button linking to case study
3. About & Contact Sections

• Create an about section with professional photo and biography.

• Add downloadable resume option.
• Implement contact form with validation.
• Include social media links and professional networks.
4. Interactive Elements

• Add hover effects to project cards and navigation items.

• Implement smooth page transitions.
• Create loading animations for images and content.
• Add subtle scroll-triggered animations.

[email protected] 9
UI/UX Lab BCGL606

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.
Design Process:
Layout Structure

• Desktop frame with vertical layout.

Header Section
• Horizontal layout with welcome message and user name.
• Action buttons (Calendar selector, Export button).
Statistics Overview
1. Key Metrics Cards
• Four equal-width cards showing critical data points.
• Each card includes metric title and value, percentage change indicator.
2. Revenue Overview
• Line chart with header with title and time period dropdown.
• Monthly trend visualization.
3. Traffic Sources
• Donut chart with visual distribution of traffic channels.
• "Last Week" filter option.
Detailed Data Sections
1. Top Products:
• Card showing best-performing items
• Each product displayed with:
o Product name and sales data.
o Progress bar indicating performance.
2. User Demographics:
• Regional distribution with bar chart.
• Percentage breakdown by location.
3. Recent Activities:
• Timeline-style interface.
• Activity description and timestamp.
• Action buttons for follow-up tasks.
• "View All" link for accessing complete history.

[email protected] 10