14-Aug-15 Design Principles

Design principles In The Non-Designer’s Design Book: Design and Typographic Principles for the Visual Novice, Robin Williams discusses these four principles: Proximity: Related items should be grouped together Alignment: Nothing should be placed on the page arbitrarily-- every item should have a visual connection with something else on the page Repetition: Some aspect of the design should be repeated throughout the entire piece Contrast: If two items are not exactly the same, make them different--really different.

Proximity Proximity—nearness—is your best tool for organizing things on a page If things are close together, they appear to be related Therefore: If things are related, they should be close together If things are not related, they should not be close together Avoid spacing everything equally Don’t stick things in the corners or alone in the middle of a page Avoid having too many groups on a page Make sure headers look like headers, and things that aren’t headers don’t look like headers

Alignment Alignment is literally “lining thing up” Good alignment helps to unify and organize the page You want to avoid the “scattered all over” look Left alignment tends to happen naturally in Web pages Right alignment is not generally as useful Center alignment tends to be boring, and is especially ugly when the lines are all about the same length anyway Try to avoid more than one kind of alignment on a page

Repetition The purposes of repetition are: To unify the page or group of pages To add visual interest Few things look more boring than long, unbroken pages of text Things that look boring often aren’t given a second look Repetition is like consistency, only more so You probably already try for consistent fonts, headers, etc. Some visual elements--backgrounds, icons, borders, horizontal rules-- should be repeated throughout a Web page, or a related group of Web pages If your pages belong together, they should appear to belong together However, don’t use so much repetition that it becomes annoying

Contrast Contrast is when two elements are clearly different You can create contrast by using different sizes of type You can create contrast by using different kinds of fonts You can use thin lines and thick lines You can use horizontal lines and vertical lines You can use contrasting colors: cool (bluish) and warm (reddish) colors You can use widely spaced text and closely spaced text Don’t be a wimp--make different elements really different There isn’t much contrast between 12-point type and 14-point type

Let’s do that again! Contrast is when two elements are clearly different You can create contrast by: Using different sizes of type Using different kinds of fonts Using thin lines and thick lines Using horizontal lines and vertical lines Using contrasting colors: cool (bluish) and warm (reddish) colors Using widely spaced text and closely spaced text Don’t be a wimp --make different elements really different There isn’t much contrast between 12-point type and 14-point type!

Types of fonts Serif Fonts Sans serif fonts -- no serifs Monospaced fonts -- all characters are the same width Display fonts -- not intended for lots of text EVEN IN A GOOD FONT, LARGE AMOUNTS OF TEXT IN ALL CAPITALS IS DIFFICULT TO READ

A few more simple principles Establish a visual hierarchy People first see the graphics, then the text Balance, organization, and visual contrast are vital Direct the reader’s eye People scan text left to right, top to bottom Only the top four inches may be visible Use pastel shades for backgrounds or minor elements Beware of distractions Garish illustrations and (especially) animated graphics or blinking text pull the user’s eyes away from the content If everything is emphasized, nothing is emphasized Be consistent Don’t have things scattered all over your page Let your style “evolve” as you improve the page

Establish a consistent look Every page on your site should share some style elements with all the other pages The idea is that the user should know, without thinking about it, that she’s still in the same site Use the same logo, or the same set of navigation buttons, on every page Use a consistent color scheme and set of fonts Your pages don’t have to all look identical (and shouldn’t), but they should have a common style CSS style sheets can be a big help in defining a consistent look But you need to test them on a variety of browsers

Legibility and readability Readability: How easy it is to read a lot of text Legibility: How easy it is to read headlines In general, a serif font is more readable (in medium sizes) Because of the coarse resolution of modern screens, a sans serif font is more readable in small sizes Very high contrast (difference in brightness, not color) makes text more readable Do not change the default size of body text; the user has it set to the size she wants Increasing the size for headers or for emphasis is OK Don’t use more than a couple of different fonts Usually, one serif font and one sans serif font is enough

The End