Social Media Design, lezione 04. Ied Firenze

1. cristian contini
web communication e social media
Media Design 04
Interaction Design Patterns
sabato 22 maggio 2010

2. Web Communication and Social Media - Media design 01
sabato 22 maggio 2010

3. Web Communication and Social Media - Media design 03
progettare PER gli utenti
Target
User Centered Design
progettare CON gli utenti
Social Media Design
sabato 22 maggio 2010

4. Web Communication and Social Media - Media design 03
progettazione tradizionale progetto social
Target Crowd
Web Statico Dinamico/Organico
Dati Oggettivi Emotività
Transazioni Relazioni
Progettazione
One Shot
continua
sabato 22 maggio 2010

5. Web Communication and Social Media - Media design 03
Design pattern
A design pattern in architecture and computer science is a formal way
of documenting a solution to a design problem in a particular field of
expertise. The idea was introduced by the architect Christopher
Alexander in the field of architecture and has been adapted for various
other disciplines, including computer science.
An organized collection of design patterns that relate to a particular field
is called a pattern language.
“
The elements of this language are entities called patterns. Each pattern
describes a problem that occurs over and over again in our
environment, and then describes the core of the solution to that
problem, in such a way that you can use this solution a million times
over, without ever doing it the same way twice.
”
Christopher Alexander
http://en.wikipedia.org/wiki/Design_patterns
sabato 22 maggio 2010

6. Web Communication and Social Media - Media design 03
Design patterns
Design Patterns: Elements of Reusable Object-Oriented Software is a
software engineering book describing recurring solutions to common problems in
software design. The book's authors are Erich Gamma, Richard Helm, Ralph
Johnson and John Vlissides with a foreword by Grady Booch. They are often
referred to as the Gang of Four, or GoF.
The book is divided into two parts, with the first two chapters exploring the
capabilities and pitfalls of object-oriented programming, and the remaining
chapters describing 23 classic software design patterns. The book includes
examples in C++ and Smalltalk.
http://en.wikipedia.org/wiki/Design_Patterns_(book)
sabato 22 maggio 2010

7. Web Communication and Social Media - Media design 03
Design Pattern Timeline
1977 - Christopher Alexander: A Pattern Language -
A Timeless Way of Building.
1980 - Concetto applicato alla programmazione
1993 - Design Patterns: Elements of Reusable
Object-Oriented Software (Gang of four)
2002 - Douglas K. van Duyne, Design of Sites
2004 - Libreria Interna di Pattern di Yahoo
2005 - Jennifer Tidwell - Design Interfaces
2006 - Libreria Pattern Pubblica Yahoo
2010 - Christian Crumlish - Erin Malone
Designing Social Interfaces
sabato 22 maggio 2010

8. Web Communication and Social Media - Media design 03
Design Pattern Timeline
1977 - Christopher Alexander: A Pattern Language -
A Timeless Way of Building.
1980 - Concetto applicato alla programmazione
1993 - Design Patterns: Elements of Reusable
Object-Oriented Software (Gang of four)
2002 - Douglas K. van Duyne, Design of Sites
2004 - Libreria Interna di Pattern di Yahoo
2005 - Jennifer Tidwell - Design Interfaces
2006 - Libreria Pattern Pubblica Yahoo
2010 - Christian Crumlish - Erin Malone
Designing Social Interfaces
sabato 22 maggio 2010

9. Web Communication and Social Media - Media design 03
Design Pattern Timeline
1977 - Christopher Alexander: A Pattern Language -
A Timeless Way of Building.
1980 - Concetto applicato alla programmazione
1993 - Design Patterns: Elements of Reusable
Object-Oriented Software (Gang of four)
2002 - Douglas K. van Duyne, Design of Sites
2004 - Libreria Interna di Pattern di Yahoo
2005 - Jennifer Tidwell - Design Interfaces
2006 - Libreria Pattern Pubblica Yahoo
2010 - Christian Crumlish - Erin Malone
Designing Social Interfaces
sabato 22 maggio 2010

10. Web Communication and Social Media - Media design 03
Design Pattern Timeline
1977 - Christopher Alexander: A Pattern Language -
A Timeless Way of Building.
1980 - Concetto applicato alla programmazione
1993 - Design Patterns: Elements of Reusable
Object-Oriented Software (Gang of four)
2002 - Douglas K. van Duyne, Design of Sites
2004 - Libreria Interna di Pattern di Yahoo
2005 - Jennifer Tidwell - Design Interfaces
2006 - Libreria Pattern Pubblica Yahoo
2010 - Christian Crumlish - Erin Malone
Designing Social Interfaces
sabato 22 maggio 2010

11. Web Communication and Social Media - Media design 03
Design Pattern Timeline
1977 - Christopher Alexander: A Pattern Language -
A Timeless Way of Building.
1980 - Concetto applicato alla programmazione
1993 - Design Patterns: Elements of Reusable
Object-Oriented Software (Gang of four)
2002 - Douglas K. van Duyne, Design of Sites
2004 - Libreria Interna di Pattern di Yahoo
2005 - Jennifer Tidwell - Design Interfaces
2006 - Libreria Pattern Pubblica Yahoo
2010 - Christian Crumlish - Erin Malone
Designing Social Interfaces
sabato 22 maggio 2010

12. Web Communication and Social Media - Media design 03
Design Pattern Timeline
1977 - Christopher Alexander: A Pattern Language -
A Timeless Way of Building.
1980 - Concetto applicato alla programmazione
1993 - Design Patterns: Elements of Reusable
Object-Oriented Software (Gang of four)
2002 - Douglas K. van Duyne, Design of Sites
2004 - Libreria Interna di Pattern di Yahoo
2005 - Jennifer Tidwell - Design Interfaces
2006 - Libreria Pattern Pubblica Yahoo
2010 - Christian Crumlish - Erin Malone
Designing Social Interfaces
sabato 22 maggio 2010

13. Web Communication and Social Media - Media design 03
Design Pattern Timeline
1977 - Christopher Alexander: A Pattern Language -
A Timeless Way of Building.
1980 - Concetto applicato alla programmazione
1993 - Design Patterns: Elements of Reusable
Object-Oriented Software (Gang of four)
2002 - Douglas K. van Duyne, Design of Sites
2004 - Libreria Interna di Pattern di Yahoo
2005 - Jennifer Tidwell - Design Interfaces
2006 - Libreria Pattern Pubblica Yahoo
2010 - Christian Crumlish - Erin Malone
Designing Social Interfaces
sabato 22 maggio 2010

14. Web Communication and Social Media - Media design 03
Interaction design patterns
Interaction design patterns are a way
to capture optimal solutions to common
usability or accessibility problems in a
specific context.
They document interaction models that
make it easier for users to understand an
interface and accomplish their tasks.
http://en.wikipedia.org/wiki/Interaction_design_pattern
What's a Pattern?
A pattern describes an optimal
solution to a common problem
within a specific context.
http://developer.yahoo.com/ypatterns/about/
sabato 22 maggio 2010

15. Web Communication and Social Media - Media design 03
breadcrumbs
liste
sistemi di
Navigazione
tags
• breadcrumbs
• liste
• dropdown menu
• paginazione
tooltip
• tabbed
• expand/collapse tabbed
• tags /tagclowds
• tooltips expand/collapse
• search
tagclouds
sabato 22 maggio 2010

16. Web Communication and Social Media - Media design 03
Interaction design patterns
WHAT
Un design pattern è costituito da:
■ il nome, costituito da una o due parole che siano il COSA
più possibile rappresentative del pattern stesso;
■ il problema, ovvero la descrizione della situazione
Cosa lʼutente desidera
Examples
alla quale si può applicare il pattern. Può
comprendere la descrizione di classi o di problemi
di progettazione specifici, come anche una lista di ESEMPIO
condizioni perché sia necessario l'utilizzo del Una possibile Soluzione
pattern;
USE WHEN
■ la soluzione, che descrive gli elementi costitutivi
del progetto con le relazioni e relative implicazioni, SI USA QUANDO
senza però addentrarsi in una specifica
implementazione. Il concetto è di presentare un modi dʼuso...
HOW
problema astratto e la relativa configurazione di
elementi adatta a risolverlo;
■ le conseguenze, i risultati e i vincoli che derivano COME
dall'applicazione del pattern. Sono fondamentali in Come soddisfa i bisogni dellʼutente
quanto possono essere l'ago della bilancia nella
WHY
scelta dei pattern: le conseguenze comprendono
considerazioni di tempo e di spazio, possono
descrivere implicazioni del pattern con alcuni
PERCHE?
linguaggi di programmazione e l'impatto con il Perchè è una buona soluzione
resto del progetto.
sabato 22 maggio 2010

17. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/
design patterns erin malone & christian crumlish
sabato 22 maggio 2010

18. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/
design patterns erin malone & christian crumlish
sabato 22 maggio 2010

19. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/
design patterns erin malone & christian crumlish
sabato 22 maggio 2010

20. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/
design patterns erin malone & christian crumlish
sabato 22 maggio 2010

21. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/
design patterns erin malone & christian crumlish
sabato 22 maggio 2010

22. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/
design patterns erin malone & christian crumlish
sabato 22 maggio 2010

23. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/
design patterns
Tipologie Evoluzione
• Layout • Beta
• Navigation • Working
• Selection • Best Practice
• Rich Interaction
• Social Design
sabato 22 maggio 2010

24. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/layout/pagegrids.html
design patterns
http://developer.yahoo.com/ypatterns/layout/
sabato 22 maggio 2010

25. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/layout/pagegrids.html
design patterns
http://developer.yahoo.com/ypatterns/layout/
sabato 22 maggio 2010

26. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/layout/pagegrids.html
design patterns
http://developer.yahoo.com/ypatterns/layout/
sabato 22 maggio 2010

27. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/layout/pagegrids.html
design patterns
http://developer.yahoo.com/ypatterns/layout/
sabato 22 maggio 2010

28. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/layout/pagegrids.html
design patterns
http://developer.yahoo.com/ypatterns/layout/
sabato 22 maggio 2010

29. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/layout/pagegrids.html
design patterns
http://developer.yahoo.com/ypatterns/layout/
sabato 22 maggio 2010

30. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/layout/pagegrids.html
design patterns
http://developer.yahoo.com/ypatterns/layout/
sabato 22 maggio 2010

31. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/navigation/
design patterns
sabato 22 maggio 2010

32. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/navigation/
design patterns
sabato 22 maggio 2010

33. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/navigation/
design patterns
sabato 22 maggio 2010

34. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/navigation/
design patterns
sabato 22 maggio 2010

35. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/navigation/
design patterns
sabato 22 maggio 2010

36. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/navigation/
design patterns
sabato 22 maggio 2010

37. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/navigation/
design patterns
sabato 22 maggio 2010

38. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/navigation/
design patterns
sabato 22 maggio 2010

39. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/navigation/
design patterns
sabato 22 maggio 2010

40. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/navigation/
design patterns
sabato 22 maggio 2010

41. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/navigation/
design patterns
sabato 22 maggio 2010

42. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/navigation/
design patterns
sabato 22 maggio 2010

43. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/navigation/
design patterns
sabato 22 maggio 2010

44. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/navigation/
design patterns
sabato 22 maggio 2010

45. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/navigation/
design patterns
sabato 22 maggio 2010

46. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/navigation/
design patterns
sabato 22 maggio 2010

47. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/navigation/
design patterns
sabato 22 maggio 2010

48. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/navigation/
design patterns
sabato 22 maggio 2010

49. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/navigation/
design patterns
sabato 22 maggio 2010

50. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/navigation/
design patterns
sabato 22 maggio 2010

51. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/navigation/
design patterns
sabato 22 maggio 2010

52. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/navigation/
design patterns
sabato 22 maggio 2010

53. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/navigation/
design patterns
sabato 22 maggio 2010

54. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/navigation/
design patterns
sabato 22 maggio 2010

55. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/navigation/
design patterns
sabato 22 maggio 2010

56. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/navigation/
design patterns
sabato 22 maggio 2010

57. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/navigation/
design patterns
sabato 22 maggio 2010

58. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/navigation/
design patterns
sabato 22 maggio 2010

59. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/navigation/
design patterns
sabato 22 maggio 2010

60. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/navigation/
design patterns
sabato 22 maggio 2010

61. Web Communication and Social Media - Media design 03
Interaction http://developer.yahoo.com/ypatterns/selection/
design patterns
sabato 22 maggio 2010

62. Web Communication and Social Media - Media design 03
Interaction http://developer.yahoo.com/ypatterns/selection/
design patterns
sabato 22 maggio 2010

63. Web Communication and Social Media - Media design 03
Interaction http://developer.yahoo.com/ypatterns/selection/
design patterns
sabato 22 maggio 2010

64. Web Communication and Social Media - Media design 03
Interaction http://developer.yahoo.com/ypatterns/selection/
design patterns
sabato 22 maggio 2010

65. Web Communication and Social Media - Media design 03
Interaction http://developer.yahoo.com/ypatterns/selection/
design patterns
sabato 22 maggio 2010

66. Web Communication and Social Media - Media design 03
Interaction http://developer.yahoo.com/ypatterns/selection/
design patterns
sabato 22 maggio 2010

67. Web Communication and Social Media - Media design 03
Interaction http://developer.yahoo.com/ypatterns/selection/
design patterns
sabato 22 maggio 2010

68. Web Communication and Social Media - Media design 03
Interaction http://developer.yahoo.com/ypatterns/richinteraction/
design patterns
sabato 22 maggio 2010

69. Web Communication and Social Media - Media design 03
Interaction http://developer.yahoo.com/ypatterns/richinteraction/
design patterns
sabato 22 maggio 2010

70. Web Communication and Social Media - Media design 03
Interaction http://developer.yahoo.com/ypatterns/richinteraction/
design patterns
sabato 22 maggio 2010

71. Web Communication and Social Media - Media design 03
Interaction http://developer.yahoo.com/ypatterns/richinteraction/
design patterns
sabato 22 maggio 2010

72. Web Communication and Social Media - Media design 03
Interaction http://developer.yahoo.com/ypatterns/richinteraction/
design patterns
sabato 22 maggio 2010

73. Web Communication and Social Media - Media design 03
Interaction http://developer.yahoo.com/ypatterns/richinteraction/
design patterns
sabato 22 maggio 2010

74. Web Communication and Social Media - Media design 03
Interaction http://developer.yahoo.com/ypatterns/richinteraction/
design patterns
sabato 22 maggio 2010

75. Web Communication and Social Media - Media design 03
Interaction http://developer.yahoo.com/ypatterns/richinteraction/
design patterns
sabato 22 maggio 2010

76. Web Communication and Social Media - Media design 03
Interaction http://developer.yahoo.com/ypatterns/richinteraction/
design patterns
sabato 22 maggio 2010

77. Web Communication and Social Media - Media design 03
Interaction http://developer.yahoo.com/ypatterns/richinteraction/
design patterns
sabato 22 maggio 2010

78. Web Communication and Social Media - Media design 03
Interaction http://developer.yahoo.com/ypatterns/richinteraction/
design patterns
sabato 22 maggio 2010

79. Web Communication and Social Media - Media design 03
Interaction http://developer.yahoo.com/ypatterns/richinteraction/
design patterns
sabato 22 maggio 2010

80. Web Communication and Social Media - Media design 03
Interaction http://developer.yahoo.com/ypatterns/richinteraction/
design patterns
sabato 22 maggio 2010

81. Web Communication and Social Media - Media design 03
Interaction http://developer.yahoo.com/ypatterns/richinteraction/
design patterns
sabato 22 maggio 2010

82. Web Communication and Social Media - Media design 03
Interaction http://developer.yahoo.com/ypatterns/richinteraction/
design patterns
sabato 22 maggio 2010

83. Web Communication and Social Media - Media design 03
Interaction http://developer.yahoo.com/ypatterns/richinteraction/
design patterns
sabato 22 maggio 2010

84. Web Communication and Social Media - Media design 03
Interaction http://developer.yahoo.com/ypatterns/richinteraction/
design patterns
sabato 22 maggio 2010

85. Web Communication and Social Media - Media design 03
Interaction http://developer.yahoo.com/ypatterns/richinteraction/
design patterns
sabato 22 maggio 2010

86. Web Communication and Social Media - Media design 03
Interaction http://developer.yahoo.com/ypatterns/richinteraction/
design patterns
sabato 22 maggio 2010

87. Web Communication and Social Media - Media design 03
Interaction http://developer.yahoo.com/ypatterns/richinteraction/
design patterns
sabato 22 maggio 2010

88. Web Communication and Social Media - Media design 03
Interaction http://developer.yahoo.com/ypatterns/richinteraction/
design patterns
sabato 22 maggio 2010

89. Web Communication and Social Media - Media design 03
Interaction http://developer.yahoo.com/ypatterns/richinteraction/
design patterns
sabato 22 maggio 2010

90. Web Communication and Social Media - Media design 03
Interaction http://developer.yahoo.com/ypatterns/richinteraction/
design patterns
sabato 22 maggio 2010

91. Web Communication and Social Media - Media design 03
Interaction http://developer.yahoo.com/ypatterns/richinteraction/
design patterns
sabato 22 maggio 2010

92. Web Communication and Social Media - Media design 03
Interaction http://developer.yahoo.com/ypatterns/richinteraction/
design patterns
sabato 22 maggio 2010

93. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/social/
design patterns
sabato 22 maggio 2010

94. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/social/
design patterns
sabato 22 maggio 2010

95. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/social/
design patterns
sabato 22 maggio 2010

96. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/social/
design patterns
sabato 22 maggio 2010

97. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/social/
design patterns
sabato 22 maggio 2010

98. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/social/
design patterns
sabato 22 maggio 2010

99. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/social/
design patterns
sabato 22 maggio 2010

100. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/social/
design patterns
sabato 22 maggio 2010

101. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/social/
design patterns
sabato 22 maggio 2010

102. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/social/
design patterns
sabato 22 maggio 2010

103. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/social/
design patterns
sabato 22 maggio 2010

104. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/social/
design patterns
sabato 22 maggio 2010

105. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/social/
design patterns
sabato 22 maggio 2010

106. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/social/
design patterns
sabato 22 maggio 2010

107. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/social/
design patterns
sabato 22 maggio 2010

108. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/social/
design patterns
sabato 22 maggio 2010

109. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/social/
design patterns
sabato 22 maggio 2010

110. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/social/
design patterns
sabato 22 maggio 2010

111. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/social/
design patterns
sabato 22 maggio 2010

112. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/social/
design patterns
sabato 22 maggio 2010

113. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/social/
design patterns
sabato 22 maggio 2010

114. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/social/
design patterns
sabato 22 maggio 2010

115. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/social/
design patterns
sabato 22 maggio 2010

116. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/social/
design patterns
sabato 22 maggio 2010

117. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/social/
design patterns
sabato 22 maggio 2010

118. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/social/
design patterns
sabato 22 maggio 2010

119. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/social/
design patterns
sabato 22 maggio 2010

120. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/social/
design patterns
sabato 22 maggio 2010

121. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/social/
design patterns
sabato 22 maggio 2010

122. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/social/
design patterns
sabato 22 maggio 2010

123. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/social/
design patterns
sabato 22 maggio 2010

124. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/social/
design patterns
sabato 22 maggio 2010

125. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/social/
design patterns
sabato 22 maggio 2010

126. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/social/
design patterns
sabato 22 maggio 2010

127. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/social/
design patterns
sabato 22 maggio 2010

128. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/social/
design patterns
sabato 22 maggio 2010

129. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/social/
design patterns
sabato 22 maggio 2010

130. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/social/
design patterns
sabato 22 maggio 2010

131. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/social/
design patterns
sabato 22 maggio 2010

132. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/social/
design patterns
sabato 22 maggio 2010

133. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/social/
design patterns
sabato 22 maggio 2010

134. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/social/
design patterns
sabato 22 maggio 2010

135. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/social/
design patterns
sabato 22 maggio 2010

136. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/social/
design patterns
sabato 22 maggio 2010

137. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/social/
design patterns
sabato 22 maggio 2010

138. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/social/
design patterns
sabato 22 maggio 2010

139. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/social/
design patterns
sabato 22 maggio 2010

140. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/social/
design patterns
sabato 22 maggio 2010

141. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/social/
design patterns
sabato 22 maggio 2010

142. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/social/
design patterns
sabato 22 maggio 2010

143. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/social/
design patterns
sabato 22 maggio 2010

144. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/social/
design patterns
sabato 22 maggio 2010

145. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/social/
design patterns
sabato 22 maggio 2010

146. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/social/
design patterns
sabato 22 maggio 2010

147. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/social/
design patterns
sabato 22 maggio 2010

148. Web Communication and Social Media - Media design 03
Interaction
http://developer.yahoo.com/ypatterns/social/
design patterns
sabato 22 maggio 2010

149. Web Communication and Social Media - Media design 03
Interaction
http://www.designingsocialinterfaces.com/
design patterns
sabato 22 maggio 2010

150. Web Communication and Social Media - Media design 03
Interaction
http://www.designingsocialinterfaces.com/
design patterns
sabato 22 maggio 2010

151. Web Communication and Social Media - Media design 03
Interaction
http://www.designingsocialinterfaces.com/
design patterns
sabato 22 maggio 2010

152. Web Communication and Social Media - Media design 03
Interaction
http://www.designingsocialinterfaces.com/
design patterns
sabato 22 maggio 2010

153. Web Communication and Social Media - Media design 03
Interaction
http://www.designingsocialinterfaces.com/
design patterns
sabato 22 maggio 2010

154. Web Communication and Social Media - Media design 03
Interaction
http://www.designingsocialinterfaces.com/
design patterns
sabato 22 maggio 2010

155. Web Communication and Social Media - Media design 03
Principi
Pave the cowpaths
Talk like a person
Be Open, Play well with others
Learn from games
Respect the ethical dimensions
Design For Everyone
Leave Things Incomplete
Ask Questions
Palimpsest
sabato 22 maggio 2010

156. Web Communication and Social Media - Media design 03
Anti Patterns
Cargo Cult
Donʼt break email
Password anti-pattern
Ex-boyfriend bug
Potemkin Village
sabato 22 maggio 2010

157. Web Communication and Social Media - Media design 03
Anti Patterns
Cargo Cult
Donʼt break email
Password anti-pattern
Ex-boyfriend bug
Potemkin Village
sabato 22 maggio 2010

158. Web Communication and Social Media - Media design 03
Anti Patterns
Cargo Cult
Donʼt break email
Password anti-pattern
Ex-boyfriend bug
Potemkin Village
sabato 22 maggio 2010

159. Web Communication and Social Media - Media design 03
Interaction http://www.slideshare.net/emalone/designing-the-social-in
design patterns
sabato 22 maggio 2010

160. Web Communication and Social Media - Media design 03
Interaction design patterns
http://oreilly.com/catalog/9780596154929/
sabato 22 maggio 2010

161. Web Communication and Social Media - Media design 03
Interaction
http://designinginterfaces.com/
design patterns
sabato 22 maggio 2010

162. Web Communication and Social Media - Media design 03
Interaction
http://designinginterfaces.com/
design patterns
sabato 22 maggio 2010

163. Web Communication and Social Media - Media design 03
Interaction
http://designinginterfaces.com/
design patterns
sabato 22 maggio 2010

164. Web Communication and Social Media - Media design 03
Interaction
http://designinginterfaces.com/
design patterns
sabato 22 maggio 2010

165. Web Communication and Social Media - Media design 03
Interaction
http://designinginterfaces.com/
design patterns
sabato 22 maggio 2010

166. Web Communication and Social Media - Media design 03
Interaction
http://www.welie.com/patterns/
design patterns
sabato 22 maggio 2010

167. Web Communication and Social Media - Media design 03
Interaction
http://www.welie.com/patterns/
design patterns
sabato 22 maggio 2010

168. Web Communication and Social Media - Media design 03
Interaction
http://www.welie.com/patterns/
design patterns
sabato 22 maggio 2010

169. Web Communication and Social Media - Media design 03
Interaction
http://www.welie.com/patterns/
design patterns
sabato 22 maggio 2010

170. Web Communication and Social Media - Media design 03
Interaction
http://www.welie.com/patterns/
design patterns
sabato 22 maggio 2010

171. Web Communication and Social Media - Media design 03
Interaction
http://ui-patterns.com/patterns
design patterns
sabato 22 maggio 2010

172. Web Communication and Social Media - Media design 03
Interaction
http://ui-patterns.com/patterns
design patterns
sabato 22 maggio 2010

173. Web Communication and Social Media - Media design 03
Interaction
http://ui-patterns.com/patterns
design patterns
sabato 22 maggio 2010

174. Web Communication and Social Media - Media design 03
Interaction
http://ui-patterns.com/patterns
design patterns
sabato 22 maggio 2010

175. Web Communication and Social Media - Media design 03
Interaction
http://ui-patterns.com/patterns
design patterns
sabato 22 maggio 2010

176. Web Communication and Social Media - Media design 03
Interaction
http://ui-patterns.com/patterns
design patterns
sabato 22 maggio 2010

177. Web Communication and Social Media - Media design 03
Interaction
http://ui-patterns.com/patterns
design patterns
sabato 22 maggio 2010

178. Web Communication and Social Media - Media design 03
Interaction
http://uipatternfactory.com/
design patterns
sabato 22 maggio 2010

179. Web Communication and Social Media - Media design 03
Interaction
http://uipatternfactory.com/
design patterns
sabato 22 maggio 2010

180. Web Communication and Social Media - Media design 03
Interaction
http://uipatternfactory.com/
design patterns
sabato 22 maggio 2010

181. Web Communication and Social Media - Media design 03
Interaction
http://uipatternfactory.com/
design patterns
sabato 22 maggio 2010

182. Web Communication and Social Media - Media design 03
Interaction
http://uipatternfactory.com/
design patterns
sabato 22 maggio 2010

183. Web Communication and Social Media - Media design 03
Interaction http://www.socialdesignpatterns.com/
design patterns
sabato 22 maggio 2010

184. Web Communication and Social Media - Media design 03
Interaction http://www.socialdesignpatterns.com/
design patterns
sabato 22 maggio 2010

185. Web Communication and Social Media - Media design 03
Interaction http://www.socialdesignpatterns.com/
design patterns
sabato 22 maggio 2010

186. Web Communication and Social Media - Media design 03
Interaction http://www.socialdesignpatterns.com/
design patterns
sabato 22 maggio 2010

187. Web Communication and Social Media - Media design 03
Interaction http://www.socialdesignpatterns.com/
design patterns
sabato 22 maggio 2010

188. Web Communication and Social Media - Media design 03
Interaction http://www.socialdesignpatterns.com/
design patterns
sabato 22 maggio 2010

189. Web Communication and Social Media - Media design 03
Interaction http://www.socialdesignpatterns.com/
design patterns
sabato 22 maggio 2010

190. Web Communication and Social Media - Media design 03
Interaction http://www.socialdesignpatterns.com/
design patterns
sabato 22 maggio 2010

191. Web Communication and Social Media - Media design 03
Interaction http://www.socialdesignpatterns.com/
design patterns
sabato 22 maggio 2010

192. Web Communication and Social Media - Media design 03
Interaction http://www.socialdesignpatterns.com/
design patterns
sabato 22 maggio 2010

193. Web Communication and Social Media - Media design 03
Interaction
http://konigi.com/showcase/latest
design patterns
sabato 22 maggio 2010

194. Web Communication and Social Media - Media design 03
Interaction
design patterns http://designsnips.com/
sabato 22 maggio 2010

195. Web Communication and Social Media - Media design 03
Interaction http://www.visi.com/~snowfall/InteractionPatterns.html
design patterns
sabato 22 maggio 2010

196. Web Communication and Social Media - Media design 03
Web 2.0 Style
• Semplicità
• Importanza del Logo
• CSS
• Layout orizzontali
• Grandi Aree Colorate
• Angoli arrotondati
• Sfumature
• Riflessioni
• Colori pastello
• Soft Icons
• Typography
• Splash/Star
sabato 22 maggio 2010

197. Web Communication and Social Media - Media design 03
• Semplicità
Web 2.0 Style
• Importanza del Logo
• CSS
• Layout orizzontali
• Grandi Aree Colorate
• angoli arrotondati
• Sfumature
• Riflessioni
• Colori pastello
• Icone morbide
• Typography
• Stelloni
sabato 22 maggio 2010

198. Web Communication and Social Media - Media design 03
• Semplicità
Web 2.0 Style
• Importanza del Logo
• CSS
• Layout orizzontali
• Grandi Aree Colorate
• angoli arrotondati
• Sfumature
• Riflessioni
• Colori pastello
• Icone morbide
• Typography
• Stelloni
sabato 22 maggio 2010

199. Web Communication and Social Media - Media design 03
• Semplicità
Web 2.0 Style
• Importanza del Logo
• CSS
• Layout orizzontali
• Grandi Aree Colorate
• angoli arrotondati
• Sfumature
• Riflessioni
• Colori pastello
• Icone morbide
• Typography
• Stelloni
sabato 22 maggio 2010

200. Web Communication and Social Media - Media design 03
• Semplicità
Web 2.0 Style
• Importanza del Logo
• CSS
• Layout orizzontali
• Grandi Aree Colorate
• angoli arrotondati
• Sfumature
• Riflessioni
• Colori pastello
• Icone morbide
• Typography
• Stelloni
sabato 22 maggio 2010

201. Web Communication and Social Media - Media design 03
• Semplicità
Web 2.0 Style
• Importanza del Logo
• CSS
• Layout orizzontali
• Grandi Aree Colorate
• angoli arrotondati
• Sfumature
• Riflessioni
• Colori pastello
• Icone morbide
• Typography
• Stelloni
sabato 22 maggio 2010

202. Web Communication and Social Media - Media design 03
• Semplicità
Web 2.0 Style
• Importanza del Logo
• CSS
• Layout orizzontali
• Grandi Aree Colorate
• angoli arrotondati
• Sfumature
• Riflessioni
• Colori pastello
• Icone morbide
• Typography
• Stelloni
sabato 22 maggio 2010

203. Web Communication and Social Media - Media design 03
• Semplicità
Web 2.0 Style
• Importanza del Logo
• CSS
• Layout orizzontali
• Grandi Aree Colorate
• angoli arrotondati
• Sfumature
• Riflessioni
• Colori pastello
• Icone morbide
• Typography
• Stelloni
sabato 22 maggio 2010

204. Web Communication and Social Media - Media design 03
• Semplicità
Web 2.0 Style
• Importanza del Logo
• CSS
• Layout orizzontali
• Grandi Aree Colorate
• angoli arrotondati
• Sfumature
• Riflessioni
• Colori pastello
• Icone morbide
• Typography
• Stelloni
sabato 22 maggio 2010

205. Web Communication and Social Media - Media design 03
• Semplicità
Web 2.0 Style
• Importanza del Logo
• CSS
• Layout orizzontali
• Grandi Aree Colorate
• angoli arrotondati
• Sfumature
• Riflessioni
• Colori pastello
• Icone morbide
• Typography
• Stelloni
sabato 22 maggio 2010

206. Web Communication and Social Media - Media design 03
• Semplicità
Web 2.0 Style
• Importanza del Logo
• CSS
• Layout orizzontali
• Grandi Aree Colorate
• angoli arrotondati
• Sfumature
• Riflessioni
• Colori pastello
• Icone morbide
• Typography
• Stelloni
sabato 22 maggio 2010

207. Web Communication and Social Media - Media design 03
• Semplicità
Web 2.0 Style
• Importanza del Logo
• CSS
• Layout orizzontali
• Grandi Aree Colorate
• angoli arrotondati
• Sfumature
• Riflessioni
• Colori pastello
• Icone morbide
• Typography
• Stelloni
sabato 22 maggio 2010

208. Web Communication and Social Media - Media design 03
• Semplicità
Web 2.0 Style
• Importanza del Logo
• CSS
• Layout orizzontali
• Grandi Aree Colorate
• angoli arrotondati
• Sfumature
• Riflessioni
• Colori pastello
• Icone morbide
• Typography
• Stelloni
sabato 22 maggio 2010

209. Web Communication and Social Media - Media design 03
• Semplicità
Web 2.0 Style
• Importanza del Logo
• CSS
• Layout orizzontali
• Grandi Aree Colorate
• angoli arrotondati
• Sfumature
• Riflessioni
• Colori pastello
• Icone morbide
• Typography
• Stelloni
sabato 22 maggio 2010

210. Web Communication and Social Media - Media design 03
• Semplicità
Web 2.0 Style
• Importanza del Logo
• CSS
• Layout orizzontali
• Grandi Aree Colorate
• angoli arrotondati
• Sfumature
• Riflessioni
• Colori pastello
• Icone morbide
• Typography
• Stelloni
sabato 22 maggio 2010

211. Web Communication and Social Media - Media design 03
• Semplicità
Web 2.0 Style
• Importanza del Logo
• CSS
• Layout orizzontali
• Grandi Aree Colorate
• angoli arrotondati
• Sfumature
• Riflessioni
• Colori pastello
• Icone morbide
• Typography
• Stelloni
sabato 22 maggio 2010

212. Web Communication and Social Media - Media design 03
• Semplicità
Web 2.0 Style
• Importanza del Logo
• CSS
• Layout orizzontali
• Grandi Aree Colorate
• angoli arrotondati
• Sfumature
• Riflessioni
• Colori pastello
• Icone morbide
• Typography
• Stelloni
sabato 22 maggio 2010

213. Web Communication and Social Media - Media design 03
• Semplicità
Web 2.0 Style
• Importanza del Logo
• CSS
• Layout orizzontali
• Grandi Aree Colorate
• angoli arrotondati
• Sfumature
• Riflessioni
• Colori pastello
• Icone morbide
• Typography
• Stelloni
sabato 22 maggio 2010

214. Web Communication and Social Media - Media design 03
Web 2.0 Style http://theconversationprism.com/click/
sabato 22 maggio 2010

215. Web Communication and Social Media - Media design 03
Web 2.0 Style http://www.go2web20.net/
sabato 22 maggio 2010

216. Web Communication and Social Media - Media design 03
Web 2.0 Style http://mashable.com/
sabato 22 maggio 2010

217. Web Communication and Social Media - Media design 03
Web 2.0 Style http://momb.socio-kybernetics.net/
sabato 22 maggio 2010

218. Web Communication and Social Media - Media design 03
Web 2.0 Style http://emilychang.com/ehub/
sabato 22 maggio 2010

219. Web Communication and Social Media - Media design 04
Cristian Contini
Art Direction - Communication - New & Next Media
E-MAIL cristian.contini@gmail.com
http://www.augmentedadvertising.com
CV http://www.linkedin.com/in/cristiancontini
twitter: @cristiancontini
Skype: cristiancontini
WEB http://www.cristiancontini.it/
BLOG http://cristiancontini.blogspot.com
SECOND LIFE Grocon Emoto
sabato 22 maggio 2010