Notes for Design Theory for Designers - 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 19

https://www.youtube.com/watch?v=MCWaN_Tc5wo

## Slide 24

http://www.browserstack.com

## Slide 28

http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements

## Slide 29

http://codepen.io/websanity/pen/ptgzc

## Slide 32

http://codepen.io/websanity/pen/tobaJ?editors=010

## Slide 37

http://codepen.io/websanity/pen/AoapB

## Slide 39

http://codepen.io/websanity/pen/lhkwu

## Slide 54

Start Over looks like Submit

## Slide 55

Close looks like Submit

## Slide 56

Confusing or poor wording

## Slide 57

Don’t go overboard trying to be helpful

## Slide 58

Shopping bag, float up menus, dropdown path nav

## Slide 59

Jacques-Henri Lartigue: Grand prix de l'ACF with a Delage, June 26th 1912

## Slide 60

http://www.nngroup.com/articles/top-10-mistakes-web-design/

## Slide 62

Hamburger menu

## Slide 64

AT&T

## Slide 67

Submission buttons out of order

## Slide 68

Previous & Next buttons out of order

## Slide 70

Flyout menus are bad

## Slide 72

Minimum specified, but no maximum

## Slide 73

20 or 10?

## Slide 74

OK, 10

## Slide 82

From Coke’s website!

## Slide 83

Don’t insult your users

## Slide 84

IEEE Global History Network

## Slide 85

Facebook CAPTCHA

## Slide 92

User hostility

## Slide 104

http://longscycle.com, February 22, 2007

## Slide 105

http://longscycle.com, February 22, 2007

## Slide 106

http://longscycle.com, February 22, 2007

## Slide 107

http://longscycle.com, February 22, 2007

## Slide 108

http://longscycle.com, February 22, 2007

## Slide 109

http://longscycle.com, February 22, 2007

## Slide 110

http://longscycle.com, February 22, 2007

## Slide 111

http://longscycle.com, February 22, 2007

## Slide 112

http://longscycle.com, February 22, 2007

## Slide 113

http://www.useit.com, February 25, 2010

## Slide 115

http://www.dokimos.org/ajff/, 2014-02-21

## Slide 116

http://www.globalaigs.org, February 22, 2007

## Slide 119

http://www.wetestit.com, February 22, 2007

## Slide 120

http://www.sphere.bc.ca/test/sruniverse.html, February 22, 2007

## Slide 122

http://havenworks.com, October 19, 2008

## Slide 123

http://havenworks.com, October 19, 2008

## Slide 124

http://havenworks.com, October 19, 2008

## Slide 125

http://havenworks.com, October 19, 2008

## Slide 126

http://havenworks.com, October 19, 2008

## Slide 127

http://havenworks.com, October 19, 2008

## Slide 128

http://www.yahoo.com, 2014-08-10

## Slide 129

http://www.google.com, 2014-05-09

## Slide 130

http://www.apple.com, October 24, 2013

## Slide 131

http://www.apple.com, August 10, 2014

## Slide 132

http://www.microsoft.com/en/us/default.aspx, February 21, 2008

## Slide 133

http://www.microsoft.com, October 24, 2013

## Slide 134

http://www.microsoft.com, August 10, 2014

## Slide 136

Tampax, February 22, 2007

## Slide 137

http://www.crumplerbags.com, February 22, 2007

## Slide 138

http://www.gaia-group.com, February 22, 2007

## Slide 140

http://cavs.mit.edu/, October 24, 2013

## Slide 141

The trifecta: Flash. An endless skip-through. Animation. 

http://www.iccm-1.org, May 3, 2009

## Slide 146

The Vitruvian Man by Leonardo da Vinci