Designing Stories for the Web - Home | Scholars at … Stories for the Web Martha Nichols Faculty...
Transcript of Designing Stories for the Web - Home | Scholars at … Stories for the Web Martha Nichols Faculty...
![Page 1: Designing Stories for the Web - Home | Scholars at … Stories for the Web Martha Nichols Faculty Instructor, Journalism Jen Kramer Lecturer, Digital Media Design Harvard University](https://reader035.fdocuments.in/reader035/viewer/2022062600/5ad4ef817f8b9a5c638c723a/html5/thumbnails/1.jpg)
Designing Stories for the Web
MarthaNicholsFacultyInstructor,Journalism
JenKramerLecturer,DigitalMediaDesign
HarvardUniversityExtensionSchool
hAps://scholar.harvard.edu/jen4web/presentaJons
![Page 2: Designing Stories for the Web - Home | Scholars at … Stories for the Web Martha Nichols Faculty Instructor, Journalism Jen Kramer Lecturer, Digital Media Design Harvard University](https://reader035.fdocuments.in/reader035/viewer/2022062600/5ad4ef817f8b9a5c638c723a/html5/thumbnails/2.jpg)
Getting to Know You
Introduceyourself:
§ YournameandoccupaJon.
§ Whereyougrewupandwhereyounowlive.
§ WhatyouthinkofHarvardandBoston.
§ Whyyouareinterestedinthisworkshop.
![Page 3: Designing Stories for the Web - Home | Scholars at … Stories for the Web Martha Nichols Faculty Instructor, Journalism Jen Kramer Lecturer, Digital Media Design Harvard University](https://reader035.fdocuments.in/reader035/viewer/2022062600/5ad4ef817f8b9a5c638c723a/html5/thumbnails/3.jpg)
Writing Exercise: Me — with a twist
Describeyourselfinoneparagraph.Includetwounusualdetailsor“twists.”Forexample:
§ Thestrangestfoodyou’veevereaten.
§ Yourfavoritecomicbookormoviehero.
§ Yourfavoritesmell.
§ Thewebsiteyouhatethemost—orthewebsiteyouspendthemostJmeon.
![Page 4: Designing Stories for the Web - Home | Scholars at … Stories for the Web Martha Nichols Faculty Instructor, Journalism Jen Kramer Lecturer, Digital Media Design Harvard University](https://reader035.fdocuments.in/reader035/viewer/2022062600/5ad4ef817f8b9a5c638c723a/html5/thumbnails/4.jpg)
Good site or bad site?
https://www.lingscars.com/
![Page 5: Designing Stories for the Web - Home | Scholars at … Stories for the Web Martha Nichols Faculty Instructor, Journalism Jen Kramer Lecturer, Digital Media Design Harvard University](https://reader035.fdocuments.in/reader035/viewer/2022062600/5ad4ef817f8b9a5c638c723a/html5/thumbnails/5.jpg)
Understanding Goals
1. OrganizaJonalgoals—Whatisthepurposeoftheorganiza2on?
2. Websitegoals—Howdoesthewebsitesupporttheorganiza2on?Howdoesitaddressuserneeds?
3. Usergoals—Whatdouserswanttodoonthewebsite?
![Page 6: Designing Stories for the Web - Home | Scholars at … Stories for the Web Martha Nichols Faculty Instructor, Journalism Jen Kramer Lecturer, Digital Media Design Harvard University](https://reader035.fdocuments.in/reader035/viewer/2022062600/5ad4ef817f8b9a5c638c723a/html5/thumbnails/6.jpg)
Understanding Users
1. Demographics—Age,loca2on,gender,educa2onallevel,job2tle,etc.Notallofthesemightberelevant,ortheremightbemoreelementsthatareneeded.
2. Technographics—Whatkindofdevice(s)dotheyuse?
3. Ethnographics—Wherearetheywheninterac2ngwiththesite?Whatelsearetheydoing?
![Page 7: Designing Stories for the Web - Home | Scholars at … Stories for the Web Martha Nichols Faculty Instructor, Journalism Jen Kramer Lecturer, Digital Media Design Harvard University](https://reader035.fdocuments.in/reader035/viewer/2022062600/5ad4ef817f8b9a5c638c723a/html5/thumbnails/7.jpg)
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!
![Page 8: Designing Stories for the Web - Home | Scholars at … Stories for the Web Martha Nichols Faculty Instructor, Journalism Jen Kramer Lecturer, Digital Media Design Harvard University](https://reader035.fdocuments.in/reader035/viewer/2022062600/5ad4ef817f8b9a5c638c723a/html5/thumbnails/8.jpg)
Good site or bad site?
https://boston.craigslist.org/
![Page 9: Designing Stories for the Web - Home | Scholars at … Stories for the Web Martha Nichols Faculty Instructor, Journalism Jen Kramer Lecturer, Digital Media Design Harvard University](https://reader035.fdocuments.in/reader035/viewer/2022062600/5ad4ef817f8b9a5c638c723a/html5/thumbnails/9.jpg)
Form vs. Function
Q:Isiteverokayforawebsitetobeugly?A:Yes.Itdependsonthepurposeofthesite.Q:Really?Butdon’tvisualsmaLermorethanwords?
A:No.Askyourselfthefollowingques2ons:
Whatisthemainpurposeofthiswebsite?DousersjustneedalistofopJons?IsitaboutcreaJngabrandorimage?
![Page 10: Designing Stories for the Web - Home | Scholars at … Stories for the Web Martha Nichols Faculty Instructor, Journalism Jen Kramer Lecturer, Digital Media Design Harvard University](https://reader035.fdocuments.in/reader035/viewer/2022062600/5ad4ef817f8b9a5c638c723a/html5/thumbnails/10.jpg)
PRINT: Classic design that works
Inbooksandjournals,you’llfind:
§ Headlines,Jtles,andcontentspages.§ Clearhierarchyofheadings.§ Fixedreadingwidth(pagesorcolumns).§ Blurbs,dropquotes,andsidebars.§ Indexes,references,footnotes.§ Pictures.
![Page 11: Designing Stories for the Web - Home | Scholars at … Stories for the Web Martha Nichols Faculty Instructor, Journalism Jen Kramer Lecturer, Digital Media Design Harvard University](https://reader035.fdocuments.in/reader035/viewer/2022062600/5ad4ef817f8b9a5c638c723a/html5/thumbnails/11.jpg)
WEB CONTENT: What users get
GoodDesign
§ Textisbriefandclear.§ Mixisfocused.§ IncludeseffecJvechunking.
BadDesign
§ Textistoolongandvague.§ Mixisamess.§ CreatesaAenJonscaAer.
![Page 12: Designing Stories for the Web - Home | Scholars at … Stories for the Web Martha Nichols Faculty Instructor, Journalism Jen Kramer Lecturer, Digital Media Design Harvard University](https://reader035.fdocuments.in/reader035/viewer/2022062600/5ad4ef817f8b9a5c638c723a/html5/thumbnails/12.jpg)
BAD TEXT
Onfartoomanywebsites,you’llfind:
§ Boring,overlywordycontent.§ Toomanydetails.§ Thewrongdetails.§ Noheadlinesororganizingstructure.§ ExplanaJonsinthepassivevoice.§ Vaguenessabouttherealpoint.
![Page 13: Designing Stories for the Web - Home | Scholars at … Stories for the Web Martha Nichols Faculty Instructor, Journalism Jen Kramer Lecturer, Digital Media Design Harvard University](https://reader035.fdocuments.in/reader035/viewer/2022062600/5ad4ef817f8b9a5c638c723a/html5/thumbnails/13.jpg)
GOOD TEXT: Three rules
1. Keepitshort.—Cutthetextbyhalforone-third.—Reduceparagraphstoaheadline.
2. Keepitfocused.—Firstoutlinethemostimportantpoints.—Thenselectthreeorfewerasyourfocus.
3. Keepitmeaningful.—Avoidfancylanguageandjargon.—Usetheac2veexposi2onalvoice.
![Page 14: Designing Stories for the Web - Home | Scholars at … Stories for the Web Martha Nichols Faculty Instructor, Journalism Jen Kramer Lecturer, Digital Media Design Harvard University](https://reader035.fdocuments.in/reader035/viewer/2022062600/5ad4ef817f8b9a5c638c723a/html5/thumbnails/14.jpg)
MESSY MIX
Onfartoomanywebsites,you’llfind:
§ Wrongtextwidthforreadability.§ Toomanysidebarsandvisuals.§ UndifferenJatedtextblocks.§ Placeholderheadingslike“Welcome.”§ Nologicaltextflow.§ ToomanymenuopJons.
![Page 15: Designing Stories for the Web - Home | Scholars at … Stories for the Web Martha Nichols Faculty Instructor, Journalism Jen Kramer Lecturer, Digital Media Design Harvard University](https://reader035.fdocuments.in/reader035/viewer/2022062600/5ad4ef817f8b9a5c638c723a/html5/thumbnails/15.jpg)
FOCUSED MIX: Three strategies
1. Createahierarchyofmeaning.—Focusonwhatreadersreallyneedtoknow.—OrganizetexttoindicatewhatmaLersmost.
2. Useheadlinestodirectreaders.—Makeheadingsshortandpunchy.—Createaheadingstructurethat’slogical.
3. Establishsensiblemenusandsequences.—Uselis2cles/2melinesiftheyimproveclarity.—Cutdownthenumberofmenuop2ons.
![Page 16: Designing Stories for the Web - Home | Scholars at … Stories for the Web Martha Nichols Faculty Instructor, Journalism Jen Kramer Lecturer, Digital Media Design Harvard University](https://reader035.fdocuments.in/reader035/viewer/2022062600/5ad4ef817f8b9a5c638c723a/html5/thumbnails/16.jpg)
ATTENTION SCATTER
Onfartoomanywebsites,you’llfind:
§ Swathsoftextinsteadofreadablechunks.§ Notenoughparagraphbreaks.§ Toomanyrandomelements.§ NoclearsenseofwhatmaAersmost.§ Imagesthatundercutorinterferewithtext.§ Toomanyhyperlinksthatpullreadersaway.
![Page 17: Designing Stories for the Web - Home | Scholars at … Stories for the Web Martha Nichols Faculty Instructor, Journalism Jen Kramer Lecturer, Digital Media Design Harvard University](https://reader035.fdocuments.in/reader035/viewer/2022062600/5ad4ef817f8b9a5c638c723a/html5/thumbnails/17.jpg)
CHUNKING: Three strategies
1. Organizealltextinshortchunks.—Reduceparagraphstothreeorfourlines.—Includenomorethanthreegrafsinachunk.
2. Useimagesthatservethetext.—Keepinmindthevalueofclearexplana2ons.—RememberthatapreLypictureisnotenough.
3. EmployhyperlinkslogicallyandeffecJvely.—Uselinkstotakereaderstoaddi2onaldetails.—Don’tpullreadersawaywithtoomanylinks.
![Page 18: Designing Stories for the Web - Home | Scholars at … Stories for the Web Martha Nichols Faculty Instructor, Journalism Jen Kramer Lecturer, Digital Media Design Harvard University](https://reader035.fdocuments.in/reader035/viewer/2022062600/5ad4ef817f8b9a5c638c723a/html5/thumbnails/18.jpg)
Exercise: Revise your paragraph
Designyour“Me”paragraphforthescreen,usingMSWord,PowerPoint,oranothersimilarprogramonyourcomputer.Hints:
§ Addagoodheadline.
§ Cutyourparagraphbyhalforathird.
§ Breaktheparagraphintosmallerchunks.
§ Includeanimagethatmatchesthetext.
![Page 19: Designing Stories for the Web - Home | Scholars at … Stories for the Web Martha Nichols Faculty Instructor, Journalism Jen Kramer Lecturer, Digital Media Design Harvard University](https://reader035.fdocuments.in/reader035/viewer/2022062600/5ad4ef817f8b9a5c638c723a/html5/thumbnails/19.jpg)
“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
![Page 20: Designing Stories for the Web - Home | Scholars at … Stories for the Web Martha Nichols Faculty Instructor, Journalism Jen Kramer Lecturer, Digital Media Design Harvard University](https://reader035.fdocuments.in/reader035/viewer/2022062600/5ad4ef817f8b9a5c638c723a/html5/thumbnails/20.jpg)
Contact Us
MarthaNicholsInstructorinJournalismHarvardExtensionSchoolmnichols@fas.harvard.eduTalkingWri2ngmagazine:hAp://talkingwriJng.com
JenKramerLecturerinDigitalMediaHarvardExtensionSchooljkramer@fas.harvard.eduSlidesat:hAps://scholar.harvard.edu/jen4web/presentaJons
![Page 21: Designing Stories for the Web - Home | Scholars at … Stories for the Web Martha Nichols Faculty Instructor, Journalism Jen Kramer Lecturer, Digital Media Design Harvard University](https://reader035.fdocuments.in/reader035/viewer/2022062600/5ad4ef817f8b9a5c638c723a/html5/thumbnails/21.jpg)
BONUS: Revise Strunk and White Asaprac2ceexercise,cutdownthisquotesoit’shalfaslong:
“Muddinessisnotmerelyadisturberofprose,itisalsoadestroyeroflife,ofhope:deathonthehighwaycausedbyabadlywordedroadsign,heartbreakamongloverscausedbyamisplacedphraseinawell-intenJonedleAer….Thinkofthetragediesthatarerootedinambiguity,andbeclear!”[53words]Hint:Tryalis2cleorturningitintoatweet.