Design Principles

All software is inherently political, reflecting the biases and beliefs of the people behind it. These beliefs can be made explicit through the publication of design principles: pragmatic rules of thumb that underpin a shared endeavour. Find out how important good design principles are to any project, whether it’s a website, a framework, or the World Wide Web itself.

Transcript

1. principles.
   adactio.com
   

   View Slide

2. design
   principles
   how?
   

   View Slide

3. design
   goals
   why?
   

   View Slide

4. design
   patterns
   what?
   

   View Slide

5. goals
   principles
   patterns
   

   View Slide

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
   

   View Slide

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
   

   View Slide

8. patterns
   one person, one vote
   checks and balances
   

   View Slide

9. View Slide

10. Soware, like all technologies, is inherently political.
    Code inevitably reflects the choices, biases and desires
    of its creators.
    —Jamais Cascio
    

    View Slide

11. rough consensus
    running code
    &
    

    View Slide

12. View Slide

13. CSS
    maintainability
    modularity
    readability longevity
    interoperability
    simplicity
    implementibility
    minimum reduncancy
    learnability
    extensibility
    efficiency
    device-independency
    accessibility
    

    View Slide

14. selector {
    property: value;
    }
    

    View Slide

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

    View Slide

16. HTML
    

    View Slide

17. ...guidance for the design of HTML in the areas of
    compatibility, utility and interoperability.
    —HTML Design Principles
    

    View Slide

18. solve real
    problems
    

    View Slide

19. Headline text
    Paragraph text.
    (X)HTML
    HTML5
    
    Headline text
    Paragraph text.
    
    

    View Slide

20. degrade
    gracefully
    

    View Slide

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

    View Slide

22. input type="number"
    

    View Slide

23. input type="search"
    

    View Slide

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

    View Slide

25. View Slide

26. View Slide

27. goal
    backwards
    compatibility
    

    View Slide

28. principle
    progressive
    enhancement
    

    View Slide

29. pattern
    

    View Slide

30. What’s your favourite browser?
    
    Safari
    Chrome
    Opera
    Firefox
    Other
    
    If other, please specify:
    
    

    View Slide

31. View Slide

32. View Slide

33. What’s your favourite browser?
    
    Safari
    Chrome
    Opera
    Firefox
    
    
    

    View Slide

34. View Slide

35. View Slide

36. What’s your favourite browser?
    
    Safari
    Chrome
    Opera
    Firefox
    Other
    
    If other, please specify:
    
    

    View Slide

37. What’s your favourite browser?
    
    
    Safari
    Chrome
    Opera
    Firefox
    Other
    
    If other, please specify:
    
    
    

    View Slide

38. View Slide

39. Flash
    HTML5
    plug-in
    video
    

    View Slide

40. 
    
    
    

    View Slide

41. 
    
    
    
    
    

    View Slide

42. 
    
    
    download
    
    

    View Slide

43. 
    
    
    
    
    download
    
    

    View Slide

44. 
    
    
    
    
    
    download
    
    

    View Slide

45. 
    
    
    
    
    
    download
    
    1
    2
    3
    4
    5
    

    View Slide

46. e value of a network is proportional to the square
    of the number of connected users of the system (n²).
    —Robert Metcalfe
    principle
    

    View Slide

47. JavaScript
    

    View Slide

48. principle
    unobtrusive
    JavaScript
    

    View Slide

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

    View Slide

50. selector {
    property: value;
    }
    

    View Slide

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

    View Slide

52. pattern
    

    View Slide

53. View Slide

54. View Slide

55. View Slide

56. antipattern
    
    
    

    View Slide

57. dark
    patterns
    

    View Slide

58. View Slide

59. View Slide

60. View Slide

61. View Slide

62. View Slide

63. View Slide

64. View Slide

65. View Slide

66. View Slide

67. View Slide

68. View Slide

69. View Slide

70. goals
    principles
    patterns
    

    View Slide

71. ...to organize the world’s information and make it
    universally accessible and useful.
    —Google Corporate Information
    goals
    

    View Slide

72. Simplicity is powerful.
    Every millisecond counts.
    —Ten principles that contribute to a
    Googley user experience
    principles
    

    View Slide

73. ...to empower and engage people around the world to
    collect and develop educational content.
    ...to disseminate it effectively and globally.
    —Wikimedia Foundation
    goals
    

    View Slide

74. Have a neutral point of view.
    Interact in a respectful and civil manner.
    —Wikipedia:Five pillars
    principles
    

    View Slide

75. ...allow anyone to easily publish, manage and organize
    a wide variety of content on a website.
    —About Drupal
    goals
    

    View Slide

76. Privilege the Content Creator.
    Design for the 80%.
    —Drupal 7 User Experience Project
    principles
    

    View Slide

77. A web of data.
    —Semantic Web
    goals
    

    View Slide

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

    View Slide

79. Humans first, machines second.
    —Microformats
    principles
    

    View Slide

80. View Slide

81. principles
    progressive enhancement
    unobtrusive JavaScript
    be conservative in what you send;
    be liberal in what you accept.
    

    View Slide

82. goal
    universal
    access
    

    View Slide

83. pattern
    one web
    

    View Slide

84. View Slide

85. View Slide

86. principles.
    adactio.com
    

    View Slide

87. html5for
    webdesigners
    .com
    

    View Slide