Shri Tontada Siddhalingeshwar Kalyana Kendra’s
Tontadarya College of Engineering
Mundaragi Road, Gadag – 582 101, Karnataka State
Approved by AICTE, New Delhi
Affiliated to Visvesvaraya Technological University, Belagavi
Accredited by NBA (CSE, CV, E&C, EEE) and NAAC (B)
DEPARTMENT OF COMPUTER SCIENCE & DESIGN
UI/UX LABORATORY JOURNAL
Course Name: UI/UX
Course Code: BCGL606
Semester: VI
Year: 2024 – 25 (Even Sem)
Faculty In-charge
Prof. Nagaraj Chakalabbi
Submitted By
NAME : SRUJAN NAGARALLI
USN : 2TG22CG051
Department Of Computer Science & Design
Tontadarya College of Engineering
Gadag-582101
S.T.S.K.K’s
TONTADARYA COLLEGE OF ENGINEERING
MUNDARGI ROAD, GADAG – 582 101
DEPARTMENT OF COMPUTER SCIENCE & DESIGN ENGINEERING
Certificate
This is to certify that SRUJAN NAGARALLI bearing 2TG22CG051 has
satisfactorily completed the course of practicals / term work in UI/UX
Laboratory for Computer Science and Design Engineering in the laboratory of
this college during the year 2024-2025 (Even semester).
Signature Of Faculty In-Charge Signature Of HOD Signature Of Principal
Sign of the Examiner:
1. Internal Examiner:
2. External Examiner:
Program Outcomes (PO’s)
Engineering Graduates will be able to:
1. Engineering knowledge: Apply the knowledge of mathematics, science, engineering fundamentals and an
engineering specialization to the solution of complex engineering problems.
2. Problem analysis: Identify, formulate, review research literature, and analyze complex engineering
problems reaching substantiated conclusions using first principles of mathematics, natural sciences, and
engineering sciences.
3. Design/Development of Solutions: Design solutions for complex engineering problems and design system
components or processes that meet the specified needs with appropriate consideration for the public health
and safety, and the cultural, societal, and environmental considerations.
4. Conduct investigations of complex problems: Use research-based knowledge and research methods
including design of experiments, analysis and interpretation of data, and synthesis of the information to provide
valid conclusions.
5. Modern tool usage: Create, select, and apply appropriate techniques, resources, and modern engineering and
IT tools including prediction and modeling to complex engineering activities with an understanding of the
limitations.
6. The engineer and society: Apply reasoning informed by the contextual knowledge to assess so cletal, health,
safety, legal and cultural issues and the consequent responsibilities relevant to the professional engineering
practice.
7. Environment and sustain ability: Understand the impact of the professional engineering solutions in societal
and environmental contexts, and demonstrate the knowledge of, and need for sustainable development.
8. Ethics: Apply ethical principles and commit to professional ethics and responsibilities and norm so f the
engineering practice.
9. Individual and teamwork: Function effectively as an individual, and as a member or leader in diverse teams,
and in multidisciplinary settings.
10. Communication: Communicate effectively on complex engineering activities with the engineering
community and with society at large, such as, being able to comprehend and write effective reports and design
documentation, make effective presentations, and give and receive clear instructions.
11. Project management and finance: Demonstrate knowledge and understanding of the engineering and
management principles and apply these to one's own work, as a member and leader in a team, to manage
projects and in multidisciplinary environments
12. Life-long learning: Recognize the need for, and have the preparation and ability to engage in independent
and life-long learning in the broadest context of technological change.
CONTENTS
Sl. no. Experiments Date
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 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, buynow 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, Payments 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.
CO-PO Mapping
CO Statement BTL PO MAPPED
PO Level
3 2 1
1. Apply the basics of wireframing in designing
apps and Websites.
2. Make use of Figma for designing and
prototyping UI/UX for different types of apps
and Websites.
3. Analyse user requirements and translate the
requirements to design prototypes.
4. Demonstrate the UI/UX concepts applied
when designing the prototype of apps and
Websites.
5. Develop (redesign) the existing apps &
Websites with customized design.
UI/UX LABORATORY JOURNAL
EXPERIMENT 1
Chat App Redesign: Create a Wireframe and redesign any popular chat app.
INTRODUCTION:
Redesigning a popular chat application like ChatGPT involves enhancing user experience through
intuitive interfaces, efficient navigation, and visually appealing designs .Drawing inspiration from
various UI/UX case studies, such as those by Jahanvi Singh and Lazarev .agency, the redesign process
focuses on addressing usability issues, modernizing the aesthetic, and improving overall user
satisfaction. Key improvements include streamlined answer generation and sharing flows, categorized
chats for better organization, and responsive designs suitable for various devices. By applying user-
centered design principles and iterative testing, the revamped interface aims to provide a more engaging
and efficient conversational experience.
URL:https://www.figma.com/design/GyKZrHXOUfD1Ah9V31WvZ6/Untitled?t=KtE31WN91x
eG1tZa-0
Department of CSD, TCE, GADAG Pag e |1
UI/UX LABORATORY JOURNAL
Department of CSD, TCE, GADAG Pag e |2
UI/UX LABORATORY JOURNAL
EXPERIMENT 2
Food App: Create a wireframe, Design and Prototype the UI Pages for the food application.
INTRODUCTION:
Designing a food delivery app involves a structured approach encompassing wireframing, UI design,
and prototyping. Begin with low-fidelity wireframes to outline essential screens such as the home page,
restaurant listings, menu details, cart, checkout, and order tracking, focusing on clear navigation and
user-friendly layouts. Tools like MockFlow and Visily offer customizable templates to expedite this
process . Transitioning to UI design, incorporate appealing color schemes, intuitive icons, and high-
quality imagery to enhance user engagement. Platforms like Figma and Adobe XD facilitate the creation
of interactive prototypes, allowing for user testing and iterative improvements. For inspiration and
design patterns, exploring resources on Dribbble can provide valuable insights into effective food app
interfaces .
URL: https://www.figma.com/design/S3HISPkVPEeoAtJgNFzpjO/food?node-id=0-
1&p=f&t=PSv57RBa9irlBIXn-0
Department of CSD, TCE, GADAG Pag e |3
UI/UX LABORATORY JOURNAL
Department of CSD, TCE, GADAG Pag e |4
UI/UX LABORATORY JOURNAL
EXPERIMENT 3
Social Media App: Create a wireframe, Design and Prototype social media photo sharing app.
INTRODUCTION:
Creating a social media photo-sharing app involves a structured approach encompassing wireframing,
designing, and prototyping. Begin by wireframing the app's layout and user flow using tools like Visily,
which offers adaptable templates for various social media concepts. Transition to high-fidelity designs
with platforms such as Figma, known for real-time collaboration and interactive prototyping. Finally,
bring your designs to life through prototyping tools like Proto.io, enabling the creation of interactive,
no-code prototypes that mimic native app behavior. This comprehensive process ensures a user-friendly
and engaging photo-sharing experience.
URL:https://www.figma.com/design/7jT31YfMUnv32jk9SVvheK/socail-media?node-id=1-
5&t=X6zkUb5c15ueiSnL-0
Department of CSD, TCE, GADAG Pag e |5
UI/UX LABORATORY JOURNAL
Department of CSD, TCE, GADAG Pag e |6
UI/UX LABORATORY JOURNAL
EXPERIMENT 4
Product Website: Design and prototype a product website page. Create web pages and rollovers
for the web pages
INTRODUCTION:
Designing and prototyping a product website page involves a structured approach to ensure both
aesthetic appeal and functional interactivity. Begin by conceptualizing your website's purpose and target
audience. Sketch out wireframes to map the layout and user flow, focusing on key elements like
navigation, product showcases, and call-to-action buttons. Utilize design tools such as Figma or Canva
to create high-fidelity mockups that align with your brand identity. Incorporate rollover effects to
enhance user engagement; these interactive elements change appearance when hovered over, providing
visual feedback and highlighting clickable areas. Implement rollovers using CSS for simple effects or
JavaScript for more complex interactions. Finally, develop interactive prototypes to simulate user
interactions and gather feedback, ensuring the website delivers an intuitive and seamless user
experience. This iterative process facilitates the creation of a compelling product website that effectively
communicates your offerings and drives user engagement.
URL:https://www.figma.com/design/VeErGFY0IJ0DnUmTFte9I9/product-app?node-id=0-
1&p=f&t=UN99eHxygr3237PT-0
Department of CSD, TCE, GADAG Pag e |7
UI/UX LABORATORY JOURNAL
EXPERIMENT 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.
INTRODUCTION:
Designing and prototyping a travel agency website involves a structured approach to ensure both
aesthetic appeal and functional interactivity. Begin by conceptualizing the website's purpose and target
audience. Sketch out wireframes to map the layout and user flow, focusing on key elements like
navigation, search functionality, and content sections. Utilize design tools such as Figma or Adobe XD
to create high-fidelity mockups that align with your brand identity. Incorporate interactive elements like
rollovers and hover effects to enhance user engagement, providing visual feedback and highlighting
clickable areas. Implement these interactions using CSS for simple effects or JavaScript for more
complex behaviors. Finally, develop interactive prototypes to simulate user interactions and gather
feedback, ensuring the website delivers an intuitive and seamless user experience. This iterative process
facilitates the creation of a compelling travel agency website that effectively communicates your
offerings and drives user engagement.
URL: https://www.figma.com/design/UkPSAUOPpdDvcj6YMunuPS/travel-
agency?node-id=0-1&p=f&t=bGZu3oz4z8hSC3Vv-0
Department of CSD, TCE, GADAG Pag e |8
UI/UX LABORATORY JOURNAL
Department of CSD, TCE, GADAG Pag e |9
UI/UX LABORATORY JOURNAL
Department of CSD, TCE, GADAG P a g e | 10
UI/UX LABORATORY JOURNAL
Department of CSD, TCE, GADAG P a g e | 11
UI/UX LABORATORY JOURNAL
EXPERIMENT 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
INTRODUCTION:
Designing a UI/UX designer portfolio involves a structured approach encompassing wireframing,
designing, and prototyping. Begin by conceptualizing the website's purpose and target audience. Sketch
out wireframes to map the layout and user flow, focusing on key pages such as the About page, Work
Showcase page, Blog page, and Contact page. Utilize design tools like Figma or Adobe XD to create
high-fidelity mockups that align with your personal branding. Incorporate interactive elements and
hover effects to enhance user engagement. Develop interactive prototypes to simulate user interactions
and gather feedback, ensuring the portfolio delivers an intuitive and seamless user experience. This
iterative process facilitates the creation of a compelling portfolio that effectively showcases your skills
and attracts potential opportunities.
URL:https://www.figma.com/design/4ZghHhsdUxaJK8XGfNBUcv/PORTFOLIO?node-id=0-
1&p=f&t=gtfSaJfTJ8Q0HiPk-0
Department of CSD, TCE, GADAG P a g e | 12
UI/UX LABORATORY JOURNAL
Department of CSD, TCE, GADAG P a g e | 13
UI/UX LABORATORY JOURNAL
EXPERIMENT 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 detail
INTRODUCTION: A dashboard design involves creating a user interface that visually presents
key information, statistics, and trends in a clear and interactive format. It typically includes a structured
wireframe layout with components like summary cards, charts (line, bar, pie), tables, and dropdown
filters to allow users to view data by category, time range, or region. The design and prototype of the
dashboard UI page focus on usability, responsiveness, and clarity, enabling users to monitor
performance metrics, analyze trends, and make data-driven decisions efficiently. Dropdown options
enhance interactivity by allowing real-time filtering of displayed data for a personalized experience.
URL:https://www.figma.com/design/o3v7kbLbmQU5KlrFDpnZjE/DASHBOARD
?node-id=0-1&p=f&t=vpktuOoUS6jmUTnN-0
Department of CSD, TCE, GADAG P a g e | 14
UI/UX LABORATORY JOURNAL
Experiment 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,
buynow page, add to cart page
INTRODUCTION: This segment outlines the design and prototyping of an e-commerce
website, emphasizing a user-friendly shopping experience from product discovery to checkout.
We concentrated on creating intuitive product category pages, detailed product views, and
streamlined buy-now and add-to-cart processes to ensure a smooth and satisfying online
purchasing journey.
Figma URL:
Department of CSD, TCE, GADAG P a g e | 15
UI/UX LABORATORY JOURNAL
Department of CSD, TCE, GADAG P a g e | 16
UI/UX LABORATORY JOURNAL
EXPERIMENT 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
INTRODUCTION: This project showcases the design and prototyping of an educational
website's user interface, aiming to create an accessible and engaging learning environment. Our
focus was on developing clear navigation, informative course pages, accessible instructor profiles,
transparent pricing, and straightforward payment options to facilitate a seamless educational
experience.
URL:https://www.figma.com/design/pMdqdia0crhNnrCKhl4UZ9/Educational-App-%7C%7C-
Mobile-app-Concept--Community-?node-id=1203-187&t=eVlECJvCXDu8d4hC-1
Department of CSD, TCE, GADAG P a g e | 17
UI/UX LABORATORY JOURNAL
Department of CSD, TCE, GADAG P a g e | 18
UI/UX LABORATORY JOURNAL
EXPERIMENT 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.
INTRODUCTION: This final project details the design and prototyping of a music player
application, with a focus on creating an immersive and interactive audio experience. We designed
pages that combine appealing visuals with intuitive controls, including animated play/pause
buttons, song selection interfaces, and responsive background elements to enhance user
enjoyment.
URL: https://www.figma.com/design/V7Z5BBavk0QTaMqG3rslde/Musica---Music-App--
Community-?node-id=0-1&t=FaVVud207WfRYzzm-1
Department of CSD, TCE, GADAG P a g e | 19
UI/UX LABORATORY JOURNAL
Department of CSD, TCE, GADAG P a g e | 20
