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

1. Key design principles to
improve your revenue
WEBINAR

2. Barbara Lipinski
UX designer
Barbara Lipinski
Marketing Director
Panelists

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

7. Design and 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

9. Graphic Design Process

10. UX processes

11. UX Processes

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.

15. Image & type based design
Combine images and typography to communicate a
message and establish balance between them.

16. What readers see…

17. Contrast for visual hierarchy

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

19. Consistency
Users recognize behavior and expect repetition.
Inconsistency = reduced productivity

20. Achieve consistency
• Build trust
• Encourage a certain behavior and
emotional response
• Enhance readability
• Speed usage
• Result in returning users!

21. Typography
•Evolution of type
•Anatomy of type
•How we read
•Using type as a design element

22. Anatomy of type

23. Type style

24. Leading / Keraning

25. How we read

26. How we read

27. How we read

28. Type as a design element

29. Type as a design element

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

31. Paragraph

32. 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.

35. Similarity

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. .

37. Continuation

38. Continuation

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.

40. Continuation

41. Proximity
Proximity occurs when elements are placed close
together. They tend to be perceived as a group.

42. Proximity

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.

46. Focal Point

47. Color Theory

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)

49. Primary colors
Aditive Color Substractie Color

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).

51. Color wheel

52. Color harmony
Colors may appear different dependign on their surroundings

53. Color harmony
Colors may appear different dependign on their surroundings

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.

57. Cool color palette Warm color palets

58. The Power of color
• Color evoques emotions
and creates powerful
modos
• These emotions and modos
are based on one’s past
experienes

59. Color coding
Periodic table Traffic

60. Color in UX

61. Color in UX

62. Color in UX

63. Balance and weight

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.

66. Balance and Weight

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.

68. Why we look for balance?

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.

70. Basic aproches to balance

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.

72. Basic aproches to balance

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

74. 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.

76. Basic aproches to balance