Design Principles

Transcript

1. principles. adactio.com

2. design principles how?

3. design goals why?

4. design patterns what?

5. goals principles patterns

6. ...to form a more perfect Union, establish Justice, insure domestic

   Tranquility, proide for the common defence, promote the general Welfare, and secure the Blessings of Liberty to ourseles and our Posterity —e United States Constitution goals

7. ...that all Men are created equal, that they are endowed

   by their Creator with certain unalienable Rights, that among these are Life, Liberty and the pursuit of Happiness. —e Declaration Of Independence principles

8. patterns one person, one vote checks and balances

9. None

10. Soware, like all technologies, is inherently political. Code inevitably reflects

    the choices, biases and desires of its creators. —Jamais Cascio

11. rough consensus running code &

12. None

13. CSS maintainability modularity readability longevity interoperability simplicity implementibility minimum reduncancy

    learnability extensibility efficiency device-independency accessibility

14. selector { property: value; }

15. be conservative in what you send; be liberal in what

    you accept.

16. HTML

17. ...guidance for the design of HTML in the areas of

    compatibility, utility and interoperability. —HTML Design Principles

18. solve real problems

19. <h2><a href="/path/to/resource">Headline text</a></h2> <p><a href="/path/to/resource">Paragraph text.</a></p> (X)HTML HTML5 <a href="/path/to/resource">

    <h2>Headline text</h2> <p>Paragraph text.</p> </a>

20. degrade gracefully

21. input type="number" input type="search" input type="range" input type="email" input type="date"

    input type="url"

22. input type="number"

23. input type="search"

24. input type="search" placeholder="e.g. salad or fish"

25. None
26. None

27. goal backwards compatibility

28. principle progressive enhancement

29. pattern

30. What’s your favourite browser? <select> <option value="safari">Safari</option> <option value="chrome">Chrome</option> <option

    value="opera">Opera</option> <option value="firefox">Firefox</option> <option>Other</option> </select> If other, please specify: <input type="text">
31. None
32. None

33. What’s your favourite browser? <datalist id="browsers"> <option value="safari">Safari</option> <option value="chrome">Chrome</option>

    <option value="opera">Opera</option> <option value="firefox">Firefox</option> </datalist> <input type="text" list="browsers">
34. None
35. None

36. What’s your favourite browser? <select> <option value="safari">Safari</option> <option value="chrome">Chrome</option> <option

    value="opera">Opera</option> <option value="firefox">Firefox</option> <option>Other</option> </select> If other, please specify: <input type="text">

37. What’s your favourite browser? <datalist id="browsers"> <select> <option value="safari">Safari</option> <option

    value="chrome">Chrome</option> <option value="opera">Opera</option> <option value="firefox">Firefox</option> <option>Other</option> </select> If other, please specify: </datalist> <input type="text" list="browsers">
38. None

39. Flash HTML5 plug-in video

40. <video src="movie.mp4"> </video> <!-- fallback content -->

41. <video src="movie.mp4"> </video> <object data="movie.swf"> <!-- fallback content --> </object>

42. <video src="movie.mp4"> </video> <object data="movie.swf"> <a href="movie.mp4">download</a> </object>

43. <video> <source src="movie.mp4"> <source src="movie.ogv"> </video> <object data="movie.swf"> <a href="movie.mp4">download</a>

    </object>

44. <video> <source src="movie.mp4"> <source src="movie.ogv"> <source src="movie.webm"> </video> <object data="movie.swf">

    <a href="movie.mp4">download</a> </object>

45. <video> <source src="movie.mp4"> <source src="movie.ogv"> <source src="movie.webm"> </video> <object data="movie.swf">

    <a href="movie.mp4">download</a> </object> 1 2 3 4 5

46. e value of a network is proportional to the square

    of the number of connected users of the system (n²). —Robert Metcalfe principle

47. JavaScript

48. principle unobtrusive JavaScript

49. Find stuff and do stuff to it. —juery

50. selector { property: value; }

51. $(selector).event ({ action; });

52. pattern

53. None
54. None
55. None

56. antipattern <a href="javascript:..."> <a href="#" onclick="...">

57. dark patterns

58. None
59. None
60. None
61. None
62. None
63. None
64. None
65. None
66. None
67. None
68. None
69. None

70. goals principles patterns

71. ...to organize the world’s information and make it universally accessible

    and useful. —Google Corporate Information goals

72. Simplicity is powerful. Every millisecond counts. —Ten principles that contribute

    to a Googley user experience principles

73. ...to empower and engage people around the world to collect

    and develop educational content. ...to disseminate it effectively and globally. —Wikimedia Foundation goals

74. Have a neutral point of view. Interact in a respectful

    and civil manner. —Wikipedia:Five pillars principles

75. ...allow anyone to easily publish, manage and organize a wide

    variety of content on a website. —About Drupal goals

76. Privilege the Content Creator. Design for the 80%. —Drupal 7

    User Experience Project principles

77. A web of data. —Semantic Web goals

78. Decompose any type of knowledge into small pieces. —RDF principles

79. Humans first, machines second. —Microformats principles

80. None

81. principles progressive enhancement unobtrusive JavaScript be conservative in what you

    send; be liberal in what you accept.

82. goal universal access

83. pattern one web

84. None
85. None

86. principles. adactio.com

87. html5for webdesigners .com