Name - Shivam Israni FYMCA(M) Roll no 23

UI Lab Practical 1
What is UI?

UI design, also known as user interface design, refers to the aesthetic

design of all visual elements of a digital product’s user interface; namely the
product’s presentation and interactivity. UI design is often confused with UX
design, also known as user experience design. While UI and UX designers
work closely together, the two fields refer to separate aspects of the design
process.

UX design is the process of enhancing user satisfaction by improving the

usability and accessibility of a product, webpage, or app. On the other
hand, UI design is the design of the product’s interface—in other words,
what the user actually sees when they interact with the product. From color
schemes to typography, UI designers are responsible for the product’s look
and feel. UI design involves anticipating the user’s preferences and
creating an interface that both understands and fulfills them. UI design not
only focuses on aesthetics, but also maximizes the responsiveness,
efficiency, and accessibility of a website.

A user interface is the point of human-computer interaction and

communication on a device, webpage, or app. This can include display
screens, keyboards, a mouse, and the appearance of a desktop. User
interfaces enable users to effectively control the computer or device they
are interacting with. A successful user interface should be intuitive, efficient,
and user-friendly.
Name - Shivam Israni FYMCA(M) Roll no 23

UI Life cycle or UI development

Providing a successful user experience requires a balanced approach

throughout the development life cycle. To ensure this balance, you must not
only focus on implementing the functionality required to complete a task but
also on how the task is exposed through the user interface. Remember, the
user interface must not only be functional, it must also be usable. The
following outlines the typical phases of the user interface development
process:

Designing
● Functional requirements – Determine the initial requirements and
goals for the application.
● User analysis – Identify the user scenarios and understand the needs
and expectations of users for each scenario.
● Conceptual design – Model the underlying business that the
application must support.
● Logical design – Design the process and information flow of the
application.
● Physical design – Decide how the logical design will be implemented
on specific physical platforms.

Implementing
● Prototype – Develop paper or interactive screen mockups that focus
on the interface and don't include distracting visual design elements. ●
Construct – Build the application and prepare for design change
requests.

Testing
● Usability testing – Test the application with various users and
scenarios.
● Accessibility testing – Test the application with accessible
technologies and automated test tools.
Name - Shivam Israni FYMCA(M) Roll no 23

UI tools
UI design 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.

If you’re making the move into UI design, you need to be familiar with the
tools of the trade. Over time, you’ll discover which ones are most effective
for you.
Some of the most popular UI tools in the industries are as follows.

1. InVision
InVision is a web-based prototyping tool popular with both UX and UI
designers alike. You can upload static design files and quickly turn them
into high-fidelity, interactive prototypes.

2. Zeplin
As a UI designer, it’s essential that you’re able to communicate your
designs to the development team—and Zeplin has been built to facilitate
this. All you need to do is upload your designs, and Zeplin will automatically
generate specs and guidelines accordingly.

3.Balsamiq
When it comes to rapid wireframing, Balsamiq is a much-loved tool within
the design industry. Available as a desktop or Cloud app, it markets itself as
the perfect “in-between” tool for designers, product managers and
developers.

4. Sketch
The digital design app that every UI pro needs: Sketch. This is a
vector-based tool, so you can easily resize anything that you draw without
losing sharpness. However, this is much more than just a drawing
tool—Sketch is also great for wireframing and prototyping.

5. Adobe XD
Adobe XD is a vector-based tool for designing and prototyping user
Name - Shivam Israni FYMCA(M) Roll no 23
experiences for web, mobile, and even voice! If you’re already familiar with
the Adobe Creative Cloud suite, you’ll feel right at home in Adobe XD—an
extremely versatile tool which offers a whole host of features for designing,
prototyping, sharing, collaborating, and creating a complete design system.
XD natively supports Windows 10 and macOS, and is also available as a
mobile app for both Android and iOS.

6.Figma
Figma lets designers build dynamic prototypes and mockups, test them for
usability, and sync up all of the progress. Figma allows for a collaborative
environment where multiple people can work on a project at the same
time, much like Google Docs — letting you see who has it open for
real-time collaboration. You’ll see who’s working and what they’re doing.
It’s also browser-based, making it accessible to everyone in an instant.
And as an added bonus, it’s free for individual use so you can check it out
and get familiar with how it works.
Name - Shivam Israni FYMCA(M) Roll no 23