PANGASINAN STATE UNIVERSITY

Lingayen Campus
COLLEGE OF COMPUTING SCIENCES
Information Technology Department

Web Design Principles

ROBERT V. OCAMPO JR.
PRESENTER
 Coverage

Introduction to Web Design

User Experience (UX) User Interface (UI)

Design Design

Color Theory Typography

Introduction to Web Design

 It is the process of planning, creating, and presenting the front-end design of a

website. It may encompass several aspects, including web page layout, content
production, and graphic design.

 Within an organization, the purpose of web design is to generate the aesthetically

pleasing structure and content of the website that will be introduced to the user.
Introduction to Web Design

The ultimate goals of web design are to

 Create the basic elements of branding that make a site beautiful and visually
compelling;
 Accentuate and complement a company’s brand, product, or service as it’s
presented to the user; and
 Incorporate the latest developments in HTML, CSS, and other coding languages
into the website design
Introduction to Web Design

Web design typically involves several visual components, including:

• Graphic design
• Creative conceptualization
• Front-end coding
• Webpage layout
• Content production
• Search engine optimization (SEO)
• HTML/CSS Programming
 Color Theory

It is the basis for the primary rules and

guidelines that surround color and its use in
creating aesthetically pleasing visuals. By
understanding color theory basics, you can
begin to parse the logical structure of color
for yourself to create and use color palettes
more strategically. The result means
evoking a particular emotion, vibe, or
aesthetic.
 Color Theory, Importance

Color is an important aspect, if not

the most important aspect of
design, and can influence the
meaning of text, how users move
around a particular layout, and
what they feel as they do so. By
understanding color theory, you
can be more intentional in creating
visuals that make an impact
 Primary Colors

Primary colors are those you can't create by combining two or more other colors together. They're a lot
like prime numbers, which can't be created by multiplying two other numbers together.

There are three primary colors: Red, Yellow, and Blue.

Think of primary colors as your parent colors, anchoring your design in a general color scheme. Any one
or combination of these colors can give your brand guardrails when you move to explore other shades,
tones, and tints (we'll talk about those in just a minute). When designing or even painting with primary
colors, don't feel restricted to just the three primary colors listed above. Orange isn't a primary color, for
example, but brands can certainly use orange as their dominant color (as we at HubSpot know this quite
well). Knowing which primary colors create orange is your ticket to identifying colors that might go well
with orange — given the right shade, tone, or tint.
 Secondary Colors

Secondary colors are the colors that are formed by combining any two of the three primary colors listed
above. Check out the color theory model above — see how each secondary color is supported by two
of the three primary colors?
There are three secondary colors: orange, purple, and green. You can create each one using two of
the three primary colors. Here are the general rules of secondary color creation:
 Red + Yellow = Orange
 Blue + Red = Purple
 Yellow + Blue = Green
Keep in mind that the color mixtures above only work if you use the purest form of each primary color.
This pure form is known as a color's hue, and you'll see how these hues compare to the variants
underneath each color in the color wheel.
 Tertiary Colors

Tertiary colors are created when you mix a primary color with a secondary color. From here, color gets a little more complicated, and if
you want to learn how the experts choose color in their design, you've got to first understand all the other components of color. The
most important component of tertiary colors is that not every primary color can match with a secondary color to create a tertiary color.
For example, red can't mix in harmony with green, and blue can't mix in harmony with orange -- both mixtures would result in a slightly
brown color (unless of course, that's what you're looking for).
Instead, tertiary colors are created when a primary color mixes with a secondary color that comes next to it on the color wheel below.
There are six tertiary colors that fit this requirement:
 Red + Purple = Red-Purple (magenta)
 Red + Orange = Red-Orange (vermillion)
 Blue + Purple = Blue-Purple (violet)
 Blue + Green = Blue-Green (teal)
 Yellow + Orange = Yellow-Orange (amber)
 Yellow + Green = Yellow-Green (chartreuse)
Designers use a color wheel to pick the best and most compatible colors to ensure the combinations achieve the desired visual effect.
 Color Warmth

Hues that contain higher amounts of yellow and red are considered
warm colors. They evoke a sense of passion, happiness, and heat,
but can also seem aggressive and bring feelings of danger. That’s
why they’re often used in alert messages.

Cool colors, on the other hand, contain higher amounts of blue and
purple. These colors are reminiscent of chilly climates, crystal clear
waters, or the sky. They are considered more soothing and relaxing
than warm colors. However, they can also carry connotations of
formality and sadness.

Adding neutral colors such as white, black, and gray can help you
achieve a harmonious palette. They can balance out your color
scheme and add contrast to your designs.
 Color Systems: RGB, CMYK, and HEX

 The three standard color systems are RGB (Red,

Green, Blue), CMYK (Cyan, Magenta, Yellow,
Black), and HEX.
 The RGB color system is based on light. All colors
in this system are a combination of Red, Green,
and Blue. Each value is represented by a number
from 0 (black) to 255 (white). It’s easy to
understand once you remember Newton’s
experiments: the maximum value of all basic
colored lights produces white light, and zero color
(or zero light) is black or darkness.
 Color Systems: RGB, CMYK, and HEX

 CMYK is used in print design. These are also the standard

cartridges for most color printers. Unlike RGB, the zero
value of all colors in the CMYK system (0,0,0,0) will produce
white, while the maximum value (100,100,100,100) will be
black. However, the standard black used in print is defined
as (0, 0, 0, 100).

 Finally, the HEX color system uses a six-digit, three-byte,

hexadecimal description of each color, such as #000000
(black) or #ffffff (white). Every two characters represent a
color value. For instance, the famous Facebook blue
(#3b5998) includes a red hue described as 3b.
 Tints and Shades

 You can create tints by adding white to a color.

Higher levels of white will produce lighter tints.
Similarly, if you add black, you will produce a
different shade. The darker the shade, the
more black it contains.
 You can combine tints and shades of a base
color to achieve a monochromatic color
scheme. However, it can be more difficult to
make important elements stand out in such a
design.
 Hue, Saturation, and Lightness

 Hue describes the degree of similarity between colors. The

point of reference is usually a color such as red, green, blue, or
yellow. For instance, when you describe a color as yellow-
green, you’re thinking of it as having two hues.
 Saturation, on the other hand, refers to color intensity.
Increasing it will make the color more vibrant and darker while
decreasing it will make the color appear faded and pale.
 Finally, lightness defines how bright a color is compared to
pure white. Changing only the lightness parameter in graphic
editing software will produce different tints and shades.
Contrast

 Contrast is a crucial element of any website, especially

when it comes to background color and text. If the
contrast is too low, users are more likely to have
trouble differentiating between elements.

 For the sake of readability, it’s best to use a white

background and dark text color to keep pages clean
and organized. On the flip side, you can also
experiment with reversing the colors and using a light
text over a dark background. These two combinations
have become a trend in web design, with many
templates and apps offering a “Dark Theme” or a “Light
Theme.
 Color Relationship

When working on a project, designers often rely on fundamental color relationships,

also known as color schemes. The four main types include:
 Monochrome: Consisting of various tints, shades, and saturation of the same
color.
 Complementary: Based on two colors from opposite sides of the color wheel.
 Analogous: Featuring three colors that are next to each other on the color
wheel.
 Triadic: Using three colors that are at the points of a triangle drawn within the
color wheel.
 Color Relationship

Designers create color schemes by pairing multiple

color families from the color wheel. This works best
when you use one of the following patterns that
create color harmony.

Monochrome
A monochromatic color scheme consists of various
tints, shades, and saturations of a single base color.
They’re very cohesive, but run the risk of becoming
monotonous.
 5 types of color schemes

Complementary
Complementary color schemes are based on two colors
from opposite sides of the color wheel. Because the two
hues will be wildly different, such schemes can be very
impactful and noticeable. There are also split
complementary color schemes — where one primary color
is used with two analogous colors to its complement.
Pro tip: Pick a complementary color for your calls to action.
For example, if your background color is mint green, a red-
violet button would catch the eye because it is a
complementary color.
 5 types of color schemes

Analogous
Analogous color schemes feature three
colors that sit next to each other on the
color wheel. Because of the tonal
similarities, these schemes can create
a very cohesive, unified feel, without
the monotony of a monochrome
scheme.
Complementary and analogous color schemes are
the easiest to work with for many designers.
 5 types of color schemes

Triadic
To make a triadic color scheme, draw
an equilateral triangle (a triangle where
all three sides are the same length) on
the color wheel, and select the three
colors at the points of the triangle. This
triad creates a diverse, yet balanced,
scheme.
 5 types of color schemes

Tetradic
A tetradic color scheme includes
four colors that are equidistant from
each other on the color wheel.
Because the four colors can either
form a square or rectangle, some
resources break these color
schemes into two — square and
rectangle.
 How to Use Color Theory On Your
Website
 Color choices are vital for satisfactory user experience. An effective color scheme
can make a massive difference to your customers and contribute to your website’s
success.
 Rely on color theory to come up with harmonious palettes and find the right color
combinations.
 Color psychology is a powerful technique that can convey a variety of messages to
users.
 You should always research your target audience and test their color preferences.
 Don’t be afraid to perform additional testing to establish whether your choice of color
scheme is optimal on all devices.
 Typography

Speaking generally, typography determines how text looks to the reader, how the words literally appear on a
page or screen. For our purposes, it helps to hone in on just the text that we see on websites. This is
because the best practices around web text often differ from those of printed text, and there’s a lot more to
account for online.
On top of ease-of-reading, digital text must be designed for:
 shorter attention spans — there are virtually endless website options available, many with better
letters.
 skimmability, as users tend to land on web pages looking for something specific and want to find it
fast.
 accessibility, because not all internet users perceive or interact with web text in the same way.
 multiple device types and screen sizes — text should be legible across any digital medium.
 Typography

For all of these considerations, web typography gets its own special
category.

Additionally, web typography encompasses both how we design the

look of the text itself — fonts, colors, and styling — as well as how we
present the text on its respective web page. All of these details matter,
since they amount to a comfortable reading experience for as many
visitors as possible.
 Web Typography Terms

Typefaces and Fonts

A typeface is a specific look and feel applied to a set of alphabetic and numeric characters.
Common typefaces include Times New Roman, Arial, Helvetica, Courier, and Calibri.
But hold on, aren’t those fonts? Not exactly. A font is a particular instance of a typeface. Every
font within a typeface has a specific weight (i.e., bolder or lighter), size (e.g., 16 px vs. 24 px),
and may have other special stylizations applied (e.g., italicized or non-italicized, rounded or
unrounded).
For example, the fonts “Helvetica Light (12pt),” “Helvetica Regular (16pt),” and “Helvetica Bold
Oblique (20pt)” are three fonts in the “Helvetica” typeface:
 Web Typography Terms

 Put another way, a typeface

is the broad style category for
a set of specific fonts — this
is why a typeface is also
sometimes called a font
family.
 Web Typography Terms

Serif and Sans-Serif Fonts

A serif is a small ornamental projection
off the main stroke of a letter. Fonts
with this styling are called serif fonts.
“Sans” is French for “without,” and
fonts without these ornaments are
labeled as sans serif fonts:
 Web Typography Terms

There are other font styles too — script is another style used on the web,
though much less common than serif and sans-serif style fonts. Script fonts
are designed to replicate the varied and often fluid strokes created by
handwriting. Script is a harder style to read than serif and sans serif, and
should be used only for special cases, like prominent headings and fancy
party invitations.
 Web Typography Terms

Kerning is the horizontal space between two

specific characters. Fonts can have smaller
or wider kernings to improve legibility and
avoid awkward gaps. Common fonts have
specific kernings for every pairing of
adjacent characters, so all letters fit together
snugly. In the example, kerning separates
the two “T”s to improve readability.
 Web Typography Terms

Like kerning, tracking also describes the spacing between letters. However,
tracking denotes the overall spacing between letters in an entire line or block
of text, rather than just two particular letters:

Tracking is another
typographical detail to get right
for legibility. We can tell if a line
of text is spaced too widely or
looks a bit too squashed.
 Web Typography Terms

Leading (pronounced like the

element “lead”) is the vertical
spacing between lines of text.
We often use terms like “single-
spaced” or “double-spaced” to
specify leading, but leading can
also be expressed in units of
pixels or points.
 Web Typography Terms

Most web pages, especially text-heavy ones, break content into sections by
topic. These sections are signified and labeled by headings. The order of text
from most prominent to least prominent comprises the hierarchy of the page.

Hierarchy is crucial for making pages easily navigable and digestible. Readers
should be able to jump to whichever section is relevant to them by looking at
headings alone. Typography works to imply hierarchy with different font sizes,
font weights, font styles, and perhaps different fonts or typefaces altogether.
 Web Typography Terms

For example, a typical blog post

hierarchy starts with the title text (a.k.a.
“Heading 1” or “H1”), followed by
section headings of increasing
specificity and decreasing visual
prominence (H2s, H3s, etc.). Finally,
we reach the body text, which might be
the smallest but contains the content
readers want. Here’s an example of a
visual hierarchy created with different
Helvetica fonts:
 Website Typography Guidelines

1. Limit the number of typefaces per website.

2. Use a sans serif font for body text.
3. Stick to standard fonts at first.
4. Size your text appropriately.
5. Don’t use all caps.
6. Use colors carefully and intentionally.
7. Stay between around 40 and 80 characters per line.
8. Provide sufficient spacing between lines.
9. Eliminate text animations.
 Website Typography Guidelines

Limit the number of typefaces per website.

To maintain visual cohesion throughout your content, use no more than two different typefaces across
your website. Many websites do just fine with one typeface, especially if they apply different fonts within
the typeface for different purposes (like headings, body, button text, etc.). For instance:
 Website Typography Guidelines

Use a sans-serif font for body text.

While serif fonts are common in the printed text, typography experts generally
agree that sans-serif fonts are actually more readable in digital contexts. Our eyes
follow web text better without the decorations.

This doesn’t mean you can’t use serif fonts on your website at all — a serif text in a
title, heading, pull quote, or decorative section can draw attention and provide nice
contrast. However, for blocks of text that require more effort to read and
understand, your text is better “sans.”
 Website Typography Guidelines

Stick to standard fonts at first.

By “standard,” I don’t mean “plain” or “boring,” but “compatible.” By choosing a web-safe font, you’ll
ensure your text is easily readable for everyone through any digital means.

There are a few advantages to standard fonts. First, all web-safe fonts will render on every web browser
and device, be it desktop and mobile. If a font isn’t recognized, the system will default to a font that might
look worse.

Second, readers are accustomed to seeing standard fonts online. They won’t be distracted by the
appearance of the text, and will be able to scan it more quickly. Ultimately, your typography should help
the reader, not distract them from the content they want.
 Website Typography Guidelines

Stick to standard fonts at first.

Third, web-safe fonts tend to lack some inconvenient design flaws seen in other fonts. A standard font, for
example, won't contain any strange kernings that make two letters look stuck together. They also minimize
instances in which two different characters are hard to distinguish, like “I” form “L” or “r” from “n”.

If you’d prefer a non-standard typeface or font, there’s always a chance some browsers won't recognize the style
and instead display something like plain Times New Roman. There’s nothing wrong with good old Times, but again,
sans serif fonts are better for body text.

To solve this, consider implementing a font stack, a list of backup fonts in your CSS file that the browser will render
if your first font choice fails to do so. Put a couple of standard fonts in your font stack to ensure visitors will always
see the most suitable style of text.
 Website Typography Guidelines

Size your text appropriately.

Web designers specify font size with pixels (px) rather than points (pt). This is because a
pixel is a standardized unit online, whereas a font point is not — two people reading 12pt text on the
same website might see different things depending on their devices or web browsers.
A common practice is to set all website text to a minimum size of 16px. This is roughly the
size of body text in printed media, and is the smallest font that most people can read without needing
to zoom in. Of course, you can and should increase and vary the size of your text to further assist
readers and establish hierarchy, but don’t go overboard with massive fonts either.
On the subject of hierarchy, headings should always be larger than body text and decrease in
size by H1, H2, H3, etc. This helps readers scan your pages for the target content. You might also
elect to add varying weights to your headings for a greater contrast with body text.
 Website Typography Guidelines

Don’t use all caps.

This is more of a straightforward rule — ”all caps” is unnecessary in nearly
all contexts outside of decorative text, branding, and the occasional set of
headings.

If you want to emphasize body or heading text, bold it. This lends the same
effect while being more readable and visually pleasing.
 Website Typography Guidelines

Use colors carefully and intentionally.

A common pain point for web users is a bad pairing of text color and background color, in
which the two do not contrast enough to maintain legibility. Refrain from layering text over a
background with similar colors, and be very cautious when placing text atop images.

More precisely, the Web Content Accessibility Guidelines (WCAG) recommend a contrast
ratio of at least 4.5:1 for most text, and 3:1 for large, bolded text. Use a free tool like this
one to check the contrast between your font and background color. Alternatively, you can’t
go wrong with black or dark text on a white background, at least in terms of legibility.
 Website Typography Guidelines

Use colors carefully and intentionally.

Aside from contrast, be mindful of your choice of text color as well. It’s best to keep your
body text one uniform color with the exception of hyperlinks, which should contrast with the
rest of the text. Avoid using blue as the default color in your text, since it implies a hyperlink.

Also, refrain from using red and green as a visual cue in your text, as this won’t be apparent
to individuals with red-green color blindness. In fact, color alone should not be used to
distinguish one piece of text from the rest. Combine color with other styling (like bolding,
italics, or underline) to emphasize a text snippet.
 Website Typography Guidelines

Stay between around 40 and 80 characters per line.

Humans are picky readers — we favor lines of text that fall between 40 and 80 characters.
Anything less forces our eyes to move to the next line too frequently, which distracts us. On
the other end, any line length greater will bore readers, cause discomfort, and require more
effort to find the start of a new line as the eye travels back to the left side of the text block.

These parameters provide some wiggle room for different page layouts and mobile-
responsive designs. But, if you can, aim for the sweet spot of 60-70 characters per line.
Your eyes will thank you.
 Website Typography Guidelines

Provide sufficient spacing between lines.

Proper whitespace ensures that readers can easily follow single lines of text and return the
next line after a line break. Accessibility frameworks tend to allot vertical space based on
the font size of the respective text.

For body text, start with a spacing of 1.5, which means that the leading is 50% the height of
the text line. For headings, this distance should be slightly greater. For between
paragraphs, start with a spacing of 2.5 and adjust up or down from there.
 Website Typography Guidelines

Eliminate text animations.

Yes, animations do grab the reader’s attention, but few things are worse for
readability than flashing or moving text. If you’ve ever tried to read a note that someone
held up to you, you’ll understand why — it takes work to stabilize it in our brains.
What’s worse, many visitors will think of this text as an unnecessary inconvenience,
a gimmick, and/or an ad. Flashing images may also trigger photosensitive seizures.
The sole exception to this final rule is entrance or exit effects. These can be a fun
way to build an experience for a visitor as they scroll. But, once the text appears, it should
stay static.
 Website Typography Guidelines

Testing Your Text

Armed with these guidelines and typography know-how, you’re ready to start
experimenting with typefaces, fonts, and styles in search of the perfect reading experience.
However, there’s one last catch: You could follow all of the guidelines above, and
still neglect some aspect of typography that an average visitor will notice instantly. That’s
why the final phase of any text design iteration is thorough user testing.
Find a diverse group of internet users who can offer insight into the readability of
your text content. It doesn’t matter if you’re publishing basic product descriptions or
romance novels — by factoring in human feedback into your typography, you'll be confident
that your website is a comfortable and satisfying read.
 User Interface (UI)

The user interface (UI) is the point of Many real-world businesses are
human-computer interaction and dependent on web and mobile
communication in a device. This can apps. This has led companies to
A good UI adheres to
include display screens, keyboards, place increased priority on UI to
design principles that
a mouse and the appearance of a improve the user's overall
enable users to navigate
desktop. It is also how a user experience. UI and web designing
through the interface and
interacts with an application or a no longer just encompass hard
easily use it for their
website, using visual and audio skills like coding. They also require
intended purposes.
elements, such as type fonts, icons, knowledge about user interaction
buttons, animations and sounds. design patterns and accessibility to
ensure interfaces are user-friendly
for everyone and not overly
complicated.
 User Interface (UI), History

In early computers, the only UIs The UI evolved with the The first GUI originated mainly in
were a few buttons on an introduction of the command Xerox's Palo Alto Research Center.
operator's console. Many of language interface, which first Apple then enhanced GUI
these computers used punched appeared as a nearly blank development, and Microsoft
cards, prepared using keypunch display screen with a line for effectively standardized it in the
machines, as the primary user input. Users relied on a Windows operating systems
method of input for computer keyboard and a set of throughout the '90s and into the
programs and data. While commands to exchange present. Other lesser-known
punched cards have been information with the computer. examples were developed
obsolete in computing since The CLI advanced to using concurrently. These evolutions
2012, some voting machines still menus with lists of choices collectively shaped current trends
use a punched card system. written in text. in UIs and web design.
 User Interface (UI), Key Principles

An easy way to recall the fundamental principles of UI design is to learn the four
c’s:
 Control. The users should be in control of the interface.
 Consistency. Use common elements to make your UI predictable and easy
to navigate, even for novice users.
 Comfortability. Interacting with a product should be an effortless,
comfortable experience.
 Cognitive load. It’s critical to be mindful of bombarding users with content.
Be as clear and concise as possible.
 User Interface (UI), Design Tools

It is essential to have the right

tools and technology to
support your UI design efforts.
In the table below, we've
outlined five UI design tools
and listed the cost, features,
and star rating on G2, a
website where users review
and discover new software
programs.
 User Interface (UI) ,Types

The various types of UI include the following:

 Graphical user interface (GUI). Web UIs and other digital products often feature GUIs with
graphical elements, such as windows, pull-down menus, buttons, scroll bars and icons. Multimedia
is increasingly being incorporated into GUIs for many applications, including sound, voice, motion
video and virtual reality (VR).
 Command line interface. CLIs are meant for developers who use programming languages, such
as Python, Pearl, C, C++, PowerShell and Bash. A command is entered and the interface
completes the task associated with that command.
 Menu-driven UI. The visual elements in a menu-driven UI let users make selections from various
options to get what they need. Online shopping sites exemplify this type of UI.
 Touch UI. A touch screen lets users physically interact with many elements of an interface.
 User Interface (UI) ,Types

The various types of UI include the following:

 Voice UI. VUIs receive verbal commands or requests from humans and can respond accordingly.
 Form-based UI. This interface provides electronic forms with features such as checkboxes that let users
submit responses and forms.
 Natural language UI. This type of user interface understands natural language and can converse with
humans, responding in a humanlike manner. Apple's Siri and Amazon's Alexa are examples of devices
featuring natural language user interfaces. A natural language interface is distinct from a natural user interface,
which focuses on creating interactions that don't require learning an artificial control, such as typing on a
keyboard.
 Mobile UI. The popularity of mobile applications led to the development of the mobile UI. It's concerned with
creating usable, interactive interfaces on the smaller screens of smartphones and tablets and improving special
features like touch controls.
 User Interface (UI) , Examples

A wide range of devices might serve as user interfaces or be part of a UI. Examples of these include
the following:
 Computer mouse. A computer mouse is a device that serves as a point of human-computer
interaction. Users interact with software or webpages in this way.
 Remote control. Like computer mouses, remote controls are a means to control and interact with
on-screen elements wirelessly.
 Virtual reality. VR applications let people use physical motion to interact with a computer. The
computing device recognizes motion as commands to complete certain tasks.
 Automated teller machines. Users interact with visual elements on an ATM screen to complete
transactions or other tasks.
 User Interface (UI) ,Types

A wide range of devices might serve as user interfaces or be part of a UI. Examples of these include
the following:
Speedometer. A speedometer provides information to human users regarding their vehicle's speed
from a vehicle dashboard.
iPod click wheels. Users interacted with an iPod's on-screen elements through a click wheel that
could, for instance, sift through a long list of songs.
Websites such as Airbnb, Dropbox and Virgin America have good user interface and visual design
characteristics. Sites like these have pleasant, easy-to-operate, user-centered designs that focus on
the user and their needs. Mobile first is increasingly a call to action for website design because many
users view content on mobile devices rather than on desktop computers. Certain best practices for
mobile site design provide a good starting point for meeting these needs.
 User Interface (UI) ,Design Process

There are multiple steps involved in the UI design process, including the following:
Assess end-user needs. A UI always has an intended purpose, and its design ultimately must serve
the needs of the target audience of users.
Examine existing features. When designing the user interface, what others are doing can be a good
starting point.
Create sketches. This entails creating low-fidelity drawings to map out a vision of what the final UI
could look like.
Create a wireframe. This step involves creating more detailed visual depictions of UIs, including
where and how components will be assembled.
 User Interface (UI) ,Design Process

There are multiple steps involved in the UI design process, including the following:
Build a prototype. A prototype version of a UI helps spot problems and test the
functionality of various components to ensure they work smoothly before implementation.
Implement the UI. In this step, the official version of the UI is released in a production
environment.
Continuous updates. UIs require troubleshooting to identify issues to fix issues users
encounter and to implement enhancements to improve the UI.
Design components. UI developers must create the UI components individually then
assemble them before a prototype is made and tested.
 User Interface (UI) ,Elements

There are many UI elements designers can implement to improve UI usability and ensure users have good
interactions. Not all of these interactive elements are mandatory, but each exists for a different reason, and
designers can combine as many as needed when building their UI components. They include the following:

Informational Input controls. Users Navigational components. Containers. Containers

components. Users enter information into an Users navigate through a UI organize content into
receive important interface, or select to find what they're looking easily digestible
information and options from for using components such sections. Rather than
updates, such as predesigned lists, using as search fields, pagination listing every subheading
notifications, a variety of input and slide drawer navigation underneath a tab, a
progress bars and controls such as that let users easily switch container element like
tooltips, through dropdown lists, radio between webpages. an accordion menu may
these components. buttons, text fields and be used to hide or show
checkboxes. content.
 Careers in UI design

If you want to begin a career in UI design, it's a good idea to research the professional
landscape for this field. According to the US Bureau of Labor Statistics (BLS), jobs in the
web development and digital design industry are projected to grow 23 percent between
2021 and 2031, which is must faster than average.

Below, we've provided duties and responsibilities and salary averages for three UI design
job titles you may come across in your research. Salary averages are based on Glassdoor's
January 2023 estimates of annual total pay (base pay and additional compensation of
commissions, bonuses, and profit sharing).
Careers in UI design

UI designer Information Interaction

What they make: $99,863 Architect designer
(5,698,532.30 Philippine What they make: What they make: $110,511
peso) $125,817 (7,179,558.38 (6,306,144.45 Philippine
What they do: Enhance Philippine peso) peso)
users' satisfaction by What they do: Optimize What they do: Optimize
optimizing the usability, the structure of a site's interaction elements such
accessibility, and content by creating site as menus, quizzes, or
functionality of websites and maps, user flows, calculators; typically work
applications. wireframes, and navigation in larger UI/UX teams.
schemes.
 User Experience (UX)

It focuses on the end user’s The concept of UX is It’s no secret that Whether you’re in tech,
overall experience, including most often talked about customers today want the company you own or
their perceptions, emotions, in terms of tech, such as quick and simple ways to work for most likely has a
and responses to a smartphones, computers, meet their needs and website. Well, customers
company’s product, system, software, and websites. solve their pain points. could write you off in a
or service. UX is defined by This is why UX is not only That’s why UX matters so matter of seconds if they
criteria including: ease of a fairly new field, but also much. don’t find your website
use, accessibility, and a variable one — it useful and easy to use. In
convenience. Together, changes quickly due to fact, most website
these individual factors technology visitors determine
contribute to the customer's advancements, new whether or not they want
overall experience. types of interactions, and to leave within a minute
user preferences. of opening a page.
 UX, Categories

1. Interaction Design
A subset of UX design is interaction design (IxD). It is defined as ... yup, you guessed it... the
interaction between a user and a product — the goal of that interaction is for it to be pleasant for the
user.

2. Visual Design
In visual design, creators use illustrations, photography, typography, space, layouts, and color to
enhance user experience. To have successful visual design, artistic design principles including
balance, space, and contrast are crucial. Color, shape, size, and other elements also impact visual
design.
 UX, Categories

3. User Research
User research is the last major element of UX design. User research is how companies determine
what their customers and users want and need. At its core, your website should solve a problem, and
so this is an important step in determining what exactly your users require. Without it, your designs are
simply guesses.

4. Information Architecture
Designers use information architecture to structure and label content so that users can find
information easily. Information architecture is used on websites, smartphones, apps, and even in the
physical places we go to. Ease of use and discoverability are two important factors of information
architecture, which is why it is so closely related to UX design.
 UX, Categories

Think about the New York City

Subway map. This is a great
example of information architecture
that helps people understand how to
get from one place to the next.
According to the Information
Architecture Institute, "If you’re
making things for others, you’re
practicing information architecture."
 UX, Design Principles

UX is an ever-changing field, but the fundamental UX design principles remain the same. Designers
also have to determine what they want in terms of visual balance. Being clear and concise is crucial …
less is more! You want your design to be intuitive, and most importantly, your design should meet the
user’s needs.

While UX is subject to trends and new technology, there are a few core principles that stay the same.
These help designers look at various problems through a methodology that's consistent and focused.

Be contextual: You want individuals to know exactly where they are in their user journey. They should
never feel lost or overwhelmed. Your design is there to guide them along their journey.
 UX, Design Principles

Be findable: Users don’t want to waste time. With a successful UX design, your work will be easy to
find and navigate.
Be easy: Being consistent and straightforward will go a long way with your users. You build
relationships with your users by providing them with enjoyable and easy experiences.
Be simple: No fluff, tangents, or unnecessary descriptions. Get to the point. Let’s be honest here …
these days, everyone has a short attention span.
Be human: No user enjoys feeling like they are interacting with a machine. You’ll gain the trust of the
end-user if you show them your brand’s personality and approachability.
These principles will guide you at every stage of the UX design process. Let's walk through what each
of those stages entails below.
 UX, Design Process

There are typically several stages of the UX design process to consider. UX design takes a human-
centered design approach during all these stages. This is about considering the needs of the people
you are designing for, coming up with a wide range of solutions to resolve the issue they are facing,
designing prototypes for the users to test, and then finally putting the best solution in place for the
user. If you look at the issue from the perspective of the user, and design with them in mind, you will
create solutions they will want to adopt.
Let's take a closer look at each stage of the design process below.
1. Understand your user’s pain points.
Since UX design is about improving the user experience, your first step is finding out what the
challenges and expectations of users are. Once you understand what the problems are, you can solve
for them.
 UX, Design Process

In an article for Career Foundry, Rosie Allabarton stresses the role of empathy at this stage of the UX
design process. She said, “You’ll be working with groups of users who come from a variety of
backgrounds and are bringing different experiences with them. Your job is to try to understand why
they are behaving the way they are, not to try to change that behavior or influence it, but
accommodate it within the product.”

There are a few approaches you can take to gather this important user research.
 UX, Design Process

Interviews
One of the best ways to understand your audience is to be in the same room as them. User
interviews typically entail a group of users browsing through an existing site or product or even a
competitor’s while members of your team observe. That way, your team can watch how people
interact with a website or product and gather feedback in real time. This can help uncover areas
of improvement that you and your team hadn’t noticed. Like maybe users are overlooking the
CTA button on your homepage, or maybe they want a search box to navigate a website. You can
then incorporate this feedback into your design process.

If in-person interviews isn’t an option, then you can always hold remote user testing sessions.
 UX, Design Process

Online Surveys
While interviews are ideal for getting rich insights from a small group of
users, online surveys are a great way to gather feedback from a larger
audience. Surveys consist of a series of targeted questions sent to a sample
of your audience. These questions can take on a variety of forms, including
yes/no, multiple choice, checkbox, dropdown, ranking, ranking scale, and
textbox. Online surveys are typically distributed via forms, and then
compiled in a database so you and other stakeholders can review them.
 UX, Design Process

2. Create user personas.

Now that you have all this user research, you’ll want to
summarize it. Creating user personas is a great way to do
so. Also known as buyer personas, these personas are
semi-fictional representations of your ideal customers
based on data and research. Buyer personas help you
better understand your existing and prospective
customers, so you can tailor your products as well as
your services, content, and messaging to meet their
specific needs, behaviors, and concerns. These personas
help ensure that everyone on your team understands,
remembers, and centers the end user throughout the
design process.
 UX, Design Process

3. Map out user journeys.

While you can categories users into different types of personas, every user is unique. That means
different users will interact with your site in different ways — even if they have the same goal. Say
they’re looking to apply to a job at your company. Some might navigate to your homepage, click
Careers from your navigation bar, and then browse your job openings. Others might search your
company name plus “careers” in Google.

Your goal is to identify the primary goals of your users and ensure they can complete their goals. So
an ecommerce site, for example, will need to identify all the different ways a customer might want to
complete a purchase and make sure their site enables them at every step. Providing functionality to
ensure a customer can complete a purchase on a desktop, tablet, and mobile device are just a few
scenarios you’d have to plan for. You’ll likely need a lot of colorful post-it notes for this stage.
 UX, Design Process

4. Create website wireframes.

Now that you’ve mapped out user journeys on paper, it’s
time to map them out in your actual product with website
wireframes and prototypes. You can think of a wireframe
as a sketch of your product or website.

When creating a wireframe for your website or product,

you can plot out how you want to display your main
features, allocate space, and present images and
content and how this layout helps (or hinders) the user
from achieving their goals before introducing design
elements like color schemes.
 UX, Design Process

4. Create website wireframes.

Evaluating your product’s functionality and intended user
behavior at this stage can help you find potential problems or
missing features that might get in the way of conversions or
sales later on — before you’re too far along in the design
process. That way, you can easily make changes, get
approval from other stakeholders, and confidently move to the
next stage of the design process.

Wireframes range in complexity. Some are hand-drawn with a

pencil, others are created with free software tools like
Inkscape and GIMP while other use paid software tools like
Sketch and Canva. Here’s an illustrated example.
 UX, Design Process

5. Start prototyping.
Think of a prototype as the final draft of your product or website before the coding begins.
It’s not the final version, but it’s close enough that you can fully test the product before it
launches and demonstrate it to management and other stakeholders.

Unlike a wireframe, a prototype will include font, images, icons, and colors. This phase is
focused less on aesthetics and more on user flow, however. Prototypes will be interactive,
allowing you, users, and other stakeholders to experience how the product works in real
life.
 UX, Design Process

5. Start prototyping.
You’ll run more user testing at this phase to uncover
issues like whether your checkout process requires
too many clicks or your homepage is difficult to
navigate.You’ll likely experiment with navigation and
other functionality at this stage, and produce lots of
iterations.

To create a prototype and subsequent iterations,

you’ll need to use a dedicated tool like Adobe XD,
InVision, or the free Justinmind. Here’s an example of
a prototype built with Justinmind.
 UX, Deliverables

UX deliverables are the various outputs of a UX design process. The designer and
team will have to produce and present these deliverables to an internal team and
external clients for review — either during the design process or once the project is
complete.

As tangible records of the work that has occurred, UX deliverables are a critical part of
the design process. These deliverables help UX designers to effectively communicate
their design ideas and findings, and make it clear to stakeholders why
recommendations for changes and improvements are made. They also help designers
get buy-in for their ideas.
 UX, Deliverables

1. User Research
User needs, tendencies, and motivations can be determined through different types of user
research. This might include quantitative and qualitative data from user testing sessions and
focus groups. It could detail feedback on sign up flows, the onboarding process, and customer
service inquiries.

The goal is to have a detailed analysis of what's both working on the site and what could be
improved — and to have this all backed by information gathered from users. Researchers may
create buyer personas based off of real user data to help them accurately determine who will be
using their device, website, or app. Through user research, designers understand and empathize
with the user.
 UX, Deliverables

2. Competitor Assessment
Assessing the strengths and weaknesses of your competitors is a way to enhance your own UX
strategy. A great way to do this is by creating a competitive analysis report that details the interaction
design of your competitors and provides an analysis of where you see pitfalls and missed
opportunities — things your business can take advantage of.

3. Interaction Design
An interaction design deliverable could come in the form of a prototype so that people can review how
interactions with the site would occur — showing how people would complete key tasks, get
information, use a product, the flow of finding information, and how easy the product is to use. You
want your prototype to be as similar to the final product as possible, so you can get sign off on the
design before you begin building it.
 UX, Deliverables

4. Information Architecture
IA is the process of taking information and
organizing it in a way that is easy to understand.
For large websites, this is especially important,
as you need to understand what content exists
and how to organize it in a way that makes
sense for your visitors. The result might be a
content inventory, sitemap with suggested
navigation, or sample user flows that reveal how
visitors move through a site.
 UX, Design Tools

Whether you are researching, prototyping, wireframing, storyboarding, or creating graphics, there are
multiple UX tools available to assist you during the design process. In fact, there are so many tools on
the market, some free and some that require a subscription fee, that it may be overwhelming for
designers who are unsure of exactly what they need. To get you started, here’s a list of some popular
and valuable tools to use in your UX design work:
1. Adobe Fireworks
Adobe Fireworks CS6 gives web designers a way to create graphics for their
web pages without getting into the code or design details. There are a few
reasons why UX designers use Adobe Fireworks: The tool has impressive pixel
accuracy, has image compression abilities (JPEG, GIF, etc.), allows users to
create functional websites, and build vectors. This is a great option especially if
you are already familiar with other programs in the Creative Cloud.
 UX, Design Tools

2. Adobe XD
With Adobe XD, you can design websites and mobile apps, as well as create
prototypes, wireframes, and vector designs. Users can share interactive prototypes
on multiple platforms, including Windows, Mac, iOS, and Android, so it’s perfect for
team collaboration.

3. Axure
Axure RP Pro is another great UX design tool — that’s also free. Axure has several
capabilities including wireframing, prototyping, and documenting. It can even help
you create user flows and sitemaps. Axure is perfect for creating web and desktop
applications, and it gives users the ability to easily export to PDF or HTML for review.
 UX, Design Tools

4. Adobe Illustrator and a Free

Alternative 5. Sketch
Sketch is an end-to-end software with specific
If you’re looking for an affordable alternative features including non-destructive editing (meaning
to Adobe software, such as Adobe Illustrator Sketch won’t change the pixels in the photo you are
(which is primarily used to create vector working with), code export, pixel precision,
graphics), we’ve got you. Inkscape is known prototyping, vector editing, and more. With Sketch,
for doing most of what Illustrator does, but you can reuse and update your designs easily.
for free. This software is open source and
can be used to create impressive vector
graphics. The only issue you could run into
is lag, as some users have reported that the
program is slow. If you’re partial to
Illustrator, that’s OK too.
 UX, Design Tools

6. Storyboard Software
You might be wondering why you would need to storyboard in UX design. It’s a great way to
visually predict and review the way a user would interact with and experience a product in a broader
context. There are several storyboard tools available, with varying levels of features and complexity.
Storyboarder is a free storyboard software option, which has basic features made for designers of all levels.
This software allows users to quickly create drawings and stick figures to lay out a plot or idea.
Another storyboard software option is Toon Boom Storyboard Pro. It combines drawing, animation,
camera controls, and numerous other features, all for an annual or monthly fee. It has a wider range of
features for more complex storytelling and detailed prep work. Both options are great for designers looking
to visually tell the story of their persona or users. Storyboards are also a great way to bring in all
stakeholders, including researchers, developers, and UI designers. Before we discuss how to become a UX
designer, let’s make sure we understand the difference between two similar roles: UX and UI designers.
UX and UI, Summary
 References

 Issacharoff, D. (2020, August 26). Color theory fundamentals every web designer should know. Elementor. https://elementor.com/blog/color-theory-
web-design/
 Ellis, M., & Ellis, M. (2020, October 28). Web design, web development, UI and UX: What’s the difference and which do you need? 99designs.
https://99designs.com/blog/web-digital/web-design-development-ui-ux-difference/
 O’Grady, N. (2024, April 30). Color theory for designers: a beginner’s guide. Webflow. https://webflow.com/blog/color-theory
 Cartwright, B. (2022, November 25). Color Theory 101: A complete guide to color wheels & color schemes. blog.hubspot.com.
https://blog.hubspot.com/marketing/color-theory-design
 Juviler, J. (2022, April 1). The Beginner’s Guide to Typography in Web Design. blog.hubspot.com. https://blog.hubspot.com/website/website-
typography
 Baker, K. (2022, October 6). User Testing: The Ultimate Guide. blog.hubspot.com. https://blog.hubspot.com/service/user-testing?
hubs_content=blog.hubspot.com%2Fwebsite%2Fwebsite-typography&hubs_content-cta=user%20testing
 Hashemi-Pour, C., & Churchville, F. (2024, April 30). user interface (UI). App Architecture.
https://www.techtarget.com/searchapparchitecture/definition/user-interface-UI
 References

 Interaction Design Foundation - IxDF. (2016, June 2). What is User Interface (UI) Design?. Interaction Design Foundation - IxDF.
https://www.interaction-design.org/literature/topics/ui-design
 Staff, C. (2023, November 29). What is UI design? Definition, tips, best practices. Coursera. https://www.coursera.org/articles/ui-design
 Baker, K. (2022, January 11). The Ultimate Guide to Designing for the User Experience. blog.hubspot.com. https://blog.hubspot.com/marketing/ux-
user-experience
 Cardello, J. (2024, May 3). UX design process: a simple (but complete) guide. Webflow. https://webflow.com/blog/ux-design-process
 Lamprecht, E. (2023, June 2). The difference between UX and UI design – a beginner’s guide. CareerFoundry.
https://careerfoundry.com/en/blog/ux-design/the-difference-between-ux-and-ui-design-a-laymans-guide/
 Staff, C. (2024, March 13). UI vs. UX Design: What’s the Difference? Coursera. https://www.coursera.org/articles/ui-vs-ux-design
 The difference between web design and UX design explained. (n.d.). https://www.hotjar.com/web-design/vs-ux-design/
“
Thank you for Listening.