“UI/UX development and design”

Report of a Vocational Training project submitted in partial fulfilment of the

requirement for the degree of

BACHELOR OF TECHNOLOGY

IN

INFORMATION TECHNOLOGY
By

15212610034

UNIVERSITY INSTITUTE OF TECHNOLOGY, HIMACHAL PRADESH

UNIVERSITY, SHIMLA

February 2024
 TABLE OF CONTENTS

CAPTION PAGE NO.

DECLARATION i
ACKNOWLEDGEMENT ii
ABSTRACT vii

CHAPTER-1: INTRODUCTION 1
1.1 The evolution of the calculator 1
1.2 Types of calculators 5
1.2.1 Basic calculators 5
1.2.2 Scientific calculators 6
1.2.3 Graphing calculators 7
1.2.4 Financial calculators 8

CHAPTER-2: PYTHON PROGRAMMING LANGUAGE 7

2.1 Introduction 7
2.1.1 Language Features 8
2.1.2 Python GUI – Tkinter 10
2.2 Source Code 12
2.3 Output 15

REFERENCES
 DECLARATION

We hereby declare that the work reported in the B.Tech. Project Report entitled “UI/UX

development and design” submitted at the University Institute of Technology, Himachal

Pradesh University, Shimla is an authentic record of our work. We have not submitted this

work elsewhere for any other degree or diploma.

Ankita
15212610010

This is to certify that the above statement made by the candidates is correct to the best of my
knowledge.

Date: 29-2-2024
 ACKNOWLEDGEMENT

I extend my heartfelt gratitude to all those who contributed to the fruition of this project.

Special thanks to the team members for their dedication and collaboration throughout the

UI/UX development and design process. Additionally, I express my appreciation to the

mentors and the teaching and the non-teaching staff for their invaluable guidance and

support. This endeavor would not have been possible without their unwavering commitment.
 ABSTRACT

This project report explores the iterative process of UI/UX development and design, focusing

on creating engaging, intuitive user experiences. Utilizing industry-standard methodologies,

it delves into user research, wireframing, prototyping, and usability testing to refine interface

elements. Through case studies and analysis, it highlights effective design strategies and the

impact on user satisfaction and product success. In this project I have completely Redesigned

a User Interface of a website named “NOTESWOL” by using FIGMA, an app for creating

different kinds of designs. I have done this project during the time period of my internship

at “PORTWOL”.
 CHAPTER 1
INTRODUCTION

Welcome to my project report on the revitalization of NOTESWOL, where we delve into

the transformative journey of UI and UX development and design. Through meticulous
analysis and innovative strategies, I've reimagined and redesigned the website to enhance
user engagement, streamline navigation, and elevate overall user experience. We have shaped
the evolution of NOTESWOL into a more intuitive and engaging platform. I have redesigned
this platform using the new designing technology called FIGMA.

1.1 The evolution of the designing UI/UX:

The evolution of UI/UX design has been a dynamic journey influenced by technological
advancements and changing user expectations. This report provides a concise overview of the
key stages in this evolution.

1. Pre-20th Century:
Craftsmanship dominated design, focusing on physical objects and manual skills.

2. 1970s-1980s:
GUIs revolutionized computer interaction with icons, windows, and mouse control.

3. 1980s-1990s:
Desktop publishing software empowered designers with typographic control.

4. 1990s:
Early web emphasized basic usability with static HTML pages.

5. 2000s:
Web 2.0 introduced dynamic, interactive websites and user-generated content.

6. Late 2000s-Present:
Mobile-first design prioritized responsiveness and minimalist aesthetics.
 7. 2010s-Present:
Flat and Material Design simplified interfaces with clean visuals and responsive
animations.

8. 2010s-Present:
Responsive design ensured consistent experiences across devices.

9. 2010s-Present:
AR and VR introduced immersive, spatial interfaces.

1.2 Types of UI/UX designs:

1. UX Design: Focuses on making products user-friendly and enjoyable.

2. UI Design: Deals with how products look and feel, enhancing visual appeal.

3. Interaction Design: Creates smooth and engaging user interactions.

4. Information Architecture: Organizes content for easy navigation and understanding.

5. Visual Design: Creates visually appealing designs aligned with branding.

6. Responsive Design: Ensures consistency across different devices.

7. Motion Design: Adds dynamic animations for a better user experience.

 CHAPTER 2
PROJECT GOALS AND OBJECTIVES

The primary aim of the UI redesign project was to enhance the overall user experience and
usability of NOTESWOL by implementing an improved interface design. The specific goals
and objectives set for the project were as follows:

1. Enhance Usability: The foremost objective was to streamline the user experience by
simplifying navigation, improving information accessibility, and reducing cognitive
load. This involved restructuring the interface layout to make it more intuitive and
user-friendly.

2. Improve Visual Appeal: Another key goal was to enhance the visual appeal of the
interface to create a more engaging and aesthetically pleasing user experience. This
included updating the color scheme, typography, and graphical elements to align with
modern design trends and brand identity.

3. Optimize Interaction Design: The project aimed to optimize interaction design

elements such as buttons, forms, and feedback mechanisms to ensure smooth and
intuitive user interactions. This involved refining micro-interactions, animations, and
transition effects to provide clear feedback and guidance to users.

4. Increase User Engagement: One of the objectives was to increase user engagement
with the product/platform by enhancing its interactive elements and visual storytelling
capabilities. This involved incorporating interactive features, multimedia content, and
gamification elements to encourage user interaction and exploration.

5. Address User Pain Points: The redesign project sought to address specific pain
points identified through user feedback and usability testing. This included resolving
common usability issues, improving error handling, and optimizing workflows to
enhance user satisfaction and task efficiency.
During the redesigning project, Figma played a crucial role in streamlining the design process
and facilitating collaboration among team members. Here are the key ways in which Figma
aided in the project:

Collaborative Design Environment:

Figma provided a collaborative design environment that allowed multiple team members to
work on the project simultaneously. This feature was particularly beneficial as it enabled real-
time collaboration and seamless communication among designers, developers, and
stakeholders.
Shared Design Libraries:

Figma's shared design libraries feature allowed us to create and maintain a centralized
repository of design assets, including UI components, icons, and styles. This ensured
consistency across the design iterations and facilitated efficient design reuse throughout the
project.
Prototyping and Interaction Design:

Figma's prototyping capabilities enabled us to create interactive prototypes to demonstrate the

flow and functionality of the redesigned interface. The built-in prototyping tools allowed us
to define user interactions, transitions, and animations directly within the design tool,
eliminating the need for separate prototyping software.
Version History and Design Iterations:

Figma's version history feature provided a comprehensive record of design iterations and
revisions, allowing us to track changes and revert to previous versions if needed. This feature
was invaluable in maintaining design consistency and facilitating design reviews and
approvals.
Responsive Design and Device Preview:

Figma's responsive design features allowed us to design interfaces that adapt seamlessly to
different screen sizes and resolutions. The device preview mode enabled us to visualize and
test the responsiveness of the designs across various devices and viewport sizes, ensuring a
consistent user experience.
Feedback and Collaboration Tools:

Figma's commenting and annotation tools facilitated feedback and collaboration among team
members and stakeholders. Comments could be added directly to specific design elements,
providing context and actionable feedback for design improvements.
Integration with Other Tools:

Figma seamlessly integrated with other collaboration and project management tools used by
the team, such as Slack and Jira. This integration streamlined communication and workflow
management, enabling efficient project coordination and task tracking.
Overall, Figma served as a comprehensive design platform that empowered us to efficiently
collaborate, iterate, and prototype during the redesigning project. Its intuitive interface, robust
features, and seamless collaboration capabilities significantly contributed to the success of the
project.
In your report, you can further elaborate on specific instances or features of Figma that were
particularly beneficial for your project and provide examples of how they were utilized in the
redesign process.