Design from the center, Andrei Herasimchuk @ Frontiers of Interaction 2011

!ink from the center. Design for the edge.

Andrei Michael Herasimchuk

@trenti #foi11

What is art? !e personal expression of ideas

What is graphic design? The communication from a designer to their audience

Logos

Speech

Ethos Pathos

Speaker Audience

Useful

Desirable Usable

Object

Desirable/Ethos

Designer Customer

Useful/Logos

Usable/Pathos

Object/Speech

What is interface design? !e conversation between a person and a product

Graphic

Information

Interaction

InterfaceProduct User

Content

Interface

Aesthetic Behavior

Product User

Logos / Useful / Information

Ethos / Desirable / Graphic Pathos / Usable / Interaction

Speech / Object

AudienceSpeaker / Designer

How can we use this?

Currently, one might design a desktop application

!en repurpose their work to create a web application version of it

Or one might create a rich internet application

!en "nd a way to cram as much of that existing design onto a cell phone

Or one might design only a mobile version

While ignoring all other platforms

Often wherever one starts the design process becomesthe core de"nition of the product itself

And in so doing, one designs themselves into a corner

How do you break that cycle?

4

2 + 2 Four

Quattro IV 4

!e interface of any software product isan expression of its code

Content

Interface

Aesthetic Behavior

Product User

Logos / Useful / Information

Ethos / Desirable / Graphic Pathos / Usable / Interaction

AudienceSpeaker / Designer

Speech / Object

Aesthetic

Content

Behavior

Content

<status><created

_at>Mon Jun 20 0

9:32:19 +0000 20

11</created_at>

<id>827425639158

33346</id>

<text>Day 1 of

Frontiers of In

teraction. Great

venue!

#foi11 @ Frontie

rs Of Interactio

n 2011 http://go

wal.la/c/4sSRg

</text>

<source><a href=

"http://gowalla.

com/" rel="nofol

low">Gowalla</a>

</source>

<truncated>false

</truncated>

<favorited>false

</favorited>

<in_reply_to_sta

tus_id/>

<in_reply_to_use

r_id/>

<in_reply_to_scr

een_name/>

<retweet_count>1

</retweet_count>

<retweeted>false

</retweeted>

<geo><georss:

point>43.7643062

1 11.31111827</g

eorss:point>

</geo>

<coordinates>

<georss:point>43

.76430621 11.311

11827</georss:po

int>

</coordinates>

<place><id>521b

6f591c4b3ce8</id

>

<name>Florence</

name>

<full_name>Flore

nce, Florence</f

ull_name>

<place_type>city

</place_type>

<url>http://api.

twitter.com/1/ge

o/id/521b6f591c4

b3ce8.json</url>

<attributes/>

<bounding_box>

<georss:polygon>

43.7259588 11.14

96504 43.7259588

11.339984

43.8354579 11.33

9984 43.8354579

11.1496504

</georss:polygon

>

</bounding_box>

<country code="I

T">Italy</countr

y>

Behavior

Aesthetic

In order to design digital products across multiple devices successfully, one must

de"ne these core pieces "rst

ContentBehavior

Aesthetic

ContentBehavior

Aesthetic

Desktop

ContentBehavior

Aesthetic

Desktop

Browser

Mobile

ContentBehavior

Aesthetic

Internet Appliance

!in Client

Desktop

Browser

Mobile

Internet Appliance

!in Client

Desktop

Browser

Kiosk

Mobile

ContentBehavior

Aesthetic

!ere will be more devices – not fewer – in the near future, and they will have larger surface areas

while requiring more contexts to design within

!e problems we will solve with product design will become richer and more complex as our customers use

multiple devices for the same products and services

!e solutions of the future will require us to master how to design with this approach

£

Grazie

!ink from the center. Design for the edge.