Social Media Design 04

1,676 views

Published on

Social Media Design, lezione 04. Ied Firenze

Published in: Education
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,676
On SlideShare
0
From Embeds
0
Number of Embeds
83
Actions
Shares
0
Downloads
60
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Social Media Design 04

  1. 1. cristian contini web communication e social media Media Design 04 Interaction Design Patterns sabato 22 maggio 2010
  2. 2. Web Communication and Social Media - Media design 01 sabato 22 maggio 2010
  3. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 31. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/navigation/ design patterns sabato 22 maggio 2010
  32. 32. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/navigation/ design patterns sabato 22 maggio 2010
  33. 33. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/navigation/ design patterns sabato 22 maggio 2010
  34. 34. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/navigation/ design patterns sabato 22 maggio 2010
  35. 35. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/navigation/ design patterns sabato 22 maggio 2010
  36. 36. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/navigation/ design patterns sabato 22 maggio 2010
  37. 37. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/navigation/ design patterns sabato 22 maggio 2010
  38. 38. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/navigation/ design patterns sabato 22 maggio 2010
  39. 39. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/navigation/ design patterns sabato 22 maggio 2010
  40. 40. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/navigation/ design patterns sabato 22 maggio 2010
  41. 41. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/navigation/ design patterns sabato 22 maggio 2010
  42. 42. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/navigation/ design patterns sabato 22 maggio 2010
  43. 43. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/navigation/ design patterns sabato 22 maggio 2010
  44. 44. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/navigation/ design patterns sabato 22 maggio 2010
  45. 45. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/navigation/ design patterns sabato 22 maggio 2010
  46. 46. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/navigation/ design patterns sabato 22 maggio 2010
  47. 47. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/navigation/ design patterns sabato 22 maggio 2010
  48. 48. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/navigation/ design patterns sabato 22 maggio 2010
  49. 49. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/navigation/ design patterns sabato 22 maggio 2010
  50. 50. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/navigation/ design patterns sabato 22 maggio 2010
  51. 51. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/navigation/ design patterns sabato 22 maggio 2010
  52. 52. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/navigation/ design patterns sabato 22 maggio 2010
  53. 53. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/navigation/ design patterns sabato 22 maggio 2010
  54. 54. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/navigation/ design patterns sabato 22 maggio 2010
  55. 55. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/navigation/ design patterns sabato 22 maggio 2010
  56. 56. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/navigation/ design patterns sabato 22 maggio 2010
  57. 57. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/navigation/ design patterns sabato 22 maggio 2010
  58. 58. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/navigation/ design patterns sabato 22 maggio 2010
  59. 59. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/navigation/ design patterns sabato 22 maggio 2010
  60. 60. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/navigation/ design patterns sabato 22 maggio 2010
  61. 61. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/selection/ design patterns sabato 22 maggio 2010
  62. 62. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/selection/ design patterns sabato 22 maggio 2010
  63. 63. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/selection/ design patterns sabato 22 maggio 2010
  64. 64. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/selection/ design patterns sabato 22 maggio 2010
  65. 65. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/selection/ design patterns sabato 22 maggio 2010
  66. 66. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/selection/ design patterns sabato 22 maggio 2010
  67. 67. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/selection/ design patterns sabato 22 maggio 2010
  68. 68. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/richinteraction/ design patterns sabato 22 maggio 2010
  69. 69. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/richinteraction/ design patterns sabato 22 maggio 2010
  70. 70. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/richinteraction/ design patterns sabato 22 maggio 2010
  71. 71. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/richinteraction/ design patterns sabato 22 maggio 2010
  72. 72. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/richinteraction/ design patterns sabato 22 maggio 2010
  73. 73. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/richinteraction/ design patterns sabato 22 maggio 2010
  74. 74. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/richinteraction/ design patterns sabato 22 maggio 2010
  75. 75. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/richinteraction/ design patterns sabato 22 maggio 2010
  76. 76. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/richinteraction/ design patterns sabato 22 maggio 2010
  77. 77. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/richinteraction/ design patterns sabato 22 maggio 2010
  78. 78. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/richinteraction/ design patterns sabato 22 maggio 2010
  79. 79. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/richinteraction/ design patterns sabato 22 maggio 2010
  80. 80. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/richinteraction/ design patterns sabato 22 maggio 2010
  81. 81. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/richinteraction/ design patterns sabato 22 maggio 2010
  82. 82. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/richinteraction/ design patterns sabato 22 maggio 2010
  83. 83. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/richinteraction/ design patterns sabato 22 maggio 2010
  84. 84. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/richinteraction/ design patterns sabato 22 maggio 2010
  85. 85. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/richinteraction/ design patterns sabato 22 maggio 2010
  86. 86. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/richinteraction/ design patterns sabato 22 maggio 2010
  87. 87. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/richinteraction/ design patterns sabato 22 maggio 2010
  88. 88. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/richinteraction/ design patterns sabato 22 maggio 2010
  89. 89. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/richinteraction/ design patterns sabato 22 maggio 2010
  90. 90. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/richinteraction/ design patterns sabato 22 maggio 2010
  91. 91. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/richinteraction/ design patterns sabato 22 maggio 2010
  92. 92. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/richinteraction/ design patterns sabato 22 maggio 2010
  93. 93. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/social/ design patterns sabato 22 maggio 2010
  94. 94. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/social/ design patterns sabato 22 maggio 2010
  95. 95. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/social/ design patterns sabato 22 maggio 2010
  96. 96. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/social/ design patterns sabato 22 maggio 2010
  97. 97. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/social/ design patterns sabato 22 maggio 2010
  98. 98. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/social/ design patterns sabato 22 maggio 2010
  99. 99. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/social/ design patterns sabato 22 maggio 2010
  100. 100. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/social/ design patterns sabato 22 maggio 2010
  101. 101. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/social/ design patterns sabato 22 maggio 2010
  102. 102. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/social/ design patterns sabato 22 maggio 2010
  103. 103. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/social/ design patterns sabato 22 maggio 2010
  104. 104. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/social/ design patterns sabato 22 maggio 2010
  105. 105. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/social/ design patterns sabato 22 maggio 2010
  106. 106. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/social/ design patterns sabato 22 maggio 2010
  107. 107. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/social/ design patterns sabato 22 maggio 2010
  108. 108. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/social/ design patterns sabato 22 maggio 2010
  109. 109. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/social/ design patterns sabato 22 maggio 2010
  110. 110. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/social/ design patterns sabato 22 maggio 2010
  111. 111. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/social/ design patterns sabato 22 maggio 2010
  112. 112. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/social/ design patterns sabato 22 maggio 2010
  113. 113. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/social/ design patterns sabato 22 maggio 2010
  114. 114. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/social/ design patterns sabato 22 maggio 2010
  115. 115. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/social/ design patterns sabato 22 maggio 2010
  116. 116. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/social/ design patterns sabato 22 maggio 2010
  117. 117. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/social/ design patterns sabato 22 maggio 2010
  118. 118. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/social/ design patterns sabato 22 maggio 2010
  119. 119. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/social/ design patterns sabato 22 maggio 2010
  120. 120. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/social/ design patterns sabato 22 maggio 2010
  121. 121. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/social/ design patterns sabato 22 maggio 2010
  122. 122. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/social/ design patterns sabato 22 maggio 2010
  123. 123. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/social/ design patterns sabato 22 maggio 2010
  124. 124. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/social/ design patterns sabato 22 maggio 2010
  125. 125. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/social/ design patterns sabato 22 maggio 2010
  126. 126. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/social/ design patterns sabato 22 maggio 2010
  127. 127. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/social/ design patterns sabato 22 maggio 2010
  128. 128. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/social/ design patterns sabato 22 maggio 2010
  129. 129. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/social/ design patterns sabato 22 maggio 2010
  130. 130. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/social/ design patterns sabato 22 maggio 2010
  131. 131. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/social/ design patterns sabato 22 maggio 2010
  132. 132. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/social/ design patterns sabato 22 maggio 2010
  133. 133. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/social/ design patterns sabato 22 maggio 2010
  134. 134. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/social/ design patterns sabato 22 maggio 2010
  135. 135. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/social/ design patterns sabato 22 maggio 2010
  136. 136. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/social/ design patterns sabato 22 maggio 2010
  137. 137. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/social/ design patterns sabato 22 maggio 2010
  138. 138. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/social/ design patterns sabato 22 maggio 2010
  139. 139. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/social/ design patterns sabato 22 maggio 2010
  140. 140. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/social/ design patterns sabato 22 maggio 2010
  141. 141. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/social/ design patterns sabato 22 maggio 2010
  142. 142. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/social/ design patterns sabato 22 maggio 2010
  143. 143. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/social/ design patterns sabato 22 maggio 2010
  144. 144. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/social/ design patterns sabato 22 maggio 2010
  145. 145. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/social/ design patterns sabato 22 maggio 2010
  146. 146. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/social/ design patterns sabato 22 maggio 2010
  147. 147. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/social/ design patterns sabato 22 maggio 2010
  148. 148. Web Communication and Social Media - Media design 03 Interaction http://developer.yahoo.com/ypatterns/social/ design patterns sabato 22 maggio 2010
  149. 149. Web Communication and Social Media - Media design 03 Interaction http://www.designingsocialinterfaces.com/ design patterns sabato 22 maggio 2010
  150. 150. Web Communication and Social Media - Media design 03 Interaction http://www.designingsocialinterfaces.com/ design patterns sabato 22 maggio 2010
  151. 151. Web Communication and Social Media - Media design 03 Interaction http://www.designingsocialinterfaces.com/ design patterns sabato 22 maggio 2010
  152. 152. Web Communication and Social Media - Media design 03 Interaction http://www.designingsocialinterfaces.com/ design patterns sabato 22 maggio 2010
  153. 153. Web Communication and Social Media - Media design 03 Interaction http://www.designingsocialinterfaces.com/ design patterns sabato 22 maggio 2010
  154. 154. Web Communication and Social Media - Media design 03 Interaction http://www.designingsocialinterfaces.com/ design patterns sabato 22 maggio 2010
  155. 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. 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. 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. 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. 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. 160. Web Communication and Social Media - Media design 03 Interaction design patterns http://oreilly.com/catalog/9780596154929/ sabato 22 maggio 2010
  161. 161. Web Communication and Social Media - Media design 03 Interaction http://designinginterfaces.com/ design patterns sabato 22 maggio 2010
  162. 162. Web Communication and Social Media - Media design 03 Interaction http://designinginterfaces.com/ design patterns sabato 22 maggio 2010
  163. 163. Web Communication and Social Media - Media design 03 Interaction http://designinginterfaces.com/ design patterns sabato 22 maggio 2010
  164. 164. Web Communication and Social Media - Media design 03 Interaction http://designinginterfaces.com/ design patterns sabato 22 maggio 2010
  165. 165. Web Communication and Social Media - Media design 03 Interaction http://designinginterfaces.com/ design patterns sabato 22 maggio 2010
  166. 166. Web Communication and Social Media - Media design 03 Interaction http://www.welie.com/patterns/ design patterns sabato 22 maggio 2010
  167. 167. Web Communication and Social Media - Media design 03 Interaction http://www.welie.com/patterns/ design patterns sabato 22 maggio 2010
  168. 168. Web Communication and Social Media - Media design 03 Interaction http://www.welie.com/patterns/ design patterns sabato 22 maggio 2010
  169. 169. Web Communication and Social Media - Media design 03 Interaction http://www.welie.com/patterns/ design patterns sabato 22 maggio 2010
  170. 170. Web Communication and Social Media - Media design 03 Interaction http://www.welie.com/patterns/ design patterns sabato 22 maggio 2010
  171. 171. Web Communication and Social Media - Media design 03 Interaction http://ui-patterns.com/patterns design patterns sabato 22 maggio 2010
  172. 172. Web Communication and Social Media - Media design 03 Interaction http://ui-patterns.com/patterns design patterns sabato 22 maggio 2010
  173. 173. Web Communication and Social Media - Media design 03 Interaction http://ui-patterns.com/patterns design patterns sabato 22 maggio 2010
  174. 174. Web Communication and Social Media - Media design 03 Interaction http://ui-patterns.com/patterns design patterns sabato 22 maggio 2010
  175. 175. Web Communication and Social Media - Media design 03 Interaction http://ui-patterns.com/patterns design patterns sabato 22 maggio 2010
  176. 176. Web Communication and Social Media - Media design 03 Interaction http://ui-patterns.com/patterns design patterns sabato 22 maggio 2010
  177. 177. Web Communication and Social Media - Media design 03 Interaction http://ui-patterns.com/patterns design patterns sabato 22 maggio 2010
  178. 178. Web Communication and Social Media - Media design 03 Interaction http://uipatternfactory.com/ design patterns sabato 22 maggio 2010
  179. 179. Web Communication and Social Media - Media design 03 Interaction http://uipatternfactory.com/ design patterns sabato 22 maggio 2010
  180. 180. Web Communication and Social Media - Media design 03 Interaction http://uipatternfactory.com/ design patterns sabato 22 maggio 2010
  181. 181. Web Communication and Social Media - Media design 03 Interaction http://uipatternfactory.com/ design patterns sabato 22 maggio 2010
  182. 182. Web Communication and Social Media - Media design 03 Interaction http://uipatternfactory.com/ design patterns sabato 22 maggio 2010
  183. 183. Web Communication and Social Media - Media design 03 Interaction http://www.socialdesignpatterns.com/ design patterns sabato 22 maggio 2010
  184. 184. Web Communication and Social Media - Media design 03 Interaction http://www.socialdesignpatterns.com/ design patterns sabato 22 maggio 2010
  185. 185. Web Communication and Social Media - Media design 03 Interaction http://www.socialdesignpatterns.com/ design patterns sabato 22 maggio 2010
  186. 186. Web Communication and Social Media - Media design 03 Interaction http://www.socialdesignpatterns.com/ design patterns sabato 22 maggio 2010
  187. 187. Web Communication and Social Media - Media design 03 Interaction http://www.socialdesignpatterns.com/ design patterns sabato 22 maggio 2010
  188. 188. Web Communication and Social Media - Media design 03 Interaction http://www.socialdesignpatterns.com/ design patterns sabato 22 maggio 2010
  189. 189. Web Communication and Social Media - Media design 03 Interaction http://www.socialdesignpatterns.com/ design patterns sabato 22 maggio 2010
  190. 190. Web Communication and Social Media - Media design 03 Interaction http://www.socialdesignpatterns.com/ design patterns sabato 22 maggio 2010
  191. 191. Web Communication and Social Media - Media design 03 Interaction http://www.socialdesignpatterns.com/ design patterns sabato 22 maggio 2010
  192. 192. Web Communication and Social Media - Media design 03 Interaction http://www.socialdesignpatterns.com/ design patterns sabato 22 maggio 2010
  193. 193. Web Communication and Social Media - Media design 03 Interaction http://konigi.com/showcase/latest design patterns sabato 22 maggio 2010
  194. 194. Web Communication and Social Media - Media design 03 Interaction design patterns http://designsnips.com/ sabato 22 maggio 2010
  195. 195. Web Communication and Social Media - Media design 03 Interaction http://www.visi.com/~snowfall/InteractionPatterns.html design patterns sabato 22 maggio 2010
  196. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 214. Web Communication and Social Media - Media design 03 Web 2.0 Style http://theconversationprism.com/click/ sabato 22 maggio 2010
  215. 215. Web Communication and Social Media - Media design 03 Web 2.0 Style http://www.go2web20.net/ sabato 22 maggio 2010
  216. 216. Web Communication and Social Media - Media design 03 Web 2.0 Style http://mashable.com/ sabato 22 maggio 2010
  217. 217. Web Communication and Social Media - Media design 03 Web 2.0 Style http://momb.socio-kybernetics.net/ sabato 22 maggio 2010
  218. 218. Web Communication and Social Media - Media design 03 Web 2.0 Style http://emilychang.com/ehub/ sabato 22 maggio 2010
  219. 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

×