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 17 https://aremysitesup.com/ ## Slide 18 https://aremysitesup.com/premium/ ## Slide 19 https://aremysitesup.com/premium/ ## Slide 20 https://downforeveryoneorjustme.com ## Slide 21 https://downforeveryoneorjustme.com/sluug.org ## Slide 31 Facebook CAPTCHA ## Slide 37 https://www.youtube.com/watch?v=MCWaN_Tc5wo ## Slide 45 https://developer.mozilla.org/en-US/docs/Web/HTML/Element ## Slide 46 https://developer.mozilla.org/en-US/docs/Web/CSS/Reference ## Slide 47 http://getbootstrap.com ## Slide 50 http://validator.w3.org ## Slide 51 http://jigsaw.w3.org/css-validator/ ## Slide 52 http://validator.w3.org/unicorn/ ## Slide 55 Responsive Design Mode on Safari 11.1 on macOS 10.13.4 ## Slide 56 Responsive Design Mode on Safari 11.1 on macOS 10.13.4 ## Slide 57 Responsive Design Mode on Safari 11.1 on macOS 10.13.4 ## Slide 58 Responsive Design Mode on Safari 11.1 on macOS 10.13.4 ## Slide 59 Responsive Design Mode on Safari 11.1 on macOS 10.13.4 ## Slide 60 http://www.browserstack.com ## Slide 75 https://www.allmusic.com/artist/willie-dixon-mn0000959770?525cbc0d42547cf8ec5e6d4845b9988e ## Slide 78 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 80 https://webster.edu ## Slide 81 https://webster.edu ## Slide 82 https://wustl.edu ## Slide 83 https://wustl.edu ## Slide 84 https://alumni.wustl.edu/Pages/default.aspx ## Slide 91 Start Over looks like Submit ## Slide 92 Close looks like Submit ## Slide 94 Confusing or poor wording ## Slide 95 Confusing or poor wording ## Slide 96 Don’t go overboard trying to be helpful ## Slide 99 Shopping bag, float up menus, dropdown path nav ## Slide 100 Jacques-Henri Lartigue: Grand prix de l'ACF with a Delage, June 26th 1912 ## Slide 101 http://www.nngroup.com/articles/top-10-mistakes-web-design/ ## Slide 103 Hamburger menu ## Slide 104 Based on an idea by Andrey Drobitko, http://designmodo.com/hamburger-menu-icons/?ref=webdesignernews.com ## Slide 106 Fix one error … ## Slide 107 … & only then can you fix the next error ## Slide 108 AT&T ## Slide 111 Submission buttons out of order ## Slide 112 Previous & Next buttons out of order ## Slide 113 Submission buttons out of order ## Slide 114 Submission buttons out of order (& it’s ugly) ## Slide 116 Flyout menus are bad ## Slide 119 Minimum specified, but no maximum ## Slide 120 20 or 10? ## Slide 121 OK, 10 ## Slide 131 From Coke’s website! ## Slide 132 Don’t insult your users ## Slide 133 IEEE Global History Network ## Slide 144 Poor layout increases errors ## Slide 148 U. of Central Missouri ## Slide 154 User hostility ## Slide 157 http://cavs.mit.edu/, October 24, 2013 ## Slide 158 The trifecta: Flash. An endless skip-through. Animation. http://www.iccm-1.org, May 3, 2009 ## Slide 170 http://longscycle.com, February 22, 2007 ## Slide 171 http://longscycle.com, February 22, 2007 ## Slide 172 http://longscycle.com, February 22, 2007 ## Slide 173 http://longscycle.com, February 22, 2007 ## Slide 174 http://longscycle.com, February 22, 2007 ## Slide 175 http://longscycle.com, February 22, 2007 ## Slide 176 http://longscycle.com, February 22, 2007 ## Slide 177 http://longscycle.com, February 22, 2007 ## Slide 178 http://longscycle.com, February 22, 2007 ## Slide 179 http://www.useit.com, February 25, 2010 ## Slide 181 http://www.dokimos.org/ajff/, 2014-02-21 ## Slide 182 http://www.globalaigs.org, February 22, 2007 ## Slide 185 http://www.wetestit.com, February 22, 2007 ## Slide 186 http://www.sphere.bc.ca/test/sruniverse.html, February 22, 2007 ## Slide 188 http://havenworks.com, October 19, 2008 ## Slide 189 http://havenworks.com, October 19, 2008 ## Slide 190 http://havenworks.com, October 19, 2008 ## Slide 191 http://havenworks.com, October 19, 2008 ## Slide 192 http://havenworks.com, October 19, 2008 ## Slide 193 http://havenworks.com, October 19, 2008 ## Slide 194 http://www.yahoo.com, 2014-08-10 ## Slide 195 http://www.google.com, 2014-05-09 ## Slide 197 http://www.apple.com, October 24, 2013 ## Slide 198 http://www.apple.com, August 10, 2014 ## Slide 199 http://www.apple.com, May 9, 2018 ## Slide 200 http://www.microsoft.com/en/us/default.aspx, February 21, 2008 ## Slide 201 http://www.microsoft.com, October 24, 2013 ## Slide 202 http://www.microsoft.com, August 10, 2014 ## Slide 204 https://nytimes.com ## Slide 205 https://indeeco.com ## Slide 206 https://indeeco.com ## Slide 207 https://indeeco.com ## Slide 208 https://indeeco.com ## Slide 209 https://indeeco.com ## Slide 213 Tampax, February 22, 2007 ## Slide 214 http://www.crumplerbags.com, February 22, 2007 ## Slide 215 http://www.gaia-group.com, February 22, 2007 ## Slide 220 The Vitruvian Man by Leonardo da Vinci