Introduction to UI / UX Design

Tools
In this course, you will be introduced to both the theory and practice behind UI and UX
Design.

Part 1 - Figma.com, for prototyping

Part 2 - Webflow.com, for bringing the prototypes to life

What is UI Design?
A user interface is the interface through which a user interacts with a device. For
example, on a mobile phone, the user interface is what is displayed on the screen of
the device.

User interface (UI) design is a design discipline focused on the visual elements of
the interface, for example:

Layout: Where do elements appear on the screen?

Colors: What palette is used and what emotions do those colors evoke?

Typography: What typefaces are used and what do they communicate?

Interaction design: How do elements respond to user interaction?

Brand identity: How do all of the visual elements come together to represent
the brand’s vision?

Responsiveness and usability: Is the interface easy to use across different

devices?

Accessibility and inclusivity: Does the interface work for everyone?

Front-end development: What is the code and technical backbone powering

the interface?

What is UX Design?

Introduction to UI / UX Design 1
 User experience (UX) describes the entire experience around a product or service,
taking into account the user’s emotional state, the context or environment, and the
designed system.

User experience (UX) design is a human-centered design discipline that addresses

the experience of a product, focused on:

User journey: The entire process surrounding use of a product, from the
problem to be solved through the impact of the solution.

User research: Qualitative and quantitative research to put the user at the
center of the design process.

Deliverables to document the user experience and define the workflows and
features of a product or design, such as:

Personas: Summaries of example and target users, generally based on a

composite of user research.

Journey maps: A timeline of user actions related to accomplishing a

particular goal related to a product or design.

Storyboards: A sequence of panels (often resembling a comic book)

depicting a user story chronologically.

Prototypes: Iterative models, sketches or wireframes of a design used to

gather feedback and inform the final design.

Introduction to UI / UX Design 2
 Strategy
What problem is this product intended to solve? This layer, the most abstract of the
model, takes into consideration both user needs and business goals.
Example: Mobile Phone

Who is the target audience and how will it fit into their lives? Smartphones with
a smaller form factor might target users who are frequently on the go, or those who
want to reduce their smartphone use.

Scope
What is the product that will be created to solve the problem? Within this layer, the
team defines functional requirements (what features to build) and content
requirements (written and visual information to include).
Example: Mobile Phone

Introduction to UI / UX Design 3
 What are the product specifications, such as the size of the screen and amount of
storage available? Which apps are included by default with the phone? What
aspects of the experience are customizable?

Structure
How is the design organized and how do interactions work? This layer includes
information architecture (the structure and organization of content) and interaction
design (the interactive experience of the product).

Example: Mobile Phone

How do users access key applications? What functionality is accessible from the
screen and from physical buttons? What should appear on the home screen and
lock screen by default — for example, does the phone display the time and the
weather?

Skeleton
How is information presented and arranged? This layer begins to consider interface
design (design of interface elements), navigation design (how users move through a
system), and information design (presenting information to facilitate understanding).
A common output at this stage is a set of wireframes.

Example: Mobile Phone

Where and how can users access search? Are some elements on the home screen
larger than others? How is information arranged in menus and toolbars? Can users
customize their workspace?

Surface
How does the product look and feel to users? This stage emphasizes visual design,
for example, what colors and typefaces are used, and is the stage where UI design
is front and center (though it is not exclusive to the surface).
Example: Mobile Phone

What colors and typefaces does the system use? Are a light mode and a dark mode
available? What is the icon style? What kind of animations occur on-screen? What
sounds does the interface make?

Introduction to UI / UX Design 4