UI/UX DESIGN

A Technical Seminar abstract submitted

in partial fulfillment for the award of the
degree of
BACHELOR OF TECHNOLOGY

IN
COMPUTER SCIENCE AND ENGINEERING (DATA SCIENCE)
(2021-2025)

Submitted by
Nagula Ravi kiran 21X01A0544

Under the esteemed guidance of

Mrs. A.Jayanthi, M.Tech

Assitant Professor

School of Computer Science and Engineering

www.nrcmec.org
2024-2025
 School of Computer Science and Engineering

CERTIFICATE
This is to certify that the Technical Seminar report entitled “UI/UX
Design” is the bonafide work done by Nagula Ravi Kiran, 21X01A0544, in partial
fulfillment of the requirements for the award of the degree of Bachelor of Technology in
Computer Science and Technology , from Jawaharlal Nehru Technological University
Hyderabad, during the year 2021-2025.

Seminar Guide Head of the Department

Mrs.Jayanthi,M-tech Dr. G. Ramu
Assistant professor Professor & Head
School of Computer Science and Engineering, School of Computer Science and Engineering,
Narsimha Reddy Engineering College Narsimha Reddy Engineering College
Maisammaguda, Kompally, Secunderabad Maisammaguda, Kompally, Secunderabad

ABSTRACT

USER INTERFACE / USER EXPERIENCE DESIGN

User Interface (UI) and User Experience (UX) are pivotal components in the design
of digital products, influencing how users interact with and perceive technology. UI
focuses on the visual and interactive aspects of a product, including layout, color schemes,
and interactive elements. It is concerned with the design of interfaces that users engage
with directly. UX, on the other hand, encompasses the overall experience of the user as
they interact with the product, including usability, accessibility, and the emotional
response elicited throughout the interaction process. Effective UI design aims to create an
intuitive and aesthetically pleasing interface, while robust UX design seeks to ensure that
the entire user journey is smooth, efficient, and satisfying. The interplay between UI and
UX is critical for developing products that not only look good but also offer a seamless
and engaging user experience. This abstract underscores the importance of integrating
both UI and UX principles to achieve optimal product design and user satisfaction.

Nagula Ravi Kiran

(21X01A0544)
 Table of Contents

CHAPTER NAME PAGE NUMBERS

Introduction 2
General Overview of the UI/UX 3
What is UI Design? 3
What is UX Design? 3
UX Vs. UI 4
Prototyping instruments and provision for UI/UX 4
Benefits of UI/UX Design 8
Example: The Importance of UI/UX 9
Conclusion 11

1
 FIGURES

FIGURES NUMBERS FIGURES NAMES PAGE NO

2
 Introduction
In this research we will illustrate those Emulating points: First: all diagram will illustrate the developments that
have taken put Previously, later quite some time. Furthermore, the thing that is the interface design and user
experience.

Furthermore, requisitions utilized within the plan from claiming interfaces Furthermore user experience there are a
few. Requisitions utilized within those outlines of interfaces, at we picked person requisition What's more we need.
Elucidated over it.

Third: the devices utilized within those configurations for user interfaces and user experience. there are a few
instruments. Utilized within those plans for interfaces What's more we have clarified them.

Fourth: focal point there need aid a few advantages to the plan about user interface Furthermore experience, also
we have elucidated them.

Fifth: instance on the user interfaces for a few locales Furthermore will see if those users might have been fulfilled.
For it alternately not.

3
 General Overview of the UI/UX

Have you ever looked at a building and admired it for its grandeur and design? What makes a building
functional yet elegant? It’s generally assumed that the architect will have the answer to those questions,
but it’s important to remember that it wasn’t just the architect who created such a functional, beautiful
building. The architect worked with a civil engineer to ensure the building’s structural and aesthetic
integrity. While there were other people who worked on the building, we can identify the architect and the
civil engineer as the two leads on the project.

Similarly, UX and UI designers can be identified as two lead positions that often collaborate to ensure a
project’s integrity throughout the design process.

4
What is UI Design?
A User Experience (UX) designer is responsible for designing the experience that users have when
interacting with a product. UX designers focus on crafting products that are easy to use and understand.
UX designers always put users’ needs first when considering design solutions in order to enhance
customer satisfaction. The fundamentals of UX design include:

 Defining a problem
 Understanding users
 Creating personas
 Generating task and user flows
 Creating sketches, high and low fidelity wireframes, and prototypes
 Usability testing

UX designers place an emphasis on testing and validating their designs in order to meet the expectations
of their users.

5
What is UX Design?
User Interface design, or UI, focuses on incorporating a visual hierarchy into a design for the user to
follow. This often means taking ideas outlined in a wireframe and making them into a high-fidelity design
that incorporates this visual hierarchy. UI designers make products joyful to interact with.

UI designers take the mid and low fidelity designs for a project and begin to refine the designs. UI
designers focus on the visual hierarchy and patterns that give visual cues to users. These items can
include:

 Color scheme
 Typefaces
 Iconography
 Layout

6
UX Vs. UI
While UX and UI designers work together to create a final end product, there are several key differences
between the two that we will explore below.

1. UX designers tend to focus on creating a product that solves a problem, while UI designers work
on the design patterns and micro-details of the product.
2. UX designers think extensively about how best to make a product easy to use, while UI designers
think extensively about how best to make a product delightful and enjoyable to use.
3. UX design can be used for both tangible and intangible products, while UI design tends to be
limited to digital interfaces.
4. UX is what we, as users, experience, while UI is what we see while using a product.
5. UX design generally comes before UI design in an ideal design process.

7
 Prototyping instruments and provision for UI/UX

Prototyping tools act as a bridge that gap between the initial design and the finished product. It is a
rough draft to identify what works and what doesn’t. It can help us solve design problems before writing
even a single line of code. Today’s clients want to see interactive prototypes, which show the concepts in
action and help them see how their ideas will take shape.

UI tools give designers what they need to design accurate hi-fi wireframes, mockups, and prototypes and
render minimally viable products. They represent the nuts and bolts of a design, communicating its
functionality.

UX tools focus on the user and how they’ll experience the content. These tools can help structure the
information architecture, as well as how someone will flow through the experience. Since this is more
conceptual, UX tools are about helping a designer paint the broader picture of how content and
organization will affect experience.

There are many tools available on the market for prototyping websites and mobile applications. We’re
going to take a look at some UI and UX tools that you may find handy for your design process.

1. Sketch

Sketch is a power, flexibility, lightweight and easy-to-use package tool. It is a vector design tool
entirely focused on user interface design. Vectors mean scalability. Its Vector shapes easily adapt to
changing styles, sizes and layouts, which allows you to avoid a lot of painful hand-tweaking. Sketch is
built for modern graphic designers that use a single unit, styles only relevant to UI design, a built-in
iPhone previewing tool called Mirror and Artboards, the most efficient way to design multiple screens.
Designers can easily edit the position, rotation and size of one or more objects at a time. You can reuse
the named Layer Style in on multiple objects. Sketch comes with unlimited gradient fills, different
blending modes, infinite borders, shadows and more. This tool lets designers dynamically edit 4 different
types of blur like Gaussian, Motion, Zoom, and Background. It is ideal for iOS design. You can export
your layers with one click directly out of Sketch. No need to add separate slice layers.

8
Sketch is made specifically for Mac OS X users to design interfaces, websites and icons. Sketch is perfect
for designing for multiple devices, and delivering assets is a breeze. It is the ultimate tool for iOS,
Android and Web design.

PRICING RUNS ON

 Trial – 30 days  macOS

 Premium – $99

PROTOTYPE FOR OUTPUT

 iOS  PNG
 Android  JPG
 Web
HTML

9
10
 2. Framer

Framer is a professional tool for concepting, prototyping and sharing interactive design projects. It is
ideal for prototyping high fidelity animations or complex interactions for desktop or mobile apps. In
Framer, you will have to code. You won’t be limited as other apps like dragging and dropping, pushing
buttons, or connecting dots.

Framer is a code-based prototyping tool. Prototypes are built with Coffeescript, a simpler and more
legible way of writing JavaScript. Framer Studio has a live interactive preview, which updates instantly
when you change something. Prototypes can also be viewed on Android and iOS devices using a Mirror
app.

Framer supports Sketch and Photoshop projects, and will also preserve your design’s layers. You can also
import After Effects files. Framer lets generate a URL that can be shared with your clients, which can be
opened on mobile devices for live previews.
PRICING PROTOTYPE FOR

 Trial – 14 days  Android

 Monthly License – $15/month  iOS
 Yearly License – $159/year
 Enterprise – Contact
RUNS ON OUTPUT

 macOS  HTML

11
 3. InVision

InVision is one of the most reliable web-based prototyping tool that make your design live quickly. It
allows designers to upload their design files and add animations, gestures, and transitions to transform
their static screens into clickable, interactive prototypes. InVision supports multiple file types, including
JPG, PNG, GIF, AI, and PSD.

The team are constantly adding new features to help designers prototype more efficiently. InVision is
“always-on” platform that allows team collaboration, feedback, and the building of high-fidelity
prototypes so easy. Clients and design teams can conveniently provide comments directly on the
prototype. The InVision’s project management page with drag-and-drop workflow like Trello. You can
set columns for To-do, In Progress, Needs Review and more.

You can import design files from Sketch or Photoshop, animate design assets, link pages to simulate real-
life websites, and preview prototypes on mobile devices. You can also view history of previous versions,
restore their earlier appearance and synchronization with Dropbox, Creative Cloud, Google Drive, and
Slack, prototypes update themselves every time you edit source files.
PRICING RUNS ON

 Free – 1 Active project  Web

 Starter – 3 Active Projects – $15/month

12
 Professional – Unlimited Projects –

$25/month
 Team – Unlimited Projects, 5 Users –
$100/month
 Enterprise – Unlimited Projects, advanced
features come with a free trial
PROTOTYPE FOR OUTPUT

 Android  HTML
 iOS
 Web

RECOMMENDED FOR

 Easy to learn
 Team collaboration and workflow management
 Quick and intuitive to add screens and create hotspots (drag + drop)
 Options for adding animation to page transitions (mobile only)
 Enterprises
 Asset management features via web tool or Dropbox-like folder for easy file sharing and editing

13
 Benefits of UI/UX Design

1. Customer Acquisition

Successful user experience and design provide a competitive advantage. They will likely
overtake price as key brand differentiators that attract new customers. (And who doesn’t want
more new customers?) Great enterprise UI/UX is more than just effective product design - it’s
good business.

2. Customer Retention

By building an enterprise application that’s beautiful and intuitive, more people will want
to use it, and more importantly, keep using it. In this digital world, customer retention is
increasingly important as competition grows with every technological advancement.

3. Lower Support Costs

A well-designed app just works. If an application is poorly designed, there will be an

increased need for training, documentation, and support later, which translates into higher costs.
An app that is intuitive and easy to use puts less stress on both employees and the bottom line.

4. Increased Productivity

Better user experience leads to productivity improvements. When you consider the
increased productivity over the number of users and hours of day each user is active, the financial
impact is readily apparent - and substantial.

5. Reduces Development Time

An estimated 50% of engineering time is spent redoing work to fix mistakes that could have been
avoided, like incorrect assumptions about how users will behave, confusing navigation that causes users to
get stuck or lost, a new feature that nobody wants to use, or a design choice that isn’t accessible. Making
sure the design is done right – and done well – the first time around will prevent future headaches.

Example: The Importance of UI/UX

1. Ryanair’s booking platform

If you fly frequently with Ryanair, you’ve likely been left tearing your hair out over its booking
platform. I mean, who knew booking a simple weekend getaway could be such a headache?
Ryanair’s booking interfaces could be considered an example of “dark UX”; sneaky UX design
14
tactics that make the experience complicated and confusing enough to trick users into spending .

15
 Why it’s bad UX: Dark UX is the opposite of user-first design. Rather than considering the
functionality and usability of a platform, dark UX deliberately confuses and misleads users into
choosing certain options over others, normally in the interest of generating more revenue for the
company—and essentially turning any user flow into an assault course that users have to navigate,
rather than a simple process.

2. Apple’s storage management system

During those priceless, time-sensitive moments that deserve to be captured on camera so that they
can be cherished forever more—like your child walking for the first time, or spotting your favorite
celebrity in your local coffee shop—there’s nothing worse than being confronted with this
message:

Why this is bad UX: There’s no indication of what the users’ options are here. There should be a
clear sense of just how many pictures need to be deleted in order to take a new picture in that
moment, or just how much storage needs to be cleared. Without this snapshot information, users
are less inclined to head to settings to make the necessary amendments.

3. Super long dropdowns

At some point, we’ve all had to pick our nationality from a seemingly infinite dropdown and no
search bar in sight. There’s an added layer of inconvenience if you’re from somewhere like the
UK

16
that has multiple names (United Kingdom/Britain/Great Britain) and you find yourself scrolling
through an endless sea of countries just to find yours.

Why it’s bad UX: Long dropdowns with no subheadings or filters are hugely time-consuming for
users, especially those who are unsure of what they’re looking for.

17
 Conclusion

Starts with those portrayal of what user interface plan intends (UI) Furthermore of what client.
Knowledge plan methods (UX) those meaning for them What's more Think as of how these expressions
need aid. Combines together with depict a exceptional implying from claiming them (UI/UX).

Those user interface (UI) concentrates for making An delightful format should presentation your item
What's more. Benefits in the most ideal that is worthy of the client Also create as much certainty
Previously, accomplishing. Its goal, there would huge numbers phases and procedures that must be
completed with settle on the client interface. Plan successful, some of which are more critical over others
relying upon those personal satisfaction from claiming. The venture Site, program, application, and so
on..).

Those user experience (UX) concentrates on the desires and goals of those client with achieve as much.
Objective without significantly exert What's more Previously, A simple, simple and smooth birch earth.

The only common point between the two concepts is that they both focus on the user, but in two
different ways.

One focuses on the Interface, the other focuses on the Experience.

User Interface/User Experience witnessed a big difference in our history, it changed in a whole different
way by time as you can see in this report and we should expect more by time. Then we had a view of
description of the advantages of the User Interface/User Experience design, mentioned the types,
application and tools that are used in User Interface/User Experience design.

Offered point by point illustrations that clarify those client Interface/User Experience configuration
vitality.

18
19