Social media design 03 2012 - Web Design Per i Social Media

1,664 views

Published on

Web design in social media era: from project to visual; from interaction social media strategies to web 2.0 visual style. Flowcharts: from site layouts to flowcharts of social media managements crisis. Typography and fonts. Flowcharting online web apps. Typography web apps and sites.

Published in: Education, Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,664
On SlideShare
0
From Embeds
0
Number of Embeds
23
Actions
Shares
0
Downloads
56
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Social media design 03 2012 - Web Design Per i Social Media

  1. 1. web communication e social media Media Design 03 Web Design per i Social Mediavenerdì 1 giugno 12
  2. 2. Web Communication and Social Media - Media design 03 2012 La tradizione della tipografia e della stampavenerdì 1 giugno 12
  3. 3. Web Communication and Social Media - Media design 03 2012 Il Web “tradizionale” usa ancora la metafora della paginavenerdì 1 giugno 12
  4. 4. Web Communication and Social Media - Media design 03 2012 Il Web “tradizionale” usa ancora la metafora della paginavenerdì 1 giugno 12
  5. 5. Web Communication and Social Media - Media design 03 2012 Il Web “tradizionale” usa ancora la metafora della paginavenerdì 1 giugno 12
  6. 6. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  7. 7. Web Communication and Social Media - Media design 03 2012 http://www.london2012.com/venerdì 1 giugno 12
  8. 8. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  9. 9. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  10. 10. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  11. 11. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  12. 12. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  13. 13. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  14. 14. Web Communication and Social Media - Media design 03 2012 http://www.loisjeans.com/web2012/esvenerdì 1 giugno 12
  15. 15. Web Communication and Social Media - Media design 03 2012 http://www.loisjeans.com/web2012/esvenerdì 1 giugno 12
  16. 16. Web Communication and Social Media - Media design 03 2012 http://www.bluezonesproject.com/venerdì 1 giugno 12
  17. 17. Web Communication and Social Media - Media design 03 2012 http://beta.theexpressiveweb.com/venerdì 1 giugno 12
  18. 18. Web Communication and Social Media - Media design 03 2012 http://beta.theexpressiveweb.com/venerdì 1 giugno 12
  19. 19. Web Communication and Social Media - Media design 03 2012 http://beta.theexpressiveweb.com/venerdì 1 giugno 12
  20. 20. Web Communication and Social Media - Media design 03 2012 La classifica dei siti più visitati in italia maggio 2012 http://www.alexa.com/topsites/countries/ITvenerdì 1 giugno 12
  21. 21. Web Communication and Social Media - Media design 03 2012 La classifica dei siti più visitati in italia maggio 2012 http://www.alexa.com/topsites/countries/ITvenerdì 1 giugno 12
  22. 22. Web Communication and Social Media - Media design 03 2012 La classifica dei 20 siti più visitati in italia nel 2011 (marzo 2011 GOOGLE/ALEXA) http://www.google.com/adplanner/static/top100countries/it.html http://www.alexa.com/topsites/countries/ITvenerdì 1 giugno 12
  23. 23. Web Communication and Social Media - Media design 03 2012 La classifica dei 1000 siti più visitati nel mondo http://www.google.com/adplanner/static/top1000/index.htmlvenerdì 1 giugno 12
  24. 24. Web Communication and Social Media - Media design 03 2012 Web Design / site production Interaction Design Interaction Designvenerdì 1 giugno 12
  25. 25. Web Communication and Social Media - Media design 03 2012 Web Design Web design is the skill of creating presentations of content (usually hypertext or hypermedia) that is delivered to an end- user through the World Wide Web, by way of a Web browser or other Web-enabled software like Internet television clients, microblogging clients and RSS readers. The intent of web design[1] is to create a web site—a collection of electronic documents and applications that reside on a web server/servers and present content and interactive features/ interfaces to the end user in form of Web pages once requested. Such elements as text, bit-mapped images (GIFs, JPEGs) and forms can be placed on the page using HTML/ XHTML/XML tags. Displaying more complex media (vector graphics, animations, videos, sounds) requires plug-ins such as Adobe Flash, QuickTime, Java run-time environment, etc. Plug-ins are also embedded into web page by using HTML/ XHTML tags.venerdì 1 giugno 12
  26. 26. Web Communication and Social Media - Media design 03 2012 Graphic Design The term graphic design can refer to a number of artistic and professional disciplines which focus on visual communication and presentation. Various methods are used to create and combine symbols, images and/or words to create a visual representation of ideas and messages. A graphic designer may use typography, visual arts and page layout techniques to produce the final result. Graphic design often refers to both the process (designing) by which the communication is created and the products (designs) which are generated.venerdì 1 giugno 12
  27. 27. Web Communication and Social Media - Media design 03 2012 Interaction Design Interaction design (IxD) is the study of devices with which a user can interact, in particular computer users. The practice typically centers around "embedding information technology into the ambient social complexities of the physical world."[1] It can also apply to other types of non-electronic products and services, and even organizations. Interaction design defines the behavior (the "interaction") of an artifact or system in response to its users.venerdì 1 giugno 12
  28. 28. Web Communication and Social Media - Media design 03 2012 Social Media Social media is a term used to describe the type of media that is based on conversation and interaction between people online. Where media means digital words, sounds & pictures which are typically shared via the internet and the value can be cultural, societal or even financial. Social media are media designed to be disseminated through social interaction, using highly accessible and scalable publishing techniques. Social media use web-based technologies to transform and broadcast media monologues into social media dialogues. They support the democratization of knowledge and information and transform people from content consumers to content producers.venerdì 1 giugno 12
  29. 29. Web Communication and Social Media - Media design 03 2012 Interaction Design Interaction Design new Patternsvenerdì 1 giugno 12
  30. 30. Web Communication and Social Media - Media design 03 2012 Da Utente singolo a Sociale (plurale) UGC interazioni interazioni con altri utenti, con sito , interfaccia, , interfaccia, media condivisi azioni solitarie dialoghi communityvenerdì 1 giugno 12
  31. 31. Web Communication and Social Media - Media design 03 2012 cambio di prospettiva nel progetto del Social Web da Statico a Dinamico a Vivo progettazione da Statica a Liquido a Evolutiva dal Sito a Ecosistema dal semplice Ascolto al coinvolgimento alla Partecipazione emotiva da utente a communityvenerdì 1 giugno 12
  32. 32. Web Communication and Social Media - Media design 03 2012 progettare PER gli utenti Target progettare CON gli utenti User Centered Design Social Media Designvenerdì 1 giugno 12
  33. 33. Web Communication and Social Media - Media design 03 2012 progettazione tradizionale progetto social Target Crowd Web Statico Dinamico/Organico Dati Oggettivi Emotività Transazioni Relazioni Progettazione One Shot continuavenerdì 1 giugno 12
  34. 34. Web Communication and Social Media - Media design 03 2012 cambio di prospettiva nel progetto del Social Webvenerdì 1 giugno 12
  35. 35. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  36. 36. Web Communication and Social Media - Media design 03 2012 Stilemi visivi Social Web importanza del logo colori pastello, green, organics, healthy forme morbide, arrotondate, organiche aria, grande aree di respiro visivo “green is the new gray” “black is dead” Bottoni “stelloni”, trend gadgets interfaccia minimale vs contents bianco bianco bianco tante (ri)flessioni sul pavimento grande uso della Typography tanta grafica, no stock photosvenerdì 1 giugno 12
  37. 37. Web Communication and Social Media - Media design 03 2012 Web 2.0 Style • Semplicità • Importanza del Logo • CSS • Layout orizzontali • Grandi Aree Colorate • Angoli arrotondati • Sfumature • Riflessioni • Colori pastello • Soft Icons • Typography • Splash/Starvenerdì 1 giugno 12
  38. 38. Web Communication and Social Media - Media design 03 2012 • Semplicità Web 2.0 Style • Importanza del Logo • CSS • Layout orizzontali • Grandi Aree Colorate • angoli arrotondati • Sfumature • Riflessioni • Colori pastello • Icone morbide • Typography • Stellonivenerdì 1 giugno 12
  39. 39. Web Communication and Social Media - Media design 03 2012 • Semplicità Web 2.0 Style • Importanza del Logo • CSS • Layout orizzontali • Grandi Aree Colorate • angoli arrotondati • Sfumature • Riflessioni • Colori pastello • Icone morbide • Typography • Stellonivenerdì 1 giugno 12
  40. 40. Web Communication and Social Media - Media design 03 2012 • Semplicità Web 2.0 Style • Importanza del Logo • CSS • Layout orizzontali • Grandi Aree Colorate • angoli arrotondati • Sfumature • Riflessioni • Colori pastello • Icone morbide • Typography • Stellonivenerdì 1 giugno 12
  41. 41. Web Communication and Social Media - Media design 03 2012 • Semplicità Web 2.0 Style • Importanza del Logo • CSS • Layout orizzontali • Grandi Aree Colorate • angoli arrotondati • Sfumature • Riflessioni • Colori pastello • Icone morbide • Typography • Stellonivenerdì 1 giugno 12
  42. 42. Web Communication and Social Media - Media design 03 2012 • Semplicità Web 2.0 Style • Importanza del Logo • CSS • Layout orizzontali • Grandi Aree Colorate • angoli arrotondati • Sfumature • Riflessioni • Colori pastello • Icone morbide • Typography • Stellonivenerdì 1 giugno 12
  43. 43. Web Communication and Social Media - Media design 03 2012 • Semplicità Web 2.0 Style • Importanza del Logo • CSS • Layout orizzontali • Grandi Aree Colorate • angoli arrotondati • Sfumature • Riflessioni • Colori pastello • Icone morbide • Typography • Stellonivenerdì 1 giugno 12
  44. 44. Web Communication and Social Media - Media design 03 2012 • Semplicità Web 2.0 Style • Importanza del Logo • CSS • Layout orizzontali • Grandi Aree Colorate • angoli arrotondati • Sfumature • Riflessioni • Colori pastello • Icone morbide • Typography • Stellonivenerdì 1 giugno 12
  45. 45. Web Communication and Social Media - Media design 03 2012 • Semplicità Web 2.0 Style • Importanza del Logo • CSS • Layout orizzontali • Grandi Aree Colorate • angoli arrotondati • Sfumature • Riflessioni • Colori pastello • Icone morbide • Typography • Stellonivenerdì 1 giugno 12
  46. 46. Web Communication and Social Media - Media design 03 2012 • Semplicità Web 2.0 Style • Importanza del Logo • CSS • Layout orizzontali • Grandi Aree Colorate • angoli arrotondati • Sfumature • Riflessioni • Colori pastello • Icone morbide • Typography • Stellonivenerdì 1 giugno 12
  47. 47. Web Communication and Social Media - Media design 03 2012 • Semplicità Web 2.0 Style • Importanza del Logo • CSS • Layout orizzontali • Grandi Aree Colorate • angoli arrotondati • Sfumature • Riflessioni • Colori pastello • Icone morbide • Typography • Stellonivenerdì 1 giugno 12
  48. 48. Web Communication and Social Media - Media design 03 2012 • Semplicità Web 2.0 Style • Importanza del Logo • CSS • Layout orizzontali • Grandi Aree Colorate • angoli arrotondati • Sfumature • Riflessioni • Colori pastello • Icone morbide • Typography • Stellonivenerdì 1 giugno 12
  49. 49. Web Communication and Social Media - Media design 03 2012 • Semplicità Web 2.0 Style • Importanza del Logo • CSS • Layout orizzontali • Grandi Aree Colorate • angoli arrotondati • Sfumature • Riflessioni • Colori pastello • Icone morbide • Typography • Stellonivenerdì 1 giugno 12
  50. 50. Web Communication and Social Media - Media design 03 2012 • Semplicità Web 2.0 Style • Importanza del Logo • CSS • Layout orizzontali • Grandi Aree Colorate • angoli arrotondati • Sfumature • Riflessioni • Colori pastello • Icone morbide • Typography • Stellonivenerdì 1 giugno 12
  51. 51. Web Communication and Social Media - Media design 03 2012 • Semplicità Web 2.0 Style • Importanza del Logo • CSS • Layout orizzontali • Grandi Aree Colorate • angoli arrotondati • Sfumature • Riflessioni • Colori pastello • Icone morbide • Typography • Stellonivenerdì 1 giugno 12
  52. 52. Web Communication and Social Media - Media design 03 2012 • Semplicità Web 2.0 Style • Importanza del Logo • CSS • Layout orizzontali • Grandi Aree Colorate • angoli arrotondati • Sfumature • Riflessioni • Colori pastello • Icone morbide • Typography • Stellonivenerdì 1 giugno 12
  53. 53. Web Communication and Social Media - Media design 03 2012 • Semplicità Web 2.0 Style • Importanza del Logo • CSS • Layout orizzontali • Grandi Aree Colorate • angoli arrotondati • Sfumature • Riflessioni • Colori pastello • Icone morbide • Typography • Stellonivenerdì 1 giugno 12
  54. 54. Web Communication and Social Media - Media design 03 2012 • Semplicità Web 2.0 Style • Importanza del Logo • CSS • Layout orizzontali • Grandi Aree Colorate • angoli arrotondati • Sfumature • Riflessioni • Colori pastello • Icone morbide • Typography • Stellonivenerdì 1 giugno 12
  55. 55. Web Communication and Social Media - Media design 03 2012 Web 2.0 Style http://theconversationprism.com/click/venerdì 1 giugno 12
  56. 56. Web Communication and Social Media - Media design 03 2012 Web 2.0 Style http://www.go2web20.net/venerdì 1 giugno 12
  57. 57. Web Communication and Social Media - Media design 03 2012 Web 2.0 Style http://mashable.com/venerdì 1 giugno 12
  58. 58. Web Communication and Social Media - Media design 03 2012 Web 2.0 Style http://momb.socio-kybernetics.net/venerdì 1 giugno 12
  59. 59. Web Communication and Social Media - Media design 03 2012 http://emilychang.com/ehub/ Web 2.0 Stylevenerdì 1 giugno 12
  60. 60. Web Communication and Social Media - Media design 03 2012 http://emilychang.com/ehub/ Web 2.0 Stylevenerdì 1 giugno 12
  61. 61. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  62. 62. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  63. 63. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  64. 64. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  65. 65. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  66. 66. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  67. 67. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  68. 68. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  69. 69. Web Communication and Social Media - Media design 03 2012 http://youtu.be/9TGkDHzqUaQvenerdì 1 giugno 12
  70. 70. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  71. 71. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  72. 72. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  73. 73. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  74. 74. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  75. 75. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  76. 76. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  77. 77. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  78. 78. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  79. 79. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  80. 80. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  81. 81. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  82. 82. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  83. 83. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  84. 84. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  85. 85. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  86. 86. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  87. 87. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  88. 88. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  89. 89. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  90. 90. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  91. 91. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  92. 92. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  93. 93. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  94. 94. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  95. 95. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  96. 96. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  97. 97. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  98. 98. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  99. 99. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  100. 100. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  101. 101. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  102. 102. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  103. 103. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  104. 104. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  105. 105. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  106. 106. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  107. 107. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  108. 108. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  109. 109. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  110. 110. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  111. 111. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  112. 112. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  113. 113. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  114. 114. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  115. 115. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  116. 116. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  117. 117. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  118. 118. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  119. 119. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  120. 120. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  121. 121. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  122. 122. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  123. 123. Web Communication and Social Media - Media design 03 2012 mappa del sito /flowchartvenerdì 1 giugno 12
  124. 124. Web Communication and Social Media - Media design 03 2012 mappa del sito /flowchartvenerdì 1 giugno 12
  125. 125. Web Communication and Social Media - Media design 03 2012 mappa del sito /flowchartvenerdì 1 giugno 12
  126. 126. Web Communication and Social Media - Media design 03 2012 mappa del sito /flowchartvenerdì 1 giugno 12
  127. 127. Web Communication and Social Media - Media design 03 2012 flowchartvenerdì 1 giugno 12
  128. 128. Web Communication and Social Media - Media design 03 2012 78venerdì 1 giugno 12
  129. 129. Web Communication and Social Media - Media design 03 2012 78venerdì 1 giugno 12
  130. 130. Web Communication and Social Media - Media design 03 2012 flowchart delle azionivenerdì 1 giugno 12
  131. 131. Web Communication and Social Media -- Media design 03 Web Communication and Social Media Media design 03 2012 flowchart dei processivenerdì 1 giugno 12
  132. 132. Web Communication and Social Media - Media design 03 2012 flowchart friendfeedvenerdì 1 giugno 12
  133. 133. Web Communication and Social Media - Media design 03 2012 flowchart post http://www.bydatabedriven.com/social-media-flow-chart-blog-vs-facebook-vs-twitter/venerdì 1 giugno 12
  134. 134. Web Communication and Social Media - Media design 03 2012 flowchart post http://www.asce.org/followasce/venerdì 1 giugno 12
  135. 135. Web Communication and Social Media -- Media design 03 Web Communication and Social Media Media design 03 2012 flowchart post http://www.socialfish.org/2010/11/social-media-response-triage.htmlvenerdì 1 giugno 12
  136. 136. Web Communication and Social Media -- Media design 03 Web Communication and Social Media Media design 03 2012 Social Mediavenerdì 1 giugno 12
  137. 137. Web Communication and Social Media -- Media design 03 Web Communication and Social Media Media design 03 2012 Social Mediavenerdì 1 giugno 12
  138. 138. Web Communication and Social Media -- Media design 03 Web Communication and Social Media Media design 03 2012 Pfizer Canada has modified an assessment chart that was originally developed by the U.S. Air Force . The flow chart will guide Pfizer Canada in responding to remarks on social media networks which are either the property of, sponsored by or have a relation of some kind to Pfizer Canada Social Mediavenerdì 1 giugno 12
  139. 139. Web Communication and Social Media -- Media design 03 Web Communication and Social Media Media design 03 2012 Pfizer Canada has modified an assessment chart that was originally developed by the U.S. Air Force . The flow chart will guide Pfizer Canada in responding to remarks on social media networks which are either the property of, sponsored by or have a relation of some kind to Pfizer Canada Social Mediavenerdì 1 giugno 12
  140. 140. Web Communication and Social Media -- Media design 03 Web Communication and Social Media Media design 03 2012 Pfizer Canada has modified an assessment chart that was originally developed by the U.S. Air Force . The flow chart will guide Pfizer Canada in responding to remarks on social media networks which are either the property of, sponsored by or have a relation of some kind to Pfizer Canada Social Mediavenerdì 1 giugno 12
  141. 141. Web Communication and Social Media -- Media design 03 Web Communication and Social Media Media design 03 2012 Social Mediavenerdì 1 giugno 12
  142. 142. Web Communication and Social Media - Media design 03 2012 Community Management Scenario Map flowchart post by David Armano - @Armanovenerdì 1 giugno 12
  143. 143. Web Communication and Social Media - Media design 03 2012 Community Management Scenario Map flowchart post http:// www.slidesh are.net/ morganmclint ic/red-alert- handling-a- crisis-in-a- sm- landscape? by David Armano - @Armanovenerdì 1 giugno 12
  144. 144. Web Communication and Social Media - Media design 03 2012 Community Management Scenario Map flowchart postvenerdì 1 giugno 12
  145. 145. Web Communication and Social Media - Media design 03 2012 Community Management Scenario Map flowchart postvenerdì 1 giugno 12
  146. 146. Web Communication and Social Media -- Media design 03 Web Communication and Social Media Media design 03 2012 Community Management Scenario Map flowchart postvenerdì 1 giugno 12
  147. 147. Web Communication and Social Media -- Media design 03 Web Communication and Social Media Media design 03 2012 Community Management Scenario Map flowchart post http://www.hivestrategies.com/venerdì 1 giugno 12
  148. 148. Web Communication and Social Media -- Media design 03 Web Communication and Social Media Media design 03 2012venerdì 1 giugno 12
  149. 149. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  150. 150. Web Communication and Social Media -- Media design 03 Web Communication and Social Media Media design 03 2012venerdì 1 giugno 12
  151. 151. Web Communication and Social Media -- Media design 03 Web Communication and Social Media Media design 03 2012 http://socialmediatoday.comvenerdì 1 giugno 12
  152. 152. Web Communication and Social Media - Media design 03 2012 http://sportfanconnect.com/ http://socialmediatoday.comvenerdì 1 giugno 12
  153. 153. Web Communication and Social Media -- Media design 03 Web Communication and Social Media Media design 03 2012 http://www.stampsconnect.com/ http://socialmediatoday.comvenerdì 1 giugno 12
  154. 154. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  155. 155. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  156. 156. Web Communication and Social Media - Media design 03 2012 Social Media Adoption Decision Flowchartvenerdì 1 giugno 12
  157. 157. Tools Web Communication and Social Media - Media design 03 2012 strutturare lo spazio/wireframing/mockups + + Il primo prototipo di Twittervenerdì 1 giugno 12
  158. 158. Web Communication and Social Media - Media design 03 2012 strutturare lo spazio/wireframing/mockupsvenerdì 1 giugno 12
  159. 159. Web Communication and Social Media - Media design 03 2012 strutturare lo spazio/wireframing/mockupsvenerdì 1 giugno 12
  160. 160. Web Communication and Social Media - Media design 03 2012 strutturare lo spazio/wireframing/mockupsvenerdì 1 giugno 12
  161. 161. Web Communication and Social Media - Media design 03 2012 strutturare lo spazio/wireframing/mockupsvenerdì 1 giugno 12
  162. 162. Tools Web Communication and Social Media - Media design 03 2012 strutturare lo spazio/wireframing/mockups http://www.lovelycharts.com/ 1 2 100% free Online application 3 Create flowcharts, sitemaps, wireframesvenerdì 1 giugno 12
  163. 163. Tools Web Communication and Social Media - Media design 03 2012 strutturare lo spazio/wireframing/mockups http://www.lovelycharts.com/ 1 2 100% free Online application 3 Create flowcharts, sitemaps, wireframesvenerdì 1 giugno 12
  164. 164. Web Communication and Social Media - Media design 03 2012 http://www.lovelycharts.com/venerdì 1 giugno 12
  165. 165. Tools Web Communication and Social Media - Media design 03 2012 strutturare lo spazio/wireframing/mockups 1 Freemium http://www.mockflow.com/ 2 Web 2.0 air interface 3 desktop/onlinevenerdì 1 giugno 12
  166. 166. Web Communication and Social Media - Media design 03 2012 http://www.mockflow.com/venerdì 1 giugno 12
  167. 167. Web Communication and Social Media - Media design 03 2012 http://www.mockflow.com/venerdì 1 giugno 12
  168. 168. Web Communication and Social Media - Media design 03 2012 http://www.mockflow.com/ http://www.youtube.com/watch?v=sqF0AWam-Cgvenerdì 1 giugno 12
  169. 169. Web Communication and Social Media - Media design 03 2012 http://www.mockflow.com/ http://www.youtube.com/watch?v=U8rgQyUVMKYvenerdì 1 giugno 12
  170. 170. Web Communication and Social Media - Media design 03 2012 http://www.mockflow.com/ http://www.youtube.com/watch?v=4Vk2B-jWzyQvenerdì 1 giugno 12
  171. 171. Web Communication and Social Media - Media design 03 2012 strutturare lo spazio/wireframing/mockups Tools http://www.balsamiq.com/ 1 handrawn style 1 79$ una tantum 2 Online / desktopvenerdì 1 giugno 12
  172. 172. Web Communication and Social Media - Media design 03 2012 http://www.balsamiq.com/ http://www.youtube.com/watch?v=aJTuFRaIi_gvenerdì 1 giugno 12
  173. 173. Web Communication and Social Media - Media design 03 2012 strutturare lo spazio/wireframing/mockups Tools HotGloo Pencil Project ProtoShare Axure RP Justinmind Prototyper Gliffy Serena Prototype Composer Pidoco FlairBuilder JumpChart iPlotz Protofluid.com GUI Design Studio OmniGraffle (Mac, iPad) Microsoft Visio Mockingbirdvenerdì 1 giugno 12
  174. 174. Web Communication and Social Media - Media design 03 2012 strutturare lo spazio/wireframing/mockups Tools iMockups http://www.youtube.com/watch?v=LOyIVqJcGfcvenerdì 1 giugno 12
  175. 175. Web Communication and Social Media - Media design 03 2012 http://www.youtube.com/watch?v=hII6AbGrWR8venerdì 1 giugno 12
  176. 176. Web Communication and Social Media - Media design 03 2012 Progetto comunicazione visiva / Layoutvenerdì 1 giugno 12
  177. 177. Web Communication and Social Media - Media design 03 2012 Progetto comunicazione visiva Layoutvenerdì 1 giugno 12
  178. 178. Web Communication and Social Media - Media design 03 2012 Progetto comunicazione visiva Layout Consistenza concepts Visual design tono del design Stile gerarchie visive metafora elementi visivi iconici tipologia di sito web linguaggio simbologia astratte/stilizzazioni CSS diagrammi semplici illustrazioni stilizzate interfaccia illustrazioni realistiche orientamento fotografie illustrazioni iperrealistiche testo typography testo grafico contentvenerdì 1 giugno 12
  179. 179. Web Communication and Social Media - Media design 03 2012 Typography/Fonts i caratteri hanno caratterevenerdì 1 giugno 12
  180. 180. Web Communication and Social Media - Media design 03 2012 Typography/Fontsvenerdì 1 giugno 12
  181. 181. Web Communication and Social Media - Media design 03 2012 Typography/Fonts Garamond Bodoni Times New Romanvenerdì 1 giugno 12
  182. 182. Web Communication and Social Media - Media design 03 2012 Typography/Fontsvenerdì 1 giugno 12
  183. 183. Web Communication and Social Media - Media design 03 2012 Typography/Fonts ordini di composizionevenerdì 1 giugno 12
  184. 184. Web Communication and Social Media - Media design 03 2012 famiglievenerdì 1 giugno 12
  185. 185. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  186. 186. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  187. 187. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  188. 188. Web Communication and Social Media - Media design 03 2012 Typography/Fonts grigio tipograficovenerdì 1 giugno 12
  189. 189. Web Communication and Social Media - Media design 03 2012 Typography/Fonts grigio tipograficovenerdì 1 giugno 12
  190. 190. Web Communication and Social Media - Media design 03 2012 Typography/Fonts grigio tipograficovenerdì 1 giugno 12
  191. 191. Web Communication and Social Media - Media design 03 2012 Typography/Fonts disegnare con il testovenerdì 1 giugno 12
  192. 192. Web Communication and Social Media - Media design 03 2012 Typography/Fonts disegnare con il testovenerdì 1 giugno 12
  193. 193. Web Communication and Social Media - Media design 03 2012 Typography/Fonts disegnare con il testovenerdì 1 giugno 12
  194. 194. Web Communication and Social Media - Media design 03 2012 Typography/Fonts disegnare con il testovenerdì 1 giugno 12
  195. 195. Web Communication and Social Media - Media design 03 2012 Typography/Fontsvenerdì 1 giugno 12
  196. 196. Web Communication and Social Media - Media design 03 2012 Typography/Fontsvenerdì 1 giugno 12
  197. 197. Web Communication and Social Media - Media design 03 2012 Typography/Fontsvenerdì 1 giugno 12
  198. 198. Web Communication and Social Media - Media design 03 2012 Typography/Fontsvenerdì 1 giugno 12
  199. 199. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  200. 200. Web Communication and Social Media - Media design 03 2012 limitate capacità di formattazione limitate capacità di uso dei font Fonts & Web html formattazione e contenuto uniti contenuto separato dallo stile css Hyper Test Markup Language formattazione e impaginazione avanzata limitate capacità di uso dei font cascading style sheet sIFR 2.0 Scalable Inman Flash Replacement (sIFR) rendering dei font grazie al plugin flash testo in grafica ajax jpeg gif png solo per titoli non per il body text Asynchronous JavaScript And XMl flash formattazione e impaginazione avanzata uso di qualsiasi font downloadable fonts? distribuzione illegale EULA DRMvenerdì 1 giugno 12
  201. 201. Web Communication and Social Media - Media design 03 2012 Font esistenti: decine di migliaia. Font usate su web: 5 Famiglie di fonts usabili Serif, Sans-Serif, Monospace, Script, Fantasy font usate: Arial • Georgia • Times New Roman• Trebuchet • Verdana Web-safe fonts Microsofts Core fonts for the Web (1996 - 2002) Since being released under Microsofts Core fonts for the Web program, Arial, Georgia, and Verdana have become three de facto fonts of the Web. In order to ensure that all web users had a basic set of fonts, Microsoft started Core fonts for the Web initiative. The released fonts include Arial, Georgia, Times New Roman, and Verdana under an EULA which made them freely distributable. Their high penetration rate has made them a staple for web designers. CSS2 attempted to increase the tools available to web developers by adding font synthesis, improved font matching and the ability to download remote fonts.[Some CSS2 font properties were removed from CSS2.1 and later included in CSS3. Web-safe fonts Web-safe fonts are fonts likely to be present on a wide range of computer systems, and used by web content authors to increase the likelihood that content will be displayed in their chosen font. If a visitor to a website does not have the specified font, their browser will attempt to select a similar alternative, based on the author-specified fallback fonts and generic families. font web safe usabili mac/win: 60venerdì 1 giugno 12
  202. 202. Web Communication and Social Media - Media design 03 2012 Webfonts Webfonts are font files embedded in websites using the @font-face rule. This technique was first available in Netscape Navigator 4 using Bitstreams TrueDoc standard but was discontinued in Netscape Navigator 6. Microsoft developed the Embedded OpenType format (.eot) which is supported in Internet Explorer since version 4. In march 2008 Apple introduced Safari 3.1 which supports the @font-face rule, but it doesnt use any of the previously mentioned formats, but the popular font formats TrueType and OpenType (with TrueType or PostScript outlines). Other browser makers are following Apples lead. Firefox 3.5 and Opera 10 will also support direct linking of TrueType and OpenType fonts using the @font-face rule Commercial fonts can often not be embedded in website using the @font-face rule, because the font files need to be uploaded to a public server, where they could be downloaded by anyone. Some font vendors allow the embedding of EOT files, but not TrueType or OpenType. You need the check the End User License Agreement (EULA) of the font vendor before embedding a font in your website.. http://www.webfonts.info/ http://www.webfonts.info/wiki/index.php? title=Fonts_available_for_@font-face_embeddingvenerdì 1 giugno 12
  203. 203. Web Communication and Social Media - Media design 03 2012 http://code.google.com/apis/webfonts/venerdì 1 giugno 12
  204. 204. Web Communication and Social Media - Media design 03 2012 http://www.google.com/webfonts/venerdì 1 giugno 12
  205. 205. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  206. 206. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  207. 207. Web Communication and Social Media - Media design 03 2012venerdì 1 giugno 12
  208. 208. Web Communication and Social Media - Media design 03 2012 http://typekit.com/venerdì 1 giugno 12
  209. 209. Web Communication and Social Media - Media design 03 2012 http://typekit.com/venerdì 1 giugno 12
  210. 210. Web Communication and Social Media - Media design 03 2012 http://blog.typekit.com/venerdì 1 giugno 12
  211. 211. Web Communication and Social Media - Media design 03 2012 http://blog.typekit.com/venerdì 1 giugno 12
  212. 212. Web Communication and Social Media - Media design 03 2012 http://blog.typekit.com/venerdì 1 giugno 12
  213. 213. Web Communication and Social Media - Media design 03 2012 http://typekit.com/venerdì 1 giugno 12
  214. 214. Web Communication and Social Media - Media design 03 2012 Typography/Fonts http://www.typotheque.com/site/index.phpvenerdì 1 giugno 12
  215. 215. Web Communication and Social Media - Media design 03 2012 http://www.extensis.com/en/WebINK/venerdì 1 giugno 12
  216. 216. Web Communication and Social Media - Media design 03 2012 Templates per Blog wordpressvenerdì 1 giugno 12
  217. 217. Web Communication and Social Media - Media design 03 2012 Templates per Blog wordpressvenerdì 1 giugno 12
  218. 218. Web Communication and Social Media - Media design 03 2012 Templates per Blog Tumblrvenerdì 1 giugno 12
  219. 219. Web Communication and Social Media - Media design 03 2012 http://ilovetypography.com/venerdì 1 giugno 12
  220. 220. Web Communication and Social Media - Media design 03 2012 http://www.newyorker.com/venerdì 1 giugno 12
  221. 221. Web Communication and Social Media - Media design 03 2012 http://blog.typekit.com/2010/11/30/bring-your-own-fonts-to-typekit/venerdì 1 giugno 12
  222. 222. Web Communication and Social Media - Media design 03 2012 http://webtypography.net/venerdì 1 giugno 12
  223. 223. Web Communication and Social Media - Media design 03 2012 http://www.ogilvy.com/venerdì 1 giugno 12
  224. 224. Web Communication and Social Media - Media design 03 2012 http://imagemechanics.com.au/#!/pages/our-storyvenerdì 1 giugno 12
  225. 225. Web Communication and Social Media -- Media design 03 Web Communication and Social Media Media design 03 2012 http://newsmap.jp/venerdì 1 giugno 12
  226. 226. Web Communication and Social Media - Media design 03 2012 http://carsonified.com/events/venerdì 1 giugno 12
  227. 227. Web Communication and Social Media - Media design 03 2012 Typography/Fonts http://www.organicgrid.com/venerdì 1 giugno 12
  228. 228. Web Communication and Social Media - Media design 03 2012 Typography/Fonts http://www.alistapart.com/venerdì 1 giugno 12
  229. 229. Web Communication and Social Media - Media design 03 2012 Typography/Fonts Tools http://new.myfonts.com/WhatTheFont/ what font?venerdì 1 giugno 12
  230. 230. Web Communication and Social Media - Media design 03 2012 Typography/Fonts Tools http://new.myfonts.com/WhatTheFont/venerdì 1 giugno 12
  231. 231. Web Communication and Social Media - Media design 03 2012 Typography/Fonts Tools http://new.myfonts.com/WhatTheFont/venerdì 1 giugno 12
  232. 232. Web Communication and Social Media - Media design 03 2012 Typography/Fonts Tools http://itunes.apple.com/it/app/whatthefont/id304304134?mt=8venerdì 1 giugno 12
  233. 233. Web Communication and Social Media - Media design 03 2012 Typography/Fonts Tools http://fontstruct.fontshop.com/venerdì 1 giugno 12
  234. 234. Web Communication and Social Media - Media design 03 2012 Typography/Fonts Tools http://fontstruct.fontshop.com/venerdì 1 giugno 12
  235. 235. Web Communication and Social Media - Media design 03 2012 Typography/Fonts Tools http://fontstruct.fontshop.com/venerdì 1 giugno 12
  236. 236. Web Communication and Social Media - Media design 03 2012 Typography/Fonts Tools http://typenav.fontshop.com/venerdì 1 giugno 12
  237. 237. Web Communication and Social Media - Media design 03 2012 Typography/Fonts Tools http://itunes.apple.com/it/app/fontshuffle/id298268157?mt=8 FontShufflevenerdì 1 giugno 12
  238. 238. Web Communication and Social Media - Media design 03 2012 Typography/Fonts Tools http://www.identifont.com/identify.htmlvenerdì 1 giugno 12
  239. 239. Web Communication and Social Media - Media design 03 2012 Typography/Fonts Tools http://www.typetester.org/venerdì 1 giugno 12
  240. 240. Web Communication and Social Media - Media design 03 2012 Typography/Fonts Tools http://csstypeset.com/ http://www.suprb.com/apps/csstype/ http://csstxt.com/venerdì 1 giugno 12
  241. 241. Web Communication and Social Media - Media design 03 2012 http://www.codestyle.org/ Typography/Fonts Tools http://www.codestyle.org/css/font-family/index.shtmlvenerdì 1 giugno 12
  242. 242. Web Communication and Social Media - Media design 03 2012 Typography/Fonts Tools http://www.fontshop.com./venerdì 1 giugno 12
  243. 243. Web Communication and Social Media - Media design 03 2012 Typography/Fonts Tools http://www.linotype.com/venerdì 1 giugno 12
  244. 244. Web Communication and Social Media - Media design 03 2012 Typography/Fonts Tools http://www.adobe.com/type/fontfinder/venerdì 1 giugno 12
  245. 245. Web Communication and Social Media - Media design 03 2012 Typography/Fonts Tools http://www.adobe.com/type/venerdì 1 giugno 12
  246. 246. Web Communication and Social Media - Media design 03 2012 Typography/Fonts Tools http://www.emigre.com/venerdì 1 giugno 12
  247. 247. Web Communication and Social Media - Media design 03 2012 Typography/Fonts Tools http://new.myfonts.com/venerdì 1 giugno 12
  248. 248. Web Communication and Social Media - Media design 03 2012 Typography/Fonts Tools http://new.myfonts.com/venerdì 1 giugno 12
  249. 249. Web Communication and Social Media - Media design 03 2012 Typography/Fonts Tools http://www.itcfonts.com/venerdì 1 giugno 12
  250. 250. Web Communication and Social Media - Media design 03 2012 Typography/Fonts Tools http://www.dafont.com/venerdì 1 giugno 12
  251. 251. Web Communication and Social Media - Media design 03 2012 Typography/Fonts Tools http://www.urbanfonts.com/venerdì 1 giugno 12
  252. 252. Web Communication and Social Media - Media design 03 2012 http://www.youworkforthem.com/venerdì 1 giugno 12
  253. 253. Web Communication and Social Media - Media design 03 2012 http://www.youworkforthem.com/venerdì 1 giugno 12
  254. 254. Web Communication and Social Media - Media design 03 2012 http://www.youworkforthem.com/blog/2011/01/06/top-10-fonts-of-2010/venerdì 1 giugno 12
  255. 255. Web Communication and Social Media - Media design 03 2012 http://www.youworkforthem.com/blog/2011/01/06/top-10-fonts-of-2010/venerdì 1 giugno 12
  256. 256. Web Communication and Social Media - Media design 03 2012 http://www.youworkforthem.com/blog/2011/01/06/top-10-fonts-of-2010/venerdì 1 giugno 12
  257. 257. Web Communication and Social Media - Media design 03 2012 http://www.youworkforthem.com/blog/2011/01/06/top-10-fonts-of-2010/venerdì 1 giugno 12
  258. 258. Web Communication and Social Media - Media design 03 2012 http://www.youworkforthem.com/blog/2011/01/06/top-10-fonts-of-2010/venerdì 1 giugno 12

×