In this webinar, Belatrix user experience (UX) expert Barbara Lipinski, will outline the design principles underlying UX. This webinar is vital viewing for anyone who’s day-to-day job involves UX, and is trying to create a powerful UX for their product.
We will define the difference between UX and graphic design, as well as examine how they are related. In addition we will also explore:
Difference between art and design
Similarities between projectual process and the UX process, and the importance of the user in graphic design
Image-based versus text-based design
Typographical principles and paragraph
Concept and consistency of good design
Color theory, balance and weight
3. What is Graphic Design ?
Design
Realization of a concept or
idea into a configuration,
drawing, model, mould,
pattern, plan or
specification.
Graphic design
Process of visual
communication, and
problem-solving through
the correct use of
typography, space, image
and color.
4. The difference between art & design
Art expresses beauty and feelings. It may include a message, which may be interpreted in
different ways depending on the audience.
Design is more calculated and has a specific function. Its message (information or ideas) has to
be clearly communicated to its audience in matter of seconds.
5. The difference between art & design
Art Design
Is a transformative experience Its a comunicative experience
delight, amuse Informs, comunícate, instruct
Good art inspires Good design motivates
Good art is interpreted Good design is undertood
Good art is a talent Good design is a skill
Good art sends different messages to
everyone
Good design sends the same message to
everyone
The artist express himself The designer sends a mensaje
The artists choos the way to express The audiance determins the way to send
the message
6. The concept “User Experience” was created by Donald
Norman in 1995 in an article titled: “User Experience
Architect, in the mid-1990’s”
“user experience” encompasses all aspects of the end-user’s interaction with
the Company, its services, and its products.
I invented the term because I thought human interface and usability were too
narrow. I wanted to cover all aspects of the person’s experience with the
system.
“
“
What Is UX
8. Elements of UX Design
We tend to put the graphic design
In the visual design part, but some
Of its fundaments will be aply from
The very begining, the user research,
The grids and the basic information
architecture
12. What is graphic design
• Image based design
• Type based design
• Image & type based design
A creative process
that combines art
and technology to
communicate
ideas and
messages
13. Type based design
• Relying only on words to convey a message.
• What the words look like is as important as their
meaning.
• Designers need to consider typeface, type size,
division of text into columns, column length,
margins, spacing between paragraphs and lines,
indent paragraphs, decorative lettering, page
number treatments, boldface terms, italics and
underlining etc.
14.
15. Image & type based design
Combine images and typography to communicate a
message and establish balance between them.
18. Visual path
• Guides readers from one element to another
• Control how information is being perceived and in what order
• Important elements are emphasized, and content is organized logically
and predictably
• Good design and visual path will guide users and make their experience
smoother and happier
20. Achieve consistency
• Build trust
• Encourage a certain behavior and
emotional response
• Enhance readability
• Speed usage
• Result in returning users!
30. The optimal line length for your body text is
considered to be 50-60 characters per line,
including spaces
(“Typographie”, E. Ruder).
Other sources suggest that up to 75 characters is
acceptable. So what’s the downsides of violating
this range?
Paragraph
33. Gestalt is a psychology term which means "unified whole".
It refers to theories of visual perception developed by
German psychologists in the 1920s.
These theories attempt to describe how people tend to
organize visual elements into groups or unified wholes when
certain principles are applied.
Gestalt principles
34. Similarity
Similarity occurs when objects look similar
to one another. People often perceive
them as a group or pattern.
When similarity occurs, an object can be emphasised if it is
dissimilar to the others. This is called anomally.
The figure on the far right becomes a focal point because it
is dissimilar to the other shapes.
36. Continuation
Continuation occurs when the eye is compelled to
move through one object and continue to another
object.
The principle of continuity states that elements
that are arranged on a line or curve are perceived
to be more related than elements not on the line
or curve. .
39. Closure
Closure occurs when an object is
incomplete or a space is not completely
enclosed. If enough of the shape is
indicated, people percieve the whole by
filling in the missing information.
43. Figure and Ground
The figure-ground relationship allows the user to tell content from structure, spot affordances and
even understand how indirect depth relates to a two-dimensional way of seeing things.
44. Figure and Ground
ED “Elettro Domestici” (Home Appliances)
Usage of negative space demonstrates the letters “E” and
“D” making the logo look like an electric plug.
45. Focal Point
The focal point principle states that whatever stands
out visually will capture and hold the viewer’s
attention first.
48. What is Color?
• Color is the light reflected
from a surface
• Visible light is made up of
the wavelenghts of light
between infrared and
ultraviolet radiation
(between 400 and 700
nanometers)
50. Munsell Color System
• Lightness (light vs. dark, or white vs. black)
• Saturation (intense vs. dull), and
• Hue (e.g., red, orange, yellow, green, blue or
purple).
54. The powerful quality of gray
When sitting on another color, gray will shift to that color’s complement.
Although the gray is the same in each square, it picks up a tint of the larger
square’s complementary color.
55. Contrast and dimensions
Color can add dimensión to a design.
Dimension is created when two or more
colors created contrast, pulling some
elements forward and push others back.
56. Warm vs Cool colors
• Perceptual and psychological effects
• Warm colors are said to advance while cool colors tend to
recede
• Warm colors are said to arouse or stimulate the viewer, while
cool colors calm and relax.
64. Balance and Weight
Each element on a layout has a visual
weight that is determined by its
placement, size, color, value, shape
and texture.
65. Balance and Weight
Size: Large elements have more
visual weight than small
elements.
Color: Warm colors advance into
the foreground and tend to weigh
more than cool colors, which
recede into the background. Red
is considered the heaviest color
and yellow the lightest.
Position: Elements located higher
in the composition are perceived
to weigh more than elements
located lower in the composition.
The further from the center or
dominant area of a composition,
the greater the visual weight an
element will carry. Elements in
the foreground carry more weight
than elements in the background.
67. Balance and Weight
Value: Dark elements have more
visual weight than light elements.
Texture: Textured elements appear
heavier than non-textured objects.
Texture makes an element appear
three-dimensional, which gives the
appearance of mass and physical
weight.
Shape: Objects with a regular
shape appear heavier than objects
with an irregular shape. The
irregularity gives the impression
that mass has been removed from
a regular shape.
Orientation: Vertical objects
appear heavier than horizontal
objects. Diagonal elements carry
the most weight.
69. Basic aproches to balance
Symmetrical balance: occurs when equal weights
are on equal sides of a composition, balanced
around a fulcrum or axis in the center.
Symmetrical balance evokes feelings of formality
and elegance.
The downside of symmetrical balance is that it’s
static and sometimes regarded as boring.
71. Basic aproches to balance
Asymmetrical balance: results from
unequal visual weight on each side of the
composition.
Is more dynamic and interesting.
It evokes feelings of modernism,
movement, energy and vitality.
It offers more visual variety, although it can
be more difficult to achieve because the
relationships between elements are more
complex.
73. Radial balance: occurs when elements radiate from
a common center.
Maintaining a focal point is easy because it’s always
the center.
Because everything radiates from a common
center, everything also leads to that center, making
it a strong point of attraction.
Basic aproches to balance
75. Basic aproches to balance
Mosaic balance (or crystallographic balance) results
from balanced chaos.
The composition lacks distinct focal points, and the
elements share a uniform emphasis.
The lack of hierarchy leads to visual noise at first
glance.
Somehow, though, it all works together.
The design process specifies procedures which seek creative success through providing a client with innovative and unique design solutions to a defined Project, done on rational grounds, through an agreed-upon process
Gestalt Laws are simple principles or suggestions of how different elements are perceived when combining them in a certain way or order. Gestalt Laws can help to create for e.g. structure and a sense of belonging together on a website, they give suggestions of how to draw attention to elements that are important or how to create an impression of balance and stability.
The Law of Similarity claims that elements that appear similar are perceived as one unit. So elements that have for e.g. the same color, shape, or other common characteristics, are perceived to be belonging together. This phenomenon can be very useful to group elements together that belong to one category. In Figure 3 you can see how CNN uses this Gestalt Law to present different topics within one news category as a unit.
The Law of Good Continuation can be applied to both the design aspect as well as the content aspect of elements. Eyes can easily and naturally follow elements that are arranged along a continuous line, those elements are therefore perceived as a unit. Further, elements that follow each other either logically or temporal, are perceived as unit as well.
The Law of Closure explains why elements are recognized even if they are incomplete or nonexistent. This is due to our previous experiences and prior knowledge about possible shapes and figures, thus mentally we can supplement missing parts of an element.
The Law of Figure and Ground describes how we rather perceive a figure than the background which flows around it. There are several factors that might contribute to this phenomenon. First of all, a defined figure has a more salient appearance whereas a background does not stand out. Furthermore, if one object is placed on top of another, in this case, a figure is placed on a background, the impression of depth emerges and therefore the figure actually appears to lie on top of the background.
Another reason that leads to this figure-ground assumption is that in case there is a border line between both objects, it is more likely interpreted to belong to the figure rather than the background. Figure 6 shows how we placed several logos on a colored background. Only the logos are perceived, not the shapes that result from placing the logo on the colored background.
The Law of Figure and Ground describes how we rather perceive a figure than the background which flows around it. There are several factors that might contribute to this phenomenon. First of all, a defined figure has a more salient appearance whereas a background does not stand out. Furthermore, if one object is placed on top of another, in this case, a figure is placed on a background, the impression of depth emerges and therefore the figure actually appears to lie on top of the background.
Another reason that leads to this figure-ground assumption is that in case there is a border line between both objects, it is more likely interpreted to belong to the figure rather than the background. Figure 6 shows how we placed several logos on a colored background. Only the logos are perceived, not the shapes that result from placing the logo on the colored background.