The document discusses the principles of visual design and kansei, or emotional design. It explains that visual design aims to create an emotional response through balancing typography, color, imagery, and layout. These elements work together to establish branding, enhance messaging, and help users navigate products intuitively. The document provides guidance on optimizing each individual element, such as using color to focus attention and imagery that complements content, and emphasizes that all elements must work cohesively to effectively convey experience and meaning.
2. Kansei…
is a term that we use to describe emotional
or affective design/engineering.
The idea behind it is to design and develop
improvements to products and services by
exploring the users psychological feelings
and needs.
We can do this with:
• user research,
• real world observation,
• paper prototyping,
• user testing…
3. Visual Design…
is a term that we use to describe interface
design, but is it just visual?
As a graphic designer, I consider my work to be
more than just visual.
I use graphical elements to design a visual
experience but I also try to evoke an emotional
response from the user/audience.
4. It is not about making something pink or blue?
It is about more than just:
• branding,
• consistency,
• logos,
• icons,
• colours,
• typography and
• other graphical elements…
It is about enhancing the message you’re
delivering, elevating the content and enticing
the audience to explore and connect with
your product.
5. Visual design is used to help the user get to
where they want to go quickly.
Not just in graphical interfaces, but with product
design as well as real world scenarios.
Visual Design acts as a mood enhancer adding
value to the users experience with quality
concepts and attention to detail.
6. Visual design is a combination of…
• typography,
• colour,
• imagery,
• layout…
We call this formula…
7. Visual Emotion…
Typography + Colour + Imagery + Layout
By balancing these four core elements correctly
you can evoke an emotion that help connect the
audience with the product/message and brand.
8. Typography…
It should be something the user least notices,
complementing the design and not distracting
with fancy decorations.
We work with so many different screen sizes and
device formats, making it even more important to
choose the correct typeface.
The right typeface is a combination and correct choice of…
• typeface,
• size,
• weight,
• colour,
• position.
9. Colour…
Incorrect colour usage can seriously affect the
users experience and emotion.
Colour is a great way to show and direct focus,
show hierarchy as well as separation of content.
It maximises visual clarity, impact and emotion.
Use vibrant colours for focus, contrasting colours
for visual styling and neutral for other elements.
Good colour usage is critical for…
• applying focus,
• visual styling and consistency,
• holding together the brand,
• indicating hierarchy,
• maximising the impact of your content.
10. !
Imagery…
When using images, they should be carefully
created, resourced and or shot.
Composition and colour are crucial. Images used
in backgrounds should not be too detailed or
fussy, distracting the users from the content. If
necessary manipulate the image by cutting out,
cropping, scaling and/or re-colouring elements.
The right image will…
• maximise the visual impact of the content,
• ensure overlaid content is readable and clear,
• show brand continuity,
• make your design feel really ‘designed’.
11. Layout…
Getting the layout balance right is key in ensuring
your design looks and feels great.
Avoid visual clutter and keep it simple. Use white
space carefully and considerately, maximising the
visual impact of all elements.
Consider and design your layout carefully. It will…
• help the users know exactly where to go,
• enhance the User Experience,
• make the design feel polished,
• provide visual impact and clarity.
12. Wrap up…
So, good visual design will…
• establish brand recognition,
• enhance the message you are delivering,
• help the user get to where they want to go quickly,
• act as a mood enhancer, and
• create an emotional bond with the user and your
product/service…
(Visual Emotion = Typography + Colour + Imagery + Layout)
It is key to get all of these elements right. Get one
wrong and it can all break down. Spend time on
each area and carefully piece them together.