Design Principles Jan 13 2019 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 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 People first see the graphics then the text Balance organization and visual contrast are vital 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
View Full Document
Unlocking...