Let ‘em explore
Stefan Wagner
@andsynchrony
andsynchrony.net

designandsystems.de
we! designers, artists, storytellers…
users, the audience, …
…what?

Let ‘em explore
How I came to explore…

Level Design, 3d Art
Flash, HTML, …
AE Artist, Motion Design, Animation
The Basic Stuff
Interactio...
connecting information design
to gamic elements.
Gamification
Game Layer

Embrace the content you got by
designing it the way it deserves.
Digital Media
(in education,
communication
& information
design)

What is the relation?
What meaningful connections
can be...
Won?

know-how /
experience
++

Start

Incentive

REGULATED
COURSE OF
THE GAME
know-how /
experience
++

Frustration

End
...
exploration
know-how /
experience
++
curiosity

Start

USING
INTERACTIVE
CONTENT
know-how /
experience
++
exploration

mes...
»Generating Utopia«
2013, part of master thesis
Can we read and calculate dreams, desire, wishes from data?
Can a utopia be created by a machine?
analysing the structure of
social location data

Tr
a

N

ig

ve

l&

Tr
a

np

or

ht

Sh

t

lif

e

op

Sp

ot

O
&

ut...
vimeo.com/74066023
recreation
productivity
transport
exploration through

imagination
…by allowing the user room to interpretate
The technical side
!

» Processing with intense use of OpenGL features
» No custom 3d-modelling – everything is built with...
vimeo.com/87175277
»the institute«

Steinbeis Forschungszentrum “Design und Systeme”
Würzburg, Germany
Directed by Prof. Erich Schöls and Seb...
Digital Spine
Client: spontech AG
2012 by Design and Systems
Requirements:
!

» Explain how their software works
!

» Showcase their competence in 3d-scanning
of spines from 2d x-ray ...
What we could have done
vimeo.com/55257216
What we did:
!

» Rebuilt a human spine in Processing with full motion
simulation
» Visualization that works as an eye cat...
the scanner
implant revolver
scientific interface mimicri
exploration through

self-confidence
…by making it easy for the user to deal with complex topics
The technical side
!

» Processing with intense use of OpenGL features
implemented by Andres Colubri
» custom-written x-ra...
Difflect

2011, bachelor thesis
Enhance printed media by adding a digital layer
Create a meaningful connection between digital and print
Basic concept: the digital mirror
vimeo.com/33834276
Extended Paper

Client: coperion GmbH
2013 by Design and Systems
vimeo.com/68391099
Cover = table of contents
Sensitive areas for triggering
additional content
Move paper to the left
» product flow

Move paper to the right
» exploded view
The technical side
!

» openFrameworks with custom Metaio tracking
implementation for full control over rendering
and anim...
exploration through

play
…by taking interaction beyond traditional input devices and techniques
Thank you!
Let’s explore #FITC AM 14!
Stefan Wagner
@andsynchrony
andsynchrony.net
designandsystems.de
Let ’em Explore with Stefan Wagner
Let ’em Explore with Stefan Wagner
Let ’em Explore with Stefan Wagner
Let ’em Explore with Stefan Wagner
Let ’em Explore with Stefan Wagner
Let ’em Explore with Stefan Wagner
Let ’em Explore with Stefan Wagner
Let ’em Explore with Stefan Wagner
Let ’em Explore with Stefan Wagner
Let ’em Explore with Stefan Wagner
Let ’em Explore with Stefan Wagner
Let ’em Explore with Stefan Wagner
Let ’em Explore with Stefan Wagner
Upcoming SlideShare
Loading in...5
×

Let ’em Explore with Stefan Wagner

263

Published on

Presented live at FITC Amsterdam 2014 on Feb 24-25, 2014
More details can be found at www.FITC.ca

Interactive experiences that sustain user interest and imagination
For the last couple of years, Stefan Wagner has been working in the field of interactive exhibits, including installations and software that give the audience an understanding of specific (often hard to grasp) topics. Ranging between interactive design, information visualization and creative coding, Stefan learned to love the concept of putting the user in a place where he is not merely a consumer of media, but where he gets to actively and willingly explore the content presented to him – applications that sustain user interest and imagination. In the course of his studies as well as in commercial projects, he has tried to adopt this idea.

In his talk, Stefan Wagner will give you an insight into the development of some of the interactive projects he has been working or collaborating on and how they managed to catch user attention by deploying realtime visuals and/or new concepts of interaction like augmented reality and gesture-based input. He will also discuss conceptual as well as technical issues, problems and insights of these projects.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
263
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Let ’em Explore with Stefan Wagner

  1. 1. Let ‘em explore Stefan Wagner @andsynchrony andsynchrony.net designandsystems.de
  2. 2. we! designers, artists, storytellers… users, the audience, … …what? Let ‘em explore
  3. 3. How I came to explore… Level Design, 3d Art Flash, HTML, … AE Artist, Motion Design, Animation The Basic Stuff Interaction, Creative Coding * B.A. Communication Design, FH Würzburg 2007 2009 M.A. Information Design 2011 2013 * »Wow, interactive media is totally making a difference!!«
  4. 4. connecting information design to gamic elements.
  5. 5. Gamification Game Layer Embrace the content you got by designing it the way it deserves.
  6. 6. Digital Media (in education, communication & information design) What is the relation? What meaningful connections can be created? Games
  7. 7. Won? know-how / experience ++ Start Incentive REGULATED COURSE OF THE GAME know-how / experience ++ Frustration End Lost?
  8. 8. exploration know-how / experience ++ curiosity Start USING INTERACTIVE CONTENT know-how / experience ++ exploration message End
  9. 9. »Generating Utopia« 2013, part of master thesis
  10. 10. Can we read and calculate dreams, desire, wishes from data? Can a utopia be created by a machine?
  11. 11. analysing the structure of social location data Tr a N ig ve l& Tr a np or ht Sh t lif e op Sp ot O & ut Se rv ic e do Co H om lle or s& ge Re & e Un tio n od Ar ts O & er sit y Pr of En th te iv cr ea Fo rta in er es m en t sio na l& O th er Pl ac es
  12. 12. vimeo.com/74066023
  13. 13. recreation productivity transport
  14. 14. exploration through imagination …by allowing the user room to interpretate
  15. 15. The technical side ! » Processing with intense use of OpenGL features » No custom 3d-modelling – everything is built with data » Toxiclibs by Karsten Schmidt for 3d-Model Calculations » Depth-of-field post-processing shader originally by Martin Upitis
  16. 16. vimeo.com/87175277
  17. 17. »the institute« Steinbeis Forschungszentrum “Design und Systeme” Würzburg, Germany Directed by Prof. Erich Schöls and Sebastian Gläser www.designandsystems.de
  18. 18. Digital Spine Client: spontech AG 2012 by Design and Systems
  19. 19. Requirements: ! » Explain how their software works ! » Showcase their competence in 3d-scanning of spines from 2d x-ray images ! » Show why the use of their software leads to better results in spine surgery
  20. 20. What we could have done
  21. 21. vimeo.com/55257216
  22. 22. What we did: ! » Rebuilt a human spine in Processing with full motion simulation » Visualization that works as an eye catcher but is fully interactive as well » Guide through the steps of the original software in a simplified way » Let users do digital spine surgery with different implants » Show how a treated spine is more movable again after surgery using the software (before / after)
  23. 23. the scanner
  24. 24. implant revolver
  25. 25. scientific interface mimicri
  26. 26. exploration through self-confidence …by making it easy for the user to deal with complex topics
  27. 27. The technical side ! » Processing with intense use of OpenGL features implemented by Andres Colubri » custom-written x-ray shader for teh visualz » Custom spine class that rigs and animates a human spine 3d model by reading medical data » Thanks to GLmodel implementation, the spine is being rendered 3 times spanning 2 HD displays without affecting performance
  28. 28. Difflect 2011, bachelor thesis
  29. 29. Enhance printed media by adding a digital layer Create a meaningful connection between digital and print
  30. 30. Basic concept: the digital mirror
  31. 31. vimeo.com/33834276
  32. 32. Extended Paper Client: coperion GmbH 2013 by Design and Systems
  33. 33. vimeo.com/68391099
  34. 34. Cover = table of contents
  35. 35. Sensitive areas for triggering additional content
  36. 36. Move paper to the left » product flow Move paper to the right » exploded view
  37. 37. The technical side ! » openFrameworks with custom Metaio tracking implementation for full control over rendering and animation » more than 25 markerless tracking targets, each one with its own 3d visualization » realtime rendering and animation of CAD created content
  38. 38. exploration through play …by taking interaction beyond traditional input devices and techniques
  39. 39. Thank you! Let’s explore #FITC AM 14! Stefan Wagner @andsynchrony andsynchrony.net designandsystems.de
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×