Social Media Design 04

web communication e social media

Media Design 04

cristian contini

Interaction Design Patterns

sabato 22 maggio 2010

Web Communication and Social Media - Media design 01



progettare PER gli utenti

progettare CON gli utentiUser Centered Design

Social Media Design

Target



Dinamico/OrganicoWeb Statico

EmotivitàDati Oggettivi

RelazioniTransazioni

Progettazione continua

One Shot

progettazione tradizionale

Crowdprogetto social

Target



A design pattern in architecture and computer science is a formal way of documenting a solution to a design problem in a particular field of expertise. The idea was introduced by the architect Christopher Alexander in the field of architecture and has been adapted for various other disciplines, including computer science.An organized collection of design patterns that relate to a particular field is called a pattern language.“The elements of this language are entities called patterns. Each pattern describes a problem that occurs over and over again in our environment, and then describes the core of the solution to that problem, in such a way that you can use this solution a million times over, without ever doing it the same way twice.

”Christopher Alexander

http://en.wikipedia.org/wiki/Design_patterns

Design pattern


http://en.wikipedia.org/wiki/Christopher_Alexander







Design Patterns: Elements of Reusable Object-Oriented Software is a software engineering book describing recurring solutions to common problems in software design. The book's authors are Erich Gamma, Richard Helm, Ralph Johnson and John Vlissides with a foreword by Grady Booch. They are often referred to as the Gang of Four, or GoF. The book is divided into two parts, with the first two chapters exploring the capabilities and pitfalls of object-oriented programming, and the remaining chapters describing 23 classic software design patterns. The book includes examples in C++ and Smalltalk.

Design patterns

http://en.wikipedia.org/wiki/Design_Patterns_(book)


http://en.wikipedia.org/wiki/Erich_Gamma

http://en.wikipedia.org/wiki/Erich_Gamma

http://en.wikipedia.org/wiki/Richard_Helm

http://en.wikipedia.org/wiki/Richard_Helm

http://en.wikipedia.org/wiki/Ralph_Johnson




http://en.wikipedia.org/wiki/John_Vlissides

http://en.wikipedia.org/wiki/John_Vlissides

http://en.wikipedia.org/wiki/Grady_Booch

http://en.wikipedia.org/wiki/Grady_Booch

http://en.wikipedia.org/wiki/Design_Patterns_(book

http://en.wikipedia.org/wiki/Design_Patterns_(book


Design Pattern Timeline1977 - Christopher Alexander: A Pattern Language - A Timeless Way of Building.

1980 - Concetto applicato alla programmazione

1993 - Design Patterns: Elements of Reusable Object-Oriented Software (Gang of four)

2002 - Douglas K. van Duyne, Design of Sites

2004 - Libreria Interna di Pattern di Yahoo

2005 - Jennifer Tidwell - Design Interfaces

2006 - Libreria Pattern Pubblica Yahoo

2010 - Christian Crumlish - Erin MaloneDesigning Social Interfaces













































































Interaction design patternsInteraction design patterns are a way to capture optimal solutions to common usability or accessibility problems in a specific context.They document interaction models that make it easier for users to understand an interface and accomplish their tasks.

What's a Pattern?

A pattern describes an optimal solution to a common problem within a specific context.

http://developer.yahoo.com/ypatterns/about/

http://en.wikipedia.org/wiki/Interaction_design_pattern







• breadcrumbs

• liste

• dropdown menu

• paginazione

• tabbed

• expand/collapse

• tags /tagclowds

• tooltips

• search

Navigazione

breadcrumbsliste

expand/collapse

tabbed

tooltip

tags

tagclouds

sistemi di



Interaction design patternsUn design pattern è costituito da:■ il nome, costituito da una o due parole che siano il

più possibile rappresentative del pattern stesso;■ il problema, ovvero la descrizione della situazione

alla quale si può applicare il pattern. Può comprendere la descrizione di classi o di problemi di progettazione specifici, come anche una lista di condizioni perché sia necessario l'utilizzo del pattern;

■ la soluzione, che descrive gli elementi costitutivi del progetto con le relazioni e relative implicazioni, senza però addentrarsi in una specifica implementazione. Il concetto è di presentare un problema astratto e la relativa configurazione di elementi adatta a risolverlo;

■ le conseguenze, i risultati e i vincoli che derivano dall'applicazione del pattern. Sono fondamentali in quanto possono essere l'ago della bilancia nella scelta dei pattern: le conseguenze comprendono considerazioni di tempo e di spazio, possono descrivere implicazioni del pattern con alcuni linguaggi di programmazione e l'impatto con il resto del progetto.

WHATExamplesUSE WHENHOWWHY

COSACosa lʼutente desidera

ESEMPIOUna possibile Soluzione

SI USA QUANDOmodi dʼuso...

COMECome soddisfa i bisogni dellʼutente

PERCHE?Perchè è una buona soluzione


http://it.wikipedia.org/wiki/Classe_(informatica)

http://it.wikipedia.org/wiki/Classe_(informatica)


Interaction design patterns

http://developer.yahoo.com/ypatterns/erin malone & christian crumlish


http://developer.yahoo.com/ypatterns/



































• Layout• Navigation• Selection• Rich Interaction• Social Design

Tipologie

• Beta • Working• Best Practice

Evoluzione





Interaction design patterns http://developer.yahoo.com/ypatterns/layout/pagegrids.html

http://developer.yahoo.com/ypatterns/layout/


http://developer.yahoo.com/ypatterns/layout/pagegrids.html




















































Interaction design patterns http://developer.yahoo.com/ypatterns/navigation/




























































































http://developer.yahoo.com/ypatterns/selection/Interaction

design patterns


http://developer.yahoo.com/ypatterns/selection/





design patterns







design patterns







design patterns







design patterns







design patterns







design patterns






http://developer.yahoo.com/ypatterns/richinteraction/Interaction

design patterns


http://developer.yahoo.com/ypatterns/richinteraction/





design patterns







design patterns







design patterns







design patterns







design patterns







design patterns







design patterns





design patterns





design patterns





design patterns





design patterns





design patterns







design patterns







design patterns







design patterns







design patterns







design patterns







design patterns







design patterns







design patterns







design patterns







design patterns







design patterns







design patterns






http://developer.yahoo.com/ypatterns/social/




























































http://developer.yahoo.com/ypatterns/social/Interaction

design patterns







design patterns







design patterns







design patterns







design patterns







design patterns







design patterns







design patterns







design patterns







design patterns







design patterns







design patterns







design patterns







design patterns







design patterns







design patterns







design patterns







design patterns







design patterns







design patterns







design patterns







design patterns







design patterns







design patterns







design patterns







design patterns







design patterns







design patterns







design patterns







design patterns







design patterns







design patterns







design patterns







design patterns







design patterns







design patterns







design patterns







design patterns







design patterns







design patterns







design patterns







design patterns







design patterns







design patterns







design patterns







design patterns







http://www.designingsocialinterfaces.com/


http://www.designingsocialinterfaces.com






































PrincipiPave the cowpathsTalk like a personBe Open, Play well with othersLearn from gamesRespect the ethical dimensionsDesign For EveryoneLeave Things IncompleteAsk QuestionsPalimpsest



Anti Patterns

Cargo Cult

Donʼt break email

Password anti-pattern

Ex-boyfriend bug

Potemkin Village



Anti Patterns

Cargo Cult

Donʼt break email


Ex-boyfriend bug

Potemkin Village



Anti Patterns

Cargo Cult

Donʼt break email


Ex-boyfriend bug

Potemkin Village





http://www.slideshare.net/emalone/designing-the-social-in






http://oreilly.com/catalog/9780596154929/






http://designinginterfaces.com/


http://designinginterfaces.com




























Interaction design patterns http://www.welie.com/patterns/


http://www.welie.com/patterns/

























http://ui-patterns.com/patterns










































http://uipatternfactory.com/


http://uipatternfactory.com





























http://www.socialdesignpatterns.com/


http://www.socialdesignpatterns.com




































































http://konigi.com/showcase/latest





Interaction design patterns http://designsnips.com/


http://designsnips.com

http://designsnips.com



http://www.visi.com/~snowfall/InteractionPatterns.html





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



Web 2.0 Style• Semplicità• Importanza del Logo• CSS• Layout orizzontali• Grandi Aree Colorate• angoli arrotondati• Sfumature• Riflessioni• Colori pastello• Icone morbide• Typography• Stelloni



















































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


http://theconversationprism.com/click/

http://theconversationprism.com/click/


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


http://www.go2web20.net

http://www.go2web20.net


Web 2.0 Style http://mashable.com/


http://mashable.com

http://mashable.com


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


http://momb.socio-kybernetics.net

http://momb.socio-kybernetics.net


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


http://emilychang.com/ehub/

http://emilychang.com/ehub/

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



mailto:[email protected]

mailto:[email protected]

http://www.augmentedadvertising.com/

http://www.augmentedadvertising.com/

http://www.linkedin.com/in/cristiancontini

http://www.linkedin.com/in/cristiancontini

http://www.cristiancontini.it/

http://www.cristiancontini.it/

http://cristiancontini.blogspot.com/

http://cristiancontini.blogspot.com/

Education

Social Media Design 04