5 Visual Organization Appearance Does Matter Content Organization

5. Visual Organization In this chapter you will learn about: Four principles of visual

Proximity Closeness Related to the spacing of items Items close together are perceived as

Alignment Left, Right, Center, Justified Placement relative to imaginary lines Includes Indentation Avoid mixing

Consistency Related items look the same Related pages look the same Uniform e. g.

Contrast Use of differences to emphasize importance different items look different Chapter 5: Visual

Proximity See next slide for a tongue-in-cheek example: mindless application of alphabetic organization Preview:

Dan’s Clothing: the mindless version Chapter 5: Visual Organization Copyright © 2004 by Prentice

What groups would make sense? Women’s clothes, Men’s clothes, Kid’s clothes, Special sizes July

Dan’s Clothing: with sensible groups Chapter 5: Visual Organization Copyright © 2004 by Prentice

Alignment Words, Symbols, etc. should follow invisible or imaginary lines Generally, Left or Right

Alignment Avoid centered alignment for lines that are of nearly equal length Chapter 5:

Lines are now greatly different in length: reader knows it’s intentional Chapter 5: Visual

Orpheus Chamber Orchestra: nice use of proximity and alignment Chapter 5: Visual Organization Copyright

The principles are seen in combination Eddie Bauer site (next slide) has Horizontal alignment

Chapter 5: Visual Organization Copyright © 2004 by Prentice Hall 16

Don’t be a slave to centered alignment. . . Chapter 5: Visual Organization Copyright

. . . which is OK, but isn’t this better? Chapter 5: Visual Organization

Note the consistent layout in the next few slides Chapter 5: Visual Organization Copyright

One of the pages reachable from the previous slide Chapter 5: Visual Organization Copyright

How can we make this more interesting? Chapter 5: Visual Organization Copyright © 2004

Use more contrast Chapter 5: Visual Organization Copyright © 2004 by Prentice Hall 23

Talk about boring! Chapter 5: Visual Organization Copyright © 2004 by Prentice Hall 24

This is a quiz! (Not really) Look again at the previous slide. How many

Here’s one way, but there are many other possibilities Chapter 5: Visual Organization Copyright

Summary Four principles of visual organization Proximity Alignment Consistency Contrast Some ways they can

Slides: 27

Download presentation

5. Visual Organization Appearance Does Matter Content Organization & Visual Organization are closely related People infer organization from appearance Chapter 5: Visual Organization Copyright © 2004 by Prentice Hall 1

5. Visual Organization In this chapter you will learn about: Four principles of visual organization and how to apply them Proximity Alignment Consistency Contrast Chapter 5: Visual Organization Copyright © 2004 by Prentice Hall 2

Proximity Closeness Related to the spacing of items Items close together are perceived as being related, those at a distance are seen as unrelated Chapter 5: Visual Organization Copyright © 2004 by Prentice Hall 3

Alignment Left, Right, Center, Justified Placement relative to imaginary lines Includes Indentation Avoid mixing alignments on a single page Chapter 5: Visual Organization Copyright © 2004 by Prentice Hall 4

Proximity See next slide for a tongue-in-cheek example: mindless application of alphabetic organization Preview: the result is a hodge-podge as seen by the user Chapter 5: Visual Organization Copyright © 2004 by Prentice Hall 7

What groups would make sense? Women’s clothes, Men’s clothes, Kid’s clothes, Special sizes July Specials, Sales on rainwear, Closeout on pink socks Store locations, Store hours Open an account, Your account status Check out Email us. Chapter 5: Visual Organization Copyright © 2004 by Prentice Hall 9

Alignment Words, Symbols, etc. should follow invisible or imaginary lines Generally, Left or Right alignment is best Be cautious of Centered & Justified Chapter 5: Visual Organization Copyright © 2004 by Prentice Hall 11

The principles are seen in combination Eddie Bauer site (next slide) has Horizontal alignment Vertical alignment Proximity, to group like items Consistency, in type size and font for links Contrast, between SALE and most else Chapter 5: Visual Organization Copyright © 2004 by Prentice Hall 15

This is a quiz! (Not really) Look again at the previous slide. How many ways can you improve it? Can you put all four principles to work? Next slide shows one possible way You can find lots of others Chapter 5: Visual Organization Copyright © 2004 by Prentice Hall 25

Summary Four principles of visual organization Proximity Alignment Consistency Contrast Some ways they can be applied The message: There are principles; your can learn them and use them Chapter 5: Visual Organization Copyright © 2004 by Prentice Hall 27