Designing Stories for the Web
MarthaNicholsFacultyInstructor,Journalism
JenKramerLecturer,DigitalMediaDesign
HarvardUniversityExtensionSchool
hAps://scholar.harvard.edu/jen4web/presentaJons
Getting to Know You
Introduceyourself:
§ YournameandoccupaJon.
§ Whereyougrewupandwhereyounowlive.
§ WhatyouthinkofHarvardandBoston.
§ Whyyouareinterestedinthisworkshop.
Writing Exercise: Me — with a twist
Describeyourselfinoneparagraph.Includetwounusualdetailsor“twists.”Forexample:
§ Thestrangestfoodyou’veevereaten.
§ Yourfavoritecomicbookormoviehero.
§ Yourfavoritesmell.
§ Thewebsiteyouhatethemost—orthewebsiteyouspendthemostJmeon.
Good site or bad site?
https://www.lingscars.com/
Understanding Goals
1. OrganizaJonalgoals—Whatisthepurposeoftheorganiza2on?
2. Websitegoals—Howdoesthewebsitesupporttheorganiza2on?Howdoesitaddressuserneeds?
3. Usergoals—Whatdouserswanttodoonthewebsite?
Understanding Users
1. Demographics—Age,loca2on,gender,educa2onallevel,job2tle,etc.Notallofthesemightberelevant,ortheremightbemoreelementsthatareneeded.
2. Technographics—Whatkindofdevice(s)dotheyuse?
3. Ethnographics—Wherearetheywheninterac2ngwiththesite?Whatelsearetheydoing?
Exercise: Identifying goals and users
Whatyoushoulddo
§ Workingroups§ UsegivenURL
w 241op4cal.comw bostoniphonerepair.comw tanjoreharvardsq.comw petaliflowers.comw millerhavens.comw theaudiolab.comw grendelsden.com
WhatyoushouldidenJfy
§ Organiza4onalgoals§ Websitegoals§ Usergoals§ Demographics§ Technographics§ Ethnographics§ Anyothercommentson
yoursitearewelcome!
Good site or bad site?
https://boston.craigslist.org/
Form vs. Function
Q:Isiteverokayforawebsitetobeugly?A:Yes.Itdependsonthepurposeofthesite.Q:Really?Butdon’tvisualsmaLermorethanwords?
A:No.Askyourselfthefollowingques2ons:
Whatisthemainpurposeofthiswebsite?DousersjustneedalistofopJons?IsitaboutcreaJngabrandorimage?
PRINT: Classic design that works
Inbooksandjournals,you’llfind:
§ Headlines,Jtles,andcontentspages.§ Clearhierarchyofheadings.§ Fixedreadingwidth(pagesorcolumns).§ Blurbs,dropquotes,andsidebars.§ Indexes,references,footnotes.§ Pictures.
WEB CONTENT: What users get
GoodDesign
§ Textisbriefandclear.§ Mixisfocused.§ IncludeseffecJvechunking.
BadDesign
§ Textistoolongandvague.§ Mixisamess.§ CreatesaAenJonscaAer.
BAD TEXT
Onfartoomanywebsites,you’llfind:
§ Boring,overlywordycontent.§ Toomanydetails.§ Thewrongdetails.§ Noheadlinesororganizingstructure.§ ExplanaJonsinthepassivevoice.§ Vaguenessabouttherealpoint.
GOOD TEXT: Three rules
1. Keepitshort.—Cutthetextbyhalforone-third.—Reduceparagraphstoaheadline.
2. Keepitfocused.—Firstoutlinethemostimportantpoints.—Thenselectthreeorfewerasyourfocus.
3. Keepitmeaningful.—Avoidfancylanguageandjargon.—Usetheac2veexposi2onalvoice.
MESSY MIX
Onfartoomanywebsites,you’llfind:
§ Wrongtextwidthforreadability.§ Toomanysidebarsandvisuals.§ UndifferenJatedtextblocks.§ Placeholderheadingslike“Welcome.”§ Nologicaltextflow.§ ToomanymenuopJons.
FOCUSED MIX: Three strategies
1. Createahierarchyofmeaning.—Focusonwhatreadersreallyneedtoknow.—OrganizetexttoindicatewhatmaLersmost.
2. Useheadlinestodirectreaders.—Makeheadingsshortandpunchy.—Createaheadingstructurethat’slogical.
3. Establishsensiblemenusandsequences.—Uselis2cles/2melinesiftheyimproveclarity.—Cutdownthenumberofmenuop2ons.
ATTENTION SCATTER
Onfartoomanywebsites,you’llfind:
§ Swathsoftextinsteadofreadablechunks.§ Notenoughparagraphbreaks.§ Toomanyrandomelements.§ NoclearsenseofwhatmaAersmost.§ Imagesthatundercutorinterferewithtext.§ Toomanyhyperlinksthatpullreadersaway.
CHUNKING: Three strategies
1. Organizealltextinshortchunks.—Reduceparagraphstothreeorfourlines.—Includenomorethanthreegrafsinachunk.
2. Useimagesthatservethetext.—Keepinmindthevalueofclearexplana2ons.—RememberthatapreLypictureisnotenough.
3. EmployhyperlinkslogicallyandeffecJvely.—Uselinkstotakereaderstoaddi2onaldetails.—Don’tpullreadersawaywithtoomanylinks.
Exercise: Revise your paragraph
Designyour“Me”paragraphforthescreen,usingMSWord,PowerPoint,oranothersimilarprogramonyourcomputer.Hints:
§ Addagoodheadline.
§ Cutyourparagraphbyhalforathird.
§ Breaktheparagraphintosmallerchunks.
§ Includeanimagethatmatchesthetext.
“There is one rule that is fairly safe to follow: When in doubt, wear the plainer dress.” —Etiquette in Society, in Business, in Politics, and at Home (1922),
Emily Post
Contact Us
MarthaNicholsInstructorinJournalismHarvardExtensionSchoolmnichols@fas.harvard.eduTalkingWri2ngmagazine:hAp://talkingwriJng.com
JenKramerLecturerinDigitalMediaHarvardExtensionSchooljkramer@fas.harvard.eduSlidesat:hAps://scholar.harvard.edu/jen4web/presentaJons
BONUS: Revise Strunk and White Asaprac2ceexercise,cutdownthisquotesoit’shalfaslong:
“Muddinessisnotmerelyadisturberofprose,itisalsoadestroyeroflife,ofhope:deathonthehighwaycausedbyabadlywordedroadsign,heartbreakamongloverscausedbyamisplacedphraseinawell-intenJonedleAer….Thinkofthetragediesthatarerootedinambiguity,andbeclear!”[53words]Hint:Tryalis2cleorturningitintoatweet.