Product Design - Articles: Lecturer Giorgi Rurua

Product Design Articles:
1) What is User Experience (UX) Design?-Interaction Design Founda-

tion (IxDF)
2) Color Theory In Web Design/ A Complete Guide (2022)- Color

Theory fundamentals every designer should know- Alina Khazarova
3) Icons in web design- Erik Messaki (2020)
4) Designing for Readability: A Guide to Web Typography - (Toptal

2018)
5)The Benefits of Using Imagery in Web Design- Angle Studios ( Jan-

uary 2019)
6)Adaptive vs. Responsive Design- Mads Soegaard (2021)
7)Everything You Need to Know About Wireframe Design and Proto-

types- Nick Babich (2020)
8)Website Forms Usability: Top 10 Recommendations- Kathryn Whit-

enton (2016)
9)When to Use Which User-Experience Research Methods-Nielsen

Norman Group
10)Starting a design system in startup- Ruiwen Tay 2020
11)How To a Create Personal Portfolio Website- Fiverr Team | October

22, 2021
12)World Leaders in Research-Based User Experience Mobile Sub-

navigation- Raluca Budiu on July 16, 2017
What is User Experience (UX) Design? | Interaction Design Foundation (IxDF) 03.06.22, 14:07
Literature Topics User Experience (UX) Design
User Experience (UX) Design

Your constantly-updated definition of User Experience (UX) Design and collection of topical content and
literature
10,036 Share Tweet Share

shares
What is User Experience (UX) Design?

User experience (UX) design is the process design teams use to create
products that provide meaningful and relevant experiences to users. This
involves the design of the entire process of acquiring and integrating the
product, including aspects of branding, design, usability and function.
Just a moment, loading…
-03:56
https://www.interaction-design.org/literature/topics/ux-design Page 1 of 17
Learn about the history of UX and what it means to be a UX designer here.
What UX Designers do goes Beyond UI

Design
“User Experience Design” is often used interchangeably with terms such
as “User Interface Design” and “Usability”. However, while usability and
user interface (UI) design are important aspects of UX design, they are
subsets of it – UX design covers a vast array of other areas, too. A UX
designer is concerned with the entire process of acquiring and integrating a
product, including aspects of branding, design, usability and function. It is
a story that begins before the device is even in the user’s hands.
“No product is an island. A product is more than the product. It is a

cohesive, integrated set of experiences. Think through all of the stages of a
product or service – from initial intentions through final reflections, from
first usage to help, service, and maintenance. Make them all work together
seamlessly.”
— Don Norman, inventor of the term “User Experience”

Products that provide great user experience (e.g., the iPhone) are thus
designed with not only the product’s consumption or use in mind but also
the entire process of acquiring, owning and even troubleshooting it.
Similarly, UX designers don’t just focus on creating products that are
usable; we concentrate on other aspects of the user experience, such as
pleasure, e!ciency and fun, too. Consequently, there is no single
definition of a good user experience. Instead, a good user experience is one
that meets a particular user’s needs in the specific context where he or she
uses the product.
UX Designers consider the Why, What and

How of Product Use
As a UX designer, you should consider the Why, What and How of product
use. The Why involves the users’ motivations for adopting a product,
whether they relate to a task they wish to perform with it or to values and
views which users associate with the ownership and use of the product.
The What addresses the things people can do with a product—its
functionality. Finally, the How relates to the design of functionality in an
accessible and aesthetically pleasant way. UX designers start with the Why
before determining the What and then, finally, the How in order to create
products that users can form meaningful experiences with. In software
designs, you will need to ensure the product’s “substance” comes through
an existing device and o"ers a seamless, fluid experience.
UX Design is User-Centered
Since UX design encompasses the entire user journey, it’s a
multidisciplinary field – UX designers come from a variety of backgrounds
such as visual design, programming, psychology and interaction design.
To design for human users also means you have to work with a heightened
scope regarding accessibility and accommodating many potential users’
physical limitations, such as reading small text. A UX designer’s typical
tasks vary, but often include user research, creating personas, designing
wireframes and interactive prototypes as well as testing designs. These
tasks can vary greatly from one organization to the next, but they always
demand designers to be the users’ advocate and keep the users’ needs at
the center of all design and development e"orts. That’s also why most UX
designers work in some form of user-centered work process, and keep
channeling their best-informed e"orts until they address all of the

relevant issues and user needs optimally.
User-centered design is an iterative process where you take an understanding

of the users and their context as a starting point for all design and development.
Learn More about UX Design

You can read and watch more about UX design from the inventor of the
term, Don Norman, right
here:https://www.nngroup.com/articles/author/don-norman/
Medium.com has a wealth of insightful, funny and inspiring material on

UX. Start reading here: https://medium.com/tag/ux
If you want to start learning how to work in UX Design now, the

Interaction Design Foundation’s online courses are a great place to begin.
You can read more about all the courses we o"er here:
https://www.interaction-design.org/courses
Color Theory In Web Design: A Complete Guide (2022) | Elementor 03.06.22, 14:09
Color Theory
Fundamentals Every Web
Designer Should Know
Alina Khazanova on Elementor Team Writes Web Design Updated on: 11.01.22 12
Color theory is a vast field that involves more human perception, cultural
associations, and color psychology. Our product designer guides you
through the fundamentals of color theory that every web designer should
know and shows how it works in practice.
Share
About the author: Alina Khazanova, Product Designer @ Elementor
! "
https://elementor.com/blog/color-theory-web-design/ Page 2 of 24
Alina is a product designer at Elementor. Her passion is to bring valuable and #

satisfying product experience to the users.
Color theory is a huge field of knowledge. It includes rules and guidelines about
various color combinations and their uses. Apart from the basic terminology and
classifications (such as color schemes (https://elementor.com/blog/website-
color-schemes/)), it also taps into other considerations such as human
perception, cultural associations, color psychology, and more.
Learning about color theory can help you create effective, smart designs.
Understanding the basics is a must for any professional in the field.
This article will guide you through the fundamentals of color theory that every
web designer should know. We’ll also show you how it works in practice. Let’s jump
in!
Table of Contents
Why Color Matters In Web Design
A Brief Look Into Color History
7 Key Color Theory Terms You Should Know
How To Apply An Effective Color Scheme
How to Use Color Psychology and Meaning to Influence Emotions
Things to Consider When Using Color Psychology
Introducing Elementor Global Color
How to Use Color Theory On Your Website
Why Color Matters In Web Design

The most apparent advantage of using the right color combinations in web design
is that they help users understand and navigate the site. Colors can improve
visitors’ online experiences, enabling them to find the information they need and
respond to your Call to Action (CTA) (https://elementor.com/blog/create-call-to-
action-box/).
However, there are other vital benefits of understanding color. When used
effectively in web design, it plays a significant role in branding and product
messaging. In fact, research has found (https://www.colorcom.com/research/why-
color-matters) that color plays a huge role in customers’ decisions about

purchasing a product, with a staggering 92.6 percent of viewers putting high
importance on the item’s visual factors.
The right color scheme can also make or break the success of a marketing
campaign.
According to a study (https://www.colorcom.com/research/why-color-matters)

conducted by the University of Loyola, Maryland, colors can increase overall brand
recognition by a staggering 80 percent.
This subject fascinates many researchers worldwide who are keen to examine the
effect of color on brand recognition, customer satisfaction, and overall product
success. Colors are crucial in both physical and digital environments as they help
guide the users through your website and improve the overall experience.
Therefore, every web designer needs to become fluent in color theory.
A Brief Look Into Color History

Colors have played vital roles in art and culture for centuries. However, the
scientific approach to color theory started in the 17th century when Sir Isaac
Newton created the first color wheel.
Around that time, colors were considered a mixture of light and dark. Newton
believed this approach was flawed, so he examined the properties of white light in
his famous prism experiment (https://caltechletters.org/science/history-of-color-
1).
Dispersive Prism separating white light into the colors of the spectrum, as discovered by Newton.
Newton discovered a visible spectrum of light, which consisted of many colors. He

mapped them into classifications that became known as the color wheel.
His experiment also led to the discovery that all secondary colors can be created
by mixing primary colors. Newton’s discoveries have influenced the work of artists,
designers, and scientists up to this day.
7 Key Color Theory Terms You Should

Know
With over 16 million colors to choose from when designing a website, it’s easy to
become overwhelmed. Having such a vast array of options gives you near-infinite
possibilities. Understanding the most basic color characteristics and terms can
help you make effective design decisions.
1. Color Wheel
A color wheel is a powerful tool that can help you visualize relationships between
colors in a standard, schematic way.
The basic color wheel consists of 12 colors. Primary colors form the basis of all
others. Although traditional theory lists these as Red, Blue, and Yellow, recent
research suggests that Magenta, Cyan, and Yellow are more accurate descriptors
of how we perceive these colors.
Mixing primary colors gives you Orange, Green, and Purple. These are known as
secondary colors. You can also combine primary and secondary colors to create
tertiary colors such as yellow-green, blue-green, and so on.
2. Color Relationships
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.
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.
Complementary and analogous color schemes are the easiest to work with for
many designers.
The first is excellent if you want to achieve a high contrast effect, while the latter
produces more subtle results.
Learn More About Website Color

Schemes
(https://elementor.com/blog/website-
color-schemes/)
3. Color Warmth
In a nutshell, colors can be either “cool” or “warm.”
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.
4. 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.
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.
5. 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.
6. 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.
7. 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.”
Contrast is vital not only for readability but content hierarchy as well. A prime
example is Aviaja Dance (https://aviajadance.com/), which uses high contrast
elements on its website to showcase essential details.
(https://my.elementor.com/welcome/)
Turn
Your
Vision
Into
Designing
Pixel-
Perfect
Website
How To Apply An E!ective Color

Scheme
A well-selected color scheme will help you achieve a balanced design. Colors that
work well together create harmony and contribute to a pleasant User Experience
(UX).
However, clashing colors can cause negative impressions, with feelings of chaos
and disharmony resonating from the design. This is why it’s crucial to develop
your ability to craft effective color schemes that won’t put off your visitors.
Below are a few examples of different color schemes that are visually pleasing. We
Are OSMs (https://weareosm.com/) excellent monochromatic color scheme
uses different tints and shades of green for its About section:
Our own color scheme (https://elementor.com/) applies analogous hues for the
main banner on the home page. Using colors that stand next to each other on the
color wheel creates a soothing gradient effect:
Instinct Studio (https://studio.myinstinct.in/about-us/) boasts vibrant elements in

orange and turquoise, which are complementary colors:
These colors stand on opposite sides of the color wheel and produce a sharp
contrast when used together. However, note that this technique can start to feel
aggressive if used excessively.
How to Use Color Psychology and

Meaning to Influence Emotions
Meaning to Influence Emotions

Color psychology is a fascinating field of study that examines the influence of
colors on people’s behaviors and moods. Different colors are often associated
with particular meanings or senses they provide to a perceiving person. To create
a successful design, you need to be aware of the color meanings, and understand
how a color choice can influence your users by generating a specific emotional
response.
Many industries benefit from color psychology, especially marketing and design.
Well-selected colors can convince users to take action and purchase products or
sign up for your mailing list. In other words, the knowledge of color theory can help
improve your conversion rate (https://blog.tubikstudio.com/color-in-design-
influence-on-users-actions/).
Below are examples of Elementor-based websites and templates that

successfully employ color meaning in their designs.
Red
Red is a strong, energetic color. It can symbolize many emotions and ideas, both
positive and negative. Users can associate it with love and passion, but it can also
signal danger or anger.
Elementor’s Portfolio kit (https://library.elementor.com/design-portfolio/) uses an

inviting tint of red, which resonates energy and confidence:
Red can be a bold statement color if you want to draw users’ immediate attention.
In fact, many food and beverage companies use red to evoke feelings of hunger
and desire.
Orange
Orange is a warm and happy color that reminds many users of friendliness,
enthusiasm, and motivation. As seen in Suited & Booted
(https://suitedandbooted.org/), using a bold orange background for your website’s
navigation screen can give off a creative and adventurous vibe:
Using orange as a key player in your color scheme can result in a highly
memorable site that leaves visitors with positive first impressions.
Yellow
Yellow is another warm color that symbolizes joy, happiness, and sunlight. When
used strategically on your website, you can easily inject confidence and
inspiration in your design (https://elementor.com/blog/web-design-inspiration/).
Lùleka Experience (https://www.lulekaexperience.it/) has used this color

particularly well, strategically adding bits of yellow to create a happy feeling on its
homepage:
That said, too much yellow can tire the eyes and even create anxiety, so it’s best
to keep it as an accent color.
Green
Green is a positive and calm color widely associated with nature, ecology, and
renewing energy. Elementor’s Travel kit (https://library.elementor.com/travel-
home-page/) employs beautiful, dark green elements to compliment the images
of greenery:
This color is pleasant and refreshing to look at, and it’s often used for
environmentally-conscious brands.
Blue
Blue is a popular choice for many corporate brands as it symbolizes trust and
reliability. It’s a calm, soothing color that can easily create a sense of freshness
when highly saturated.
Elementor’s Digital Agency kit (https://library.elementor.com/digital-agency-

home-page/) is a classic example of blue used in a business context. It’s vibrant
and energetic, and evokes trust and confidence:
Blue can also look distant and sad when pale, so it’s essential to strike a thoughtful
balance with this color.
Purple
Purple has long been associated with royalty, luxury, and wealth, but it’s also a
mysterious and magical color. Combining the energy of red and blue, it can be an
excellent option if you want to convey a message of power and trustworthiness.
For example, Proxy (https://madebyproxy.com/) employs a stunning purple palette

to create a sophisticated and mystical nighttime look:
Purple can be relaxing as it reminds many people of the dream sphere. However, a
high concentration may also distract users.
Pink
Pink is a youthful and romantic color, reminding users of everlasting love. It’s
widely associated with sensitivity and femininity, and it can also be a bold
statement color.
As seen in this striking design by the Komini agency (https://komini.se/), you can
use pink typography to create strong accents on your website:
It can take a fair bit of confidence to pull off a pink-heavy color scheme. However,
when used wisely, it makes for striking and memorable designs.
Black
Black has many meanings and can evoke different feelings when used in
combination with other colors. Western cultures will sometimes associate it with
evil and death, while in the East, it symbolizes strength and wisdom.
Elementor’s Photography kit (https://library.elementor.com/photography-home-

page/) employs a rich black background to emphasize the stunning imagery and
create an elegant look:
Black can be tragic and mysterious, or serious and modern. It’s excellent for
website backgrounds as it sets a sharp contrast with lighter typography.
White
White is a popular choice for modern, minimalist websites as it increases

readability and pairs well with any color. The use of white space creates a feeling
of cleanliness and light.
In this example, Jason Blackeye (https://jasonblackeye.com/portfolio/) uses crisp

white and light grey to make his portfolio projects stand out:
White can inspire new ideas as it reminds users of a blank page, so it’s not
surprising it’s such a popular choice for a background color. However, too much
white can also look empty and isolated.
Things to Consider When Using Color Psychology
As seen in our examples, colors can have many meanings that resonate differently
with each user. Therefore, it’s crucial to have your target audience in mind when
choosing color palettes for web design.
A user’s perception of color depends on factors such as their age, gender, culture,
and even religious beliefs. The same color can have opposite effects in different
parts of the world. For instance, white is considered a pure and positive color in
the U.S. and Western Europe. However, Asian cultures associate it with death and
sadness.
Color psychology is a complex subject, so make sure to study your target

audience and learn about their preferences. Rely on the power of user testing
(https://elementor.com/blog/a-b-testing/), ask the right questions, and gather as
much relevant data as possible (https://elementor.com/blog/webinar-kieran-
flanagan/) so you can make informed decisions.

How to Use Elementor's Global Colors & Fonts
Once you’ve created an effective color scheme, it’s smart to apply it across the
entire website for brand consistency. Manually copying and pasting HEX codes to
implement your chosen palette can be time-consuming.
Using tools such as the Elementor Color Picker

(https://docs.elementor.com/article/656-global-colors) enables you to save your
preferred color combinations and apply them to your projects faster. However, If
you want to manage a color scheme globally throughout your website, our new
Global Color (https://elementor.com/features/for-professionals/) functionality will
make your life easier:
Global color comes with the launch of Elementor Core 3.0 and is an additional
layer of Theme Style. It helps you build your design with useful blocks that you can
place where appropriate. This feature is perfect for making changes to a website’s
color scheme without having to touch any code or CSS files, all from one place
within the editor.
How to Use Color Theory On Your

Website
Now we’ve covered the basics of color theory, you should be able to implement it
in your next project. To recap, here are the main points to consider:
• 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.
Finally, you can use the Elementor Global Color feature to ensure consistency and
harmony throughout your website’s design.
Enhance Your Web Design Skills With

Color Theory
Color theory is a broad subject, offering insight into the science of color and the
depths of human emotion. While it’s a complex field, getting a grasp on the basics
can significantly boost your success as a web designer.
In this article, we’ve given you an overview of the fundamentals of color theory for
web designers. From basic terminology and classifications to color psychology
and cultural considerations, you should now have the tools to put this strategy
into practice.
Do you have any questions about Color Theory and how to apply it in web design?
Let us know in the comments section below!
(https://my.elementor.com/welcome/)
Turn
Your
Vision
Into
Designing
Pixel-
Perfect
Website
Looking for fresh content?

Get articles and insights from our weekly newsletter.
Enter Your Email Address Subscribe
By entering your email, you agree to our Terms of Service (https://elementor.com/terms/) and Privacy Policy (https://elementor.com/about/privacy/).
Icons in Web Design. What icons do users dislike? Which ones… | by Erik Messaki | Outcrowd | Medium 03.06.22, 14:11
!"#$%&'()*%+ ,"-./01)
2/%3
4(&&53%
607*89:
;9;9
<
=*>%+*/(5)
<
?%&-(+
!"#$%&'$&()*&+)%',$
@'5-*%.0+&*)0*"&(/&*)%&$%3(A
@'%.'*0+(&*)0*-'(B*$%3(*5+)*1'BA
C$$"&-/5-%0+D*,"-./01)
There are icons that users don’t like.

They say that the icon is unclear, ugly,
or simply cannot explain what they
dislike. The reason is simple — in such
icons, one or more fundamental
principles of their construction are
violated. The information in this
https://medium.com/outcrowd/icons-in-web-design-824f57cb2db0…20web%20design%20are,to%20perform%20the%20targeted%20action Page 1 of 22
article can help you avoid mistakes

and create icons that users will
definitely like. The principles are
relevant to both website and
application icons and can be applied to
all types of icons.
Let’s start with some basics. Icons in

web design are small elements only in
size, but not in importance or
significance. They are needed to
indicate information. These are visual
anchors that help capture the user’s
attention and direct them to perform
the targeted action.
Icons help to:
attract attention;
understand the meaning;
navigate the interface;
save visual space;
make a connection with the user.
The usage of icons is not as easy as it

seems at first glimpse and requires
design competence and a thoughtful
approach. (It’s good if a separate
specialist deals with icons.)
The biggest worry of some designers is

whether or not their icons look neat,
are correctly centered, and whether
the pixels are perfectly matched. They
align elements according to formulas
but forget the most important thing.
What are the most important

principles for creating icons that
everyone likes?
-.&/'012'"'34
Users don’t like complicated things.
A good icon should be simple and easy

to “read”. It doesn’t need a textual
explanation. You can test the icon by
showing it to a person far from design.
If they haven’t guessed what it roughly
means, there is probably something
wrong with this icon.
Key enemies of simplicity:
excess elements
unnecessary detailing
They hamper perception, distract, and

confuse users. As a general matter, the
fewer elements the icon contains, the
better. An icon with 3 or more colors
stops being a pictogram and becomes
an illustration.
A pile-up of elements and color accents

makes the icons visually
undifferentiated and unclear:
Excessive details don’t make the icon

clearer, but, on the contrary, make it
difficult to perceive:
A lot of emphasized and small

elements also sets off the simplicity:
considered detailing
The detailing of the icons should be

reasonable.
Don’t think that detailing is some kind

of evil, and the saying “The devil is in
the details” was invented by web
designers. Yes, any detailing makes
icons complex. However, it’s justified if
it matches the design concept and is
made professionally.
For example, your goal is to get the

user to look at the icon narrowly so
that they stay on the page for a while.
Then the detail makes sense. In most
cases, users don’t tend to strain their
eyes and cannot “read” a complex icon
on the fly.
There shouldn’t be a lot of detailed

icons on the page. Don’t place them
too close to each other. The
background for them must be sole-

colored, and the color palette —
limited.
For beginners, we would not

recommend starting with detailed
icons. Their creation requires solid
experience, artistic taste, and mastery.
C.0+*&(-*#B*4%3(*E*F/(5-%7(*4%+-&
5.&6)7%1'"8'34&9$:&'$;#7093'<)$)%%
Users don’t like things they don’t

understand.
An unclear icon needs to be

“decrypted”, and users don’t like it. If it
doesn’t have any meaning, this is also a
big disadvantage. The main purpose of
the icon is to instantly convey
information. Therefore, our task is to

remove all unnecessary things that
prevent it from doing this.
G'(&(*%.0+&*5/(*+0-*.$(5/*-0*"&(/&
good and bad simplification
Users don’t like interface elements and

even are uptight about them.
Therefore, it’s very important that the
icons are easy to “read.” The
recognition of icons depends on their
simplicity, comprehensibility, and
metaphoricity. However, there are
different types of simplicity. Simplicity
is not a guarantee of clarity. You can
simplify the icon beyond recognition.
H+*(I5>J$(*0K*07(/&%>J$%K%()*($(>(+-&
Excessive simplification or, on the

contrary, the complication of forms
can make the icon unclear to the user.
Don’t take advice in the style of “solid

icons are easier to read” seriously. Any
well-designed icons are easy to read.
sizes
The size of the elements also affects

the recognition of icons. The more
small elements are there in the icon,
the more difficult it is to understand
what it symbolizes.
An example of a poorly made icon:
The shape of the first icon doesn’t

evoke the necessary associations, and
small elements hamper its recognition.
The sizes of these elements don’t
correspond to the sizes of the other
two icons, line thickness and color also
differ. Here is a violation of the stylistic
unity, the absence of a suitable
metaphor, an excess of small elements.
All these are the reasons for the
“illegibility” of the icon.
clarity of metaphors
Good icons are universal for people of

different cultures, ages, and
backgrounds. However, you should
study your target audience and choose
the colors and metaphors that are
most appropriate and understandable
for this group.
Suitable metaphors guarantee that icons

are clear and informative.
These metaphors are clear even to a

child:
And here’s an example of puzzling

icons:
Users don’t like meaningless things.
In a creative outburst, designers love

to create beautiful but meaningless
elements. This approach deprives
icons of their main function: to
instantly convey information.
https://medium.com/outcrowd/icons-in-web-design-824f57cb2db…20web%20design%20are,to%20perform%20the%20targeted%20action Page 10 of 22
However, sometimes an icon must

visualize a complex or abstract idea for
which it isn’t easy to find a metaphor.
In this case, it’s permissible to make
the icon abstract and convey the
meaning using text. An example from
our case:
0"-./01)L%0M>(>0
In this situation, icons are eye-catching

anchors, while the necessary
information is conveyed through text
with large fonts.
0"-./01)L%0M>(>0
The use of icons that don’t contain

metaphors is possible if the icons are
needed only as visual accents that
balance the design, and their
informativeness is supported by the
text. However, even in such cases, it’s
desirable to find suitable visual
associations.
=.&>$'34&#;&%342)
Users don’t like disharmonious things.
This is the case when people can’t

explain what they don’t like about the
icon. We all feel disharmony
intuitively. The path to harmony lies
through the unity of style.
The unity of style suggests that the

icon design matches the brand style
and design concept.
4(>0*#/5+)*N"%)($%+(&
brand requirements
Icons should reflect the essence and

values of the brand, be its organic part,
not only visually, but also
psychologically. A brand’s style can be
perceived as tough or soft, luxurious or
economical, formal or intimate, elite
or democratic, etc. Icon design must in
the first instance meet the
requirements that the brand dictates.
design requirements
Unity of style supposes common

parameters for a set of icons, such as:
consistent color palette;
graphic and typical unity (raster or
vector, 2D or 3D, solid or outline);
equal size;
equal line width;
equal visual weight;
equal balance of elements;
the same level of detailing;
uniform principle of emphasizing;
uniform rhythm, static or dynamic

character;
identical shadows (if any);
compliance with the logo style and

overall design concept;
visual correspondence to the fonts.
Designers often have to use icons from

ready-made collections on the web or
take them as a basis. However, the
collection may not have the necessary
icons, and it’s necessary to create them
yourself. A common mistake is that
your “own” icon differs subtly from a
set. The reasons are violations of one
or more of the abovementioned
parameters of unity.
Icons made in the same style:
Unity of style is not only a tribute to

the aesthetics and support of the
brand’s style. The consistency of style
makes the perception of the icons
easier, simplifies navigation, and
contributes to positive user
experience.
More on this topic: Unity of Style in

Web Design
?.&>$'@8)$)%%
There are two types of uniqueness —
the uniqueness of the icon set and the
uniqueness of each individual icon.
40#%$(*HJJ*O*,+#05/)%+N*1%-'*PQ
the uniqueness of the set
The first type of uniqueness hardly

needs any explanation. This is a design
that allows to distinguish a set of icons
from many similar ones, to make them
special, interesting, and memorable.
The uniqueness of the icons
contributes to the uniqueness of the
brand.
Uniqueness doesn’t mean that you

need to create icons that the world has
not yet seen. You can’t imagine a better
way to frighten the people away.
Internet users are used to certain
standards and stereotypes, and
breaking them is a bad idea. These
stereotypes limit creativity, but make
UI elements predictable and

understandable. People shouldn’t
strain themselves in an attempt to
comprehend what they saw and waste
time solving rebuses.
Use metaphors that are familiar to

everyone, but make their visual
implementation unique. Users don’t
want to decipher riddles.
Simple icons (stickers) with a unique

realization:
the uniqueness of the icon
The uniqueness of an icon should be

understood as its difference from its
neighbors in the set. In striving for
unity, designers sometimes sacrifice
the most important thing — the

meaning of the icon. It shouldn’t be
forgotten that unity and monotony are
far from the same thing. Each icon has
its own purpose. (The slogan of a
modern icon designer is E.I.M. —
Every Icon Matters.)
A beautiful set with visually

indistinguishable images won’t be
appreciated or understood by users.
People become embarrassed, unable to
distinguish one icon from another.
“Unified” does not mean “the same”!
An example of a design with visually

identical elements (uniformity of style
is maintained):
R5+)&*%.0+&*O*2IJ$0/5-%0+*#B*Q%+)/5*Q(&>%J%5+
A.&B'%892&*929$")
This point is a special case of point 3
“Unity of style”, but deserves a special
mention.
Optically unbalanced icons are the

icons that users don’t like at first
glimpse. People feel imbalance
intuitively and immediately, barely
looking at the image. Errors in the
alignment of elements also refer to
balancing interferences. However,
despite all the importance of the
alignment of elements, minor
irregularities in their alignment aren’t
the main reason that the icon is
visually unpleasant. In many cases,
errors in alignment and centering are
not the cause of imbalance.
The balance is disrupted due to the

disconformity of shapes and color
emphasis.
This is the first thing that strikes the

eye of users, and not the shifting of an
element by a pixel or two.
T(-*&-5/-() U%N+*C+
U(5/.'
S+#5$5+.()*%.0+&*(I5>J$(
Related articles:
Balance in Composition: How to Balance !"#$%&'(()$#
Design? 8LVW*X0$$01(/&
SCMSY*Q(&%N+*5+)
Q(7($0J>(+-L*?(-Z&*./(5-(
Emphasis in Design. How to Draw &0>(-'%+N*10+)(/K"$
-0N(-'(/[*'($$0\0"-./01)L%0
Attention
X0$$01
&*"'%+"*,%&'-#.,
X$0145JJ
-C&D7)$:')%3
!228%3793'#$
/342)%&'$E
()*&+)%',$
'$&5C55
]%B%^'5+N
/800974 >!F>G
!017#<'$,
Designers know very well how many H79;3I&D'1&J-
requirements are imposed for icons.
H$_ %+ T_
For this reason, they are ready to !/%- 3*F
>G&9$:&>!
.'(- "$-"
:)%',$
- /(
67#")%%&KE
67#")%%&KE
improve them endlessly, polish every
L8$:90)$392
detail, and count every pixel. We in no +';;)7)$")
F0)(G'(_
M)3N))$
(>
way call not to do all this. We just want P#N&3#
DO)0
M929$")
to say that these efforts are M8%'$)%%E
meaningless if the fundamental Q#92%&R&>%)7
S)):%I
principles of creating icons are H#$$)"3'$,
3O)&+#3
violated. And namely the following:
R($J U-5-"& @/%-(/& `$0N
F5/((/& !/%75.B G(/>& H#0"-
W+015#$(
Simplicity and clarity;
Metaphoricity (and therefore

informativeness);
Unity of style (and therefore visual

harmony);
Uniqueness of design and

individuality of each icon;
Visual balance.
Following these principles is the

guarantee that your icons will be clear,
aesthetic, and functional. This means
that everyone will definitely like them!
Always happy to help,
The Outcrowd team.
Designing for Readability:
A Guide to Web Typography
Choose clear and recognizable letterforms

Text is most legible when the eye can easily distinguish
between letters. Some typefaces are designed to simply be
slick and rhythmic—pleasing to the eye. Legible typefaces
have far more nuance among the letters.
Distinctive Letters
Forms that are too repetitive can
make text illegible, so each letter
should have a distinctive shape.
Ill Ill Ill
SERAVEK TAHOMA CERA PRO GILL SANS
qp qp qp qp
TIMES BODONI IMPACT OPTIMA
Open Forms
Letters that are airy and open are
less likely to blur into closed
shapes.
c c
HOEFLER PROXIMA
c c
HELVETICA COURIER
TEXT NOVA
s
MYRIAD
s
ROBOTO
s
SUPER
BRANDON
PRO CONDENSED CLARENDON
Clear Terminals
Distinguishable beginnings and
endings of letters help the eye
jaf jaf jaf
recognize individual forms.
BASKERVILLE PT SERIF HELVETICA
Body Text
Letterform Contrast
Body text requires some contrast
within letterform stroke width, but
shouldn’t go too far where certain
LOW
CONTRAST Ags Ags Ags HIGH
CONTRAST
strokes begin to disappear.

Headline Text
Format text for the highest level of legibility

After a typeface is chosen, formatting it for onscreen reading
is just as important. Decisions like color and size always
contribute to the reading experience.
Body Text Size

Type size depends on the distance
at which a reader is positioned
from the screen. General rules
apply, but testing a design on all
screen types is essential to
ensuring a pleasant and legible
reading experience. 12-16pt 15-19pt 16-20pt
Leading Lorem ipsum dolor sit amet, consectetur

15/18 adipiscing elit. Donec semper nibh quis tortor
The space between lines of text
ultrices lobortis. Curabitur lacinia lorem dui, vel
depends heavily on the chosen vestibulum erat.
typeface. Follow the general rule:
The smaller the typeface, the
tighter the leading.
Lorem ipsum dolor sit amet,
20/26
consectetur adipiscing elit. Fusce
auctor, mi at lectus justo maximus.
57
Line Length CHARACTER COUNT 45 75
The number of letters on a line can

contribute to reader’s fatigue, so Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec semper nibh quis tortor ultrices lobortis.
keep the line length to 45-75
Curabitur lacinia lorem dui, vel vestibulum erat rhoncus
characters per line.
finibus. Duis eget dolor tincidunt, laoreet ante lobortis.
Color Contrast
To make body text legible for all
types of readers, choose colors 1.3:1 2.2:1 4.5:1 6.7:1
that provide a contrast ratio of at
least 4.5:1, according to the Web
Content Accessibility Guidelines
(WCAG).
2018
Imagery in Web Design | Angle Studios 03.06.22, 14:17
!
Home " Design " The Benefits of Using Imagery in Web Design
The Benefits of Using Imagery in Web Design
Written by Angle Studios 22nd January 2019
Design
Good quality website imagery can have the power to grab

attention, evoke emotion and compel us to take action. The
use of imagery in web design can be far more than making a
website simply look pretty. So how can the use of imagery
be effectively incorporated into the design of your website
to improve your ranking and UX?
SEO for Imagery

SEO in web design involves keeping a lot of plates spinning
at once and often this can result in a few of the less
https://anglestudios.co.uk/the-benefits-of-using-imagery-in-web-design/ Page 1 of 11
impactful plates being dropped. More often than not image

SEO is one of those plates. While image SEO may not be
likely to launch you up the rankings straight to that number
one spot, every little helps, “success is the sum of small
efforts, repeated day-in-day-out”.
Taking the time to effectively optimise the images on your

website can, over time, be hugely beneficial to your overall
SEO strategy. It’s the kind of thing that many businesses
and likely your competitors will allow to just slip through
the cracks making it even more advantageous if you don’t
let it slip.
So how do you optimise imagery in web design and how can

that increase traffic?
Impact of Imagery on Website Traffic
As of February 2018, Google has removed the “view image”

button on Google Image search results. This may seem like a
small and somewhat insignificant change but it has had a
huge impact on web design.
Instead of showing the “view image” button, which allowed

you to see the image in full size instantly and save it from
there, you can now only visit the website the image is from,
save it, share it, or view your saved images.
How Google Images looks now.
So why make such a small change? By removing the “view

image” button, it means that users have to instead visit the
site the image is from in order to see it full size. This, in turn,
is to “help connect users and useful website”. Naturally, this
forces most users to actually visit a site they are taking an
image from rather than just grabbing it off Google and
leaving.
Since this update, there has been an average of 47%

increase in traffic to image-heavy websites. This is a
significant statistic for web designers and businesses using
imagery on their websites alike. No longer can either ignore
image optimisation.
How To Optimise Website Imagery
Give Your Files an SEO Friendly Name
In web design now, we know every element throughout a

website must be SEO-friendly and that can usually come
down to the wording. When Google bots crawl your website

to index it, they pull essential information from your source
code, your image file name are an essential part of that
information.
When an image is uploaded to a website its final name is

automatically incorporated into your URL structure. If an
image you upload is named “download56”, for example, then
that is not providing enough information. It does not provide
context for users and search crawlers alike.
Google collects filename data to understand the context of

the image and why it’s being used there. When name your
image files be sure to avoid keyword stuffing as you can be
penalised and ensure you describe the image thoroughly.
Include Alt Text
Alt text is a way of communicating what an image is

showing to users who can not access the image itself. This
could be for users who have disabled imager for faster
loading times or maybe those with visual impairment using a
screen reader to dictate a web page to them.
As with the filenames, the alt text should also be

descriptive of the image while avoiding keyword stuffing.
Descriptive al text can better help search engines
understand and index images on your website.
Inserting Alt Text is simple.
Compress Images for Speed
As tempting as it may be to throw as many images on every

page as possible because “they look pretty”, this is actually
quite a dangerous (in terms of SEO) game to play. Images
are heavy and can slow your sites speed down a
considerable amount and you certainly don’t want a slow
website.
Google takes sites loading speeds into consideration into

consideration when indexing and as well as that, most users
will exit a site if it hasn’t loaded in 3 seconds and 85% of
those who exit won’t return.
Compressing an image will reduce the file size in order to

ensure that it can load quickly. There are also plenty of tools
out there that will do this quickly and simply, just search for
“image compression tool”.
UX and Imagery
In web design, there are a number of factors that should be

taken into account when designing the UX of a website. For
business, UX can have a huge impact on performance. 89%
of consumers will start doing business with a competitor if
the UX on a site is bad. Imagery is a great way to improve
UX and can have a number of benefits such as retention of
information and speed of information processing.
The “picture superiority effect” theory says that pictures and

images are far more likely to be remembered than words.
According to studies, visual elements can convey up to six
times more information than words alone can.
Using images alongside text to improve information retention.
Visual UX Can Improve Retention
When designing a website it is more than likely you are

aiming to get some information across to users with the
hope they will retain the information. On a website with
only text and no visual imagery, a visitor is likely to
remember only 10% of the information they consumed three
days later.
Work Services Contact Go Unlimited! ! Get an estimate
If you add relevant imagery or visual content to support that
text then visitors are likely to remember 65% of the
Other articles you
information they consumed three days later. This is over six may be interested
times more information by simply adding appropriate in.
imagery.
Visual Information is Processed Faster
Generally speaking, humans have a short attention span. If Design
28th August 2015

the information they are after isn’t there within 10 seconds,
What a Web
and potentially less, of opening a web page they will more
Designer Does (that
than likely not continue searching. By providing the desired you may not be able
information in a visual format such as relevant images or an to)
infographic the user is far more likely to take the
information.
If the aim of your website is to sell a product or service then

showing an image of that product or service immediately on
the page will allow the user to quickly process what you can Design Development
SEO 25th January 2019

offer them. If what they see is what they are after then they
Why is Accessibility
will continue to read on and find out more, providing
in Web Design
pleasant UX. Important and How
Can You Achieve it?
Visual Information can Evoke Instant Emotions
An important aspect of UX in web design is being able to

convey the right emotion to the user in order to encourage
them to take action. Imagery has the power to convey
Design
emotions to a user that can be more difficult to convey with 7th February 2020
Privacy - Terms
words alone. For example, an image of an elderly couple Why Mobile-First
holding hands can evoke a feeling of happiness and love Web Design Is
Becoming More
creating a good feeling towards the website you are using.
Important
Deliveroo uses large imagery on their homepage.
Considering the emotion you wish to convey on a website

and how you plan on using that to promote action. It must
also be important to consider the way in which different
people may view and feel towards an image. Using the
photo of the elderly couple holding hands could evoke a
feeling of love and happiness for most but for some, it may
cause a feeling heartbreak or upset. While you have no
control over previous experiences of different people and
how they may view an image, you must consider how the
majority may view an image.
Conclusion
While imagery can add visual appeal to a website and

improve the aesthetic there are also technical reasons to
include good-quality imagery in your web design. We hope
you have found this blog useful and will carefully consider
the images you use in future and how you use them.
Subscribe to our
newsletter
Get notified when we post an awesome article that will
help you increase your website’s performance.
Email address Full name Subscribe
Related articles
Adaptive vs. Responsive Design | Interaction Design Foundation (IxDF) 03.06.22, 14:20
Adaptive vs. Responsive Design

by Mads Soegaard | 1 year ago | 15 min read
The di!erences between responsive and adaptive design approaches spot-

light important options for us as web and app designers. Choosing with in-
sight can empower you to plan and execute your designs with better aim,
purpose and results.
With the pervasiveness and diversity of mobile devices, as designers we

need to cater to the variety of screen sizes. This is a challenge that every
web and app designer currently faces. From the giant corporate monitor to
the smartwatch, there are a huge number of ways that users can access in-
formation online today. Designers looking to bridge the gap between de-
vices have two options for their designs: the adaptive site or the respon-
https://www.interaction-design.org/literature/article/adaptive-vs-responsive-design Page 1 of 16
sive site.
Author/Copyright holder: Stéphanie Walter. Copyright terms and licence: CC BY-SA 3.0
There is a certain amount of confusion as to the di!erence between re-

sponsive design and adaptive design. The boundaries may seem blurred to
those without experience of either style of design, but there are clear dif-
ferences when you look more closely at the two.
Responsive Design
Author/Copyright holder: Muhammad Rafizeldi.. Copyright terms and licence: CC BY-SA 3.0
The term Responsive Design was first coined by the web designer and de-
veloper Ethan Marcotte in his book, Responsive Web Design. Responsive de-
signs respond to changes in browser width by adjusting the placement of
design elements to fit in the available space.
A responsive website shows content based on the available browser space.

If you open a responsive site on the desktop and then change the size of the
browser window, the content will move dynamically to arrange itself (at
least in theory) optimally for the browser window. On mobile phones, this
process is automatic; the site checks for the available space and then
presents itself in the ideal arrangement.
Responsive design is straightforward. Because it is fluid, it means that

users can access your online world and enjoy as much of it on their hand-
held device as they would on a massive monitor. For this to be true, re-
sponsive design requires a very good conceptualization of the site and a
deep knowledge of the needs and wants of the end users!
Adaptive Web Design

Adaptive Web Design was introduced in 2011 by web designer Aaron
Gustafson in his book, Adaptive Web Design: Crafting Rich Experiences With
Progressive Enhancement. It is also known as progressive enhancement of a
website.
Where responsive design relies on changing the design pattern to fit the
real estate available to it, adaptive design has multiple fixed layout sizes.
When the site detects the available space, it selects the layout most appro-
priate for the screen. So, when you open a browser on the desktop, the site
chooses the best layout for that desktop screen; resizing the browser has
no impact on the design.
Accelerate Your Career:

Get Industry-Recognized Course Certificates
Closes in 5 days:
Mobile User Experience (UX) Design
Closes in 13 hrs 39 mins 21 secs:

UI Design Patterns for Successful Software
Closes in 5 days:
Gestalt Psychology and Web Design: The Ultimate Guide
Some sites have been quick to embrace adaptive design. Amazon, USA To-
day, Apple, and About.com configured themselves to be mobile-optimized
websites. The layout displayed on a mobile website using adaptive design
may be di!erent from the desktop’s version. However, this is because the
designers have picked a di!erent layout for the phone’s screen rather than
leaving the design to try to rearrange itself.
In adaptive design, it’s normal to develop six designs for the six most
common screen widths; 320, 480, 760, 960, 1200, and 1600 pixels.
Standalone Mobile Design

There is also the option to create a mobile-only website (these are usually
denoted in the URL bar of a browser using the “m.” prefix). This option
was once an excellent approach. Designers would create sites for mobile
devices, attuning the elements and layout for a dedicated format. Google
delivered search engine rankings to mobile sites, but today the same pref-
erences are given to adaptive and responsive sites.
The big drawback of creating a separate site (rather than using di!erent
designs or employing a changeable design) is that it requires an awful lot
more maintenance in order to keep the two versions of a website homoge-
nous. With no particular incentive to do this, the mobile-only design has
fallen out of favor in recent times. It seems unlikely that it will make a
comeback anytime soon.
Choosing Between Responsive and Adaptive

Design
Author/Copyright holder: Stéphanie Walter. Copyright terms and licence: CC BY-SA 3.0
Responsive design is easier and takes less work to implement. It a!ords

less control over your design on each screen size, but it’s by far the pre-
ferred method for creating new sites at this moment. This may also have
something to do with the large number of cheap templates available for the
majority of Content Management Systems (CMS) such as WordPress,
Joomla, etc. — after all, who wants to reinvent the wheel?
Accelerate Your Career:

Get Industry-Recognized Course Certificates
Closes in 5 days:
Mobile User Experience (UX) Design
Closes in 13 hrs 39 mins 21 secs:

UI Design Patterns for Successful Software
Closes in 5 days:
Gestalt Psychology and Web Design: The Ultimate Guide
Responsive designers create a single design to be used on all screens and

will generally start in the middle of the resolution and use media queries to
determine what adjustments will be made for the lower and higher end of
the resolution scale. This tends to make users happy, because that familiar
web design seems guaranteed to translate across to any device’s screen.
Uniformity and seamlessness are crucial considerations in providing a
good user experience.
It’s important to keep an eye on the visual hierarchy of responsive design

projects; you want to try to maintain this as your elements shu"e around
the screen. That means a lot of testing with many di!erent devices to be
certain that you’re delivering the goods. If the design for a site is relatively
simple, it will translate well across device screens, flowing like a liquid
from container to container.
SEO is another big argument for using a responsive design. Sites that use
responsive design (i.e., ones with a URL that serve all devices) are currently
more search engine friendly.
The responsive design seems to have a strong case for use. Well, it might;
however, bear the following in mind:
Because your website will “flow” from device to device, adjusting to the
screen size, any advertisements that you’ve added may not fit into the
space. Suddenly, the “shortcut” o!ered by using responsive design may
need some rethinking and work.
Download times vary between desktop and mobile devices. The flexibili-
ty of images is a big consideration here. A large design that comes
through quickly on the big screen at home or in the o#ce takes more
time (and data) to appear on your mobile. Might a smaller preview be
better for the mobile version?
Adaptive design will (theoretically) ensure the best user experience ac-
cording to whichever device the user is using to interface. Unlike respon-
sive design, where a screen “flows” from desktop design into a smaller de-
vice’s, adaptive design o!ers tailor-made solutions. As the name suggests,
they adapt to the user’s situational needs and capabilities. As designers, we
can show users that we’re in tune with their needs on a mobile device by
making our design touch friendly. Meanwhile, we can do the same for
desktop users. We begin at the lowest resolution version of the site and
work our way up to the highest. Six designs are the current standard, but
depending on your users’ data, you might be able to use fewer designs.
A strength of adaptive design is that it feels more relevant to the modern

user experience, whereas responsive design shows a more desktop-centric
approach (with the demands of other devices taking a secondary, almost
passive place). As users, we are out and about more with our smart devices.
We like to feel that our devices are aware of what we’re going through.
Let’s take a literal example; if you were driving through a long tunnel,
wouldn’t you rather have a GPS screen that adapts to the environment and
adjusts its brightness? That context-based performance and usability is
reassuring, at the same time confirming that your smart device is smart
enough to adapt and be extra useful.
You can also design to optimize advertisements for your relevant user in-
terfaces with adaptive design. Because you’re designing for di!erent reso-
lutions (i.e., di!erent fields of view), you can access your user’s specific
needs. The sheer sophistication of sensors in, say, a smartphone allows
companies (and us designers) to know more about our users than ever be-
fore. A user frequents a favorite store, restaurant, gym, etc. — by checking
in there, he/she creates a profile. From this (behavioral targeting, other-
wise known as personalization), we can design finely tuned
advertisements.
Another advantage — research shows that a company with an adaptive

website will often outperform, on speed tests, a company with a responsive
website. This isn’t a small di!erence either; adaptive sites are often 2-3
times faster than responsive ones and give rather less data to the user in
order to deliver the user experience.
Adaptive design has some strong advantages. However, in the game of de-
signing for the best user experience and providing the best solutions, we
must remember that we have to take the time to examine our options and
the realities of our users.
There are drawbacks to adaptive design. Firstly, it’s usually a lot more
work than creating a responsive design. For that reason, the majority of
adaptive designs are used to retrofit existing sites to allow them to be used
on multiple devices. It appears, then, that the first order of business is to
bring traditional sites up to date by allowing them to reach across more
devices.
Secondly, adaptive designs can leave out users “in the middle”. Tablet or
notebook users might be left “hanging” because designers have only
catered to desktop and smartphone users. Therefore, it’s important to of-
fer a link to let the user toggle between versions.
Lastly, while search engine bots are getting better about sifting and sorting
through hits to distinguish between your “.com” sites and “m .com” sites,
it’s wise to accept the status quo. Most search engines still don’t rank
identical content over multiple URLs equally. That means being mindful
that an adaptive design might keep you back on SEO.
So, while there’s a definite preference for responsive design at the mo-
ment, don’t dismiss adaptive design if you have the budget. Google likes
websites that load fast, as do users.
The Take Away
Author/Copyright holder: Brisbane Web Design. Copyright terms and licence: Public Domain
Modern web design gives us three options to use: Responsive, Adaptive,

and Standalone Design, although standalone has fallen into disuse.
Responsive Design lets designers show content based on the browser

space available. This allows consistency between what a site shows on a
desktop and what it shows on a handheld device. Responsive design is the
“traditional” option and remains the more popular approach to date.
Pros Cons
Uniform & seamless = good Less screen size design

UX. control.
Abundance of templates to Elements can move around
use. Advertisements lost on screen.
SEO friendly. Longer mobile download
Often easier to implement times.
Adaptive Design, developed in 2011, is more involved in that the designer

has several fixed layout sizes. It o!ers an alternative to the “one-size-
stretches-to-all” approach.
Pros Cons
Labor-intensive to create – most

adaptive designs are retrofitting tra-
Allows designers to
ditional sites to make them more ac-
build the best UX for the
cessible.
appropriate device.
Mobile devices can Tablets and netbooks can have trou-

sense their user’s ble with site configuration tending to
environment. be smartphone- or desktop-
Designers can optimize oriented.
advertisements based
Challenging to SEO — Search en-
on user data from smart
gines have trouble appreciating
devices.
identical content on multiple sites.
Choosing between a responsive and an adaptive design takes careful con-

sideration. While it might be prudent to stick to a responsive design for the
sake of expedience (saving cost, improving SEO, and keeping users content
with a seamless experience between devices), it’s crucial to check the pros
and cons of both designs in full. Adaptive design can tune in more to users’
varying needs in the field; thus, it’s vital to keep a finger on the pulse of
change.
We might best picture these changes as evolution. Charles Darwin noted

that the individuals in a species that survive aren’t the strongest or
smartest, but those most adaptable to change. We have only the dinosaurs
to consider in light of that.
Think about your product or service. Does it access users in a specific set-
ting? What is it about their behavior that you can use to keep them in-
formed and engaged? Remember, it’s not just mobile devices that are get-
ting smarter. In our homes and o#ces, we have more than traditional
desktops. Now, a wide range of smart devices sense and react to the envi-
ronment, from clocks and heaters to a host of devices that comprise the
“Internet of Things”. It’s an age that’s full of smarter objects. We must
design with that smartness increasingly in mind.
Resources & Where to Learn More

Hero Image: Author/Copyright holder: tfinc. Copyright terms and licence:
CC BY-SA 3.0
Holst, C. (2012). “Adaptive vs. Responsive Layouts and Optimal Form Field
Labels”. Smashing Magazine. Retrieved from: http://www.smashing-
magazine.com/2012/11/08/ux-desi... [2014, Sept 1]
Itzkovitch, A. (2012). “Creating an Adaptive System To Enhance UX”.

Smashing Magazine. Retrieved from: http://www.smashingmagazine.-
com/2012/12/creating-an-adaptive-system-to-enhance-ux/
Knight, K. (2011). “Responsive Web Design: What It Is and How To Use It”.
Smashing Magazine. Retrieved from: http://www.smashingmagazine.-
com/2011/01/guidelines-for-responsive-web-design/The Smashing Edi-
torial. (2012). “Responsive Web Design Guidelines and Tutorials”. (NB –
This is a great resource for locating the best articles Smashing Magazine
has regarding Responsive Design.) Retrieved from: http://www.smashing-
magazine.com/responsive-web-des...
Cao, J. (2015). “Responsive vs. Adapative Design: What’s the Best Choice
for Designers?”.Studio by UXPin. Retrieved from: http://studio.uxpin.-
com/blog/responsive-vs-adaptive-design-whats-best-choice-designers/
Bin Uzayr, S. (2013). ”Responsive vs. Adapative Design”. Torque. Retrieved

from: http://torquemag.io/responsive-design-vs-adaptive-design/
Wireframe Design & Prototype Must-Knows | Adobe XD Ideas 03.06.22, 14:29
Adobe
Process Principles Perspectives Learn XD

Start Free XD Trial
XD IDE A S / PROCE SS / WIREFRAMING /
Everything You Need

to Know About
Wireframe Design
and Prototypes
Nick Babich
Nov 24, 2020
https://xd.adobe.com/ideas/process/wireframing/wireframe-design-definition/ Page 1 of 23
Wireframes and prototypes are the two design deliverables Illustration by Erica
Fasoli
most often associated with UX design. A lot of people in the
field of digital design use the terms “wireframe” and
“prototype” interchangeably, but there are significant
differences between the two: they look different, they
communicate different things, and they serve different
purposes.
So, what exactly is a wireframe in design? What’s the

difference between a wireframe and a prototype? This
article will explain the basics behind these two terms and
explore how they fit into the UX design process.
Wireframes
A wireframe (also known as “skeleton”) is a static, low-

Adobefidelity representation of the different screens and pages
that form a product. Wireframes use simple shapes to

create visual representations of page layouts. They’re used
Process Principles Perspectives Learn XD
to communicate the structure of individual pages (how the
Start Free XD Trial
pieces of the page work together and where the content
will be) and how those pages connect (how the interface
will work from a user perspective).
At the core, wireframes are stories about the future. They

are similar in purpose to an architectural blueprint (a
detailed plan of a building-to-be). If you want to explore
various wireframe styles, check out this collection of
wireframe examples for websites and mobile apps.
What does a wireframe look like?
Wireframes have very limited visual characteristics, since

the majority of design elements (like images, videos, colors,
real text, etc.) aren’t included. Instead of these specific
design elements, designers use placeholders. For example,
a box with a cross in it represents an image. Designers
follow this approach for a purpose—object placeholders
and a grayscale color palette help team members focus on
the layout and structure of the page, rather than the visual
aspects of the design.
A typical wireframe design sticks to a very

limited black & white or grayscale color scheme.
Image credit Adobe Stock.
What is the primary purpose of

wireframing?
The role of a wireframe is to create a foundation for your

final design. Designers create wireframes and validate them
to ensure that the wireframe design contains all the
essential elements. A limited number of visual elements
enable the team to focus solely on core design decisions
before diving into the details.
When should you create a wireframe?
Designers typically create wireframes early on in the design

process, before the team starts working on the visual
details. At the wireframing stage, it’s much easier to make
big changes. Since wireframes are relatively quick and
cheap to produce, designers can experiment with adding or
removing objects, moving content and objects around, and
grouping items together.
The benefits of wireframing
Wireframes help designers:
Communicate ideas. A picture is worth a

thousand words. Wireframes
communicate design decisions to
teammates; by looking at a wireframe,
they should have a good idea of what

screens an app or website will have. Even
a website or mobile app wireframe full of
placeholders still helps the team see how
the design is shaping up.
Prepare project documentation.
Wireframes also act as a reference point
for functional specifications. Designers can
share the wireframes with the entire team
so that everyone’s on the same page
regarding the requirements for the design.
The limitations of wireframing
Since wireframe design is a schematic representation of the

final design, wireframes aren’t good for usability testing.
Although they may help you gather feedback during the
initial research phase (when you want to explore what your
users think about your idea), the fact that they’re static
makes it very difficult to use them to assess overall user
experience. Test participants have to rely on their
imagination to understand how the final design will work.
As a result, you receive very limited feedback during
wireframe testing.
Wireframes also aren’t the best tool for demonstrating a

concept to stakeholders. Similar to your test participants,
stakeholders might have problems understanding what the
final design will look like. If you use a wireframe during this
stage, expect questions like “Why is this design so black and
white?” from your stakeholders.
Lastly, wireframes won’t help you if you need to describe

complex design ideas, like animated effects, complex
transitions, or gestures. While a pair of wireframes can show
where interaction begins and ends, it doesn’t describe what
happens in between. If you need to describe any dynamic
effects, it’s better to use a high-fidelity interactive prototype,
which will make that behavior explicit and remove any
guesswork for the viewers.
Methods of wireframing
You can create your wireframe design using one of the

following methods:
Sketching. Hand-drawn sketches are

quick to create and quick to iterate on.
Sketching is especially good for
brainstorming sessions when designers
need to quickly visualize different ideas
(e.g. explore a variety of layouts for a
certain view).
Sketching is a quick way to visualize an idea, like

a new interface design. Image credit Nicholas
Swanson.
Graphic design software. It’s fairly easy to

create wireframes with software like
Adobe Photoshop or Adobe Illustrator.
Example of awireframe created in Adobe

Illustrator. Image credit Mackenzie Child.
UX design software. The major advantage

of using special software is that you can
move seamlessly from wireframes to
prototypes without switching to another
tool. With tools like Adobe XD, designers
can turn their wireframes into low-fidelity
prototypes in a matter of minutes.
With Adobe XD, you can move from wireframes

to prototypes quickly and efficiently. Image credit
Tom Green.
Practical recommendations for

wireframe design
Here are a few tips to consider when designing wireframes:
Do not try to make wireframes pixel-

perfect. The goal of wireframing is to
evaluate the structure of individual pages,
not to polish visual design details. Be
aware of common wireframing issues and
focus instead on speed and simplicity.
Do not add too many details. Wireframes
are the barebone structure of the product,
so only add the essential elements.

Use color to draw attention. Wireframes
traditionally use black & white or
grayscale, but feel free to use a contrasting
color to create visual accents.
Use short and to-the-point annotations.
If you plan to present a wireframe to the
team, always include written annotations.
Annotations help create context and
quickly deliver key ideas.
Examples of annotated wireframes. Image credit

Chaymae Lougmani.
Encourage feedback. Sharing your
wireframes and encouraging feedback

from your team members is a sure way to
improve them.
Use wireframe templates. It’s easier to
design wireframes when you have visual
references. We’ve created a very useful
collection of wireframing templates that
will help you get started.
Use a wireframe kit. Get started on your
wireframe with Wires or free UI kits from
Adobe XD.
Prototypes
Prototyping, on the other hand, is the process of building an

interactive experience. A prototype represents the final
product, including simulations of the user interface
interactions. Prototyping is the first phase in which
designers can actually interact with their creations.
What does a prototype look like?
Unlike wireframes, which often look similar, prototypes can

vary significantly. Prototypes can be simple artifacts that
resemble just basic interactions all the way up to coded
prototypes that look and work almost like a real product.
There are two main types of prototyping: low-fidelity and

high-fidelity prototyping.
A low-fidelity prototype is a rough

representation of a design concept that
helps designers validate them early on in
the design process. Low-fidelity
prototypes are generally limited in
function and interaction. An example of a
low-fidelity prototype is a clickable
prototype created from sketches or
wireframes.
Designers can create a low-fidelity prototype by

linking wireframes. Image credit Theresa Choi.
A high-fidelity prototype is an interactive
prototype that simulates the real website

or app’s functionality and design details.
High-fidelity prototyping helps users
understand the look and feel of a future
product.
A high-fidelity prototype represents the design as

close to the final product as possible. Image
credit Adobe XD.
What is the primary purpose of a

prototype?
Prototypes act as a bridge to the actual product. The goal of

a prototype is to simulate the interaction between the user
and the interface and understand how the final product will
function. This makes it good for testing with real users—
prototypes let test participants interact with a design just
like they would interact with a finished product. It allows
designers to test both the usability and feasibility of product
designs.
When should you create a prototype?
The actual moment when a creative team needs a

prototype will vary based on the project. Generally, the
team needs to have a prototype when they want to tie
visual and interaction design together, before moving to the
actual development.
The benefits of prototyping
Prototypes are especially valuable:
for pitching ideas. A simple interactive

prototype can sell an idea better than a
text description of the design. High-fidelity
prototypes are great for stakeholders
because they can see how the design will

look and work. It’s easier to get buy-in
from them because they’re able to try the
product.
as a validation tool. Prototypes are great
for usability testing. Showing a prototype
to users and asking them to go through
regular user flows helps designers test the
flows and identify potential UX problems.
during user research. Prototypes are
great for understanding the preferences of
your target audience. Whenever product
teams have an idea about a new feature,
they can create a prototype and validate it
with the target audience early in the
product lifecycle to ensure that the
feature resonates with them.
The limitations of prototyping
Prototyping is an expensive and time-consuming design

deliverable. In comparison with wireframing, creating
prototypes takes more time, especially for high-fidelity
prototypes. Also, creating prototypes requires some design
skills, which not everyone can do.
Methods of prototyping
While you can use a piece of paper or a digital design tool
to create a wireframe, prototypes require digital software.

Here are two of the most common methods:
Design software: Modern prototyping

tools offer a lot of features that allow you
to create interactive prototypes. Plus, they
offer an additional benefit: team
collaboration. Different team members
can comment on the same document,
creating a good feedback loop right from
the start.
An example of a high-fidelity interactive

prototype created in Adobe XD and mirrored on
an iPhone. Image credit Adobe XD.
Native prototype: Native prototyping

means writing code. When you create a
native prototype of an Android app, you
write Java code. Native prototyping is
essential when your product involves
technologies that are hard to prototype
using app design software, like if you’re
building a mobile app that requires real
GPS data.
Practical recommendations for

prototyping
Here are a few things to consider when designing

prototypes:
Don’t settle on a single design idea for

your prototype. Many designers fall in
love with the first idea that seems to be
the right one. However, this isn’t the best
approach for design. Why? Because your
idea might not actually be the best one.
Instead, try as many different ideas as
possible and select the most prominent
idea after evaluating them all with team
members and/or testing ideas with users.
Select the right fidelity for your project.
In his article Five Prevalent Pitfalls when
Prototyping, Jared Spool mentions that
working in the wrong fidelity can be a
major pitfall during prototyping. The

fidelity of your design should match the
fidelity of your thinking, the maturity of
your idea, and the available resources.
Use high-fidelity prototypes to visualize
complex animated transitions. High-
fidelity prototypes are great during design
handoff because they allow developers to
see how the animation will work. This
helps them transfer the behavior into
code.
Practice rapid prototyping and iterative
design. Quick iterations of the build-
measure-learn process are a popular way
to create products. When a team practices
this approach, they start with a low-
fidelity prototype and then progressively
iterate it into high-fidelity versions.
Feedback from users plays a key role in
this process, since the team can evaluate
every decision according to testing with
users.
Practice native prototyping. Not
everything that designers create can be
easily turned into code. But when
designers write code, the risk of technical
feasibility problems is much lower.
Conclusion
Wireframe design and prototyping are an integral part of

your design process. The most important thing to
remember when creating them: don’t ever wireframe or
prototype a product without the user in mind. The user
should always be at the heart of any design you create. This
will help you build better products that your users will love.
Wireframing Prototyping
Words by
Nick Babich
Nick Babich is UX
architect and writer.
Nick has spent the
last 10 years
working in the
software industry
with a specialized
focus on research
and development.
He counts
advertising,
psychology, and
cinema among his
myriad interests.
Website Forms Usability: Top 10 Recommendations 03.06.22, 14:30
Nielsen Norman Group

World Leaders in Research-Based User Experience
Website Forms Usability: Top 10

Recommendations
Summary: Follow these well-established — but frequently ignored —
UX design guidelines to ensure users can successfully complete your
website forms.
By Kathryn Whitenton on May 1, 2016 Share this article:
Topics: Web Usability
The Transportation Security Administration (TSA) helps keep air travelers

safe. But since being delayed or forced to take clothes off in public is also
guaranteed to annoy a lot of people, you’d expect the TSA to get a pretty
healthy volume of complaints.
So when I first saw the TSA’s complaint form, the design error seemed so
obvious that I wondered if it might be intentional. The form includes 2 buttons
at the bottom: Preview and Clear Form. The Preview label is less than ideal,
since most users would expect a Submit or at least a Next button. But the
real problem is the Clear Form button, which actually deletes anything
entered into the form.
https://www.nngroup.com/articles/web-form-design/ Page 1 of 9
Intentional or not, this arrangement undoubtedly reduces the volume of

complaints! However it also violates a form-design guideline we first wrote
about more than 15 years ago: to avoid Reset buttons on web forms.
TSA’s web form includes a Clear Form button, which violates usability guidelines
dating back more than 15 years. To add insult to injury, the Clear Form button is
positioned closer to the input fields than the Preview button, thus making it even
more likely that people will hit it by mistake (and violating the additional
guideline of proximity between objects and their primary actions).
I’ve recently concluded that the design of this form was not intentionally
bad, because the TSA actually has a second complaint form that correctly
uses a single Submit button below the form. Since one form follows the
guideline, it seems likely that the poor design of the other version is just
accidental.
As a taxpayer, it’s comforting to think that my government agency isn’t

deliberately using bad design to avoid hearing my comments. But from a UX
perspective it’s a painful reminder that despite the buzz and popularity of
“UX” in recent years, basic understanding of usability is often still lacking.
Even simple guidelines that ought to be well established are often unknown
or disregarded.
Careful form design has a huge impact on the speed with which users can
understand and accurately complete a form. In fact, a recent paper published
in CHI by Seckler and her colleagues shows that, when forms follow basic
usability guidelines, the completion time decreases significantly and users
are almost twice as likely to submit the form with no errors from the first
try (78% one-try submissions in forms compliant with usability guidelines
versus only 42% one-try submissions in forms violating them). If you wonder
why your conversion funnel has big drop-offs on forms pages, this study may
give you a clue: usability problems on forms really hurt business.
Do your website forms follow usability best practices?
Best Practices for Web Form Design

The best design solution for any given form depends on many factors: the
length of the form, the context of use, and the data being collected. The exact
implementation you should use may vary in certain circumstances, but this is
no excuse for ignoring guidelines altogether. Instead, use these
recommendations as a starting point, and if you stray from these established
best practices make certain you have a good reason for doing so.
1. Keep it short. The mathematician Blaise Pascal famously said: “I have
made this longer than usual because I have not had time to make it
shorter.” This principle applies to web forms as well as prose writing.
Eliminating unnecessary fields requires more time, but the reduced user
effort and increased completion rates make it worthwhile. Remove fields
which collect information that can be (a) derived in some other way, (b)
collected more conveniently at a later date, or (c) simply omitted. (We
recently applied this technique to one of our own forms and reduced it
from 6 fields down to only 2 fields.) Every time you cut a field or question
from a form, you increase its conversion rate — the business case for
this guideline is that simple.
2. Visually group related labels and fields. Labels should be close to the
fields they describe (immediately above the field for mobile and shorter
desktop forms, or next to the field for extremely long desktop forms).
Avoid ambiguous spacing, where labels are equidistant from multiple
fields, and make sure to include the label attribute for screen readers. If
your form asks about two different topics, section it into two separate
groups of fields (and tag the groups for screen readers).
3. Present fields in a single column layout. Multiple columns interrupt
the vertical momentum of moving down the form. Rather than requiring
users to visually reorient themselves, keep them in the flow by sticking
to a single column with a separate row for each field. (Exceptions to this
rule: short and/or logically related fields such as City, State, and Zip
Code can be presented on the same row.)
4. Use logical sequencing. Stick to standard sequences both for fields
(e.g., Credit-card number, Expiration date, Security code) and for value
choices (e.g., Standard shipping, 2-day shipping, 1-day shipping). But
for field values, also consider usage frequency, and list the most
common values first when possible. Help keyboard users by testing the
Tab-key navigation to ensure it follows the correct field sequence.
The Starbucks iPhone application, which includes a mobile form to let you
customize your drink order, unfortunately hides the full ‘Decaf’ option oG screen
to the right, requiring horizontal scrolling. If the full ‘Decaf’ is more frequently
selected that the other options, it should be displayed first.
5. Avoid placeholder text. Designers like placeholder text because it

eliminates visual clutter. But placeholder text causes many usability
problems, and is best avoided.

6. Match fields to the type and size of the input. Avoid drop-downs
when there are only 2 or 3 options that could be displayed as radio
buttons (which require only a single click or tap). Text fields should be
about the same size as the expected input since it’s extremely error
prone when users can’t see their full entry. For example, for 2,130 recent
participants in the UX Conference, the user’s city of residence ranged
between 3 characters (Leo, Indiana) to 22 characters (San Pedro Garza
Garcia, Mexico). 99.9% of city names were 19 characters or shorter,
making 19 characters a reasonable width for a city field.
7. Distinguish optional and required fields. First, eliminate as many
optional fields as possible (see the first recommendation above). If some
fields truly are necessary, but only apply to a subset of users, don’t
make users find out through trial and error. Limit the form to only 1 or 2
optional fields, and clearly label them as optional.
8. Explain any input or formatting requirements. If a field requires a
specific format or type of input, state the exact instructions. Don’t make
users guess your obscure password requirements. The same applies to
syntax rules such as punctuation or spacing for phone numbers or credit
cards. (Though as much as possible you should eliminate these
arbitrary formatting rules: death to parentheses for phone-number area
codes!)
Netgear’s Reset Password form explains its password requirements…but only

as an error message aLer you have failed the test. Don’t set users up for failure
with secret rules.
9. Avoid Reset and Clear buttons. The risk of accidental deletion

outweighs the unlikely need to ‘start over’ on a web form. In forms that
collect extremely sensitive input such as financial information, provide a
‘Cancel’ button to support those users who abandon the form and want
to delete their information. But make sure that the Cancel button has
significantly less visual prominence than the Submit button, to avoid
accidental clicks.
10. Provide highly visible and specific error messages. Errors should be
signaled through a variety of cues, not solely through color: outline the
field AND use red text AND use a heavier font, to ensure users don’t
overlook this critical information. Now is not the time to be subtle.
Erroneous input should be preserved so users can correct it, and

accompanied by a specific explanation of the problem.
Conclusion
The usability of web forms is by no means a new topic. It has been covered
in general usability references (including several NN/g books of both general
usability guidelines, eyetracking usability research, and mobile usability).
Many of the 114 UX guidelines for e-commerce shopping carts are
specialized issues in forms design. There are also entire books specifically
written about form design, as well as academic studies demonstrating the
effectiveness of complying with guidelines.
This brief summary is not intended to replace the in-depth analysis found in
other resources: if you work extensively with form design, absorbing the
intricacies of best practices in various situations is well worth your time.
But many bad web forms have problems that are not intricate or complex,
and that could have been avoided by a simple reminder of what we already
know. Take a look at the forms on your site and make sure that they don’t
make these well-known mistakes. Who knows, you just might double your
conversion rate.
References:
Mirjam Seckler, Silvia Heinz, Javier A. Bargas-Avila, Klaus Opwis, and

Alexandre N. Tuch. 2014. Designing usable web forms: empirical evaluation
of web form improvement guidelines. In Proceedings of the SIGCHI
Conference on Human Factors in Computing Systems (CHI '14).
DOI=http://dx.doi.org/10.1145.2556288.2557265
Share this article: Twitter | LinkedIn | Email
When to Use Which User-Experience Research Methods 03.06.22, 14:31

When to Use Which User-Experience

Research Methods
Summary: Modern day UX research methods answer a wide range of
questions. To know when to use which user research method, each of
20 methods is mapped across 3 dimensions and over time within a
typical product-development process.
By Christian Rohrer on October 12, 2014 Share this article:

Topics: Research Methods, Strategy, User Testing
The field of user experience has a wide range of research methods available,
ranging from tried-and-true methods such as lab-based usability studies to
those that have been more recently developed, such as unmoderated online
UX assessments.
While it's not realistic to use the full set of methods on a given project, nearly
all projects would benefit from multiple research methods and from combining
insights. Unfortunately many design teams only use one or two methods that
they are familiar with. The key question is what to do when. To better
understand when to use which method, it is helpful to view them along a 3-
https://www.nngroup.com/articles/which-ux-research-methods/ Page 1 of 12
dimensional framework with the following axes:
Attitudinal vs. Behavioral

Qualitative vs. Quantitative
Context of Use
The following chart illustrates where 20 popular methods appear along these
dimensions:
Each dimension provides a way to distinguish among studies in terms of the

questions they answer and the purposes they are most suited for.
The Attitudinal vs. Behavioral Dimension

This distinction can be summed up by contrasting "what people say"
versus "what people do" (very often the two are quite different). The
purpose of attitudinal research is usually to understand or measure people's
stated beliefs, which is why attitudinal research is used heavily in marketing
departments.
While most usability studies should rely more on behavior, methods that use
self-reported information can still be quite useful to designers. For
example, card sorting provides insights about users' mental model of an
information space, and can help determine the best information architecture
for your product, application, or website. Surveys measure and categorize
attitudes or collect self-reported data that can help track or discover important
issues to address. Focus groups tend to be less useful for usability purposes,
for a variety of reasons, but provide a top-of-mind view of what people think
about a brand or product concept in a group setting.
On the other end of this dimension, methods that focus mostly on behavior
seek to understand "what people do" with the product or service in
question. For example A/B testing presents changes to a site's design to
random samples of site visitors, but attempts to hold all else constant, in
order to see the effect of different site-design choices on behavior,
while eyetracking seeks to understand how users visually interact with
interface designs.
Between these two extremes lie the two most popular methods we use:
usability studies and field studies. They utilize a mixture of self-reported and
behavioral data, and can move toward either end of this dimension, though
leaning toward the behavioral side is generally recommended.
The Qualitative vs. Quantitative Dimension

The distinction here is an important one, and goes well beyond the narrow
view of qualitative as “open ended” as in an open-ended survey question.
Rather, studies that are qualitative in nature generate data about behaviors or
attitudes based on observing them directly, whereas in quantitative studies,
the data about the behavior or attitudes in question are gathered indirectly,
through a measurement or an instrument such as a survey or an analytics
tool. In field studies and usability studies, for example, the researcher directly
observes how people use technology (or not) to meet their needs. This gives
them the ability to ask questions, probe on behavior, or possibly even adjust
the study protocol to better meet its objectives. Analysis of the data is usually
not mathematical.
By contrast, insights in quantitative methods are typically derived from

mathematical analysis, since the instrument of data collection (e.g., survey
tool or web-server log) captures such large amounts of data that are easily
coded numerically.
Due to the nature of their differences, qualitative methods are much better
suited for answering questions about why or how to fix a problem,
whereas quantitative methods do a much better job answering how
many and how much types of questions. Having such numbers helps
prioritize resources, for example to focus on issues with the biggest impact.
The following chart illustrates how the first two dimensions affect the types of
questions that can be asked:
The Context of Product Use

The third distinction has to do with how and whether participants in the study
are using the product or service in question. This can be described as:
Natural or near-natural use of the product

Scripted use of the product
Not using the product during the study
A hybrid of the above
When studying natural use of the product, the goal is to minimize

interference from the study in order to understand behavior or attitudes as
close to reality as possible. This provides greater validity but less control over
what topics you learn about. Many ethnographic field studies attempt to do
this, though there are always some observation biases. Intercept surveys and
data mining or other analytic techniques are quantitative examples of this.
A scripted study of product usage is done in order to focus the insights on

specific usage aspects, such as on a newly redesigned flow. The degree of
scripting can vary quite a bit, depending on the study goals. For example, a
benchmarking study is usually very tightly scripted and more quantitative in
nature, so that it can produce reliable usability metrics.
Studies where the product is not used are conducted to examine issues
that are broader than usage and usability, such as a study of the brand or
larger cultural behaviors.
Hybrid methods use a creative form of product usage to meet their goals.
For example, participatory-design methods allows users to interact with and
rearrange design elements that could be part of a product experience, in
order discuss how their proposed solutions would better meet their needs
and why they made certain choices. Concept-testing methods employ a
rough approximation of a product or service that gets at the heart of what it
would provide (and not at the details of the experience) in order to
understand if users would want or need such a product or service.
Most of the methods in the chart can move along one or more dimensions,
and some do so even in the same study, usually to satisfy multiple goals. For
example, field studies can focus on what people say (ethnographic
interviews) or what they do (extended observations); desirability studies and
card sorting have both qualitative and quantitative versions; and eyetracking
can be scripted or unscripted.
Phases of Product Development (the Time

Dimension)
Another important distinction to consider when making a choice among
research methodologies is the phase of product development and its
associated objectives.
1. STRATEGIZE: In the beginning phase of the product development, you

typically consider new ideas and opportunities for the future. Research
methods in this phase can vary greatly.
2. EXECUTE: Eventually, you will reach a "go/no-go" decision point, when
you transition into a period when you are continually improving the
design direction that you have chosen. Research in this phase is mainly
formative and helps you reduce the risk of execution.
3. ASSESS: At some point, the product or service will be available for use
by enough users so that you can begin measuring how well you are
doing. This is typically summative in nature, and might be done against
the product’s own historical data or against its competitors.
The table below summarizes these goals and lists typical research
approaches and methods associated with each:
Product Development Phase
Strategize Execute Assess
Goal: Inspire, explore and Inform and optimize Measure product

choose new designs in order to performance against
directions and reduce risk and itself or its
opportunities improve usability competition
Approach: Qualitative and Mainly Qualitative Mainly Quantitative

Quantitative (formative) (summative)
Typical Field studies, diary Card sorting, field Usability

methods: studies, surveys, studies, benchmarking,
data mining, or participatory design, online assessments,
analytics paper prototype, surveys, A/B testing
and usability
studies, desirability
studies, customer
emails
Art or Science?
While many user-experience research methods have their roots in scientific
practice, their aims are not purely scientific and still need to be adjusted to
meet stakeholder needs. This is why the characterizations of the methods
here are meant as general guidelines, rather than rigid classifications.
In the end, the success of your work will be determined by how much of an
impact it has on improving the user experience of the website or product in
question. These classifications are meant to help you make the best choice
at the right time.
20 UX Methods in Brief
Here’s a short description of the user research methods shown in the above
chart:
Usability-Lab Studies: participants are brought into a lab, one-on-one with a

researcher, and given a set of scenarios that lead to tasks and usage of
specific interest within a product or service.
Ethnographic Field Studies: researchers meet with and study participants

in their natural environment, where they would most likely encounter the
product or service in question.
Participatory Design: participants are given design elements or creative

materials in order to construct their ideal experience in a concrete way that
expresses what matters to them most and why.
Focus Groups: groups of 3–12 participants are lead through a discussion

about a set of topics, giving verbal and written feedback through discussion
and exercises.
Interviews: a researcher meets with participants one-on-one to discuss in

depth what the participant thinks about the topic in question.
Eyetracking: an eyetracking device is configured to precisely measure

where participants look as they perform tasks or interact naturally with
websites, applications, physical products, or environments.
Usability Benchmarking: tightly scripted usability studies are performed with

several participants, using precise and predetermined measures of
performance.
Moderated Remote Usability Studies: usability studies conducted remotely

with the use of tools such as screen-sharing software and remote control
capabilities.
Unmoderated Remote Panel Studies: a panel of trained participants who

have video recording and data collection software installed on their own
personal devices uses a website or product while thinking aloud, having their
experience recorded for immediate playback and analysis by the researcher
or company.
Concept Testing: a researcher shares an approximation of a product or

service that captures the key essence (the value proposition) of a new
concept or product in order to determine if it meets the needs of the target
audience; it can be done one-on-one or with larger numbers of participants,
and either in person or online.
Diary/Camera Studies: participants are given a mechanism (diary or

camera) to record and describe aspects of their lives that are relevant to a
product or service, or simply core to the target audience; diary studies are
typically longitudinal and can only be done for data that is easily recorded by
participants.
Customer Feedback: open-ended and/or close-ended information provided

by a self-selected sample of users, often through a feedback link, button,
form, or email.
Desirability Studies: participants are offered different visual-design

alternatives and are expected to associate each alternative with a set of
attributes selected from a closed list; these studies can be both qualitative
and quantitative.
Card Sorting: a quantitative or qualitative method that asks users to

organize items into groups and assign categories to each group. This method
helps create or refine the information architecture of a site by exposing users’
mental models.
Clickstream Analysis: analyzing the record of screens or pages that users

clicks on and sees, as they use a site or software product; it requires the site
to be instrumented properly or the application to have telemetry data
collection enabled.
A/B Testing (related to “multivariate testing,” “live testing,” or “bucket

testing”): a method of scientifically testing different designs on a site by
randomly assigning groups of users to interact with each of the different
designs and measuring the effect of these assignments on user behavior.
Unmoderated UX Studies: a quantitative or qualitative and automated

method that uses a specialized research tool to captures participant
behaviors (through software installed on participant computers/browsers) and
attitudes (through embedded survey questions), usually by giving participants
goals or scenarios to accomplish with a site or prototype.
True-Intent Studies: a method that asks random site visitors what their goal
or intention is upon entering the site, measures their subsequent behavior,
and asks whether they were successful in achieving their goal upon exiting
the site.
Intercept Surveys: a survey that is triggered during the use of a site or

application.
Email Surveys: a survey in which participants are recruited from an email

message.
In-Depth Course
More details about the methods and the dimensions of use in the full-day
training course on User Research Methods: From Strategy to Requirements
to Design.
Articles UX Conference Training Courses

Formative vs. Summative User Research Methods: From
Evaluations Strategy to Requirements to Design
Iterative Design of a Survey Analytics and User Experience
Question: A Case Study
Usability Testing
Open-Ended vs. Closed-Ended
Journey Mapping to Understand
Questions in User Research
Customer Needs
Acting on User Research
Managing User Experience Strategy
Building a design system in 8 steps | UX Collective 03.06.22, 14:33
!"#$%&'()*%+ ,-*./$$(01%2(
E/"*'62(*1*F@((*?(?#(@G/+$7*&1/@%(&*$(F1
1'%&*?/+1'H
I%C+*"D*F/@*J()%"?*6+)*C(1*6+*(K1@6*/+(
3"%4(+
567
8(#*9:;
9<9<
=
><*?%+
@(6)
=
A%&1(+
!"#$"%&'(#()*+%'&
+,+"*-(%&(#(+"#$"./0
B*C"%)(*1/*'/4*4(*)(&%C+()
6+)*#"%$1*/"@*)(&%C+*&7&1(?*%+
:*&1(D&
https://uxdesign.cc/starting-a-design-system-in-a-start-up-3359f2d4784b Page 1 of 24
Design systems are all the rage

now and you’ve probably seen
this term being thrown around
ever so frequently. I was first
introduced to the world of
*design systems* when we
started on our web design system
back in January 2019. Working in
99.co with only one other product
designer, we had limited
resources to dedicate to starting a
new project. Still, we deemed a
design system important to
eliminate existing design
inconsistencies and improve
future workflows for both
designers and developers as the
company scales up. That being
said, there was a lot we had to
work around and get our hands
dirty in order to push it forward.
Just so you know what you’re

getting yourself into, I’ll define
what we mean by a design system
— a repository of reusable
components with clear usage
guidelines, shared among designers
and developers. It should

showcase all existing components
with guidelines as to when and
how to use each component
including ready-to-use code.
Our design system is still a work-

in-progress but by documenting
this journey, I hope to share our
process as well as some useful tips
and tools. :-)
!"*0+
1. Audit existing components
2. Research on other design

systems
3. List out components
4. Plan a timeline
5. Research and discuss

components
6. Create design symbols
7. “Design” design system
8. Implement design system
!"*0(23(4/)%"(*5%+"%&'
67-07&*&"+
In order to get a bird’s eye view of
all the use cases we need to cater
to, it is important to audit existing
components in our product. Yes,
every single component on every
page. This is a crucial step albeit a
tedious one. For this, we took
screenshots and used Trello to
organise them.
5@($$/*#/6@)*4%1'*06@)&*%+*$%&1&;*16CC()*4%1'
$6#($&
Each list (top to bottom)

represents a page on our website,
e.g. Home page. Within each list,
different sections of a page are
captured as screenshots and
organised into cards. Each card is
tagged with labels (panel on the
right) that represent each
component present within the
section of the page. The labels are

colour coded based on the type of
component, e.g. checkboxes,
radio buttons etc are forms of
data input, hence they are colour-
coded green.
5@($$/*#/6@)*F%$1(@()*#7*.'(0L#/K*$6#($
By organising in this manner, we

can easily search for specific
pages or filter by components
using the right panel and see all
its current use cases across all
pages. It also helps in identifying
where there are design
inconsistencies.
!"*0(13(8*+*#$69(7&(7"9*$
)*+%'&(+,+"*-+
Here are some of the design
systems we used as a guide to
shape what we wanted in our

design system:
Atlassian
Ant Design
IBM
Zendesk
Workday
HubSpot
Salesforce
Shopify
Bootstrap
QuickBooks
We wanted to take the best

practices out of these great design
systems and see how they
organised and displayed their
content. I’ll go through a couple
of my personal favourites —
Atlassian and Ant Design.
B1$6&&%6+M&*N(&%C+*I7&1(?
Atlassian categorises their design

system into Brand, Marketing and
Product. As different aspects of
design require different
guidelines, catering to the
requirements of each design
aspect ensures that the design
language across the entire
company is kept consistent. For
instance, Marketing may need
more colours when designing
beautiful collaterals, as compared
to Product where we generally
only need a fixed set of colours to
showcase different component
states. Atlassian also provides
extremely clear guidelines for
each component, from its
different styles and variations to
its use cases and best practices.
B+1*N(&%C+*I7&1(?
Ant Design categorises their

components into different
sections such as Data Display,
Data Input, Navigation etc. This
really helps in organising and
finding components. They display
anchors on the top right corner so
users know what to expect on
each page without having to
scroll all the way to the bottom.
Every component style and
variation is showcased upfront
and each component is
interactive. Code is displayed and
there are quick actions for
developers to copy code or open
in various environments. KUDOS
to a great user experience!
!"*0(:3(;%+"(7/"(67-07&*&"+
After researching on other design

systems, I circled back to list
down patterns and components
we would need based on our
research and filter labels we had
on Trello. This gives an overview
of what needed to be reviewed so
we can keep track and plan time
accordingly.
O@C6+%&%+C*D611(@+&*6+)*0/?D/+(+1&*/+
P//C$(*N/0&
I organised components into the

following sections based on their
functions —Buttons, Data Input,
Data Display, Feedback and
Navigation. The list gets revised
continuously and ticked off
whenever we finish discussing a
component.
!"*0(<3(=>#&(#("%-*>%&*
Next, we made a weekly timeline
based on what needed to be done
and by who. This helps to keep
stakeholders and everyone
involved in the design system
updated on progress, as well as
facilitate resource allocation. We
planned out which components to
discuss, starting with those that
are most commonly used from the
use cases on Trello. Patterns such
as Typography, Colours and
Layout were important to discuss
first as they laid the foundations
on which subsequent components
would be based on.
5%?($%+(*D$6++%+C*/+*P//C$(*I'((1&
With limited time aside from our

day to day responsibilities, we
strove to have two to three design
system discussions weekly, each

session about two hours long. Of
course, this is an ideal situation.
There were often times both
product designers were swamped
with work and unable to take
time out. On extremely rare
occasions, we were able to
dedicate more time to discussions
and would try to make up for lost
time.
On top of weekly discussions, we

also planned for the following
steps — creating components as
symbols on Sketch, designing
pages for the design system, and
for our frontend engineer to build
these pages. We would update the
timeline continuously week on
week based on our progress.
!"*0(?3(8*+*#$69(#&)
)%+6/++(67-07&*&"+
The end goal of the discussions
was to design each component
with its properties and states, as
well as establish its usage

guidelines. For each component
discussion, we reviewed its use
cases on Trello and researched on
best practices. These include
reading articles and looking at
how other companies are using
that component etc.
Initially, we did our component

research during the discussion
session. But what we realised
subsequently was that research
did not require both designers to
be present and it would be a
better use of time to do research
beforehand each in our own time
in order to reserve the full session
for discussion alone.
N/0"?(+1%+C*)%&0"&&%/+&*/+*P//C$(*N/0&
We penned down our discussions
on Google Docs in order to keep

track of decisions as well as how
we reached these decisions. This
was really helpful at times when
we had to revisit components that
were discussed previously. Having
these notes reminded us of past
thought processes and decision
making in order to better
facilitate subsequent ones.
!"*0(@3(A$*#"*()*+%'&
+,-B7>+
As the discussions progressed, we
started building our styleguide. I
created text and layer style
libraries, and symbolised each
component on Sketch while
catering to its states and
variations.
5(K1*6+)*$67(@*&17$(*$%#@6@%(&*/+*IL(10'
./?D/+(+1*$%#@6@7*/+*IL(10'
Again, we combed through

articles and looked at other UI
design kits to compare naming
conventions as well as how they
created nested symbols etc. What
I realised was that there really is
no best way of organisation for
everyone, just one that best fits
our current workflow. Chances
are that as tools get updated
along the way, we will need to
adjust our workflows accordingly
to optimise the usage of these
tools.
An example will be the recent

Sketch 60 update with the new
Components Panel and Popover.
The previous naming convention
for our Style libraries had
multiple layers segmented by
size, weight, colour, alignment

and line height. With the new
Search (or more like Filter)
function in the Popover, we had to
scroll and click through multiple
folders just to find a particular
style.
,D)61()*+6?%+C*0/+2(+1%/+*F/@*1(K1*&17$(
$%#@6@7
To cater to this new update, I

flattened the naming structure
such that we can now search
either via [Size][Weight] to see
all font colours with or without
the default line height, or by
[Colour] to see all fonts in this
colour sorted by size and weight.
Naming for our neutrals palette
was also shortened from Dark,
Mid and Light Neutrals to D, M
and L Neutrals respectively, due
to limited horizontal space within

the popover especially when font
sizes are large. Moving forward, I
will expect more changes to come
but overall our efficiency has
definitely improved with these
updates.
Some useful articles:
Unleashing The Full Potential

Of Symbols In Sketch
The Sketch Update We’ve All

Been Waiting For
Sketch 58 — Smart Layout!
Using smart layout in Sketch
Sketch 60 & New Components

Panel — How to Use It?
How to work with Styles &

Symbols in Sketch
Components Panel
…and Sketch plugins:
Find and Replace: Change text

within layers and symbol
overrides
Shared Style Finder: Find

instances of a shared layer or
text style
Sketch Runner: Perform quick

Sketch actions quicker with
your keyboard
Symbol Organizer: Organise

symbols alphabetically and
into groups as determined by
symbol names
P(1*&16@1() I%C+*Q+
!"*0(C3(DE*+%'&F()*+%'&
I(6@0'
+,+"*-
As mentioned above, we wanted
to incorporate best practices from
other design systems into our
design system. I designed
mockups for each page after its !"#$%&'()*
components are symbolised, 9<>*8/$$/4(@&
before passing it on to our !@/)"01*)(&%C+(@*#6&()*%+

I%+C6D/@(R*D6&&%/+61(*6#/"1
frontend engineer to build these ,-;*)(&%C+*&7&1(?&*6+)
pages. %?D@/2%+C*D@/0(&&(&*F/@*#(11(@
0/$$6#/@61%/+
8/$$/4
+,-%'.-,/'+%0#"/
S%LT %+ ,-*.T
!(ñ6 $(01%2(
G&0/"+HI/"0/"+3
G&0/"+HI/"0/"+3
)*+%'&
0>#&&%&'(%&J
9%'9
/&6*$"#%&",
O@%/$T %+ ,-*T
0$7K*6"+
U6+"& 6+(1
E*+%'&
L9%&M%&'
N7$M+970J
'/%)*(O7$
N(&%C+*&7&1(?*?/0L"D&*/+*IL(10' =$7)/6"
V%L%*T %+ U//1T
E*+%'&*$+
%&W6 6?D
N9#"P+(#(QR
4$69%"*6"
We soon realised that this was not
an ideal workflow. As much as we A/@(+T %+ !@T
/*U($$" /17
could customise the pages as we E*+%'&(S%>>
00% D@
-#M*(7$(B$*#M
deemed fit, it was taking up ,7/$(+"#$"/0
resources that were already
limited just to build these pages.
Hence, we sought out tools that
X($D I161"& Y@%1(@& U$/C .6@((@&
would help reduce the workload !@%2607 5(@?& B#/"1 S+/46#$(
so resources could be better

allocated to what is necessary, i.e.
building components and
implementing them across the
product.
It was crucial to find a tool that

we can integrate into our existing
workflow while features such as
version control, branding
customisation were also good to
have. We found a table created by
uxtools.co comparing across
different design system tools and

their capabilities. I tried out
different design system tools such
as brand.ai (now Invision DSM),
Lingo and Zeroheight so we can
make a decision on one that best
suits our needs. While each tool
had its merits, we settled on using
Zeroheight.
N(&%C+*&7&1(?*/+*Z(@/'(%C'1
I created pages and sections

within each page for different
components and their variations.
Usage guidelines are stated
clearly for each use case and
Sketch symbols from the
styleguide are imported directly
into Zeroheight via a plugin. Live
component examples can be
displayed to viewers using
interactive HTML snippets and
Storybook components.
Developers can easily stay in sync
with designs with their design
token API as well.
!"*0(T3(G-0>*-*&"()*+%'&
+,+"*-
Communication with engineers,
product managers and other
stakeholders is important
throughout the entire process,
and especially this step. In order
to implement the design system,
we would need to build the new
components, link them to
Zeroheight and replace the
existing old components in our
product as well as design files.
Q?D$(?(+161%/+*D$6++%+C*/+*P//C$(*I'((1&
I checked with our data analyst

for a breakdown of the most
frequently visited pages. With

these pages ranked by highest
traffic, we decided on
components to update across
these pages in different phases.
The initial plan was to take a
couple of sprint points in each 2-
week sprint for designers and
engineers to work on the
implementation.
However as a start up, priority

has to be given to doing feature
work and we were unable to stick
to the schedule as planned.
Instead of taking time out to work
on specific pages, we came to a
compromise such that pages
involved in the feature work we
are working on will be designed
and built with the new
components.
P$/#6$*&17$(C"%)(&*/+*Z(D$%+
./++(01()*./?D/+(+1&*/+*Z(D$%+
An additional tool we used to

improve collaboration between
designers and engineers in
implementing the design system
is Zeplin, with its Global
Styleguides and Connected
Components. We uploaded all
new component symbols directly
into our Styleguide as shown
above, and developers were able
to link their codebase and
documentation sources (such as
Storybook or Github) to these
components. Once this was done,
whenever a developer inspects a
design on Zeplin, they would be
able to see an overview on the
component linked to our
Styleguide and reuse the
components.
All in all, this is how we started

our design system from scratch.
There is still much work to be
done, but slow progress is better
than no progress at all. Building a
design system is a never-ending
challenge as we continue to
update and adapt it in order to
better suit our organisational
needs. It might seem daunting at
first but taking a small step at a
time will make it a lot more
achievable. Baby steps!
Thank you for reading. If you‘ll

like to chat more, feel free to
reach out or leave a comment
below!
Special thanks to Wendy Ng, Wong

Qi Ying, Lindie Botes, Jason Chan,
Amanda Ng and Andrew Thian for
your help in one way or another. :-)
How To a Create Personal Portfolio Website | Fiverr Blog 03.06.22, 14:36
Search by topic or keyword News

Search Businesses Freelancers Case Studies Go to Fiverr.com
FREEL ANCER TIPS
How To a Create Personal Portfolio

Website
By Fiverr Team | October 22, 2021
If you want to create a stunning resume, showcase your creative portfolio, or

gain new clientele, making a personal portfolio website is a great idea. It's
your chance to showcase the services you offer, your best creative work,
favorite projects, and noteworthy accomplishments.
https://blog.fiverr.com/post/how-to-a-create-personal-portfolio-website Page 1 of 6
Let's covers the basics of what a personal portfolio website is, what it
consists of, and how to set up your very own.
What Is a Personal Portfolio Website?
A personal portfolio website is a professional website that provides

information about what you do, what services you may offer, and how to
contact you or your company.
Portfolio websites are an easy way to promote yourself, your brand, or your
business. You'll increase your visibility for clients, managers, or employers to
find you organically. Essentially, it's a digital business card and project
portfolio all in one that's accessible, sharable, and drives results.
What Should You Display on A Personal Portfolio Website?
Now you know why you should create a personal portfolio website, but what
should you include? Here are a few of the most important things to display on
a portfolio site.
What You Offer
Are you a digital creator who offers freelance services? You'll want to show
off your best digital designs, photographs, or web projects. If you're selling a
product, be sure to include what your brand represents, who it's for, and
what problem you will solve for a potential customer.
Your Best Work
You'll want to display all your best work and favorite projects. Remember,
quantity isn't necessarily better than quality. Oversharing your entire
curriculum vitae can leave visitors overwhelmed and generally turned off.
A Personal Touch
It's important to highlight and focus on your professional services, goals, and
achievements. That's the point, right? At the same time, don't be afraid to
add a dash of personality and be yourself while staying concise and on-
brand. That's how you'll stand out!
Where to Find You Online
Cross-promotion over different platforms is a dynamic strategy that can

increase exposure, audience, and the chances of getting noticed. Include all
relevant social media and any other links where customers can find examples
of your work.
How to Build a Personal Portfolio Website?
Now you're a little more familiar, are you ready to personalize a website to
showcase your portfolio and services? Here is the best way to create a
personal portfolio website for beginners.
Research and Find Inspiration
Before diving in too deep, be sure to conduct your research and look for
inspiration and examples of successful personal portfolio websites by real
professionals. There are a ton of resources that are excellent for digital
artists, photographers, and designers to check out how other people in their
fields are designing their portfolio sites.
Develop a Plan and Hone Your Message
Once you've got an idea of what you'd like your design and layout to be,
determine what content you'd like to use and how you'd like to present it.
Also, be sure your message is clear and to the point. Don't leave visitors
wandering your website guessing what you do and what they'll benefit from.
Are you a graphic designer that specializes in social media content? Tell
them, straight up!
Choose a Web Builder and Design
There are many web builders out there, so you'll easily find something that
works for you. Platforms like Squarespace, Wix, and Weebly have many
templates you can choose from to create beautiful pages with custom
content, fonts, and colors.
Add Your Content
Organize your content to flow well by creating pages for each type of
content. For example, you can select an image for your home page with a
brief intro letting visitors know who you are and what you do. You can go
more in-depth on your about or services page(s) while featuring the bulk of
your work on a Portfolio page. Don't forget to include contact information and
other relevant content, such as a blog or podcast.
Enhance SEO and Promote
SEO can be your best friend or worst enemy, and like most relationships, you
have to work at it. Be sure to optimize your SEO throughout your website by
using keyword-rich web copy. Again, don't be afraid of a little shameless self-
promotion. Ask your friends and family members to share your website, and
be sure you add links to your social media accounts and post them on your
own feeds.
Hire a Fiverr Freelancer to Build a Stunning Personal Portfolio

Website
Creating a website to promote your personal portfolio is a great way to show

off your artwork, describe your professional services, and gain new clients.
But we know how busy freelancers, artists, and entrepreneurs can get. If you
don't have the time to dedicate yourself, find the right Fiverr freelance
portfolio website designer to build a stunning digital portfolio to exhibit your
work.
Fiverr Team
Whether you’re scaling up your small business or building a brand from

scratch, we’ve got the resources you need to keep you informed and
at the top of your game.
Freelancers
Mobile Subnavigation 03.06.22, 14:45

Mobile Subnavigation
Summary: Accordions, sequential menus, section menus and category
landing pages are popular options for implementing mobile
subnavigation. The number of lower-level categories in the IA and
users’ navigation patterns on the site dictate which of them is most
appropriate for a given site.
By Raluca Budiu on July 16, 2017 Share this article:

Topics: Mobile & Tablet, Navigation
Many websites have fairly complex information architectures, with many

levels of categories. While lower-level categories are often shown on desktop
in dropdown menus or mega menus, presenting these subcategories on
mobile devices is not always straightforward.
https://www.nngroup.com/articles/mobile-subnavigation/ Page 1 of 22
Cisco.com: The desktop site uses a horizontal navigation bar holding the primary
categories. On mouse hover, each primary category expands as a megamenu
with corresponding level-2 and level-3 subcategories. The mega menu is visually
divided into three columns (Products, Solutions, Services) and also contains a
list of tabs at the bottom (Enterprise, Service Provider, Small and Medium
Businesses).
How should these expandable menus be translated on mobile? The small

screen size cannot easily accommodate many subcategories. While
Cisco’s desktop site can display 30 or more subcategories in its mega menus
fairly comfortably, without forcing users to scroll, those categories will not
easily fit on a single mobile screen. Plus, some of the visual structure
afforded by the two-dimensionality of the megamenu will not be easily
apparent on mobile, simply because not all subcategories will be visible at
the same time.
Subnavigation: Design Goals

Definition: Subnavigation refers to the navigation UI that helps users access
lower-level categories in the site’s information architecture (IA).
When designing subnavigation, aim for the following design goals:
1. Minimum interaction cost: Users should be able to access an element

of interest in the navigation with as little effort as possible. That means
few taps, little scrolling, and zero page loads if possible.
2. Typical-path support: If, within a single session, users are likely to
jump from a page in one section to another one in a completely different
area of the site, subnavigation should make it easy. If, on the contrary,
most visitors will “live” in a single section of the site (say, the sports
section of a newspaper), then the subnavigation should focus on
supporting that pattern.
3. Discoverability: Users should be able to find the subnavigation UI
quickly, with no chance of confusing it with the main navigation.
Types of Subnavigation on Mobile

There are four common ways to design subnavigation on mobile:
Accordions (aka “submenus”) inside a main navigation menu, such as a

hamburger menu
Sequential menus
Section menus
Category landing pages
Accordions Inside a Main Menu
When the primary navigation is hidden inside a pull-down menu, a simple

way to implement subnavigation is to use accordions for the primary
categories, with each accordion expanding to expose its corresponding
subcategories. This design feels like a “submenu” inside a larger menu.
Tide.com uses accordions inside a main navigation menu to display

subnavigation.
Submenus work well when they contain just a few subcategories (typically
less than 6), so that the navigation menu is not overly long at any time. When
there are many subcategories inside a main category, submenus lengthen
the main navigation menu too much and make the task of finding information
inside it tedious.
SBNation.com uses accordions to expand the main navigation categories.

Unfortunately, the subcategories span more than 3 screenfuls and make it hard
for people to find any one item of interest. (However, the fact that the menu
contains team names ordered alphabetically compensates somewhat for this
problem, since users don’t need to read all the labels and can scan for the
desired team.)
When the navigation menu is present on all pages of the site, this
subnavigation design fares the best with respect to the goals set in the
previous section:
It has a low interaction cost, because users can access subcategories in

the site’s IA anywhere on the site (if the menu is present on that page),
without waiting for an extra page load.
It supports all paths through the site, not only typical ones. Thus, it is well
suited for situations where there is no dominant site-navigation pattern
and allow users to easily jump through different branches of the site’s
information hierarchy.
Since it is part of the main navigation, there is little danger of people
getting confused by having to choose between two navigation UIs.
However, it is still important to make sure that primary categories look
different than lower-level ones in the main menu (using indentation and
perhaps color to distinguish between them).
Seventhgeneration.com: The primary categories are shown in a diKerent color

than the lower-level categories.
Sequential Menus
A sequential menu is a menu which shows only the subcategories of the last
selected category. The sequential menu starts by displaying the primary
categories; once people select one of them, the list of primary categories is
replaced by the subcategories of the selcted category. The popularity of

sequential menus has increased significantly on mobile in the past few years,
as they seem an easy solution to the problem of displaying many categories
and subcategories on a small screen.
HIV.gov: When selecting a primary category (HIV Basics) from the main menu,
the corresponding subcategories are shown instead of the original content
menu. The user can navigate up in the information hierarchy by tapping the
button Back inside the menu.
Research in human–computer Interaction is split on the effectiveness of

sequential menus: some studies seem to indicate that people do just fine with
them, at least for tasks that are not overly complex and that do not demand
navigation in different areas of the same hierarchy. Users with low spatial
ability (as measured by a spatial-ability test), however, seem to be less
efficient with these menus than users with high spatial abilities. And
unfortunately, on mobile devices, due to the increased probability of
interruption, we are more likely to become disoriented and behave like users
with poor spatial abilities.
Sequential menus cause users to accidentally make mistakes, especially on

Android phones (or in a browser) — often people are tempted to use the
phone’s physical Back button or the browser’s Back button, and accidentally
end up closing the menu and navigating to a different page instead of moving
back to the higher-level menu.
Hiv.gov: Users who accidentally tap the Android phone’s physical Back button to
go up in the menu are taken instead to the previous page that the user had
visited in the browser. To get to the upper level of the menu hierarchy, they must
use the Back button inside the menu.
(As a separate point: we don't recommend showing menus directly over a busy
image, as shown in the bottom screenshot.)
Some sites purposefully use a different label instead of Back for navigating
up in the information hierarchy. For example, on Macy’s site, a trail of
breadcrumbs is shown in the menu to allow users to go up in the IA.
Macys.com: This sequential menu displays a trail of breadcrumbs (Menu->

Shop-> Women) for the current menu view, so users have less of a chance to get
confused or accidentally press the physical Back button when they want to
navigate up in the parent hierarchy. (Note, however, that the breadcrumb trail
does not look like one, and people could easily mistake it for the set of primary
categories available on the site.)
When sequential menus preserve state, people sometimes find themselves

lost or do not realize that they can navigate in a different area of the
hierarchy. For example, on Macy’s website, the menu will change to reflect
the current page’s position in the IA. So a user who landed on the Find a
store page will not see much content of interest when she opens the menu
and may decide that the site is buggy or the menu is void of content.
Macys.com: The sequential menu reflects the page the user is on. A user who has
landed on the Find a store page will not find content of interest in the menu and
may assume that the site is buggy or that the menu does not have anything
helpful.
Mayoclinic.com: By default, the site displays the subcategories from one of its
main categories (Patient Care and Health Info — leU screenshot). In our testing,
most participants were not able to find their way to the top categories
(displayed on the right) and they assumed that the subcategories under Patient
Care and Health Info were all that the site had to oKer.
When menus become overly deep, prompting users to make a sequence of

selections, they amount to nested-doll navigation — a tedious pattern that
involves repeatedly choosing categories and subcategories before reaching
content. Many mobile users hate this pattern because it forces them to make
multiple decisions, without seeing any useful information.
While sequential menus have only moderate interaction cost (at least when
the navigation hierarchy has only 1–2 sublevels) and allow users to traverse
the IA tree quite easily if they learn how to use it, they can disorient users —
people may lose their understanding of where they are on the site and which
categories belong to which IA level. Moreover, because the Back link
in sequential menus can be confused with the browser's Back button, we
generally do not recommend them for subnavigation.
Section Menus
Section menus are separate menus (distinct from the main navigation menu)
that appear on section homepages. For example, on BBC’s website, each of
the main sections (e.g., News, Sports etc.) has a homepage with its own
section menu. Essentially, it’s as if the section was a minisite with separate
navigation.
BBC.com: Each main-category landing page has a section menu for that
category (All Sport for Sport, Sections for News).
Section menus can accommodate a fairly large number of subcategories and

are usually accessible on all pages within the corresponding section. While
navigating within a section can be done easily through the section menu, this
pattern does not support jumping from one subcategory of a section to
another subcategory of a different section (e.g., from Golf under Sport to
Science under News). Thus, it is well suited in cases when most users will
spent their session in a single site section, but less appropriate if they usually
navigate through multiple sections within the same visit. For those users, the
interaction cost of navigating to that section’s homepage in order to get
access to the section menu may be too high.
Occasionally, section menus may be confused with the main menu, and, if so,
users will not use them for section navigation, thinking “I already expanded
that, and I know it wasn’t relevant, so I am not bothering again.” That is why it
is important to make sure that:
The main menu and the section menu look distinct enough so people
won’t confuse one with the other.
You don’t reuse the same UI element used for main navigation as a
section menu.
The BBC example above does well on both these criteria.
Breastcancer.org: The same UI element (the Menu button) used for the main
navigation menu on the homepage (leU) is reused for the corresponding section
menu on a deeper page (right). People don’t expect one button to do diKerent
things depending on where it is on the site, so they won’t realize they can click on
the Menu button to reach subcategories of the current category.
Mayoclinic: The main menu and the section menu look distinct enough so people
won’t have trouble confusing one for the other.
Category Landing Pages

When all else fails and you have too many subcategories to fit even in a
section menu, the solution of choice is to create a landing page that serves
as a navigation hub for all the pages within that section. The landing page
usually contains an enumeration of all the level-2 subcategories (and even

some level 3 or 4 subcategories).
Stanford.edu: Subnavigation is implemented through category landing pages.

The Admission landing page contains more than 6 screenfuls of information and
links to various subcategories.
Category landing pages are even less flexible that section menus. While
section menus allow users to jump across pages within the same section,
category landing pages force them to pass through these pages each time
the user wants to change the branch of the IA tree. That is why category
landing pages are usually ok for situations where users typically visit a single
area of the IA hierarchy within one session. Otherwise, the interaction cost for
switching subcategories is too high, with each switch requiring a visit (and a
page load) of the category landing page.
Conclusion
Designing mobile subnavigation is often challenging due to the limited screen
real estate. Here’s a simple decision algorithm to help you figure out which
subnavigation pattern is best for you:
If you have less than 6 subcategories for all primary categories, then a
submenu or accordion in the global navigation may be appropriate.
If you have between 6 and 15 subcategories for at least some of your
primary categories, then consider a section menu.
With more than 15 subcategories per primary category, consider a
category landing page.
Learn more about scaling navigation and subnavigation to different screen

sizes in our classes on mobile usability and UX for responsive design.
References
Harry Hochheiser, Ben Shneiderman.Performance Benefits of Simultaneous

Over Sequential Menus as Task Complexity Increases. International Journal
of Human-Computer Interaction, 2009.
Mari Carmen Puerta Melguizo, Uti Vidya, and Herre van Oostendorp.
Seeking information online: the influence of menu type, navigation path
complexity and spatial ability on information gathering tasks. Behaviour &
Information Technology ,2012
Articles UX Conference Training Courses

Basic Patterns for Mobile Mobile User Experience
Navigation: A Primer
1-Hour Talks
Mobile Login Methods Help Chinese
Users Avoid Password Roadblocks Mobile-First Intranet at Scale:
Loblaw's Design Process
Big Pictures on Small Screens:
Remove, Resize or Reorganize Mobile App Accessibility
Supporting Mobile Navigation in Search and Findability
Spite of a Hamburger Menu
Building a 2.0
List Thumbnails on Mobile: When to
Use Them and Where to Place Designing Usable Chatbots
Them
Research Reports
University Websites
User Experience for Mobile

Applications and Websites
Vol. 07: Navigation and Page

Layout

Product Design - Articles: Lecturer Giorgi Rurua

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Product Design - Articles: Lecturer Giorgi Rurua

Uploaded by

Copyright:

Available Formats

Product Design Articles:

1) What is User Experience (UX) Design?-Interaction Design Founda-

2) Color Theory In Web Design/ A Complete Guide (2022)- Color

3) Icons in web design- Erik Messaki (2020)

4) Designing for Readability: A Guide to Web Typography - (Toptal

5)The Benefits of Using Imagery in Web Design- Angle Studios ( Jan-

6)Adaptive vs. Responsive Design- Mads Soegaard (2021)

7)Everything You Need to Know About Wireframe Design and Proto-

8)Website Forms Usability: Top 10 Recommendations- Kathryn Whit-

9)When to Use Which User-Experience Research Methods-Nielsen

10)Starting a design system in startup- Ruiwen Tay 2020

11)How To a Create Personal Portfolio Website- Fiverr Team | October

12)World Leaders in Research-Based User Experience Mobile Sub-

Literature Topics User Experience (UX) Design

User Experience (UX) Design

10,036 Share Tweet Share

What is User Experience (UX) Design?

Just a moment, loading…

Learn about the history of UX and what it means to be a UX designer here.

What UX Designers do goes Beyond UI

“No product is an island. A product is more than the product. It is a

— Don Norman, inventor of the term “User Experience”

uses the product.

UX Designers consider the Why, What and

an existing device and o"ers a seamless, fluid experience.

channeling their best-informed e"orts until they address all of the

User-centered design is an iterative process where you take an understanding

Learn More about UX Design

Medium.com has a wealth of insightful, funny and inspiring material on

If you want to start learning how to work in UX Design now, the

Alina is a product designer at Elementor. Her passion is to bring valuable and #

Why Color Matters In Web Design

A Brief Look Into Color History

7 Key Color Theory Terms You Should Know

How To Apply An Effective Color Scheme

How to Use Color Psychology and Meaning to Influence Emotions

Things to Consider When Using Color Psychology

Introducing Elementor Global Color

How to Use Color Theory On Your Website

Why Color Matters In Web Design

color-matters) that color plays a huge role in customers’ decisions about

According to a study (https://www.colorcom.com/research/why-color-matters)

A Brief Look Into Color History

Newton discovered a visible spectrum of light, which consisted of many colors. He

7 Key Color Theory Terms You Should

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

• Monochrome: Consisting of various tints, shades, and saturation of the same

• Complementary: Based on two colors from opposite sides of the color

Learn More About Website Color

In a nutshell, colors can be either “cool” or “warm.”

4. Color Systems: RGB, CMYK, and HEX

5. Tints and Shades

6. Hue, Saturation, and Lightness

Contrast is a crucial element of any website, especially when it comes to

How To Apply An E!ective Color

Instinct Studio (https://studio.myinstinct.in/about-us/) boasts vibrant elements in

How to Use Color Psychology and

Meaning to Influence Emotions

Below are examples of Elementor-based websites and templates that

Elementor’s Portfolio kit (https://library.elementor.com/design-portfolio/) uses an

Lùleka Experience (https://www.lulekaexperience.it/) has used this color

Elementor’s Digital Agency kit (https://library.elementor.com/digital-agency-