Understanding UI/UX Design

 What is UI/UX Design

UI design and UX design are two of the most often confused and conflated terms
in web and app design. And understandably so. They’re usually placed together in
a single term, UI/UX design, and viewed from the surface they seem to be
describing the same thing. It’s often hard to find solid descriptions of the two that
don’t descend too far into jargon. But fear not! What follows is an easy-to-digest
primer on these terms.
 What is UI Design
The “UI” in UI design stands for “user interface.” The user interface is the graphical
layout of an application. It consists of the buttons users click on, the text they read,
the images, sliders, text entry fields, and all the rest of the items the user interacts
with. This includes screen layout, transitions, interface animations and every single
micro-interaction. Any sort of visual element, interaction, or animation must all be
designed.
 What is UX Design
“UX” stands for “user experience.” A user’s experience of the app is determined
by how they interact with it. Is the experience smooth and intuitive or clunky and
confusing? Does navigating the app feel logical or does it feel arbitrary? Does
interacting with the app give people the sense that they’re efficiently accomplishing
the tasks they set out to achieve or does it feel like a struggle? User experience is
determined by how easy or difficult it is to interact with the user interface elements
that the UI designers have created.
 How UI and UX design work together
So a UX designer decides how the user interface works while the UI designer
decides how the user interface looks. This is a very collaborative process, and the
two design teams tend to work closely together. As the UX team is working out the
flow of the app, how all of the buttons navigate you through your tasks, and how
the interface efficiently serves up the information user’s need, the UI team is
working on how all of these interface elements will appear on screen. Let’s say at
some point in the design process it’s decided that extra buttons need to be added to
 a given screen. This will change how the buttons will need to be organized and
could require changing their shape or size. The UX team would determine the best
way to lay out the buttons while the UI teams adapt their designs to fit the new
layout. Constant communication and collaboration between UI and UX designers
help to assure that the final user interface looks as good as it can, while also
operating efficiently and intuitively.
 Element of UI/UX Design
There are five dependent layers, each level builds on the level before it, and they
start with an abstract level towards a concrete one (from bottom to top).
1. Strategy (start from the bottom)
The reason for the product, application, or the site, why we create it, who are
we doing this for, why people are willing to use it, why they need it. The goal
here is to define the user needs and business objectives. This could be done
through the Strategic Research Process, where you interview users, and all
stakeholders in addition to reviewing the competing products or companies.
2. Scope (2nd from the bottom)
Defines the functional and content requirements. What are the features, and
content contained in the application or product. The requirements should fulfill
and be aligned with the strategic goals. Functional Requirements It’s the
requirements about the functions, or features in the product, how features work
with each other, and how they interrelate with each other. These features are
what users need to reach the objectives. Content Requirements It’s the
information we need in order to provide value. Information like text, images,
audio, videos, …etc. Without defining the content, we have no idea about the
size or the time required to complete the project. Functional Vs Content
requirements The feature is having a media player for songs, while the content
is the audio files for these songs.
3. Structure (The middle)
Defines how the user interacts with the product, how the system behaves when
the user interacts, how it’s organized, prioritized, and how much of it. Structure
is split into two components, Interaction Design & Information Architecture.
 Interaction Design Given the functional requirements, It defines how users can
interact with the product, and how the system behaves in response to the user
interactions. Information Architecture Given the content requirements, It
defines the arrangement of content elements, how they are organized, to
facilitate human understanding.
4. Skeleton (The 2nd from the top)
Skeleton determines the visual form on the screen, presentation, and
arrangement of all elements that make us interact with the functionality of the
system that exists on the interface. Also how the user moves through the
information, and how information is presented to make it effective, clear, and
obvious.
5. Surface (The top, fina element)
It’s the sum total of all the work and decisions we have made. It determines
how does the product will look like, and choosing the right layout, typography,
colors, …etc. In Surface, we are dealing with Visual Design (Sensory Design),
it’s concerned with the visual appearance of content, controls, which gives a
clue of what users can do, and how to interact with them. It should make things
easier to understand, and increase cognitive ability to absorb what users see on
the screen.
 UX Tools
1. Figma
Figma is the most powerful UX tool, it is the most used tool for the designer
and researcher. Before, designers usually used Sketch, and researchers used
Miro, it was quite a hassle for both parties to work together. But Figma now
enables both parties to have seamless collaboration because Figma has 2 tools
inside their software, for design, and for whiteboarding (Figjam). So it is easy
to move the design to the figjam and do the discussion on it. Also it is easy for
researchers to share their analysis from their study and designers don’t have an
issue to back and forth through different platforms, because figma design and
figjam can be opened at a time. The process of handing off the design to the
developer is also much easier because the tool has a feature named “export
 developer handoff”, which will give you the css code based on the interface that
has been designed by you.
2. Sketch (design tool)
Sketch is a design tool for designing interfaces. They were the OG tool for
Interface Design. Sketch has a clean and easy-to-use interface that’ll make it
easy for you to create nice-looking mock-ups. Collaboration is an issue though
— especially since Sketch works on macOS only.
3. Miro (whiteboarding tool)
Miro is a whiteboard tool that enables you to mind map, use post-its, drawing,
brainstorming, etc. Designers and researchers usually use this tool to draw the
user journey map, user flow, analyze the research findings, and do workshops
with the cross functional stakeholder.
4. User Testing (for testing design)
This platform is great for finding suited candidates to test new designs on. You
can talk with users while they engage with your work. And you can get the
recording of the task based test, so you can just upload the design you want to
test, set the criteria of the audiences, set the task you want audiences to
accomplish on your design, then send it out. You will get the result later, and
there you can learn how the audiences interact with your design.