Notes for Design Theory - The Vitruvian Triad By Scott Granneman & Jans Carton Find the presentation at http://www.granneman.com/presentations/ ## Slide 4 The Vitruvian Man by Leonardo da Vinci ## Slide 5 https://en.wikipedia.org/wiki/Vitruvius https://en.wikipedia.org/wiki/De_architectura Beginning of prologue from De Architectura. From Bodleian Libraries, Oxford. Pg. fol. 004r from bodl_Auct.F.5.7_Master_4r. Bologna, Italy, c 14c. http://bodley30.bodley.ox.ac.uk:8180/luna/servlet/detail/ODLodl~1~1~395~100417:De-architectura-# ## Slide 6 https://en.wikipedia.org/wiki/Vitruvius https://en.wikipedia.org/wiki/De_architectura Title page from De architectura. From U. of North Carolina (PA6968 .A2 1567). Venice, Franciscum Franciscium Senensem, & Ioan. Crugher Germanum, 1567. https://blogs.lib.unc.edu/rbc/index.php/2016/04/26/traces-of-vitruvius-in-game-of-thrones/ ## Slide 7 https://en.wikipedia.org/wiki/Vitruvius http://penelope.uchicago.edu/Thayer/E/Roman/Texts/Vitruvius/home.html ## Slide 8 Image: https://www.newstatesman.com/2019/02/%20john-ruskin-200-anniversary-to-see-clearly-book-power-seeing-exhibition-review ## Slide 18 https://uptimerobot.com/ ## Slide 19 https://uptimerobot.com/integrations/ ## Slide 20 https://uptimerobot.com/pricing/ ## Slide 21 https://uptimerobot.com/faq/ ## Slide 22 https://downforeveryoneorjustme.com ## Slide 23 https://downforeveryoneorjustme.com/granneman.com ## Slide 34 Facebook CAPTCHA ## Slide 39 Norman, Don. The Design of Everyday Things. New York: Basic Books (2013). 249. The time is 7:11 ## Slide 41 https://www.youtube.com/watch?v=MCWaN_Tc5wo ## Slide 49 Last legacy Edge was 19; new Chromium-based Edge starts at version 79 (nicknamed Edgium, because it’s Chromium-based) https://techcrunch.com/2018/12/06/microsoft-edge-goes-chromium-and-macos/ ## Slide 50 https://techcommunity.microsoft.com/t5/microsoft-365-blog/microsoft-365-apps-say-farewell-to-internet-explorer-11-and/ba-p/1591666 ## Slide 51 https://developer.mozilla.org/en-US/docs/Web/HTML/Element ## Slide 52 https://developer.mozilla.org/en-US/docs/Web/CSS/Reference ## Slide 53 http://getbootstrap.com ## Slide 56 http://validator.w3.org ## Slide 57 http://jigsaw.w3.org/css-validator/ ## Slide 58 http://validator.w3.org/unicorn/ ## Slide 61 Responsive Design Mode on Safari 11.1 on macOS 10.13.4 ## Slide 62 Responsive Design Mode on Safari 11.1 on macOS 10.13.4 ## Slide 63 Responsive Design Mode on Safari 11.1 on macOS 10.13.4 ## Slide 64 Responsive Design Mode on Safari 11.1 on macOS 10.13.4 ## Slide 65 Responsive Design Mode on Safari 11.1 on macOS 10.13.4 ## Slide 66 http://www.browserstack.com ## Slide 82 https://www.allmusic.com/artist/willie-dixon-mn0000959770?525cbc0d42547cf8ec5e6d4845b9988e ## Slide 85 2009 ESPN Zone Chicago Ultimate Couch Potato Contestant - Steve Janowski. Wikimedia. Public domain. https://commons.wikimedia.org/wiki/File:2009_ESPN_Zone_Chicago_Ultimate_Couch_Potato_Contestant_-_Steve_Janowski_03.JPG ## Slide 87 https://webster.edu ## Slide 88 https://webster.edu ## Slide 89 https://wustl.edu ## Slide 90 https://wustl.edu ## Slide 91 https://alumni.wustl.edu/Pages/default.aspx ## Slide 97 Krug, Steve. Don’t Make Me Think, Revisited: A Common Sense Approach to Web Usability. New Riders (2014). 9. ## Slide 100 Start Over looks like Submit ## Slide 101 Close looks like Submit ## Slide 103 Confusing or poor wording ## Slide 104 Confusing or poor wording ## Slide 105 Don’t go overboard trying to be helpful ## Slide 108 Shopping bag, float up menus, dropdown path nav ## Slide 109 Jacques-Henri Lartigue: Grand prix de l'ACF with a Delage, June 26th 1912 ## Slide 110 http://www.nngroup.com/articles/top-10-mistakes-web-design/ ## Slide 112 Hamburger menu ## Slide 113 Based on an idea by Andrey Drobitko, http://designmodo.com/hamburger-menu-icons/?ref=webdesignernews.com ## Slide 115 Fix one error … ## Slide 116 … & only then can you fix the next error ## Slide 117 AT&T ## Slide 120 Submission buttons out of order ## Slide 121 Previous & Next buttons out of order ## Slide 122 Submission buttons out of order ## Slide 123 Submission buttons out of order (& it’s ugly) ## Slide 125 Flyout menus are bad ## Slide 128 Minimum specified, but no maximum ## Slide 129 20 or 10? ## Slide 130 OK, 10 ## Slide 140 From Coke’s website! ## Slide 141 Don’t insult your users ## Slide 142 IEEE Global History Network ## Slide 153 Poor layout increases errors ## Slide 157 U. of Central Missouri ## Slide 163 User hostility ## Slide 166 http://cavs.mit.edu/, October 24, 2013 ## Slide 167 The trifecta: Flash. An endless skip-through. Animation. http://www.iccm-1.org, May 3, 2009 ## Slide 179 http://longscycle.com, February 22, 2007 ## Slide 180 http://longscycle.com, February 22, 2007 ## Slide 181 http://longscycle.com, February 22, 2007 ## Slide 182 http://longscycle.com, February 22, 2007 ## Slide 183 http://longscycle.com, February 22, 2007 ## Slide 184 http://longscycle.com, February 22, 2007 ## Slide 185 http://longscycle.com, February 22, 2007 ## Slide 186 http://longscycle.com, February 22, 2007 ## Slide 187 http://longscycle.com, February 22, 2007 ## Slide 188 http://www.useit.com, February 25, 2010 ## Slide 190 http://www.dokimos.org/ajff/, 2014-02-21 ## Slide 191 http://www.globalaigs.org, February 22, 2007 ## Slide 194 http://www.wetestit.com, February 22, 2007 ## Slide 195 http://www.sphere.bc.ca/test/sruniverse.html, February 22, 2007 ## Slide 197 http://havenworks.com, October 19, 2008 ## Slide 198 http://havenworks.com, October 19, 2008 ## Slide 199 http://havenworks.com, October 19, 2008 ## Slide 200 http://havenworks.com, October 19, 2008 ## Slide 201 http://havenworks.com, October 19, 2008 ## Slide 202 http://havenworks.com, October 19, 2008 ## Slide 203 http://www.yahoo.com, 2014-08-10 ## Slide 204 http://www.google.com, 2014-05-09 ## Slide 206 http://www.apple.com, October 24, 2013 ## Slide 207 http://www.apple.com, August 10, 2014 ## Slide 208 http://www.apple.com, May 9, 2018 ## Slide 209 http://www.microsoft.com/en/us/default.aspx, February 21, 2008 ## Slide 210 http://www.microsoft.com, October 24, 2013 ## Slide 211 http://www.microsoft.com, August 10, 2014 ## Slide 213 https://nytimes.com ## Slide 214 https://indeeco.com ## Slide 215 https://indeeco.com ## Slide 216 https://indeeco.com ## Slide 217 https://indeeco.com ## Slide 218 https://indeeco.com ## Slide 222 Tampax, February 22, 2007 ## Slide 223 http://www.crumplerbags.com, February 22, 2007 ## Slide 224 http://www.gaia-group.com, February 22, 2007 ## Slide 229 The Vitruvian Man by Leonardo da Vinci