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.