VISUAL DESIGN PRINCIPLES

SCOPE AND PURPOSE OF DISCUSSION:

There are some basic and universal visual design principles

By using them, we can help our users be more efficient

We will go over them and see

How folks use them

How they can be applied to UI design

WHAT USERS DO

Scan then read later

Look for flow

“Chunk”

Like to think about their work not the UI

Look for Patterns Our brains are wired to scan visually for patterns. They helped to

determine whether the grass moving were tigers or deer or just the wind

They help us develop have an understanding of the relationships between elements. We can piece together the whole story and understand what we are seeing.

From there we can: See the flow focus on a particular part rather than trying to continually take in the

whole

THE PRINCIPLES

Similarity Proximity Closure Contrast Alignment Repetition Visual Hierarchy Continuance Affordance

SIMILARITY

• ability to group information visually. • one blade of grass, nearby objects that share a similar color, shape, size,

and position are grouped together and given meaning: a lawn. We don't have to compare each blade to the others.

• Items of similar size, shape and color tend to be grouped together by the brain, and a relationship between the items is formed.

PROXIMITY

• The idea that things which are visually grouped together appear to belong together.

• facilitates scanning. • “Chunking” – grouping related Items

CLOSURE

• The idea that the brain tends to fill in missing information when it perceives an object is missing some of its pieces.

CONTRAST  One way to create a focal point or area of emphasis is to create

contrast; The eye is attracted to areas of high contrast

The more contrast between two objects, the more likely they will be perceived as distinct and unrelated.

ALIGNMENT

• Create strong lines to connect objects that belong together• visually connected to something else – not arbitrary • When elements are aligned they are connected to each other, even if they

are separated on the page. • "Good design is transparent." A lack of alignment between the objects

makes the users eye travel across the page

REPETITION: USE OF CONSISTENCY CONSISTENCY

repeat same elements through the product. The repeating aspect ties the work together.

Once a user understand a control or UI, he can apply that knowledge to the rest of the app without having to think about differences

VISUAL HIERARCHY“NOT ALL FEATURES ARE EQUAL”

• Meaning is created through the differences and similarities among elements and their place

• If all the elements are given equal visual weight, making sense of the page is difficult.

• • In all hierarchies, only certain elements should be on top; the rest follow.

• We can emphasize important elements (such as content or interaction points), and subdue other elements (supporting information)

• Effective - does not “speak” loudly. It quietly educates and guides

• Similarly, visual hierarchy can provide users with a sense of where they are, to direct their attention, to suggest distinct choices, to explain new elements.

CONTINUANCE“THE ROAD GOES ON FOREVER AND THE PARTY NEVER ENDS”

• Law of Continuity - The mind continues a pattern, even after it stops.

AFFORDANCE

the design aspect of an object which suggest how the object should be used; a visual clue to its function and use.

NEXT STEPS

Let talk to these principles in our future work

Read more – The web is full of articles where these principles are presented and discussed (some better and some worse). I suggest doing a search on “Gestalt” or “Visual Design Principles”