Notes for Design Structure By Scott Granneman & Jans Carton Find the presentation at http://www.granneman.com/presentations/ ## Slide 3 Jeffrey Zeldman, photographed by John Morrison http://www.zeldman.com/wp-content/JZbyJohnMorrisonBW.jpg ## Slide 8 http://www.towergrovechurch.org ## Slide 11 https://www.aclu-nj.org/theissues/ ## Slide 12 http://www.granneman.com/teaching/ ## Slide 13 https://en.wikipedia.org/wiki/Landing_page ## Slide 14 https://en.wikipedia.org/wiki/Home_page ## Slide 16 http://www.aclupa.org/site-map ## Slide 17 http://www.towergrovechurch.org/site-map/ ## Slide 19 https://en.wikipedia.org/wiki/File:Edware_Tufte_giving_a_class.jpg, taken by Aaron Fulkerson ## Slide 26 Illustration: “The Sad Tally”: “Suicides by location. This data is based on The Chronicle's review of Golden Gate Bridge, Highway and Transportation District records. Chronicle Graphic by Todd Trumbull”. San Francisco Chronicle (October 30, 2005). http://www.sfgate.com/cgi-bin/object/article?f=/c/a/2005/10/30/MNG2NFF7KI1.DTL&object=%2Fc%2Fpictures%2F2005%2F10%2F30%2Fmn_suicide30_loc_tt.gif. Accessed 2019-07-22. From: Guthmann, Edward. “Lethal Beauty: The Allure: Beauty and an easy route to death have long made the Golden Gate Bridge a magnet for suicides.” San Francisco Chronicle (October 30, 2005). https://web.archive.org/web/20110127162733/http://www.sfgate.com/cgi-bin/article.cgi?f=/c/a/2005/10/30/MNG2NFF7KI1.DTL#ixzz5uRaKBliC. Accessed 2019-07-22 ## Slide 29 https://github.com/edwardtufte/tufte-css ## Slide 30 https://github.com/edwardtufte/tufte-css ## Slide 31 https://edwardtufte.github.io/tufte-css/ ## Slide 32 https://edwardtufte.github.io/tufte-css/ ## Slide 33 https://edwardtufte.github.io/tufte-css/ ## Slide 34 https://edwardtufte.github.io/tufte-css/ ## Slide 35 https://edwardtufte.github.io/tufte-css/ ## Slide 36 https://edwardtufte.github.io/tufte-css/ ## Slide 37 https://edwardtufte.github.io/tufte-css/ ## Slide 38 https://edwardtufte.github.io/tufte-css/ ## Slide 39 https://edwardtufte.github.io/tufte-css/ ## Slide 40 https://edwardtufte.github.io/tufte-css/ ## Slide 41 https://github.com/jez/tufte-pandoc-css ## Slide 42 https://jez.io/tufte-pandoc-css/ ## Slide 43 https://jez.io/tufte-pandoc-css/ ## Slide 44 https://jez.io/tufte-pandoc-css/ ## Slide 45 https://jez.io/tufte-pandoc-css/ ## Slide 47 Paragraph 1 from Edward Tufte’s Beautiful Evidence (2006), pg. 47. Paragraph 2 from Edward Tufte’s “Sparkline theory and practice”, https://web.archive.org/web/20190716205342/https://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0001OR&topic_id=1 ## Slide 48 Galileo Galilei, Istoria e dimostrazioni intorno alle macchie solari (Rome, 1613). https://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=000AIr ## Slide 49 https://web.archive.org/web/20170701000000*/www.granneman.com ## Slide 51 Souppouris, Aaron. “Master Statistician Weaves Google Images Into Visual Quilts”. The Verge (November 14, 2013). https://www.theverge.com/2013/11/14/5103104/make-your-own-collages-straight-from-google-search. ## Slide 52 https://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=00041U ## Slide 53 https://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=00041U ## Slide 54 https://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=00041U ## Slide 55 https://chrome.google.com/webstore/detail/imagequilts/ceebcpbapdnfnkhfogkbhbgknhgnaoee ## Slide 57 https://www.edwardtufte.com/tufte/courses ## Slide 58 https://www.edwardtufte.com/tufte/courses-students ## Slide 85 Proposed design for Saint Louis Zoo home page ## Slide 86 Proposed design for Saint Louis Zoo home page ## Slide 87 Proposed design for Saint Louis Zoo home page ## Slide 88 Proposed design for Saint Louis Zoo interior page ## Slide 89 Proposed design for Saint Louis Zoo interior page ## Slide 90 Proposed design for Saint Louis Zoo interior page ## Slide 92 http://www.concrete5.org/ http://help.websanity.com/cms-guide/we-jump/basic-terms-know/#pagetypes ## Slide 96 https://www.aclu-nj.org ## Slide 97 http://www.stlzoo.org ## Slide 98 http://www.apple.com ## Slide 99 http://www.microsoft.com ## Slide 106 http://novemberlearning.com, c. 1995 ## Slide 107 http://isesstl.com, c. 1998? ## Slide 112 http://www.petfriendsstl.com ## Slide 113 http://www.prsastlouis.org, c. 2000 ## Slide 114 http://aclu-co.org/about-us/mission-history/, 2015-06-15 ## Slide 118 http://www.stlzoo.org ## Slide 119 http://www.towergrovechurch.org ## Slide 120 No drop-downs for 2nd tier https://www.aclu-nj.org/theissues/, 2014-08-10 ## Slide 124 https://alumni.wustl.edu/Pages/default.aspx ## Slide 125 https://alumni.wustl.edu/Pages/default.aspx ## Slide 126 https://alumni.wustl.edu/Pages/default.aspx ## Slide 127 http://www.bonlook.com ## Slide 128 http://www.bonlook.com ## Slide 129 http://www.bonlook.com ## Slide 130 http://www.bonlook.com ## Slide 131 http://www.amazon.com ## Slide 132 http://www.amazon.com ## Slide 133 http://www.porsche.com/usa/, October 27, 2013 ## Slide 134 http://www.porsche.com/usa/, October 27, 2013 ## Slide 135 http://www.porsche.com/usa/, October 27, 2013 ## Slide 136 British Film Institute, http://www.bfi.org.uk, 2015-06-15 ## Slide 142 http://www.usefulusability.com/main-navigation-types-and-usability-pt-2-vertical-navigation/ ## Slide 145 Coined in 1998 by Vincent Flanders, author & creator of Web Pages That Suck ## Slide 146 https://en.wikipedia.org/wiki/Mystery_meat_navigation ## Slide 148 Blue Bell Ice Cream, http://www.bluebell.com, 2015-06-15 ## Slide 149 Blue Bell Ice Cream, http://www.bluebell.com, 2015-06-15 ## Slide 150 Blue Bell Ice Cream, http://www.bluebell.com, 2015-06-15 ## Slide 151 Blue Bell Ice Cream, http://www.bluebell.com, 2015-06-15 ## Slide 152 British Film Institute, http://www.bfi.org.uk ## Slide 155 http://www.capitalistpigbbq.com, 2014-08-10 ## Slide 156 http://www.apple.com ## Slide 157 De-emphasized by design http://www.google.com ## Slide 158 http://www.stlzoo.org ## Slide 159 https://www.aclu-nj.org/legaldocket/ ## Slide 160 https://www.clicktale.com/resources/blog/the-3-golden-rules-of-sticky-navigation/ https://usabilitygeek.com/how-to-fix-your-fixed-navigation/ ## Slide 161 https://www.smashingmagazine.com/2012/09/sticky-menus-are-quicker-to-navigate/ https://usabilitygeek.com/how-to-fix-your-fixed-navigation/ ## Slide 162 https://www.smashingmagazine.com/2012/09/sticky-menus-are-quicker-to-navigate/ https://usabilitygeek.com/how-to-fix-your-fixed-navigation/ ## Slide 163 https://www.clicktale.com/resources/blog/the-3-golden-rules-of-sticky-navigation/ ## Slide 164 https://oceanschool.nfb.ca/ ## Slide 165 https://oceanschool.nfb.ca/ ## Slide 167 http://www.stlzoo.org ## Slide 168 http://www.towergrovechurch.org ## Slide 170 Can confuse user as to page she is currently on https://www.aclu-nj.org/theissues/ ## Slide 171 ANIMALS down side can be confusing http://www.stlzoo.org/animals/animalfoodnutritioncenter/ ## Slide 175 Note a Featured Group: ReStore & Donate http://www.habitatstl.org, 2014-08-10 ## Slide 176 http://www.diocesemo.org, 2014-08-10 ## Slide 177 Not at the top … http://stlzoo.org ## Slide 178 … at the bottom instead http://stlzoo.org ## Slide 182 http://www.towergrovechurch.org/learning/ ## Slide 183 What is ANIMALS on the side? The title? http://www.stlzoo.org/animals/abouttheanimals/ ## Slide 184 Page title is different than navigation http://www.stlzoo.org/membership ## Slide 185 Title is obvious, but it shouldn’t match navigation http://www.sloca.org/ovarian-cancer/treatment/ ## Slide 186 Navigation label should be different than page title http://www.angiefox.com/bio/ ## Slide 189 https://www.njumr.org/facts/ ## Slide 190 7 subpages, arranged in 7 columns & 1 row http://www.stlzoo.org/animals/abouttheanimals/ ## Slide 191 6 subpages, arranged in 3 columns & 2 rows http://www.stlzoo.org/membership ## Slide 192 No sub-pages at all http://www.stlzoo.org/animals/abouttheanimals/mammals/pouchedmammals/redkangaroo/ ## Slide 193 http://www.towergrovechurch.org/learning/ ## Slide 194 Only a few sub-pages (children) https://www.aclu-nj.org/theissues/lgbt-rights/ ## Slide 195 A lot of sub-pages (children) https://www.aclu-nj.org/theissues/ ## Slide 196 So many sub-pages that you need to use a different method https://www.aclu-nj.org/legaldocket/ ## Slide 200 https://www.aclu-nj.org/theissues/ ## Slide 201 http://www.granneman.com/teaching/web-development-granneman-way/ ## Slide 202 http://www.sloca.org/ovarian-cancer/treatment/ ## Slide 203 http://www.stlzoo.org/animals/abouttheanimals/ ## Slide 204 http://www.stlzoo.org/animals/abouttheanimals/mammals/pouchedmammals/redkangaroo/ ## Slide 205 Without Path Nav, you have to do a lot of cognitive work http://aclu-co.org/about-us/mission-history/, 2015-06-15 ## Slide 206 And even more work… http://aclu-co.org/about-us/chapters/boulder-county/upcoming-events/ ## Slide 207 Uh oh - now where are you on the site? http://aclu-co.org/court-cases/tattered-cover-v-brohl/ ## Slide 211 https://www.aclu-nj.org ## Slide 212 http://neuro.wustl.edu ## Slide 213 http://www.sloca.org/ovarian-cancer/treatment/ ## Slide 214 http://www.stlzoo.org/animals/animalfoodnutritioncenter/ ## Slide 215 https://www.aclu-nj.org/theissues/lgbt-rights/ ## Slide 219 http://www.stlzoo.org/animals/abouttheanimals/ ## Slide 223 Search should NOT go in the sidebar! http://www.stlzoo.org ## Slide 224 http://www.stlzoo.org/animals/abouttheanimals/ ## Slide 225 http://www.stlzoo.org/animals/animalfoodnutritioncenter/ ## Slide 226 http://www.towergrovechurch.org/learning/ ## Slide 227 Not really a sidebar, as this is on every single page https://www.aclu-nj.org/theissues/ ## Slide 228 Combo: Action banners & social media on every page, but other content can be added on pages as needed http://www.aclupa.org/our-work/legal/ ## Slide 233 https://www.aclu-nj.org ## Slide 234 http://www.episcopalchicago.org ## Slide 235 http://www.cityofbn.com ## Slide 236 http://www.diocesemo.org ## Slide 237 http://www.nngroup.com/articles/infinite-scrolling/ ## Slide 239 http://www.nngroup.com/articles/infinite-scrolling/