before & after - non-designer's · before & after from the non-designer’s design...
TRANSCRIPT
Use the Principles Cheatsheet!
Before & After
From The Non-Designer’s Design Book, Robin Williams Non-Designer’s Design • 8
Before & After
From The Non-Designer’s Design Book, Robin Williams Non-Designer’s Design • 9
Before & After
From The Non-Designer’s Design Book, Robin Williams Non-Designer’s Design • 10
© barb sikora Non-Designer’s Design • 11
• Legibility: how easy it is torecognize each letter in atypeface design. Legibilityis inherent in the typedesign.
• Readability: how easy it isto peruse and read text.Readability is in thedesigner’s hands.
• Type Refinements: detailsthat create professionallooking type.
Typography Definitions
Typographyrocks
Text: Serif type for print; sans serif for screen
• Print: Serif for body copySan serif for heads & subs, 10-12 words per line
• Web: Sans serif for body copy, 8–10 words per lineSans or sans serif for heads & subs
Use width-defined tables tocontrol line lengthon the web.Georgia is a serifface designed forthe web, Verdanais a sans serif face.
Syntax subheadPalatino text
Readability Guidelines
Alignment
• Left alignment or Justify lengthy textLeft alignment creates organic white spaceJustify fits more text and looks more formal
Left align headlines and subheads too!
• One space between sentences. Really. Onlyone.
Readability Guidelines
Business PhilosophyAg Processing Inc promotes the economic well-beingof farmer-producers and enriches the lives of peoplethroughout the community, the nation and the worldas a partner in food processing.
Business PhilosophyAg Processing Inc promotes the economicwell-being of farmer-producers and enrichesthe lives of people throughout the community,the nation and the world as a partner in foodproduction.
3 Readability & Refinements
© barb sikora Non-Designer’s Design • 12
Upper and lowercase letters
• Lowercase words have arecognizable word shape,all caps do not
Type Styles
• Small amounts of bold, italic, CAPS, no underline.Type style changes disrupt the text color causingthe reader’s eye to jump around.
Readability Guidelines
recognizable coastline
NO COASTLINE
Leading
• Linespacing (leading) guides the reader’s eye fromone line of text to the next.
• Too little space makes it harder to find thenext line, too much space and the reader maywander away!
• Type with a larger x-height needs more leadingthan type with a smaller x-height
Readability Guidelines
Spacing
• Paragraph space or indents, not both.
• A subhead should be closer to the text that followsit than to the text that precedes it.
• The first paragraph following a subhead does notneed an indent
Trappedwhite space
Readability Guidelines
Business PhilosophyAg Processing Inc promotes the economic well-being offarmer-producers and enriches the lives of peoplethroughout the community, the nation and the world asa partner in food processing.
Business PhilosophyAg Processing Inc promotes the economic well-being
of farmer-producers and enriches the lives of peoplethroughout the community, the nation and the world asa partner in food processing.
History of RichmondHistorical SitesRegional ParksEast Brother Light Station
History of RichmondHistorical SitesRegional ParksEast Brother Light Station
ArialTimesBoth are 24 pt type!
© barb sikora Non-Designer’s Design • 13
Color• Strong contrast with background
• Type color: affects readability,on the web: easily confused as link.
The lesscontrast thereis, the harderthe text is toread
Readability Guidelines
Break the rules!• If you break the rules, compensate for it. For
example, if you set type over a background, usea larger point size on a shorter line length.
Readability Guidelines
• Be brief, use shortersentences than in print
• Be consistent from pageto page: heads, subs, text
• Page lengthGenerally: one topicper page.
• One long page:Accommodates slow modemsEasier web maintenance
• Harder to find infoPerpetual scrolling
• Short pages:Topic specificEasier to find info w/i pagePage can be read quicker
• Multiple pg. download timePerpetual clicking
Web Readability
Business PhilosophyAg Processing Inc promotes the economic well-being of farmer-producers and enriches the lives of people throughout the community,the nation and the world as a partner in food processing.
Business PhilosophyAg Processing Inc promotes the economic well-being of farmer-producers and enriches the livesof people throughout the community, the nationand the world as a partner in food processing.
© barb sikora Non-Designer’s Design • 14
• Real quotes and apostrophes(often found in Preferences)
HTML codeOpening quote “Close quote ”
• Hanging punctuation
inch & foot marks
smart punctuation
Hanging punctuation is for pull quotes and otherlarge type settings. Not for body text.
Beautiful Punctuation
“It’s not true! I didn’t do it, nobodysaw me, you can’t prove anything!”
"It's not true! I didn't do it, nobodysaw me, you can't proveanything!"
“It’s not true! I didn’t do it,nobody saw me, you can’tprove anything!”
“Your attitude is your life.”
—Robin Williams
• Accurate information: short and concisePages can link to more detailed info when necessary.
• Print and proof: its to easy to overlook typos onscreen. not that i ever make misteaks, but sum poeple do.
• Consistency: type, colors, layout, spacing, navigation, etc.
• Proper file formats and extensions
• Page titles and page identification
• Descriptive Alt tags
• Dead end pages, broken links,links that provide useless info.
Site Organization
© barb sikora Non-Designer’s Design • 15
• En dashes: indicate durationNo spaces before or after.Thin space or kern if desired
• Em dashes: indicate achange in thoughtNo spaces before or after.Kern if desired
QuizIdeal Photo OpsChildren ages 1 4Summer: May 1st September 1stPhoto ops with in lawsMornings: 10 10:30 a.m.(afternoons 1 3 p.m. but never 2 4 p.m. take a nap instead!)
En& Em Dashes
Note: Not all software has kerning options.
• Kern large type: create optically equal spacing between letters
Kern closer: Curves and verticals,or two diagonals
To Yo Po WATo Yo Po WAAT OO OV P.O.AT OO OV P.O.Kern apart: verticals
IN ti rn IL il llIN ti rn IL il ll
WorkshopWorkshop
Dynamic Typography• Treat type graphically to
create visual interest
• Use strong type contrasts
• Maintain readability
• Refinements: real quotes, apostrophes, dashes
• Kern type: create opticallyequal spacing betweenletters
bms © 2007 Non-Designer’s Design Workshop
■ Accurate, interesting content■ Meeting project’s needs: adhering
to the topic and purpose■ Appealing to the target audience■ Visual interest and clarity■ Web: Everything in working order
(navigation, interface, links)
■ HierarchyPresent the information in an organizedfashion with the most important info first.
■ Focal PointGive the page a vibrant, interesting focalpoint. One focal point is perfect!
■ Eye flowOrganize the page so that the reader is directedthrough it. For example: focal point leads totitle which leads into text.
■ White space/balanceDon’t overcrowd the page. Organize theinformation so that there is space betweenitems, reduce text to its minimum amountof copy where possible.
■ SimplicityKISS. Simple is elegant and strong.
■ Balance & Page gestaltSquint at the page to see it for its graphicimpact. Is it a pleasing interaction of positiveand negative shapes?
■ UnityAssess the page to see if it comes together asa whole. Check focal point, proximity,repetition, and alignment.
■ ContrastUse contrasting fonts, and/or contrast in size,color, weight, form, direction. Use colorcontrast effectively.
■ RepetitionRepeat (existing) elements as a way to unifythe page/site.
■ AlignmentStick to one alignment. Make the most ofexisting alignments: text, photos, etc.
■ ProximityGroup information that belongs together andpay attention to the alignment of info that isseparate but still related.
■ Legibility & ReadabilityChoose a legible typeface, handle it in amanner that enhances its readability: pointsize, line length, background, etc.
■ Selecting & MixingSelect a typeface that feels appropriate to thecontent and mood of the topic! If you use twotypefaces, be sure they contrast well: serif andsans serif, old style and modern, etc.
■ Typographic refinementsUse beautiful punctuation! Use en and emdashes! Kern large type!
■ ProofreadPrint and proof! Proof until your eyeballsburn! Read backwards, check for one type oferror at a time, check your copy against theoriginal copy, have someone else proof yourwork too.
■ Typos, grammatical errors■ Inaccurate information■ Consistency: type, color, layout, spacing, etc
Web: ■ Alt tags■ Proper file formats and extensions■ Page titles■ Dead end pages■ Broken links■ Ease of use■ Page identification■ Printability
Principles Cheatsheet >
