UI / UX Design report

Information Systems
In
Department of Computer & Information Sciences

Projected by:
Reema ALshabanat 439004852
Noura Alsaleh 439001526
Table of Contents

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
 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.

2
 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.

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.

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

3
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.

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.

4
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.

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

5
 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

6
 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

7
 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

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

8
 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
tactics that make the experience complicated and confusing enough to trick users into spending
more money
than they
need to—in
this case with
hidden add-
ons. Below,
we can see
that the
option of no
insurance is
buried within
a totally
unrelated
menu,
making it
difficult for
users to find
it.

9
 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

10
 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.

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.
11
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.

12