Wireframes im Interaktionsdesign

47
Wireframes im Interaktionsdesign – 11.4.2011 Matthias Müller-Prove • User Experience Principal, Oracle German version

description

http://mprove.de/script/11/wireframes/

Transcript of Wireframes im Interaktionsdesign

Page 1: Wireframes im Interaktionsdesign

Wireframes im Interaktionsdesign – 11.4.2011

Matthias Müller-Prove • User Experience Principal, Oracle

German version

Page 2: Wireframes im Interaktionsdesign

Diverse Titel vonmeinen Visitenkarten

Page 3: Wireframes im Interaktionsdesign

1996 – 2001 GoLive CyberStudio

2002 – 2007 OpenOffice.org

2008 – 2011 Virtual Desktop Infrastructure

Page 4: Wireframes im Interaktionsdesign

http://flickr.com/photos/activeside/2184823461/

Site-Maps

Page 5: Wireframes im Interaktionsdesign

http://flickr.com/photos/jimbola/2284119465/

Page 6: Wireframes im Interaktionsdesign

Ski-Was?

http://flickr.com/photos/38451115@N04/5229195968

Ski-Wäs?

Page 7: Wireframes im Interaktionsdesign

Donna Maurer http://slideshare.net/donnam/information-architecture-introduction

Page 8: Wireframes im Interaktionsdesign

Primary Navigation

Content Area

Ads

2nd OrderNavigation

Page 9: Wireframes im Interaktionsdesign

Schematics

Schemazeichnung

Explosionszeichnung

Blaupause

Wireframes

Drahtmodell

Plan

Page 10: Wireframes im Interaktionsdesign

Wireframes sind digitale Schwarzweiß-Zeichnungen.

Wireframes sind schneller und billiger herzustellenals Websites.

Wireframes sind abstrakt und detailliert.

Kommunikation zwischen Designer und KundeKommunikation zwischen Designer und Entwickler

S/W, damit der Kundenicht die Farbgestaltung

kommentiert

Page 11: Wireframes im Interaktionsdesign

<Insert Picture Here>

Desktop Virtualizationmit Oracle VDI

Page 12: Wireframes im Interaktionsdesign

12

http://www.time.com/time/photogallery/0,29307,1930296_1967873,00.html

And now to somethingcompletely different…

Page 13: Wireframes im Interaktionsdesign

13

Page 14: Wireframes im Interaktionsdesign

14

Page 15: Wireframes im Interaktionsdesign

Sun Ray Thin-Client PortfolioSun Ray 3

Sun RayTM 3 Low cost, low power, small footprint

Sun Ray™ 3iAll-in-one client with 21.5" screen

Page 16: Wireframes im Interaktionsdesign
Page 17: Wireframes im Interaktionsdesign
Page 18: Wireframes im Interaktionsdesign
Page 19: Wireframes im Interaktionsdesign

Flexible Desktop Assignments

http://www.designcomics.org/

Page 20: Wireframes im Interaktionsdesign

Flexible Desktop Assignments

TemplateTemplate

flexible assignedlogged in

AvailableDesktop

flexible assignedlogged out

AvailableDesktop

Pool with flexible desktop assignment

AvailableDesktop

Desktop

Page 21: Wireframes im Interaktionsdesign

Personal Desktop Assignments

Page 22: Wireframes im Interaktionsdesign

Personal Desktop Assignments

TemplateTemplate

Nina’sDesktop

Michaelpersonal assigned

logged in

Ninapersonal assigned

logged out

Pool with personal desktop assignment

Michael’sDesktop

Page 23: Wireframes im Interaktionsdesign

<Insert Picture Here>

VDI Administration

Page 24: Wireframes im Interaktionsdesign
Page 25: Wireframes im Interaktionsdesign
Page 26: Wireframes im Interaktionsdesign

<Insert Picture Here>

Der Computer als Medium

ein kurzerphilosophischer

Exkurs

Page 27: Wireframes im Interaktionsdesign

http://flickr.com/photos/mprove/2855242322/

Bill Verplank, BayCHI 2008

Der heilige Grahldes Interaktionsdesign

Page 28: Wireframes im Interaktionsdesign

Bill Verplank, Interaction 11 (video): http://vimeo.com/20285615

Page 29: Wireframes im Interaktionsdesign

Ein persönliches dynamisches Mediumflickr.com/photos/ezu/5604927/

Page 30: Wireframes im Interaktionsdesign

Ein »soziales« dynamisches Medium

Page 31: Wireframes im Interaktionsdesign

http://dryicons.com

Ein verteiltesEngineering-Team

für DesktopVirtualization

Page 32: Wireframes im Interaktionsdesign

Wireframing mit OpenOffice.org Impress

via http://www.scaffoldage.com/post/3897615849

Page 33: Wireframes im Interaktionsdesign
Page 34: Wireframes im Interaktionsdesign

VDI 3.0 VDI 3.18 Monate 7 Monatev47 v22

174 Slides 271 Slides

VDI 3.2 VDI 3.36 Monate 7 Monatev18 v8

297 Slides 317 Slides

Page 35: Wireframes im Interaktionsdesign

»Bei 25 Folien pro Sekunde bewegt sich das Bild.«

Lorenz Engell in Powerpoint, Fischer 2009

Page 36: Wireframes im Interaktionsdesign
Page 37: Wireframes im Interaktionsdesign
Page 38: Wireframes im Interaktionsdesign
Page 39: Wireframes im Interaktionsdesign
Page 40: Wireframes im Interaktionsdesign

http://blogs.sun.com/mprove/entry/vdi_3_ux_story_wireframes

» intelligent misuse «OOo Impress als

HyperCard-Ersatz

Page 41: Wireframes im Interaktionsdesign

Wireframes sind Layout ohne Visual Design.

Wireframes können Interaktions-Flows darstellen→ Storyboards

Wireframes sind Sketches, Mockups, Prototypen oder Spezifikationen.

Kommunikation zwischen Designer und EntwicklungKommunikation zwischen Designer und QualitätKommunikation zwischen Designer und Dokumentation

Wireframes sind Planungs- und Designmedium.

Page 42: Wireframes im Interaktionsdesign

Balsamiq

Page 43: Wireframes im Interaktionsdesign

Axure

Page 44: Wireframes im Interaktionsdesign

via http://www.scaffoldage.com/post/3853646769

Vielen Dank!

Page 45: Wireframes im Interaktionsdesign

45

Weblinks

www.mprove.de– mprove.de/script/11/wireframes/ – blogs.sun.com/mprove/

User Experience in Hamburg– uxhh.de– ixda-hamburg.de

Virtualisierung bei Oracle– oracle.com/virtualization– sun.com/vdi

Page 46: Wireframes im Interaktionsdesign

46

Page 47: Wireframes im Interaktionsdesign

47