Design PrinciplesDesign principlesProximityAlignmentRepetitionContrastLet’s do that again!Types of fontsA few more simple principlesEstablish a consistent lookLegibility and readabilityThe EndJan 13, 2019Design PrinciplesDesign principlesIn 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 togetherAlignment: Nothing should be placed on the page arbitrarily--every item should have a visual connection with something else on the pageRepetition: Some aspect of the design should be repeated throughout the entire pieceContrast: If two items are not exactly the same, make them different--really different.ProximityProximity—nearness—is your best tool for organizing things on a pageIf things are close together, they appear to be relatedTherefore:If things are related, they should be close togetherIf things are not related, they should not be close togetherAvoid spacing everything equallyDon’t stick things in the corners or alone in the middle of a pageAvoid having too many groups on a pageMake sure headers look like headers, and things that aren’t headers don’t look like headersAlignmentAlignment is literally “lining thing up”Good alignment helps to unify and organize the pageYou want to avoid the “scattered all over” look Left alignment tendsto happen naturallyin Web pages Right alignment isnot generallyas useful Center alignment tends tobe boring, and is especiallyugly when the lines are allabout the same length anywayTry to avoid more than one kind of alignment on a pageRepetitionThe purposes of repetition are:To unify the page or group of pagesTo add visual interestFew things look more boring than long, unbroken pages of textThings that look boring often aren’t given a second lookRepetition is like consistency, only more soYou 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 pagesIf your pages belong together, they should appear to belong togetherHowever, don’t use so much repetition that it becomes annoyingContrastContrast is when two elements are clearly differentYou can create contrast by using different sizes of typeYou can create contrast by using different kinds of fontsYou can use thin lines and thick linesYou can use horizontal lines and vertical linesYou can use contrasting colors: cool (bluish) and warm (reddish) colorsYou can use widely spaced text and closely spaced text Don’t be a wimp--make different elements really differentThere isn’t much contrast between 12-point type and 14-point typeLet’s do that again!Contrast is when two elements are clearly differentYou can create contrast by:Using different sizes of typeUsing different kinds of fontsUsing thin lines and thick linesUsing horizontal lines and vertical linesUsing contrasting colors: cool (bluish) and warm (reddish) colorsUsing widely spaced text and closely spaced textDon’t be a wimp--make different elements really differentThere isn’t much contrast between 12-point type and 14-point type!Types of fontsSerif FontsSans serif fonts -- no serifsMonospaced fonts -- all characters are the same widthDisplay fonts -- not intended for lots of textEVEN IN A GOOD FONT, LARGE AMOUNTS OF TEXT IN ALL CAPITALS IS DIFFICULT TO READA few more simple principlesEstablish a visual hierarchyPeople first see the graphics, then the textBalance, organization, and visual contrast are vitalDirect the reader’s eyePeople scan text left to right, top to bottomOnly the top four inches may be visibleUse pastel shades for backgrounds or minor elementsBeware of distractionsGarish illustrations and (especially) animated graphics or blinking text pull the user’s eyes away from the contentIf everything is emphasized, nothing is emphasizedBe consistentDon’t have things scattered all over your pageLet your style “evolve” as you improve the pageEstablish a consistent lookEvery page on your site should share some style elements with all the other pagesThe idea is that the user should know, without thinking about it, that she’s still in the same siteUse the same logo, or the same set of navigation buttons, on every pageUse a consistent color scheme and set of fontsYour pages don’t have to all look identical (and shouldn’t), but they should have a common styleCSS style sheets can be a big help in defining a consistent lookBut you need to test them on a variety of browsersLegibility and readabilityReadability: How easy it is to read a lot of textLegibility: How easy it is to read headlinesIn 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 sizesVery high contrast (difference in brightness, not color) makes text more readableDo not change the default size of body text; the user has it set to the size she wantsIncreasing the size for headers or for emphasis is OKDon’t use more than a couple of different fontsUsually, one serif font and one sans serif font is enoughThe
View Full Document
Unlocking...