KENNEDY ROAD, NEAR R.T.O.

, PUNE 411001

Institute Code: 0141

Academic Year: 2024-25

Design Components Library/Repository

Program Code : CO 4 K
Course Name : UI/UX DESIGN
Course Code : 314005
Submitted by:

Roll Student Name Branch Enrollment

No Number

1541 Atharva Babasaheb Jadhav SYCO 23211080375

1542 Kaiwalya Jayprakash Jadhav SYCO 23211080376

1543 Sandesh Chandrakant Jadhav SYCO 23211080378

1544 Trupti Ganesh Jadhav SYCO 23211080379

1545 Sai Sachin Jagtap SYCO 23211080381

1
 Under Guidance of:
Ms. V.M.Dilpak

ALL INDIA SHRI SHIVAJI MEMORIAL SOCIETY’S POLYTECHNIC, PUNE -1

COMPUTER ENGINEERING DEPARTMENT

VISION AND MISSION OF THE INSTITUTE

• VISION:
Achieve excellence in quality technical education by imparting knowledge, skills
and abilities to build a better technocrat.

• MISSION:
M1: Empower the students by inculcating various technical and soft
skills.
M2: Upgrade teaching-learning process and industry-institute
interaction continuously.

VISION AND MISSION OF THE COMPUTER DEPARTMENT

2
 ALL INDIA SHRI SHIVAJI MEMORIAL SOCIETY’S POLYTECHNIC,
PUNE -1

COMPUTER ENGINEERING DEPARTMENT

______________________________________________________________________

PROGRAM OUTCOMES (POs)

PO1 Basic and Discipline specific knowledge: Apply knowledge of basic mathematics, science and
engineering fundamentals and engineering specialization to solve the engineering problems..

PO2 Problem analysis: Identify and analyse well-defined engineering problems using codified standard
methods.

PO3 Design/ development of solutions: Design solutions for well-defined technical problems and assist with
the design of systems components or processes to meet specified needs.

PO4 Engineering Tools, Experimentation and Testing: Apply modern engineering tools and appropriate
technique to conduct standard tests and measurements.

PO5 Engineering practices for society, sustainability and environment:

Apply appropriate technology in context of society, sustainability, environment and ethical
practices.
3
PO6 Project Management: Use engineering management principles individually, as a team member or a
leader to manage projects and effectively communicate about well-defined engineering activities.

PO7 Life-long learning: Ability to analyse individual needs and engage in updating in the context of
technological changes.

PROGRAM SPECIFIC OUTCOMES (PSO)

The Diploma in Computer Engineering will prepare students to attain:

● PSO 1: Use state-of-the-art technologies for operation and application of computer software and hardware.
● PSO 2: Maintain computer engineering related software and hardware systems.

Institute Code: 0141

CERTIFICATE

This is to certify that micro project entitled “Design Components Library/Repository” has been
completed under course: UI UX DESIGN
Course code: 314005 for the second year diploma in Computer Engineering Department
Batch 2024-25.

The members of the team:

1. Sandesh Chandrakant Jadhav 2. Trupti Ganesh Jadhav 3. Sai Sachin Jagtap

1. Sandesh Chandrakant Jadhav 1. Sandesh Chandrakant Jadhav

4
 Ms V.M.Dilpak

(Name & Signature of faculty)

COs addressed by the Micro Project:

CO1 Explain design thinking concept.

CO2 Interpret user requirements.
CO3 Select appropriate visual design for given problem.
CO4 Create interactions using design tool.
CO5 Create innovative design prototype for given applications.

ACKNOWLEDGEMENT

We are deeply indebted to our project guide Ms V.M.Dilpak for guiding us in a

proper way in order to complete our micro project. We would like to express our
gratitude towards our guide for her valuable guidance, suggestion, and continues
support throughout in preparing the short-term training report.

We also express our thanks to our seniors for their great support and suggestions.

5
 Index

Sr. No. Content Page No.

1. Micro Project Proposal (Annexure –I) 8

2. Micro Projects Report (Annexure –II) 13

3. Assessment of Micro Project (Annexure –III) 22

4. Micro Project Evaluation Sheet (Annexure –IV) 24

5. Log Book 15

6
 Introduction

The Design Components Library/Repository is a centralized collection of reusable

UI/UX design elements, built to streamline the design and development process.
This library consists of well-structured and visually cohesive components such as
buttons, forms, navigation bars, cards, modals, typography styles, and more.

By using a design tool like Figma, this repository ensures consistency,

scalability, and efficiency in UI/UX design across projects. Designers and
developers can easily access and integrate pre-designed components, reducing
redundancy and improving workflow efficiency.
The library follows modern design principles, including responsiveness,
accessibility, and aesthetics, making it an essential asset for product
development teams. Whether building a website, mobile app, or web
application, this repository serves as a foundational toolkit for creating high-
quality, visually appealing interfaces.

7
 ANNEXURE - I

Micro-Project Proposal

Design Components Library/Repository

1.0 Aims/Benefit of the Micro Project:

Aim: The aim of this microproject is to create a Design Components Library/Repository using a
design tool like Figma. This library will consist of reusable UI/UX elements to ensure consistency,
efficiency, and scalability in design workflows.

Standardization of UI Components – Create a consistent and reusable set of design elements to maintain
uniformity across projects.
Efficiency in Design Workflow – Reduce design time by providing ready-to-use components, eliminating the
need for repetitive work.
Improved Collaboration – Enable seamless coordination between designers and developers by using a shared
design system.
Scalability – Develop a flexible and expandable library that can evolve with project requirements and future
enhancements.
Enhancing User Experience (UX) – Ensure visually appealing, accessible, and user-friendly design components
for improved usability.

Benefits:

Consistency in Design – Ensures uniformity across all UI elements, maintaining a cohesive visual identity.
Time Efficiency – Reduces design and development time by providing pre-built, reusable components.
Improved Collaboration – Enhances teamwork between designers and developers by offering a shared resource for
UI components.
Scalability & Flexibility – Allows for easy expansion and modification of components as project requirements
evolve.
Better User Experience (UX) – Ensures well-structured, user-friendly, and visually appealing designs.

2.0 Course Outcomes Addressed:

CO1 Explain design thinking concept.

CO2 Interpret user requirements.
CO3 Select appropriate visual design for given problem.
CO4 Create interactions using design tool.
CO5 Create innovative design prototype for given applications.

8
3.0 Proposed Methodology:

1. The Proposed Methodology for creating the Design Components Library/Repository

involves a structured approach to ensure efficiency and usability. First, the requirements
are defined by identifying the purpose, target audience, and design standards.

2.ER Diagram

9
 3.NORMALIZED DATABASE:

Table: USER

1. USER_ID Primary key

2. USER_NAME
3. U_EMAIL

Table: PASSENGER

1. P_ID PRIMARY KEY

2. PH_NO
3. P_NAME
4. P_ADDRESS
5. DOB
6. GENDER

Table : BUS ROUTE

1. ROUTE_NO PRIMARY KEY

2. BUS_NO PRIMARY KEY

3. ROUTE_NAME
4. DISTANCE
5. DESTINATION

Table : RESERVATION

1. SEAT_NO PRIMARY KEY

2. BUS_NO FOREIGN KEY

3. STATUS
4. BOKING_DATE
5. TICKET_NO PRIMARY KEY

4.0 Action Plan:

10
 Sr. Details of Activity Planned Planned Name of Responsible Team
No. Start Date Finish Members
Date
1 Formation of groups 09-08-2024 12-08-2024 All Members

2 Selected the topic for micro 12-08-2024 16-08-2024 All Members

project

3 Discussed about the project 16-08-2024 19-08-2024 All Members

4 Assigned the work to each 19-08-2024 23-08-2024 Sandesh Jadhav

group member

5 Detailed study of micro-project 23-08-2024 26-08-2024 All Members

6 Collected information on 26-08-2024 30-08-2024 All Members

assignment topic

7 Started working on micro- 30-08-2024 02-09-2024 All Members

project

8 Assembled all the data 02-09-2024 09-09-2024 Trupti Jadhav

9 Evaluation of data 09-09-2024 13-09-2024 Sai Jagtap

10 Prepared rough copy of micro- 13-09-2024 20-09-2024 All Members

project

11 Project proposal presentation 20-09-2024 23-09-2024 All Members

to guide

12 Corrected the micro-project 23-09-2024 27-09-2024 All Members

suggested by guide

13 Actual implementation of 27-09-2024 30-09-2024 All Members

micro-project

14 Execution of overall data / 30-09-2024 04-10-2024 All Members

prepared final draft copy

15 Final micro-project 04-10-2024 07-10-2024 All Members

presentation

16 Micro-project submitted 07-10-2024 11-10-2024 All Members

5.0Resource Required:

11
 S. No. Name of Resources/ material Specification Remarks

1 Computer/ Laptop Any desktop or laptop with ---

basic configuration

2 Software Oracle XE 10g, My SQL, ---

SQL Live, Microsoft Word

Name of Team Members with Roll No:

Sr. No Name of Students Roll No

1 Sandesh Chandrakant Jadhav 1543

2 Trupti Ganesh Jadhav 1544

3 Sai Sachin Jagtap 1545

Mr. S. Y. Divekar
(Name & Signature of faculty)

ANNEXURE - II

12
 Micro-project Report

Design Components Library/Repository

1.0 Rationale:

The Design Components Library/Repository is essential for streamlining the UI/UX design process by
providing a structured collection of reusable components. Without a centralized design system,
projects often suffer from inconsistencies, inefficiencies, and redundant efforts. By creating a
standardized library, designers and developers can maintain visual coherence, reduce development
time, and improve collaboration.

2.0 Aims/Benefits of the Micro Project:

Aim: The aim of this microproject is to create a Design Components Library/Repository using a
design tool like Figma. This library will consist of reusable UI/UX elements to ensure consistency,
efficiency, and scalability in design workflows.

Standardization of UI Components – Create a consistent and reusable set of design elements to maintain
uniformity across projects.
Efficiency in Design Workflow – Reduce design time by providing ready-to-use components, eliminating the
need for repetitive work.
Improved Collaboration – Enable seamless coordination between designers and developers by using a shared
design system.
Scalability – Develop a flexible and expandable library that can evolve with project requirements and future
enhancements.
Enhancing User Experience (UX) – Ensure visually appealing, accessible, and user-friendly design components
for improved usability.

Benefits:

1. Consistency in Design – Ensures uniformity across all UI elements, maintaining a cohesive visual identity.
Time Efficiency – Reduces design and development time by providing pre-built, reusable components.
Improved Collaboration – Enhances teamwork between designers and developers by offering a shared resource for
UI components.
Scalability & Flexibility – Allows for easy expansion and modification of components as project requirements
evolve.
Better User Experience (UX) – Ensures well-structured, user-friendly, and visually appealing designs.

3.0 Course Outcomes Achieved:

CO1 Explain design thinking concept.

CO2 Interpret user requirements.
CO3 Select appropriate visual design for given problem.
CO4 Create interactions using design tool.
CO5 Create innovative design prototype for given applications.

13
4.0 Literature Review:

Sr. Author(s) &

Title Key Findings Relevance to Project
No. Year
Emphasizes the
importance of
Supports the need for
Nielsen, J. Usability consistency and
1 a standardized design
(1994) Engineering reusable UI components
system.
for better user
experience.
Highlights design
thinking principles, Aligns with creating a
Brown, T. Change by
2 focusing on efficiency scalable component
(2009) Design
and scalability in UI/UX library.
design.
Introduces a structured Serves as a reference
Google Material
design system to ensure for developing a
3 Material Design
UI consistency across standardized design
Design (2014) Guidelines
applications. library.
Discusses the role of Reinforces the
Wroblewski, Designing for reusable UI components importance of a
4
L. (2008) Consistency in improving shared design
productivity. repository.
Proposes a modular Provides a
Brad Frost Atomic approach to UI design framework for
5
(2016) Design with reusable organizing the design
components. library.
Defines design
Microsoft Helps in ensuring
Fluent Design principles for adaptable
6 Fluent UI accessibility and
System and accessible UI
(2020) responsiveness.
components.

5.0 Actual Methodology:

A bus reservation system typically uses a combination of software and hardware to facilitate the
booking, management, and tracking of bus tickets for passengers and operators. Here is a breakdown of
the typical methodology of a bus reservation system.
14
 Website or App: The primary user interface for customers, providing options for searching routes,
selecting seats, and booking tickets.

Admin Dashboard: Interface for the bus operator or admin to manage schedules, monitor bookings, and
update availability

Route Search: Users can search for routes based on parameters such as starting point, destination, date,
and time.

Filtering Options: Users can filter results by bus type (e.g., AC, non-AC), service type (e.g., sleeper,
semi-sleeper), amenities, and bus operators.

ER Diagram:

NORMALIZED DATABASE:

Table: USER

15
 1. USER_ID Primary key
2. USER_NAME
3. U_EMAIL

Table: PASSENGER

1. P_ID PRIMARY KEY

2. PH_NO
3. P_NAME
4. P_ADDRESS
5. DOB
6. GENDER

Table : BUS ROUTE

1. ROUTE_NO PRIMARY KEY

2. BUS_NO PRIMARY KEY

3. ROUTE_NAME
4. DISTANCE
5. DESTINATION

Table : RESERVATION

1. SEAT_NO PRIMARY KEY

2. BUS_NO FOREIGN KEY

3. STATUS
4. BOKING_DATE
5. TICKET_NO PRIMARY KEY

CREATE TABLE USER (

userid INT PRIMARY KEY,

username VARCHAR(50),

16
u_email VARCHAR(100)

);

CREATE TABLE PASSENGER (

Pid INT PRIMARY KEY,

phno VARCHAR(15),

pname VARCHAR(50),

paddress VARCHAR(100),

DOB DATE,

gender CHAR(1)

);

CREATE TABLE BUS_ROUTE (

routeno INT PRIMARY KEY,

busno INT,

routename VARCHAR(100),

source VARCHAR(50),

destination VARCHAR(50),

distance DECIMAL(10, 2),

fare DECIMAL(10, 2),

dept_time TIME,

bname VARCHAR(50),

capacity INT,

type VARCHAR(20),

dept_date DATE

);

CREATE TABLE RESERVATION (

seatno INT,

busno INT,

status VARCHAR(20),

bookingdate DATE,

ticketno INT PRIMARY KEY,

17
mode_of_payment VARCHAR(20),

FOREIGN KEY (busno) REFERENCES BUS_ROUTE(busno)

);

INSERT INTO USER (userid, username, u_email) VALUES (1, 'Alice', 'alice@example.com');

INSERT INTO USER (userid, username, u_email) VALUES (2, 'Bob', 'bob@example.com');

INSERT INTO PASSENGER (Pid, phno, pname, paddress, DOB, gender) VALUES (1, '1234567890', 'Alice',
'123 Street, City', TO_DATE('1995-04-10', 'YYYY-MM-DD'), 'F');

INSERT INTO PASSENGER (Pid, phno, pname, paddress, DOB, gender) VALUES (2, '0987654321', 'Bob', '456
Avenue, City', TO_DATE('1992-08-22', 'YYYY-MM-DD'), 'M');

INSERT INTO BUS_ROUTE (routeno, busno, routename, source, destination, distance, fare, dept_time, bname,
capacity, type, dept_date)

VALUES (1, 101, 'City Express', 'City A', 'City B', 120.5, 25.0, TO_TIMESTAMP('08:00:00', 'HH24:MI:SS'),
'Best Bus', 50, 'AC', TO_DATE('2023-11-10', 'YYYY-MM-DD'));

INSERT INTO BUS_ROUTE (routeno, busno, routename, source, destination, distance, fare, dept_time, bname,
capacity, type, dept_date)

VALUES (2, 102, 'Coastal Route', 'City C', 'City D', 200.0, 40.0, TO_TIMESTAMP('09:30:00', 'HH24:MI:SS'),
'Fast Bus', 40, 'Non-AC', TO_DATE('2023-11-12', 'YYYY-MM-DD'));

INSERT INTO RESERVATION (seatno, busno, status, bookingdate, ticketno, mode_of_payment) VALUES (1,
101, 'Confirmed', TO_DATE('2023-11-01', 'YYYY-MM-DD'), 1001, 'Credit Card');

INSERT INTO RESERVATION (seatno, busno, status, bookingdate, ticketno, mode_of_payment) VALUES (2,
101, 'Pending', TO_DATE('2023-11-02', 'YYYY-MM-DD'), 1002, 'Cash');

CREATE OR REPLACE PROCEDURE make_payment(

p_ticketno IN INT,

p_mode_of_payment IN VARCHAR

) IS

BEGIN

UPDATE RESERVATION

SET mode_of_payment = p_mode_of_payment

WHERE ticketno = p_ticketno;

DBMS_OUTPUT.PUT_LINE('Payment successful for ticket no: ' || p_ticketno || ' using ' || p_mode_of_payment);

END;

CREATE OR REPLACE TRIGGER update_reservation_status

18
AFTER UPDATE OF mode_of_payment ON RESERVATION

FOR EACH ROW

BEGIN

IF :NEW.mode_of_payment IS NOT NULL AND :OLD.mode_of_payment IS NULL THEN

UPDATE RESERVATION

SET status = 'Confirmed'

WHERE ticketno = :NEW.ticketno;

DBMS_OUTPUT.PUT_LINE('Status updated to Confirmed for ticket no: ' || :NEW.ticketno);

END IF;

END;

6.0 Actual Resource Required:

S. No. Name of Resources/ material Specification Remarks

1 Computer/ Laptop Any desktop or laptop with ---

basic configuration

2 Software Oracle XE 10g, My SQL, ---

SQL Live, Microsoft Word

7.0 Outputs of the Micro project:

19
20
 8.0 Skill developed / Learning outcome of the Micro-Project:

1. Understand UI/UX design principles like consistency and accessibility.

2. Develop proficiency in Figma for creating and managing UI components.
3. Design reusable, scalable, and responsive UI elements.
4. Enhance collaboration between designers and developers.
5. Improve productivity by reducing redundant design efforts.

9.0 Applications of the Micro-Project:

1. UI/UX Design Standardization – Ensures consistency in user interface design across projects.

2. Web & Mobile App Development – Provides ready-to-use design components for faster development.

3. Design System Implementation – Serves as a foundation for creating structured design systems.

4. E-Commerce & Business Websites – Enhances the visual appeal and usability of online platforms.

5. Prototyping & Wireframing – Speeds up the design process for app and website prototypes.

6. Collaboration in Teams – Helps designers and developers work efficiently with a shared component library.

7. Educational Use – Acts as a learning resource for UI/UX design students and professionals.

8. Customization & Scalability – Allows easy modifications and expansions for future projects.

9. Freelancing & Portfolio Building – Strengthens design skills and showcases expertise in UI/UX.

10. Corporate & Enterprise Applications – Supports large-scale product development with a reusable design
system..

Ms.V.M.Dilpak

(Name & Signature of faculty)

21
 Annexure - III

Suggested Rubric for Assessment of Micro Project

(The marks may be allotted to the characteristics of the Micro-Project by considering the suggested rubrics)
S. Characteristics to be Poor Average Good Excellent
No assessed (Marks 1-3) (Marks 4-5) (Marks 6-8) (Marks 9-10)
1. Relevance to the Related to Related to Addressed Addressed
Course very few LOs some Los at-least one more than one
CO CO
2. Literature Not more At-least 5 At-least 7 About 10
Review/information than two relevant relevant relevant
collection sources sources, at sources, most sources, most
(Primary and least 2 latest latest latest
Secondary),
very old
reference
3. Completion of Target Completed Completed 50 Completed 60 Completed
as per Project proposal less than 50% to 60% to 80% more than
80%
4. Analysis of Data and Sample Size Sufficient and Sufficient and Enough data
representation all, data appropriate appropriate collected by
neither sample, sample, sufficient and
organized nor enough data enough data appropriate
presented generated but generated sample size.
well not organized which is Proper
and not well organized and inferences
presented presented drawn by
well. No or
well. But poor organizing
poor
inferences and
inferences
drawn presenting
drawn
data through
tables, charts
and graphs
5. Quality of Incomplete Just Well a Just Well a Just
prototype/Model fabrication/ assembled/ assembled/ assembled/
assembly fabricated and fabricated fabricated
parts are not with proper with proper
functioning functioning functioning
well. Not in parts.in parts. In
proper shape, proper shape, proper shape,
dimensions within within
beyond tolerance tolerance
tolerance dimensions dimensions
and good
limit. and good
finish. But no
Appearance/ finish/
creativity in
finish are appearance.
design and
shabby. Creativity in
design and

22
 use of use of
material material.
6. Report Preparation Very short, Nearly Detailed, Very detailed,
poor quality sufficient and correct and correct, clear
sketches, correct details clear description of
Details about about description of methods,
methods, methods, methods, materials,
materials, materials, materials, precautions
Precautions precautions precautions and
and and and conclusion.
Conclusions conclusion. conclusion. Enough
omitted, some But clarity is Sufficient tables, charts
details are not there in graphic and sketches
wrong. description
presentation.
But not
enough
graphic
description

7. Presentation of the Major Includes Includes Well

Micro-Project information is major major organized,
not included; information information includes
information is but not well but not well major
not well organized not organized not information,
organized. presented presented presented
well. well. well.

8. Viva Could not Replied to Replied Replied most

reply to considerable properly of the
considerable number of considerable questions
number of questions nut number of properly
question not very question.
properly

23
 Annexure IV

Evaluation Sheet for the Micro Project

Academic Year: 2024-2025 Name of Faculty: Ms V.M.Dilpak

Course: UI UX DESIGN
Course Code: 314005 Semester: 4-K-Scheme

Title of the Project: Design Components Library/Repository

.
Comments/Suggestions about team work/leadership/inter-personal communication (if any).:

_____________________________________________________________________________________

_____________________________________________________________________________________
Roll Student Name Marks out of 15 Marks out of 10 Total
No for performance for performance in out of 25
oral / presentation
in group
activity
1541 Atharva Babasaheb Jadhav
1542 Kaiwalya Jayprakash
Jadhav
1543 Sandesh Chandrakant
Jadhav
1544 Trupti Ganesh Jadhav
1545 Sai Sachin Jagtap

Ms V.M.Dilpak
(Name & Signature of faculty)

24
 Log Book of Student

Academic Year: 2024-2025

Name of Student: Sandesh Chandrakant Jadhav ,Kaiwalya Jayprakash Jadhav ,Trupti

Ganesh Jadhav ,Sai Sachin Jagtap , Atharava Babasaheb Jadhav

Title of the Project: Design Components Library/Repository

Course: Database Management System [DMS] Course Code: 314005 Semester: 4-K
Sr. Date Time Work Done
No.
1. 12-08-2024 10:30am-11:30am Group discussion on topic

2. 16-08-2024 3:00pm-4:00pm Assign task to group

3. 19-08-2024 11:30am-12:30pm Giving particular information

4. 23-08-2024 1:00pm-2:00pm Get some Course Outcomes and Practical Outcomes

5. 26-08-2024 10:30am-11:30am Taking review about collected data

6. 30-08-2024 3:00pm-4:00pm Verify material in sequence

7. 02-09-2024 11:30am-12:30pm Discussion on suggestions

8. 09-09-2024 1:00pm-2:00pm Arrange data in sequence

9. 13-09-2024 10:30am-11:30am Prepare Proposal of the Project

10. 20-09-2024 3:00pm-4:00pm Verify the draft from teacher

11. 23-09-2024 11:30am-12:30pm Rearrange the Data

12. 27-09-2024 1:00pm-2:00pm Share the data among group

13. 30-09-2024 10:30am-11:30am Prepare the report

14. 04-10-2024 3:00pm-4:00pm Work on data

15. 07-10-2024 11:30am-12:30pm Prepare soft copy

25
16. 11-10-2024 1:00pm-2:00pm Submission

Ms V.M.Dilpak
Name and Signature of Teacher

26