Post on 07-Jan-2016
description
Mario Čagalj
University of Split
2013/2014.
Human-Computer Interaction (HCI)
Basic Visual Design Principles
Assembled from: Robin Williams “Non-Designers Design Book” Colin Stewart: “Visual Design The good kind of VD”, 2009.
Visual designVisual design = organizing the appearance of something
Applies to anything visual:web page designdisplaying information (charts, graphs, reports)maps, brochures, birthday cardscode formattingsmartphone applicationetc.
3
Which one do you prefer?
Visual design principlesWe already know that excellent visual design and design in
general requires some artistic ability, but a reasonably good design can be achieved by following some basic principles
For visual design, we have the following 4 principles:ContrastRepetitionAlignmentProximilty
You can remember these by the acronym
CRAP5
CRAP
Contrast make different things different brings out dominant elements mutes lesser elements
Repetition repeat design throughout the interface consistency creates unity
Alignment visually connects elements creates a visual flow
Proximity groups related elements separates unrelated ones
6
ProximityDesign principle #1: proximity
things that are related should be grouped close togetherthings that are not related should be separated
When several items are in close proximity to each other, they become one visual unit rather than several separate units
This helps organize information, reduces clutter, and gives the content consumer a clear structure
7
confusing or disorderly state or collection
ProximityAn example of bad proximity
8
Which heading applies to the items in gray – "Services" or "Resource Centre"?not clear from the spacing
ProximityThe same web with better proximity
9
Immediately clear which items the menu headings apply toPhysical closeness implies a relationship
Proximity
bad proximity: the subheading and the article have a huge space between them they don't look like they're related 10
Proximity
11
the same web page, with better proximity
Proximitya page with good proximity:
12
Proximitythe areas in red borders contain related content
they are separated from other areasalso, it is clear what each heading applies to
13
Proximity
14
another example of good proximity
Proximity – whitespacea related concept to proximity is that of whitespacewhitespace refers to any empty space between visual
elementsit is not necessarily white, but it will be if the background
colour is white
15
Proximity – whitespacean example of bad whitespace (not enough):
in the menu on the left, there is almost no space between the menu items
16
Proximity – whitespacethe same page, with better whitespace:
17
Proximity – too many separate items
How many times does your eye stop to look at something?Where do you begin reading?
In the middle, probably, because that phrase is boldestWhat do you read next—left to right?What happens when you get to the bottom-right corner, where does your
eye go? Do you wander around making sure you didn’t miss any corners? 18
Proximity – too many separate items
Now that there are two bold phrases, where do you begin?Do you start in the upper left? Do you start in the center?After you read those two items, where do you go?
Pehaps you bounce back and forth between the words in boldDo you know when you’re finished?
19
Proximity – too many separate itemsBy grouping similar elements into one unit, several things
instantly happen: The page becomes more organized You understand where to begin reading the message, and you know when
you are finished And the “white space” (the space around the letters) automatically
becomes more organized
20
Proximity – before and after
21
Summary of proximityWhen several items are in close proximity to each other, they
become one visual unit rather than several separate units
Items relating to each other should be grouped together
The basic purpose of proximity is to organize contentMore likely to be read
How to get itCount the number of visual elements (units) on the page by counting the
number of times you eye stopsIf more than some reasonable number, see which elements can be grouped
toghether into closer proximity to become one visual unit22
Do you recognize the “proximity”?
AlignmentDesign principle #2: alignment
nothing should be placed on the page arbitrarily every item should have a visual connection with some thing
else on the page
Straight lines give a more organized appearance
Aligned items result is a stronger cohesive uniteven when aligned elements are physically separated from
each other, there is an invisible line that connects them, both in your eye and in your mind
24
Alignmentan example of bad alignment:
25
Alignmentthe same web page, with better alignment:
26
Alignmentmore bad alignment:
27
Alignmentthe same web page, with better alignment:
28
Alignmenta web page with good alignment:
29
Alignmentas a general rule, left and right alignment work best –
particularly for paragraphs of textcenter alignment is terrible for paragraphs, but can work for
things other than textsome examples of good center alignment:
30
Alignment – the bussiness card example
centraly aligned text – the edges are soft
right aligned text – creates hard edge on the right the hard edge gives strength to this
layout
31The invisible line connects the separate pieces of text
Alignment – find a strong alignment and stick to it
32
Alignment – find a strong alignment and stick to it
33
Alignment – find a strong line and stick to it
34
There is a strong line along the left edge of the text and the left edge of the imageWhich one do you use? Why?Between the text and the image, there is “trapped” white space, and the
white space is an awkward shape
Alignment – find a strong line and stick to it
35
Now the strong line on the right side of the text and the strong line on the left side of the image are next to each other, making each other stronger
Summary of alignmentNothing should be placed on the page arbitrarily
Every element should have some visual connection with another element on the page
UnityTo make all the elements on the page appear to be unified, connected, and
interrelated, there needs to be some visual tie between themEven if the separate elements are not physically close, the can appear
connected, related with the other information
How to get itAlways find something elese on the page to aligne with, even if the objects
are far away from each other
36
Do you recognize the “alignment”?
RepetitionDesign principle #3: repetition
visual elements that have the same purpose or level of importance should look the same
Repeat some aspect of the design throughout the entire pieceIf there are too many different-looking things on a web page, it
will not look like everything belongs on the same page - it will not look cohesive
The repetitive element may be font, a thick line, color, design element, ... anything that a reader will visually recognize
38
Repetitionan example of bad repetition:
39
Repetitionthere are two examples of bad repetition on the previous
slide:the menu items on the left all have a light yellow background –
except for the items under the "Service", which have a gray backgroundall these items are in the same menu – they should all have the same
appearance
40
Repetitionthe same page, with better repetition:
41
Repetitionanother example of bad repetition:
42
Repetitionthe same page, with better repetition:
43
Repetitionan example of good repetition:
44
Repetitioneverything with the same purpose/importance looks
the same – fonts, colours, icons
45
Repetitionanother example of good repetition:
• note the weather icons – even though all four icons are different, they are made up of identical parts (clouds, rain drops, lightning)
46
Repetition
47
Repetition – slides
bla bla asdf bla blaasdf asdfasbla balalskfa fačsdkf aasldjfa sldkfjasd fsthe menu items on the leftasdfkja aslkd asdlasd flkas dfalksdsdfaj alsdkjf alsdkfj a slkasRepetition helps organize the information: it helps guide the
reader through the pages; it helps unify the design. 48
bla bla asdf bla blaasdf asdfas
bla balalskfa fačsdkf aasldjfa sldkfjasd fsthe menu items on the
leftasdfkja aslkd asdlasd flkas dfalksd
sdfaj alsdkjf alsdkfj a slkas
Repetition – the bussiness card example When you get to the end of the information, does your eye wander
off the card?
How about now? Do you find it bounces back and forth
between the bold elements? That is the point of repetition – it ties a
card toghether, it provides unity
49
Summary of repetitionRepetition of visual elements throughout the design unifies and
strengthens a piece Repetition ties together otherwise separate parts
The purpose of repetition is to unify and to add visual interest
How to get itThink of repetition as being consistent (recall consistency design principle)
50
How about “repetition”?
ContrastDesign principle #4: contrast
Visual elements with a different purpose or level of importance should appear differentthis is the opposite of repetition
More important elements should be more prominent (larger, with stronger colours) than less important elements
Contrast is one of the most effective ways to create visual interest to your design
52
Contrastan example of bad contrast:
• nothing stands out on this page – there is not enough difference in colours and fonts 53
Contrastthe same page, with better contrast:
54
Contrastanother example of bad contrast:
• the section heading ("What does X-ray light show us") is smaller than the paragraph text, even though it is more important
55
Contrastthe same page, with better contrast:
56
Contrasta page with good contrast:
• note the differences in colours (light/medium/ dark) and font sizes/weights 57
Contrasta page with good contrast:
• note the division into three columns – each column has its own colour 58
Contrastthere is some contrast already happening on this web
page, but we can push it further
59
Contrastthe web page is more dynamic and interesting
60
Summary of contrastContrast on a page draws our eyes to it
our eyes like contrast
Visual elements with a different purpose or level of importance should appear differenttwo elements on the page that are not the same cannot be similarfor contrast to be effective, the two elements must be very different
Contrast has two purposescreate an interestto aid in the organization of the information
a reader should be able to instantly understand the way the information is organized, the logical flow from one item to another
61
Do you recognize the “contrast”?
Exampleswhat does this page do well and badly?
63
Exampleswhat does this page do well and badly?
64
Exampleswhat does this page do well and badly?
Exampleswhat does this page do well and badly?
RecapGood visual design is important when making anything visual
e.g., it makes web sites easier to navigate and readThe four principles of visual design are:
contrastrepetitionalignmentproximity
67
RecapProximity: visual elements that are related should be close
together, and vice versause whitespace to separate elements
Alignment: visual elements should be lined up in straight linesleft- and right-alignment are usually bestcenter-alignment can work sometimes, but not with
paragraphs of text
68
RecapRepetition: visual elements that have the same purpose or
level of importance should look the samethis applies to fonts, colours, icons, etc.repeated elements on a page will give it a sense of cohesion
(unity)Contrast: visual elements with different purposes or levels
of importance should appear differentthe opposite of repetition
69