Social media design 03 2012 - Web Design Per i Social Media
-
Upload
cristian-contini -
Category
Education
-
view
103 -
download
0
description
Transcript of Social media design 03 2012 - Web Design Per i Social Media
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.alexa.com/topsites/countries/IThttp://www.google.com/adplanner/static/top100countries/it.html
venerdì 1 giugno 12
Web Communication and Social Media - Media design 03 2012
La classifica dei 1000 siti più visitati nel mondohttp://www.google.com/adplanner/static/top1000/index.html
venerdì 1 giugno 12
Web Communication and Social Media - Media design 03 2012
Web
Des
ign
/ site
pro
duct
ion
Interaction Design
Interaction Design
venerdì 1 giugno 12
Web Communication and Social Media - Media design 03 2012
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.
Web Design
venerdì 1 giugno 12
Web Communication and Social Media - Media design 03 2012
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.
Graphic Design
venerdì 1 giugno 12
Web Communication and Social Media - Media design 03 2012
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.
Interaction Design
venerdì 1 giugno 12
Web Communication and Social Media - Media design 03 2012
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.
Social Media
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)
interazioni con sito
, interfaccia, azioni solitarie
UGCinterazioni
con altri utenti, , interfaccia,
media condivisidialoghi
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
dal semplice Ascolto al coinvolgimento alla
Partecipazione emotiva
progettazione da Statica a Liquido a Evolutiva
dal Sito a Ecosistema
da utente a community
venerdì 1 giugno 12
Web Communication and Social Media - Media design 03 2012
progettare PER gli utenti
progettare CON gli utentiUser Centered Design Social Media Design
Target
venerdì 1 giugno 12
Web Communication and Social Media - Media design 03 2012
Dinamico/OrganicoWeb Statico
EmotivitàDati Oggettivi
RelazioniTransazioni
Progettazione continua
One Shot
progettazione tradizionale
Crowdprogetto social
Target
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 Webimportanza del logoforme morbide, arrotondate, organiche
aria, grande aree di respiro visivo
“green is the new gray”
colori pastello, green, organics, healthy
Bottoni “stelloni”, trend gadgets
bianco bianco bianco
“black is dead”
grande uso della Typographytante (ri)flessioni sul pavimento
tanta grafica, no stock photos
interfaccia minimale vs contents
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
Web 2.0 Style• Semplicità• 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• Semplicità• 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• Semplicità• 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• Semplicità• 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• Semplicità• 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• Semplicità• 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• Semplicità• 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• Semplicità• 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• Semplicità• 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• Semplicità• 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• Semplicità• 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• Semplicità• 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• Semplicità• 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• Semplicità• 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• Semplicità• 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• Semplicità• 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• Semplicità• 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
Web 2.0 Style http://emilychang.com/ehub/
venerdì 1 giugno 12
Web Communication and Social Media - Media design 03 2012
Web 2.0 Style http://emilychang.com/ehub/
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
78venerdì 1 giugno 12
Web Communication and Social Media - Media design 03 2012
78venerdì 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 2012Web Communication and Social Media - Media design 03
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 2012
flowchart postWeb Communication and Social Media - Media design 03
http://www.socialfish.org/2010/11/social-media-response-triage.htmlvenerdì 1 giugno 12
Web Communication and Social Media - Media design 03 2012Web Communication and Social Media - Media design 03
Social Media
venerdì 1 giugno 12
Web Communication and Social Media - Media design 03 2012Web Communication and Social Media - Media design 03
Social Media
venerdì 1 giugno 12
Web Communication and Social Media - Media design 03 2012Web Communication and Social Media - Media design 03
Social Media
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
venerdì 1 giugno 12
Web Communication and Social Media - Media design 03 2012Web Communication and Social Media - Media design 03
Social Media
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
venerdì 1 giugno 12
Web Communication and Social Media - Media design 03 2012Web Communication and Social Media - Media design 03
Social Media
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
venerdì 1 giugno 12
Web Communication and Social Media - Media design 03 2012Web Communication and Social Media - Media design 03
Social Media
venerdì 1 giugno 12
Web Communication and Social Media - Media design 03 2012
flowchart post
by David Armano - @Armano
Community Management Scenario Map
venerdì 1 giugno 12
Web Communication and Social Media - Media design 03 2012
flowchart post
by David Armano - @Armano
Community Management Scenario Map
http://www.slidesh
are.net/morganmclintic/red-alert-handling-a-crisis-in-a-
sm-landscape?
venerdì 1 giugno 12
Web Communication and Social Media - Media design 03 2012
flowchart postCommunity Management Scenario Map
venerdì 1 giugno 12
Web Communication and Social Media - Media design 03 2012
flowchart postCommunity Management Scenario Map
venerdì 1 giugno 12
Web Communication and Social Media - Media design 03 2012
flowchart postWeb Communication and Social Media - Media design 03
Community Management Scenario Map
venerdì 1 giugno 12
Web Communication and Social Media - Media design 03 2012
flowchart postWeb Communication and Social Media - Media design 03
Community Management Scenario Map
http://www.hivestrategies.com/venerdì 1 giugno 12
Web Communication and Social Media - Media design 03 2012Web Communication and Social Media - Media design 03
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 2012Web Communication and Social Media - Media design 03
venerdì 1 giugno 12
Web Communication and Social Media - Media design 03 2012Web Communication and Social Media - Media design 03
http://socialmediatoday.comvenerdì 1 giugno 12
Web Communication and Social Media - Media design 03 2012
http://socialmediatoday.com
http://sportfanconnect.com/
venerdì 1 giugno 12
Web Communication and Social Media - Media design 03 2012Web Communication and Social Media - Media design 03
http://socialmediatoday.com
http://www.stampsconnect.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
Web Communication and Social Media - Media design 03 2012
++
Il primo prototipo di Twitter
strutturare lo spazio/wireframing/mockups Tools
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
Web Communication and Social Media - Media design 03 2012
http://www.lovelycharts.com/ 1 100% free2 Online application3 Create flowcharts, sitemaps, wireframes
strutturare lo spazio/wireframing/mockups Tools
venerdì 1 giugno 12
Web Communication and Social Media - Media design 03 2012
http://www.lovelycharts.com/ 1 100% free2 Online application3 Create flowcharts, sitemaps, wireframes
strutturare lo spazio/wireframing/mockups Tools
venerdì 1 giugno 12
Web Communication and Social Media - Media design 03 2012
http://www.lovelycharts.com/
venerdì 1 giugno 12
Web Communication and Social Media - Media design 03 2012
1 Freemium2 Web 2.0 air interface3 desktop/online
http://www.mockflow.com/
strutturare lo spazio/wireframing/mockups Tools
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
http://www.balsamiq.com/1 handrawn style1 79$ una tantum2 Online / desktop
strutturare lo spazio/wireframing/mockups Tools
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
Pencil Project
Serena Prototype Composer
Axure RP
HotGloo
Mockingbird
ProtoShare
GliffyJustinmind Prototyper
JumpChart
Pidoco
iPlotz
FlairBuilder
GUI Design StudioOmniGraffle (Mac, iPad)
Microsoft Visio
Protofluid.com
venerdì 1 giugno 12
Web Communication and Social Media - Media design 03 2012
strutturare lo spazio/wireframing/mockups Tools
http://www.youtube.com/watch?v=LOyIVqJcGfc
iMockups
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
Consistenza
Stile
linguaggio
Progetto comunicazione visiva Layout
gerarchie visivetono del designVisual design
concepts
elementi visivi iconici simbologia astratte/stilizzazioni
content
interfaccia
diagrammi sempliciillustrazioni stilizzate
illustrazioni realistichefotografie
illustrazioni iperrealistiche
metaforatipologia di sito web
testotesto grafico
typography
orientamento
CSS
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
ordini di composizione
Typography/Fonts
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
Fonts & Web
html
css
flashtesto in grafica
cascading
style
sheet
ajaxAsynchronous JavaScript And XMl
Hyper Test Markup Languagecontenuto separato dallo stile
limitate capacità di formattazione
formattazione e impaginazione avanzata
formattazione e impaginazione avanzata
solo per titoli non per il body text
distribuzione illegale
downloadable fonts?
DRMEULA
limitate capacità di uso dei font
formattazione e contenuto uniti
limitate capacità di uso dei font
uso di qualsiasi font
jpeg gif png
sIFR 2.0
7UXH'RF���3)5�����(PEHGGHG�2SHQ7\SH��(27��(27�/LWH�&:7���2SHQ�)RQW�)RUPDW��:2))����VZJ�
:HE�VDIH�IRQWV
rendering dei font grazie al plugin flash
Scalable Inman Flash Replacement (sIFR) &66����&66����&66������&66�
venerdì 1 giugno 12
Web Communication and Social Media - Media design 03 2012
Web-safe fontsWeb-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.
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.
Font esistenti: decine di migliaia. Font usate su web: 5Famiglie di fonts usabili Serif, Sans-Serif, Monospace, Script, Fantasyfont usate: Arial • Georgia • Times New Roman• Trebuchet • Verdana
font web safe usabili mac/win: 60
Web-safe fonts
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 Blogwordpress
venerdì 1 giugno 12
Web Communication and Social Media - Media design 03 2012
Templates per Blogwordpress
venerdì 1 giugno 12
Web Communication and Social Media - Media design 03 2012
Templates per BlogTumblr
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 2012Web Communication and Social Media - Media design 03
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 http://new.myfonts.com/WhatTheFont/Tools
what font?
venerdì 1 giugno 12
Web Communication and Social Media - Media design 03 2012
Typography/Fonts http://new.myfonts.com/WhatTheFont/Tools
venerdì 1 giugno 12
Web Communication and Social Media - Media design 03 2012
Typography/Fonts http://new.myfonts.com/WhatTheFont/Tools
venerdì 1 giugno 12
Web Communication and Social Media - Media design 03 2012
Typography/FontsTools
http://itunes.apple.com/it/app/whatthefont/id304304134?mt=8
venerdì 1 giugno 12
Web Communication and Social Media - Media design 03 2012
Typography/FontsTools http://fontstruct.fontshop.com/
venerdì 1 giugno 12
Web Communication and Social Media - Media design 03 2012
Typography/FontsTools http://fontstruct.fontshop.com/
venerdì 1 giugno 12
Web Communication and Social Media - Media design 03 2012
Typography/FontsTools http://fontstruct.fontshop.com/
venerdì 1 giugno 12
Web Communication and Social Media - Media design 03 2012
Typography/FontsTools http://typenav.fontshop.com/
venerdì 1 giugno 12
Web Communication and Social Media - Media design 03 2012
Typography/FontsTools 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/FontsTools http://www.identifont.com/identify.html
venerdì 1 giugno 12
Web Communication and Social Media - Media design 03 2012
Typography/FontsTools http://www.typetester.org/
venerdì 1 giugno 12
Web Communication and Social Media - Media design 03 2012
Typography/FontsTools
http://www.suprb.com/apps/csstype/
http://csstypeset.com/
http://csstxt.com/
venerdì 1 giugno 12
Web Communication and Social Media - Media design 03 2012
Typography/FontsTools http://www.codestyle.org/http://www.codestyle.org/css/font-family/index.shtml
venerdì 1 giugno 12
Web Communication and Social Media - Media design 03 2012
Typography/FontsTools http://www.fontshop.com./
venerdì 1 giugno 12
Web Communication and Social Media - Media design 03 2012
Typography/FontsTools http://www.linotype.com/
venerdì 1 giugno 12
Web Communication and Social Media - Media design 03 2012
Typography/FontsTools http://www.adobe.com/type/fontfinder/
venerdì 1 giugno 12
Web Communication and Social Media - Media design 03 2012
Typography/FontsTools http://www.adobe.com/type/
venerdì 1 giugno 12
Web Communication and Social Media - Media design 03 2012
Typography/FontsTools http://www.emigre.com/
venerdì 1 giugno 12
Web Communication and Social Media - Media design 03 2012
Typography/FontsTools http://new.myfonts.com/
venerdì 1 giugno 12
Web Communication and Social Media - Media design 03 2012
Typography/FontsTools http://new.myfonts.com/
venerdì 1 giugno 12
Web Communication and Social Media - Media design 03 2012
Typography/FontsTools http://www.itcfonts.com/
venerdì 1 giugno 12
Web Communication and Social Media - Media design 03 2012
Typography/FontsTools http://www.dafont.com/
venerdì 1 giugno 12
Web Communication and Social Media - Media design 03 2012
Typography/FontsTools 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/FontsTools http://www.storyabout.net/typedrawing/index.php
venerdì 1 giugno 12
Web Communication and Social Media - Media design 03 2012
Typography/FontsTools 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/FontsTools http://www.wordle.net/
Testo integrale del messaggio del Presidente Napolitano alle Camere sulla Legge in materia di lavoro
Palazzo del Quirinale, 31/03/2010
http://www.quirinale.it/elementi/Continua.aspx?tipo=Discorso&key=1820
venerdì 1 giugno 12
Cristian ContiniArt Direction - Communication - New & Next Media
E-MAIL [email protected]
http://www.augmentedadvertising.com
CV http://www.linkedin.com/in/cristiancontinitwitter: @cristiancontini Skype: cristiancontiniWEB http://www.cristiancontini.it/BLOG http://cristiancontini.blogspot.com
SECOND LIFE Grocon Emoto
venerdì 1 giugno 12