SlideShare uma empresa Scribd logo
1 de 262
Baixar para ler offline
web communication
                      e social media




                         Media
                      Design 03
                        Web Design
                        per i Social Media



venerdì 1 giugno 12
Web Communication and Social Media - Media design 03               2012

                                                     La tradizione della tipografia e della stampa




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03         2012


                              Il Web “tradizionale” usa ancora la metafora della pagina




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03         2012


                              Il Web “tradizionale” usa ancora la metafora della pagina




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03         2012


                              Il Web “tradizionale” usa ancora la metafora della pagina




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03                     2012

                                                                             http://www.london2012.com/




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03                       2012

                                                                       http://www.loisjeans.com/web2012/es




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03                       2012

                                                                       http://www.loisjeans.com/web2012/es




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03                         2012

                                                                             http://www.bluezonesproject.com/




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03                       2012

                                                                   http://beta.theexpressiveweb.com/




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03                       2012

                                                                   http://beta.theexpressiveweb.com/




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03                       2012

                                                                   http://beta.theexpressiveweb.com/




venerdì 1 giugno 12
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/IT




venerdì 1 giugno 12
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/IT




venerdì 1 giugno 12
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/IT




venerdì 1 giugno 12
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.html




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03            2012



         Web Design / site production

                                               Interaction Design




                                                                                               Interaction Design




venerdì 1 giugno 12
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
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
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
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
Web Communication and Social Media - Media design 03   2012




                                 Interaction Design




                             Interaction Design new Patterns
venerdì 1 giugno 12
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
                                                                               community


venerdì 1 giugno 12
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 community



venerdì 1 giugno 12
Web Communication and Social Media - Media design 03               2012




                      progettare PER gli utenti
                                                                                      Target




                      progettare CON gli utenti
              User Centered Design                                           Social Media Design




venerdì 1 giugno 12
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
                                                                                 continua

venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012



                      cambio di prospettiva nel progetto del Social Web




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
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 photos




venerdì 1 giugno 12
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/Star



venerdì 1 giugno 12
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
                                                                             •   Stelloni




venerdì 1 giugno 12
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
                                                                             •   Stelloni




venerdì 1 giugno 12
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
                                                                             •   Stelloni




venerdì 1 giugno 12
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
                                                                             •   Stelloni




venerdì 1 giugno 12
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
                                                                             •   Stelloni




venerdì 1 giugno 12
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
                                                                             •   Stelloni




venerdì 1 giugno 12
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
                                                                             •   Stelloni




venerdì 1 giugno 12
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
                                                                             •   Stelloni




venerdì 1 giugno 12
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
                                                                             •   Stelloni




venerdì 1 giugno 12
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
                                                                             •   Stelloni




venerdì 1 giugno 12
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
                                                                             •   Stelloni




venerdì 1 giugno 12
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
                                                                             •   Stelloni




venerdì 1 giugno 12
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
                                                                             •   Stelloni




venerdì 1 giugno 12
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
                                                                             •   Stelloni




venerdì 1 giugno 12
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
                                                                             •   Stelloni




venerdì 1 giugno 12
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
                                                                             •   Stelloni




venerdì 1 giugno 12
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
                                                                             •   Stelloni




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03                       2012




                          Web 2.0 Style                                      http://theconversationprism.com/click/




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03                2012




                          Web 2.0 Style                                      http://www.go2web20.net/




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03             2012




                          Web 2.0 Style                                      http://mashable.com/




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03                      2012




                          Web 2.0 Style                                      http://momb.socio-kybernetics.net/




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03                2012


                                                                             http://emilychang.com/ehub/
                          Web 2.0 Style




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03                2012


                                                                             http://emilychang.com/ehub/
                          Web 2.0 Style




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03     2012



                                                             http://youtu.be/9TGkDHzqUaQ




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03          2012


                                                                   mappa del sito /flowchart




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03          2012


                                                                   mappa del sito /flowchart




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03          2012


                                                                   mappa del sito /flowchart




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03          2012


                                                                   mappa del sito /flowchart




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03    2012


                                                                             flowchart




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03    2012




                                                                             78
venerdì 1 giugno 12
Web Communication and Social Media - Media design 03    2012




                                                                             78
venerdì 1 giugno 12
Web Communication and Social Media - Media design 03             2012


                                                                       flowchart delle azioni




venerdì 1 giugno 12
Web Communication and Social Media -- Media design 03
                      Web Communication and Social Media Media design 03                2012




                                                                              flowchart dei processi




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03             2012


                                                                        flowchart friendfeed




venerdì 1 giugno 12
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
Web Communication and Social Media - Media design 03               2012


                                                                             flowchart post




                                                                http://www.asce.org/followasce/




venerdì 1 giugno 12
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.html
venerdì 1 giugno 12
Web Communication and Social Media -- Media design 03
                      Web Communication and Social Media Media design 03         2012




                                                                              Social Media


venerdì 1 giugno 12
Web Communication and Social Media -- Media design 03
                      Web Communication and Social Media Media design 03         2012




                                                                              Social Media


venerdì 1 giugno 12
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 Media

venerdì 1 giugno 12
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 Media

venerdì 1 giugno 12
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 Media

venerdì 1 giugno 12
Web Communication and Social Media -- Media design 03
                      Web Communication and Social Media Media design 03         2012




                                                                              Social Media


venerdì 1 giugno 12
Web Communication and Social Media - Media design 03                        2012


                          Community Management Scenario Map                  flowchart post




                                                                                  by David Armano - @Armano

venerdì 1 giugno 12
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 - @Armano

venerdì 1 giugno 12
Web Communication and Social Media - Media design 03               2012


                          Community Management Scenario Map                  flowchart post




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03               2012


                          Community Management Scenario Map                  flowchart post




venerdì 1 giugno 12
Web Communication and Social Media -- Media design 03
                      Web Communication and Social Media Media design 03                  2012


                          Community Management Scenario Map                   flowchart post




venerdì 1 giugno 12
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
Web Communication and Social Media -- Media design 03
                      Web Communication and Social Media Media design 03      2012




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
Web Communication and Social Media -- Media design 03
                      Web Communication and Social Media Media design 03      2012




venerdì 1 giugno 12
Web Communication and Social Media -- Media design 03
                      Web Communication and Social Media Media design 03      2012




                      http://socialmediatoday.com
venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012

                            http://sportfanconnect.com/




                      http://socialmediatoday.com
venerdì 1 giugno 12
Web Communication and Social Media -- Media design 03
                      Web Communication and Social Media Media design 03      2012



                       http://www.stampsconnect.com/




                      http://socialmediatoday.com
venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03             2012




                                                           Social Media Adoption Decision Flowchart




venerdì 1 giugno 12
Tools
                      Web Communication and Social Media - Media design 03                        2012

                        strutturare lo spazio/wireframing/mockups




                                                    +                                       +




                                                                  Il primo prototipo di Twitter




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012


                          strutturare lo spazio/wireframing/mockups




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012


                          strutturare lo spazio/wireframing/mockups




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012


                          strutturare lo spazio/wireframing/mockups




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012


                          strutturare lo spazio/wireframing/mockups




venerdì 1 giugno 12
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, wireframes




venerdì 1 giugno 12
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, wireframes




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012


                         http://www.lovelycharts.com/




venerdì 1 giugno 12
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/online




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03        2012


                                                                   http://www.mockflow.com/




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03        2012


                                                                   http://www.mockflow.com/




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03        2012


                                                                   http://www.mockflow.com/




                            http://www.youtube.com/watch?v=sqF0AWam-Cg


venerdì 1 giugno 12
Web Communication and Social Media - Media design 03        2012


                                                                   http://www.mockflow.com/




                             http://www.youtube.com/watch?v=U8rgQyUVMKY


venerdì 1 giugno 12
Web Communication and Social Media - Media design 03        2012


                                                                   http://www.mockflow.com/




             http://www.youtube.com/watch?v=4Vk2B-jWzyQ

venerdì 1 giugno 12
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 / desktop




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03            2012


                                                                       http://www.balsamiq.com/




       http://www.youtube.com/watch?v=aJTuFRaIi_g


venerdì 1 giugno 12
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
                                                                    Mockingbird

venerdì 1 giugno 12
Web Communication and Social Media - Media design 03           2012

                        strutturare lo spazio/wireframing/mockups            Tools



                                                                                            iMockups




                                     http://www.youtube.com/watch?v=LOyIVqJcGfc


venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




           http://www.youtube.com/watch?v=hII6AbGrWR8

venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012


                                      Progetto comunicazione visiva / Layout




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012


                                       Progetto comunicazione visiva Layout




venerdì 1 giugno 12
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
                                  content


venerdì 1 giugno 12
Web Communication and Social Media - Media design 03                  2012


                      Typography/Fonts                                        i caratteri hanno carattere




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012



                      Typography/Fonts




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03      2012


                      Typography/Fonts



                                                                             Garamond




                                                                                Bodoni




                                                                             Times New Roman




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012



                      Typography/Fonts




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012


                      Typography/Fonts




                       ordini di composizione

venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




      famiglie

venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03                   2012


                      Typography/Fonts                                       grigio tipografico




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03                   2012


                      Typography/Fonts                                       grigio tipografico




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03                   2012


                      Typography/Fonts                                       grigio tipografico




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03                      2012


                      Typography/Fonts                                       disegnare con il testo




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03                      2012


                      Typography/Fonts                                       disegnare con il testo




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03                      2012


                      Typography/Fonts                                       disegnare con il testo




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03                      2012


                      Typography/Fonts                                       disegnare con il testo




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012



                      Typography/Fonts




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012



                      Typography/Fonts




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012



                      Typography/Fonts




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012



                      Typography/Fonts




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
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
                                                          DRM

venerdì 1 giugno 12
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
                              Microsoft's Core fonts for the Web (1996 - 2002)
                  Since being released under Microsoft's 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: 60

venerdì 1 giugno 12
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 Bitstream's
             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 doesn't 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 Apple's 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_embedding


venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




                                          http://code.google.com/apis/webfonts/




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03      2012



                                                           http://www.google.com/webfonts/




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03          2012




                                                                             http://typekit.com/




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03          2012




                                                                             http://typekit.com/




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03                2012



                                                                             http://blog.typekit.com/




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03                2012



                                                                             http://blog.typekit.com/




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03                2012



                                                                             http://blog.typekit.com/




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03           2012




                                                                             http://typekit.com/




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03             2012



                      Typography/Fonts                      http://www.typotheque.com/site/index.php




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03                  2012


                                                                         http://www.extensis.com/en/WebINK/




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03             2012


                                                                             Templates per Blog
                                                                                        wordpress




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03             2012


                                                                             Templates per Blog
                                                                                        wordpress




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03      2012


                                                           Templates per Blog
                                                                Tumblr




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03        2012



                                                             http://ilovetypography.com/




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03      2012


                                                            http://www.newyorker.com/




venerdì 1 giugno 12
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
Web Communication and Social Media - Media design 03             2012



                                                                        http://webtypography.net/




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012




        http://www.ogilvy.com/

venerdì 1 giugno 12
Web Communication and Social Media - Media design 03     2012


                                  http://imagemechanics.com.au/#!/pages/our-story




venerdì 1 giugno 12
Web Communication and Social Media -- Media design 03
                      Web Communication and Social Media Media design 03      2012




                                                                              http://newsmap.jp/
venerdì 1 giugno 12
Web Communication and Social Media - Media design 03     2012


                                                      http://carsonified.com/events/




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03              2012



                      Typography/Fonts




                                                          http://www.organicgrid.com/

venerdì 1 giugno 12
Web Communication and Social Media - Media design 03            2012




               Typography/Fonts                                       http://www.alistapart.com/




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03             2012



                 Typography/Fonts Tools                          http://new.myfonts.com/WhatTheFont/




                                                                                              what font?




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03             2012



                 Typography/Fonts Tools                          http://new.myfonts.com/WhatTheFont/




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03             2012



                 Typography/Fonts Tools                          http://new.myfonts.com/WhatTheFont/




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03                 2012



                 Typography/Fonts Tools




                                       http://itunes.apple.com/it/app/whatthefont/id304304134?mt=8



venerdì 1 giugno 12
Web Communication and Social Media - Media design 03          2012



                 Typography/Fonts Tools                          http://fontstruct.fontshop.com/




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03          2012



                 Typography/Fonts Tools                          http://fontstruct.fontshop.com/




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03          2012



                 Typography/Fonts Tools                          http://fontstruct.fontshop.com/




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03         2012



                 Typography/Fonts Tools                         http://typenav.fontshop.com/




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03                              2012



                 Typography/Fonts Tools                           http://itunes.apple.com/it/app/fontshuffle/id298268157?mt=8




                                        FontShuffle




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03                 2012



                 Typography/Fonts Tools                            http://www.identifont.com/identify.html




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03             2012



                 Typography/Fonts Tools                                http://www.typetester.org/




venerdì 1 giugno 12
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
Web Communication and Social Media - Media design 03                       2012

                                                                             http://www.codestyle.org/
                 Typography/Fonts Tools                          http://www.codestyle.org/css/font-family/index.shtml




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03            2012



                 Typography/Fonts Tools                                http://www.fontshop.com./




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03             2012



                 Typography/Fonts Tools                                 http://www.linotype.com/




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03               2012



                 Typography/Fonts Tools                           http://www.adobe.com/type/fontfinder/




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03         2012



                 Typography/Fonts Tools                           http://www.adobe.com/type/




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03                2012



                 Typography/Fonts Tools                                      http://www.emigre.com/




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03               2012



                 Typography/Fonts Tools                                      http://new.myfonts.com/




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03               2012



                 Typography/Fonts Tools                                      http://new.myfonts.com/




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03                 2012



                 Typography/Fonts Tools                                      http://www.itcfonts.com/




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03                2012



                 Typography/Fonts Tools                                      http://www.dafont.com/




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03         2012



                 Typography/Fonts Tools                           http://www.urbanfonts.com/




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012


                                         http://www.youworkforthem.com/




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03   2012


                                         http://www.youworkforthem.com/




venerdì 1 giugno 12
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
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
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
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
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
Web Communication and Social Media - Media design 03                     2012



                 Typography/Fonts Tools                          http://www.storyabout.net/typedrawing/index.php




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03                                 2012



                 Typography/Fonts Tools                           http://itunes.apple.com/it/app/type-drawing/id314072879?mt=8




venerdì 1 giugno 12
Web Communication and Social Media - Media design 03                                   2012



                 Typography/Fonts Tools                                           http://www.wordle.net/




                                              http://www.quirinale.it/elementi/Continua.aspx?tipo=Discorso&key=1820
                                              Testo integrale del messaggio del Presidente Napolitano alle
                                              Camere sulla Legge in materia di lavoro

                                              Palazzo del Quirinale, 31/03/2010




venerdì 1 giugno 12
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




venerdì 1 giugno 12

Mais conteúdo relacionado

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

Fabrizio e Alessandro (Gummy Industries): Community Design
Fabrizio e Alessandro (Gummy Industries): Community DesignFabrizio e Alessandro (Gummy Industries): Community Design
Fabrizio e Alessandro (Gummy Industries): Community DesignDigital Accademia
 
Uso professionale dei Social Network
Uso professionale dei Social NetworkUso professionale dei Social Network
Uso professionale dei Social NetworkCreeo Studio
 
Iulm prima-analisi-ii modulo
Iulm prima-analisi-ii moduloIulm prima-analisi-ii modulo
Iulm prima-analisi-ii moduloDML Srl
 
Output analisi desk gennaio 2013
Output analisi desk gennaio 2013Output analisi desk gennaio 2013
Output analisi desk gennaio 2013Social Minds
 
Appunti di Social Media e SM Marketing (11-2012)
Appunti di Social Media e SM Marketing (11-2012)Appunti di Social Media e SM Marketing (11-2012)
Appunti di Social Media e SM Marketing (11-2012)EngiMedia
 
New & Social Media - MGM Digital Communication
New & Social Media - MGM Digital CommunicationNew & Social Media - MGM Digital Communication
New & Social Media - MGM Digital CommunicationAsseprim
 
Digital strategy e Social media mix – Michele Polico & Marco Pezzano
Digital strategy e Social media mix – Michele Polico & Marco PezzanoDigital strategy e Social media mix – Michele Polico & Marco Pezzano
Digital strategy e Social media mix – Michele Polico & Marco PezzanoYoung Digital Lab
 
Social Business - un nuovo modo di fare impresa
Social Business - un nuovo modo di fare impresaSocial Business - un nuovo modo di fare impresa
Social Business - un nuovo modo di fare impresaFabrizio Martire
 
Nuovi strumenti e nuove competenze per la didattica: Social network, ebook, L...
Nuovi strumenti e nuove competenze per la didattica: Social network, ebook, L...Nuovi strumenti e nuove competenze per la didattica: Social network, ebook, L...
Nuovi strumenti e nuove competenze per la didattica: Social network, ebook, L...Caterina Policaro
 
Visual Design in Exhibition Culture
Visual Design in Exhibition CultureVisual Design in Exhibition Culture
Visual Design in Exhibition CultureMichela Sarzotti
 
GreenFleet e Web 2.0: i social network a supporto della mobilità sostenibile
GreenFleet e Web 2.0: i social network a supporto della mobilità sostenibileGreenFleet e Web 2.0: i social network a supporto della mobilità sostenibile
GreenFleet e Web 2.0: i social network a supporto della mobilità sostenibileFLEETBLOG
 
Social Media Analytics e misurazione dei risultati - Marco Pezzano
Social Media Analytics e misurazione dei risultati - Marco PezzanoSocial Media Analytics e misurazione dei risultati - Marco Pezzano
Social Media Analytics e misurazione dei risultati - Marco PezzanoYoung Digital Lab
 
Online reputation management
Online reputation managementOnline reputation management
Online reputation managementDML Srl
 
Buone pratiche di progettazione per i siti web della PA. Tutto quello che av...
Buone pratiche di progettazione  per i siti web della PA. Tutto quello che av...Buone pratiche di progettazione  per i siti web della PA. Tutto quello che av...
Buone pratiche di progettazione per i siti web della PA. Tutto quello che av...dario betti
 
Lavori digitali: il Social Media Manager
Lavori digitali: il Social Media ManagerLavori digitali: il Social Media Manager
Lavori digitali: il Social Media ManagerCarmine Zaccaro
 
Social Che? #bit2012
Social Che? #bit2012Social Che? #bit2012
Social Che? #bit2012Fabio Lalli
 
22. Conclusione del corso
22. Conclusione del corso22. Conclusione del corso
22. Conclusione del corsoRoberto Polillo
 

Semelhante a Social media design 03 2012 - Web Design Per i Social Media (20)

Fabrizio e Alessandro (Gummy Industries): Community Design
Fabrizio e Alessandro (Gummy Industries): Community DesignFabrizio e Alessandro (Gummy Industries): Community Design
Fabrizio e Alessandro (Gummy Industries): Community Design
 
Uso professionale dei Social Network
Uso professionale dei Social NetworkUso professionale dei Social Network
Uso professionale dei Social Network
 
Iulm prima-analisi-ii modulo
Iulm prima-analisi-ii moduloIulm prima-analisi-ii modulo
Iulm prima-analisi-ii modulo
 
Corso giornalisti: "Uffici stampa e web 2.0"
Corso giornalisti: "Uffici stampa e web 2.0"Corso giornalisti: "Uffici stampa e web 2.0"
Corso giornalisti: "Uffici stampa e web 2.0"
 
Output analisi desk gennaio 2013
Output analisi desk gennaio 2013Output analisi desk gennaio 2013
Output analisi desk gennaio 2013
 
Appunti di Social Media e SM Marketing (11-2012)
Appunti di Social Media e SM Marketing (11-2012)Appunti di Social Media e SM Marketing (11-2012)
Appunti di Social Media e SM Marketing (11-2012)
 
New & Social Media - MGM Digital Communication
New & Social Media - MGM Digital CommunicationNew & Social Media - MGM Digital Communication
New & Social Media - MGM Digital Communication
 
Digital strategy e Social media mix – Michele Polico & Marco Pezzano
Digital strategy e Social media mix – Michele Polico & Marco PezzanoDigital strategy e Social media mix – Michele Polico & Marco Pezzano
Digital strategy e Social media mix – Michele Polico & Marco Pezzano
 
Social Business - un nuovo modo di fare impresa
Social Business - un nuovo modo di fare impresaSocial Business - un nuovo modo di fare impresa
Social Business - un nuovo modo di fare impresa
 
Nuovi strumenti e nuove competenze per la didattica: Social network, ebook, L...
Nuovi strumenti e nuove competenze per la didattica: Social network, ebook, L...Nuovi strumenti e nuove competenze per la didattica: Social network, ebook, L...
Nuovi strumenti e nuove competenze per la didattica: Social network, ebook, L...
 
Lezione social media banco di sardegna final
Lezione social media banco di sardegna finalLezione social media banco di sardegna final
Lezione social media banco di sardegna final
 
Visual Design in Exhibition Culture
Visual Design in Exhibition CultureVisual Design in Exhibition Culture
Visual Design in Exhibition Culture
 
GreenFleet e Web 2.0: i social network a supporto della mobilità sostenibile
GreenFleet e Web 2.0: i social network a supporto della mobilità sostenibileGreenFleet e Web 2.0: i social network a supporto della mobilità sostenibile
GreenFleet e Web 2.0: i social network a supporto della mobilità sostenibile
 
Social Media Analytics e misurazione dei risultati - Marco Pezzano
Social Media Analytics e misurazione dei risultati - Marco PezzanoSocial Media Analytics e misurazione dei risultati - Marco Pezzano
Social Media Analytics e misurazione dei risultati - Marco Pezzano
 
Online reputation management
Online reputation managementOnline reputation management
Online reputation management
 
Buone pratiche di progettazione per i siti web della PA. Tutto quello che av...
Buone pratiche di progettazione  per i siti web della PA. Tutto quello che av...Buone pratiche di progettazione  per i siti web della PA. Tutto quello che av...
Buone pratiche di progettazione per i siti web della PA. Tutto quello che av...
 
Lavori digitali: il Social Media Manager
Lavori digitali: il Social Media ManagerLavori digitali: il Social Media Manager
Lavori digitali: il Social Media Manager
 
Social Che? #bit2012
Social Che? #bit2012Social Che? #bit2012
Social Che? #bit2012
 
Le nuove frontiere della comunicazione digitale
Le nuove frontiere della comunicazione digitaleLe nuove frontiere della comunicazione digitale
Le nuove frontiere della comunicazione digitale
 
22. Conclusione del corso
22. Conclusione del corso22. Conclusione del corso
22. Conclusione del corso
 

Mais de Cristian Contini

Lettura veloce 2.0 - Internet Festival 2014
Lettura veloce 2.0 -   Internet Festival 2014Lettura veloce 2.0 -   Internet Festival 2014
Lettura veloce 2.0 - Internet Festival 2014Cristian Contini
 
Augmented Reality: scrivere nell'aria
Augmented Reality: scrivere nell'ariaAugmented Reality: scrivere nell'aria
Augmented Reality: scrivere nell'ariaCristian Contini
 
#selfiedfi - Instagram Power Workshop
#selfiedfi - Instagram Power Workshop#selfiedfi - Instagram Power Workshop
#selfiedfi - Instagram Power WorkshopCristian Contini
 
IED Social media 2012: CV, RESUME REPUTATION
IED Social media 2012: CV, RESUME REPUTATIONIED Social media 2012: CV, RESUME REPUTATION
IED Social media 2012: CV, RESUME REPUTATIONCristian Contini
 

Mais de Cristian Contini (6)

Lettura veloce 2.0 - Internet Festival 2014
Lettura veloce 2.0 -   Internet Festival 2014Lettura veloce 2.0 -   Internet Festival 2014
Lettura veloce 2.0 - Internet Festival 2014
 
Augmented Reality: scrivere nell'aria
Augmented Reality: scrivere nell'ariaAugmented Reality: scrivere nell'aria
Augmented Reality: scrivere nell'aria
 
#selfiedfi - Instagram Power Workshop
#selfiedfi - Instagram Power Workshop#selfiedfi - Instagram Power Workshop
#selfiedfi - Instagram Power Workshop
 
IED Social media 2012: CV, RESUME REPUTATION
IED Social media 2012: CV, RESUME REPUTATIONIED Social media 2012: CV, RESUME REPUTATION
IED Social media 2012: CV, RESUME REPUTATION
 
Social Media Design 04
Social Media Design 04Social Media Design 04
Social Media Design 04
 
My Social Ego
My Social EgoMy Social Ego
My Social Ego
 

Último

Lorenzo D'Emidio_Vita di Cristoforo Colombo.pptx
Lorenzo D'Emidio_Vita di Cristoforo Colombo.pptxLorenzo D'Emidio_Vita di Cristoforo Colombo.pptx
Lorenzo D'Emidio_Vita di Cristoforo Colombo.pptxlorenzodemidio01
 
Quadrilateri e isometrie studente di liceo
Quadrilateri e isometrie studente di liceoQuadrilateri e isometrie studente di liceo
Quadrilateri e isometrie studente di liceoyanmeng831
 
Confronto tra Sparta e Atene classiche.ppt
Confronto tra Sparta e Atene classiche.pptConfronto tra Sparta e Atene classiche.ppt
Confronto tra Sparta e Atene classiche.pptcarlottagalassi
 
Presentazioni Efficaci e lezioni di Educazione Civica
Presentazioni Efficaci e lezioni di Educazione CivicaPresentazioni Efficaci e lezioni di Educazione Civica
Presentazioni Efficaci e lezioni di Educazione CivicaSalvatore Cianciabella
 
Lorenzo D'Emidio_Francesco Petrarca.pptx
Lorenzo D'Emidio_Francesco Petrarca.pptxLorenzo D'Emidio_Francesco Petrarca.pptx
Lorenzo D'Emidio_Francesco Petrarca.pptxlorenzodemidio01
 
Lorenzo D'Emidio_Vita e opere di Aristotele.pptx
Lorenzo D'Emidio_Vita e opere di Aristotele.pptxLorenzo D'Emidio_Vita e opere di Aristotele.pptx
Lorenzo D'Emidio_Vita e opere di Aristotele.pptxlorenzodemidio01
 
Lorenzo D'Emidio- Lavoro sulla Bioarchittetura.pptx
Lorenzo D'Emidio- Lavoro sulla Bioarchittetura.pptxLorenzo D'Emidio- Lavoro sulla Bioarchittetura.pptx
Lorenzo D'Emidio- Lavoro sulla Bioarchittetura.pptxlorenzodemidio01
 

Último (7)

Lorenzo D'Emidio_Vita di Cristoforo Colombo.pptx
Lorenzo D'Emidio_Vita di Cristoforo Colombo.pptxLorenzo D'Emidio_Vita di Cristoforo Colombo.pptx
Lorenzo D'Emidio_Vita di Cristoforo Colombo.pptx
 
Quadrilateri e isometrie studente di liceo
Quadrilateri e isometrie studente di liceoQuadrilateri e isometrie studente di liceo
Quadrilateri e isometrie studente di liceo
 
Confronto tra Sparta e Atene classiche.ppt
Confronto tra Sparta e Atene classiche.pptConfronto tra Sparta e Atene classiche.ppt
Confronto tra Sparta e Atene classiche.ppt
 
Presentazioni Efficaci e lezioni di Educazione Civica
Presentazioni Efficaci e lezioni di Educazione CivicaPresentazioni Efficaci e lezioni di Educazione Civica
Presentazioni Efficaci e lezioni di Educazione Civica
 
Lorenzo D'Emidio_Francesco Petrarca.pptx
Lorenzo D'Emidio_Francesco Petrarca.pptxLorenzo D'Emidio_Francesco Petrarca.pptx
Lorenzo D'Emidio_Francesco Petrarca.pptx
 
Lorenzo D'Emidio_Vita e opere di Aristotele.pptx
Lorenzo D'Emidio_Vita e opere di Aristotele.pptxLorenzo D'Emidio_Vita e opere di Aristotele.pptx
Lorenzo D'Emidio_Vita e opere di Aristotele.pptx
 
Lorenzo D'Emidio- Lavoro sulla Bioarchittetura.pptx
Lorenzo D'Emidio- Lavoro sulla Bioarchittetura.pptxLorenzo D'Emidio- Lavoro sulla Bioarchittetura.pptx
Lorenzo D'Emidio- Lavoro sulla Bioarchittetura.pptx
 

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

  • 1. web communication e social media Media Design 03 Web Design per i Social Media venerdì 1 giugno 12
  • 2. Web Communication and Social Media - Media design 03 2012 La tradizione della tipografia e della stampa venerdì 1 giugno 12
  • 3. Web Communication and Social Media - Media design 03 2012 Il Web “tradizionale” usa ancora la metafora della pagina venerdì 1 giugno 12
  • 4. Web Communication and Social Media - Media design 03 2012 Il Web “tradizionale” usa ancora la metafora della pagina venerdì 1 giugno 12
  • 5. Web Communication and Social Media - Media design 03 2012 Il Web “tradizionale” usa ancora la metafora della pagina venerdì 1 giugno 12
  • 6. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 7. Web Communication and Social Media - Media design 03 2012 http://www.london2012.com/ venerdì 1 giugno 12
  • 8. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 9. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 10. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 11. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 12. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 13. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 14. Web Communication and Social Media - Media design 03 2012 http://www.loisjeans.com/web2012/es venerdì 1 giugno 12
  • 15. Web Communication and Social Media - Media design 03 2012 http://www.loisjeans.com/web2012/es venerdì 1 giugno 12
  • 16. Web Communication and Social Media - Media design 03 2012 http://www.bluezonesproject.com/ venerdì 1 giugno 12
  • 17. Web Communication and Social Media - Media design 03 2012 http://beta.theexpressiveweb.com/ venerdì 1 giugno 12
  • 18. Web Communication and Social Media - Media design 03 2012 http://beta.theexpressiveweb.com/ venerdì 1 giugno 12
  • 19. Web Communication and Social Media - Media design 03 2012 http://beta.theexpressiveweb.com/ venerdì 1 giugno 12
  • 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/IT venerdì 1 giugno 12
  • 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/IT venerdì 1 giugno 12
  • 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/IT venerdì 1 giugno 12
  • 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.html venerdì 1 giugno 12
  • 24. Web Communication and Social Media - Media design 03 2012 Web Design / site production Interaction Design Interaction Design venerdì 1 giugno 12
  • 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. 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. 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. 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. Web Communication and Social Media - Media design 03 2012 Interaction Design Interaction Design new Patterns venerdì 1 giugno 12
  • 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 community venerdì 1 giugno 12
  • 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 community venerdì 1 giugno 12
  • 32. Web Communication and Social Media - Media design 03 2012 progettare PER gli utenti Target progettare CON gli utenti User Centered Design Social Media Design venerdì 1 giugno 12
  • 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 continua venerdì 1 giugno 12
  • 34. Web Communication and Social Media - Media design 03 2012 cambio di prospettiva nel progetto del Social Web venerdì 1 giugno 12
  • 35. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 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 photos venerdì 1 giugno 12
  • 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/Star venerdì 1 giugno 12
  • 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 • Stelloni venerdì 1 giugno 12
  • 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 • Stelloni venerdì 1 giugno 12
  • 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 • Stelloni venerdì 1 giugno 12
  • 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 • Stelloni venerdì 1 giugno 12
  • 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 • Stelloni venerdì 1 giugno 12
  • 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 • Stelloni venerdì 1 giugno 12
  • 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 • Stelloni venerdì 1 giugno 12
  • 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 • Stelloni venerdì 1 giugno 12
  • 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 • Stelloni venerdì 1 giugno 12
  • 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 • Stelloni venerdì 1 giugno 12
  • 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 • Stelloni venerdì 1 giugno 12
  • 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 • Stelloni venerdì 1 giugno 12
  • 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 • Stelloni venerdì 1 giugno 12
  • 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 • Stelloni venerdì 1 giugno 12
  • 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 • Stelloni venerdì 1 giugno 12
  • 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 • Stelloni venerdì 1 giugno 12
  • 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 • Stelloni venerdì 1 giugno 12
  • 55. Web Communication and Social Media - Media design 03 2012 Web 2.0 Style http://theconversationprism.com/click/ venerdì 1 giugno 12
  • 56. Web Communication and Social Media - Media design 03 2012 Web 2.0 Style http://www.go2web20.net/ venerdì 1 giugno 12
  • 57. Web Communication and Social Media - Media design 03 2012 Web 2.0 Style http://mashable.com/ venerdì 1 giugno 12
  • 58. Web Communication and Social Media - Media design 03 2012 Web 2.0 Style http://momb.socio-kybernetics.net/ venerdì 1 giugno 12
  • 59. Web Communication and Social Media - Media design 03 2012 http://emilychang.com/ehub/ Web 2.0 Style venerdì 1 giugno 12
  • 60. Web Communication and Social Media - Media design 03 2012 http://emilychang.com/ehub/ Web 2.0 Style venerdì 1 giugno 12
  • 61. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 62. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 63. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 64. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 65. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 66. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 67. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 68. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 69. Web Communication and Social Media - Media design 03 2012 http://youtu.be/9TGkDHzqUaQ venerdì 1 giugno 12
  • 70. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 71. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 72. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 73. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 74. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 75. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 76. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 77. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 78. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 79. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 80. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 81. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 82. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 83. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 84. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 85. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 86. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 87. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 88. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 89. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 90. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 91. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 92. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 93. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 94. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 95. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 96. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 97. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 98. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 99. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 100. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 101. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 102. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 103. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 104. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 105. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 106. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 107. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 108. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 109. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 110. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 111. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 112. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 113. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 114. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 115. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 116. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 117. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 118. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 119. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 120. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 121. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 122. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 123. Web Communication and Social Media - Media design 03 2012 mappa del sito /flowchart venerdì 1 giugno 12
  • 124. Web Communication and Social Media - Media design 03 2012 mappa del sito /flowchart venerdì 1 giugno 12
  • 125. Web Communication and Social Media - Media design 03 2012 mappa del sito /flowchart venerdì 1 giugno 12
  • 126. Web Communication and Social Media - Media design 03 2012 mappa del sito /flowchart venerdì 1 giugno 12
  • 127. Web Communication and Social Media - Media design 03 2012 flowchart venerdì 1 giugno 12
  • 128. Web Communication and Social Media - Media design 03 2012 78 venerdì 1 giugno 12
  • 129. Web Communication and Social Media - Media design 03 2012 78 venerdì 1 giugno 12
  • 130. Web Communication and Social Media - Media design 03 2012 flowchart delle azioni venerdì 1 giugno 12
  • 131. Web Communication and Social Media -- Media design 03 Web Communication and Social Media Media design 03 2012 flowchart dei processi venerdì 1 giugno 12
  • 132. Web Communication and Social Media - Media design 03 2012 flowchart friendfeed venerdì 1 giugno 12
  • 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. Web Communication and Social Media - Media design 03 2012 flowchart post http://www.asce.org/followasce/ venerdì 1 giugno 12
  • 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.html venerdì 1 giugno 12
  • 136. Web Communication and Social Media -- Media design 03 Web Communication and Social Media Media design 03 2012 Social Media venerdì 1 giugno 12
  • 137. Web Communication and Social Media -- Media design 03 Web Communication and Social Media Media design 03 2012 Social Media venerdì 1 giugno 12
  • 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 Media venerdì 1 giugno 12
  • 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 Media venerdì 1 giugno 12
  • 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 Media venerdì 1 giugno 12
  • 141. Web Communication and Social Media -- Media design 03 Web Communication and Social Media Media design 03 2012 Social Media venerdì 1 giugno 12
  • 142. Web Communication and Social Media - Media design 03 2012 Community Management Scenario Map flowchart post by David Armano - @Armano venerdì 1 giugno 12
  • 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 - @Armano venerdì 1 giugno 12
  • 144. Web Communication and Social Media - Media design 03 2012 Community Management Scenario Map flowchart post venerdì 1 giugno 12
  • 145. Web Communication and Social Media - Media design 03 2012 Community Management Scenario Map flowchart post venerdì 1 giugno 12
  • 146. Web Communication and Social Media -- Media design 03 Web Communication and Social Media Media design 03 2012 Community Management Scenario Map flowchart post venerdì 1 giugno 12
  • 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. Web Communication and Social Media -- Media design 03 Web Communication and Social Media Media design 03 2012 venerdì 1 giugno 12
  • 149. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 150. Web Communication and Social Media -- Media design 03 Web Communication and Social Media Media design 03 2012 venerdì 1 giugno 12
  • 151. Web Communication and Social Media -- Media design 03 Web Communication and Social Media Media design 03 2012 http://socialmediatoday.com venerdì 1 giugno 12
  • 152. Web Communication and Social Media - Media design 03 2012 http://sportfanconnect.com/ http://socialmediatoday.com venerdì 1 giugno 12
  • 153. Web Communication and Social Media -- Media design 03 Web Communication and Social Media Media design 03 2012 http://www.stampsconnect.com/ http://socialmediatoday.com venerdì 1 giugno 12
  • 154. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 155. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 156. Web Communication and Social Media - Media design 03 2012 Social Media Adoption Decision Flowchart venerdì 1 giugno 12
  • 157. Tools Web Communication and Social Media - Media design 03 2012 strutturare lo spazio/wireframing/mockups + + Il primo prototipo di Twitter venerdì 1 giugno 12
  • 158. Web Communication and Social Media - Media design 03 2012 strutturare lo spazio/wireframing/mockups venerdì 1 giugno 12
  • 159. Web Communication and Social Media - Media design 03 2012 strutturare lo spazio/wireframing/mockups venerdì 1 giugno 12
  • 160. Web Communication and Social Media - Media design 03 2012 strutturare lo spazio/wireframing/mockups venerdì 1 giugno 12
  • 161. Web Communication and Social Media - Media design 03 2012 strutturare lo spazio/wireframing/mockups venerdì 1 giugno 12
  • 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, wireframes venerdì 1 giugno 12
  • 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, wireframes venerdì 1 giugno 12
  • 164. Web Communication and Social Media - Media design 03 2012 http://www.lovelycharts.com/ venerdì 1 giugno 12
  • 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/online venerdì 1 giugno 12
  • 166. Web Communication and Social Media - Media design 03 2012 http://www.mockflow.com/ venerdì 1 giugno 12
  • 167. Web Communication and Social Media - Media design 03 2012 http://www.mockflow.com/ venerdì 1 giugno 12
  • 168. Web Communication and Social Media - Media design 03 2012 http://www.mockflow.com/ http://www.youtube.com/watch?v=sqF0AWam-Cg venerdì 1 giugno 12
  • 169. Web Communication and Social Media - Media design 03 2012 http://www.mockflow.com/ http://www.youtube.com/watch?v=U8rgQyUVMKY venerdì 1 giugno 12
  • 170. Web Communication and Social Media - Media design 03 2012 http://www.mockflow.com/ http://www.youtube.com/watch?v=4Vk2B-jWzyQ venerdì 1 giugno 12
  • 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 / desktop venerdì 1 giugno 12
  • 172. Web Communication and Social Media - Media design 03 2012 http://www.balsamiq.com/ http://www.youtube.com/watch?v=aJTuFRaIi_g venerdì 1 giugno 12
  • 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 Mockingbird venerdì 1 giugno 12
  • 174. Web Communication and Social Media - Media design 03 2012 strutturare lo spazio/wireframing/mockups Tools iMockups http://www.youtube.com/watch?v=LOyIVqJcGfc venerdì 1 giugno 12
  • 175. Web Communication and Social Media - Media design 03 2012 http://www.youtube.com/watch?v=hII6AbGrWR8 venerdì 1 giugno 12
  • 176. Web Communication and Social Media - Media design 03 2012 Progetto comunicazione visiva / Layout venerdì 1 giugno 12
  • 177. Web Communication and Social Media - Media design 03 2012 Progetto comunicazione visiva Layout venerdì 1 giugno 12
  • 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 content venerdì 1 giugno 12
  • 179. Web Communication and Social Media - Media design 03 2012 Typography/Fonts i caratteri hanno carattere venerdì 1 giugno 12
  • 180. Web Communication and Social Media - Media design 03 2012 Typography/Fonts venerdì 1 giugno 12
  • 181. Web Communication and Social Media - Media design 03 2012 Typography/Fonts Garamond Bodoni Times New Roman venerdì 1 giugno 12
  • 182. Web Communication and Social Media - Media design 03 2012 Typography/Fonts venerdì 1 giugno 12
  • 183. Web Communication and Social Media - Media design 03 2012 Typography/Fonts ordini di composizione venerdì 1 giugno 12
  • 184. Web Communication and Social Media - Media design 03 2012 famiglie venerdì 1 giugno 12
  • 185. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 186. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 187. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 188. Web Communication and Social Media - Media design 03 2012 Typography/Fonts grigio tipografico venerdì 1 giugno 12
  • 189. Web Communication and Social Media - Media design 03 2012 Typography/Fonts grigio tipografico venerdì 1 giugno 12
  • 190. Web Communication and Social Media - Media design 03 2012 Typography/Fonts grigio tipografico venerdì 1 giugno 12
  • 191. Web Communication and Social Media - Media design 03 2012 Typography/Fonts disegnare con il testo venerdì 1 giugno 12
  • 192. Web Communication and Social Media - Media design 03 2012 Typography/Fonts disegnare con il testo venerdì 1 giugno 12
  • 193. Web Communication and Social Media - Media design 03 2012 Typography/Fonts disegnare con il testo venerdì 1 giugno 12
  • 194. Web Communication and Social Media - Media design 03 2012 Typography/Fonts disegnare con il testo venerdì 1 giugno 12
  • 195. Web Communication and Social Media - Media design 03 2012 Typography/Fonts venerdì 1 giugno 12
  • 196. Web Communication and Social Media - Media design 03 2012 Typography/Fonts venerdì 1 giugno 12
  • 197. Web Communication and Social Media - Media design 03 2012 Typography/Fonts venerdì 1 giugno 12
  • 198. Web Communication and Social Media - Media design 03 2012 Typography/Fonts venerdì 1 giugno 12
  • 199. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 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 DRM venerdì 1 giugno 12
  • 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 Microsoft's Core fonts for the Web (1996 - 2002) Since being released under Microsoft's 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: 60 venerdì 1 giugno 12
  • 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 Bitstream's 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 doesn't 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 Apple's 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_embedding venerdì 1 giugno 12
  • 203. Web Communication and Social Media - Media design 03 2012 http://code.google.com/apis/webfonts/ venerdì 1 giugno 12
  • 204. Web Communication and Social Media - Media design 03 2012 http://www.google.com/webfonts/ venerdì 1 giugno 12
  • 205. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 206. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 207. Web Communication and Social Media - Media design 03 2012 venerdì 1 giugno 12
  • 208. Web Communication and Social Media - Media design 03 2012 http://typekit.com/ venerdì 1 giugno 12
  • 209. Web Communication and Social Media - Media design 03 2012 http://typekit.com/ venerdì 1 giugno 12
  • 210. Web Communication and Social Media - Media design 03 2012 http://blog.typekit.com/ venerdì 1 giugno 12
  • 211. Web Communication and Social Media - Media design 03 2012 http://blog.typekit.com/ venerdì 1 giugno 12
  • 212. Web Communication and Social Media - Media design 03 2012 http://blog.typekit.com/ venerdì 1 giugno 12
  • 213. Web Communication and Social Media - Media design 03 2012 http://typekit.com/ venerdì 1 giugno 12
  • 214. Web Communication and Social Media - Media design 03 2012 Typography/Fonts http://www.typotheque.com/site/index.php venerdì 1 giugno 12
  • 215. Web Communication and Social Media - Media design 03 2012 http://www.extensis.com/en/WebINK/ venerdì 1 giugno 12
  • 216. Web Communication and Social Media - Media design 03 2012 Templates per Blog wordpress venerdì 1 giugno 12
  • 217. Web Communication and Social Media - Media design 03 2012 Templates per Blog wordpress venerdì 1 giugno 12
  • 218. Web Communication and Social Media - Media design 03 2012 Templates per Blog Tumblr venerdì 1 giugno 12
  • 219. Web Communication and Social Media - Media design 03 2012 http://ilovetypography.com/ venerdì 1 giugno 12
  • 220. Web Communication and Social Media - Media design 03 2012 http://www.newyorker.com/ venerdì 1 giugno 12
  • 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. Web Communication and Social Media - Media design 03 2012 http://webtypography.net/ venerdì 1 giugno 12
  • 223. Web Communication and Social Media - Media design 03 2012 http://www.ogilvy.com/ venerdì 1 giugno 12
  • 224. Web Communication and Social Media - Media design 03 2012 http://imagemechanics.com.au/#!/pages/our-story venerdì 1 giugno 12
  • 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. Web Communication and Social Media - Media design 03 2012 http://carsonified.com/events/ venerdì 1 giugno 12
  • 227. Web Communication and Social Media - Media design 03 2012 Typography/Fonts http://www.organicgrid.com/ venerdì 1 giugno 12
  • 228. Web Communication and Social Media - Media design 03 2012 Typography/Fonts http://www.alistapart.com/ venerdì 1 giugno 12
  • 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. Web Communication and Social Media - Media design 03 2012 Typography/Fonts Tools http://new.myfonts.com/WhatTheFont/ venerdì 1 giugno 12
  • 231. Web Communication and Social Media - Media design 03 2012 Typography/Fonts Tools http://new.myfonts.com/WhatTheFont/ venerdì 1 giugno 12
  • 232. Web Communication and Social Media - Media design 03 2012 Typography/Fonts Tools http://itunes.apple.com/it/app/whatthefont/id304304134?mt=8 venerdì 1 giugno 12
  • 233. Web Communication and Social Media - Media design 03 2012 Typography/Fonts Tools http://fontstruct.fontshop.com/ venerdì 1 giugno 12
  • 234. Web Communication and Social Media - Media design 03 2012 Typography/Fonts Tools http://fontstruct.fontshop.com/ venerdì 1 giugno 12
  • 235. Web Communication and Social Media - Media design 03 2012 Typography/Fonts Tools http://fontstruct.fontshop.com/ venerdì 1 giugno 12
  • 236. Web Communication and Social Media - Media design 03 2012 Typography/Fonts Tools http://typenav.fontshop.com/ venerdì 1 giugno 12
  • 237. Web Communication and Social Media - Media design 03 2012 Typography/Fonts Tools http://itunes.apple.com/it/app/fontshuffle/id298268157?mt=8 FontShuffle venerdì 1 giugno 12
  • 238. Web Communication and Social Media - Media design 03 2012 Typography/Fonts Tools http://www.identifont.com/identify.html venerdì 1 giugno 12
  • 239. Web Communication and Social Media - Media design 03 2012 Typography/Fonts Tools http://www.typetester.org/ venerdì 1 giugno 12
  • 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. Web Communication and Social Media - Media design 03 2012 http://www.codestyle.org/ Typography/Fonts Tools http://www.codestyle.org/css/font-family/index.shtml venerdì 1 giugno 12
  • 242. Web Communication and Social Media - Media design 03 2012 Typography/Fonts Tools http://www.fontshop.com./ venerdì 1 giugno 12
  • 243. Web Communication and Social Media - Media design 03 2012 Typography/Fonts Tools http://www.linotype.com/ venerdì 1 giugno 12
  • 244. Web Communication and Social Media - Media design 03 2012 Typography/Fonts Tools http://www.adobe.com/type/fontfinder/ venerdì 1 giugno 12
  • 245. Web Communication and Social Media - Media design 03 2012 Typography/Fonts Tools http://www.adobe.com/type/ venerdì 1 giugno 12
  • 246. Web Communication and Social Media - Media design 03 2012 Typography/Fonts Tools http://www.emigre.com/ venerdì 1 giugno 12
  • 247. Web Communication and Social Media - Media design 03 2012 Typography/Fonts Tools http://new.myfonts.com/ venerdì 1 giugno 12
  • 248. Web Communication and Social Media - Media design 03 2012 Typography/Fonts Tools http://new.myfonts.com/ venerdì 1 giugno 12
  • 249. Web Communication and Social Media - Media design 03 2012 Typography/Fonts Tools http://www.itcfonts.com/ venerdì 1 giugno 12
  • 250. Web Communication and Social Media - Media design 03 2012 Typography/Fonts Tools http://www.dafont.com/ venerdì 1 giugno 12
  • 251. Web Communication and Social Media - Media design 03 2012 Typography/Fonts Tools http://www.urbanfonts.com/ venerdì 1 giugno 12
  • 252. Web Communication and Social Media - Media design 03 2012 http://www.youworkforthem.com/ venerdì 1 giugno 12
  • 253. Web Communication and Social Media - Media design 03 2012 http://www.youworkforthem.com/ venerdì 1 giugno 12
  • 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. 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. 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. 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. 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
  • 259. Web Communication and Social Media - Media design 03 2012 Typography/Fonts Tools http://www.storyabout.net/typedrawing/index.php venerdì 1 giugno 12
  • 260. Web Communication and Social Media - Media design 03 2012 Typography/Fonts Tools http://itunes.apple.com/it/app/type-drawing/id314072879?mt=8 venerdì 1 giugno 12
  • 261. Web Communication and Social Media - Media design 03 2012 Typography/Fonts Tools http://www.wordle.net/ http://www.quirinale.it/elementi/Continua.aspx?tipo=Discorso&key=1820 Testo integrale del messaggio del Presidente Napolitano alle Camere sulla Legge in materia di lavoro Palazzo del Quirinale, 31/03/2010 venerdì 1 giugno 12
  • 262. 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 venerdì 1 giugno 12