Von der Gestaltung to go
zur Lust des Navigierens
oder:
„Sonstige Symptome, die das Erkennungsvermögen
und das Bewusstsein ...
Zur Person: Christoph Luchs
„„ Studium an der Hochschule für
Bildende Künste Braunschweig
und der School of Art & Design,
...
Publikationen
Publishing für Apple iPad
und Android Tablet
Cleverprinting, 2013
Next Generation Publishing
Cleverprinting,...
User Interface Design Corporate Design Font Design Tablet Publishing
Cogneus Design
Fragestellung
pP
Wozu benötigen wir heute noch
Orientierung in den Medien,
obwohl seit Jahrhunderten die
Medienkultur weitergegeben wird?
Orientierung
pP
orientieren: 18. Jhd., entlehnt
aus frz. orienter, Ableitung von
frz. orient „Sonnenaufgang“,
„Osten“, „Orient“, die Be...
pP„O.K. Siri, wo bin ich ?“
Quelle: Nokia.com
Aktuelle Mediennutzung
im digitalen Zeitalter
„„ Das Smartphone ist der wichtigste
Begleiter in allen Lebenslagen
„„ 18 Mi...
drama
monarchy
language
loc:Stratford-upon-Avon
facebook.com/willshakespeare
twitter: @guildenstern
#married
#male
#englis...
Medien
Old School: Top down
Quelle: clu, iStockphoto.com
Quelle: Fotolia.de
Quelle: Cogneus.com
Gent vel et, quidus volescillo quis
molorem corunti busciissit initium
et fuga. Nem voluptu reprae corum
reicimeostasdolup...
Responsive Design
iPhone 4/4S
— 1.94” x 2.9”
The New iPad/iPad 2 — 5.88” x 7.84”
iPad mini — 4.71” x 6.28”
iPhone 5
— 1.96” x 3.49”
HTC Evo ...
Quelle: mycelly.com
Textfluss
ficim inctur sequid ullesendiam, inullorpor aut
moluptium, videbis ea veliatias volorerunt am,
netus, arit la sitia que qu...
ficim inctur sequid ullesendiam, inullorpor aut
moluptium, videbis ea veliatias volorerunt am,
netus, arit la sitia que qu...
pP
Moderne Medien haben kein
einheitlichen Format.
Layouts sind heute „responsiv“,
passen sich also an das
Anzeigegerät an...
Acepeliq uibus, et magnihit quosa quas magnisqui re seque maximus nobit derunt.
Con parchiciis enienis dolest, quam, commo...
Acepeliq uibus, et magnihit quosa quas mag-
nisqui re seque maximus nobit derunt.
Con parchiciis enienis dolest, quam, com...
pP
Ein ePUB besteht nicht aus Seiten, es
ist mehr ein Code, der auf mehreren
Bildschirmen umbrochen wird.
Interaktion
Quelle: mobiletuxedo.com
Lesbarkeit, Interaktion und Usability.
„„ Neben der Typografie, Bildern
und Grafiken bilden interaktive
Elemente eine glei...
Navigation
Orientierung in einem Print-Magazin
Cover Content Chapter 1 Chapter 2 Chapter 3 Chapter 4 Chapter 5 Imprint Preview
t
Hyperlink
Hyperlink
Orientierung in einem Print-Magazin
Cover Content Chapter 1 Chapter 2 Chapter 3 Chapter 4 Chapter 5 Im...
pP
Der User betritt ein digitales
Medium wie einen Korridor,
von dem aus die Türen offen
stehen und in jedem Raum eine
Übe...
Cover Content Chapter 1 Chapter 2 Chapter 3 Chapter 4 Chapter 5 Imprint Preview
Korridor in einem digitalen Magazin
t
Inte...
Alternative
Cover
Animation
Video
Content
Gallery
Chapter 1
HotSpot
Chapter 2
Scrollbox
Realtime 3D
Chapter 3
Video
Advert...
Alternative
Cover
Animation
Video
Content
Gallery
Chapter 1
HotSpot
Chapter 2
Scrollbox
Realtime 3D
Chapter 3
Video
Advert...
Quelle: Wired App
pP
Wie gelingt es, dem Nutzer zu
vermitteln, wo er suchen soll
und welche Informationen
auf ihn warten?
Raum
Quelle: Christoph Luchs
Quelle: Christoph Luchs
pP
Jeder Mensch besitzt ein
Grundverständnis von Raum.
Richtungen, Bewegungen und
Entfernungen werden erfahren und
als men...
Quelle: HBK Braunschweig, 2012
Quelle: HBK Braunschweig, 2012
Methodik
Arbeitsschritte zur Gestaltung
von Bedienoberflächen
„„ Personas: Zielgruppen in konkrete
Charaktere formulieren
„„ MoodBo...
Quelle: HBK Braunschweig, 2012
Quelle: Lynette Liwanag, Dribble.com Quelle: www.davewrightjr.com
Lust
pP
Der User will auf eine
Entdeckungsreise gehen.
Dabei braucht er keine absolute
Sicht auf alle Inhalte.
Sondern subtile ...
Fazit
Mit dem iPad von uns gegangen
Hier ruht die
Seite
Sie war uns stets eine feste Größe: geduldig,
anpassungsfähig und nicht ...
Orientierungsstörung und
Desorientiertheit
Orientierungsstörungen finden sich […] im
Zusammenhang mit Bewusstseinsstörunge...
pP
Methoden für die Gestaltung
von digitalen Medien
„„ Digitale Medien müssen auch
als digital begriffen werden:
Non-linea...
Danke.
luchs@cogneus.com
Von der Gestaltung to go zur Lust des Navigierens
Von der Gestaltung to go zur Lust des Navigierens
Von der Gestaltung to go zur Lust des Navigierens
Von der Gestaltung to go zur Lust des Navigierens
Von der Gestaltung to go zur Lust des Navigierens
Von der Gestaltung to go zur Lust des Navigierens
Prochain SlideShare
Chargement dans…5
×

Von der Gestaltung to go zur Lust des Navigierens

462 vues

Publié le

Was können wir von der Bedienung digitaler Magazine für E-Books und Books lernen?
Christoph Luchs, Cogneus.com, Marburg; Bookmarks 2014, mediacampus, Frankfurt am Main, 28. April 2014

Publié dans : Design
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
462
Sur SlideShare
0
Issues des intégrations
0
Intégrations
11
Actions
Partages
0
Téléchargements
2
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Von der Gestaltung to go zur Lust des Navigierens

  1. 1. Von der Gestaltung to go zur Lust des Navigierens oder: „Sonstige Symptome, die das Erkennungsvermögen und das Bewusstsein betreffen“ Was können wir von der Bedienung digitaler Magazine für E-Books und Books lernen? Christoph Luchs | Cogneus.com, Marburg | Bookmarks 2014, mediencampus, Frankfurt am Main | 28. April 2014
  2. 2. Zur Person: Christoph Luchs „„ Studium an der Hochschule für Bildende Künste Braunschweig und der School of Art & Design, Salford, U.K. „„ Diplom Grafik-Designer „„ Geschäftsführer der Designagentur Cogneus® Design, Braunschweig/ Marburg „„ Lehrauftrag „Interface Design“ an der HBK Braunschweig von 2008 bis 2012 „„ Software-Trainer für InDesign seit 1999 u.a. für Adobe, Cleverprinting „„ Autor u.a. für Galileo Press, Addison Wesley „„ Videotrainings bei video2brain seit 2003 u.a. zu InDesign, Layout und Typografie „„ Vorträge und Workshops u.a. für die tgm, Print Cluster Bayern „„ verheiratet, zwei Kinder
  3. 3. Publikationen Publishing für Apple iPad und Android Tablet Cleverprinting, 2013 Next Generation Publishing Cleverprinting, 2012 Videotraining, ca. 3 Std. video2brain, 2014 Videotraining, ca. 3 Std. video2brain, 2013
  4. 4. User Interface Design Corporate Design Font Design Tablet Publishing Cogneus Design
  5. 5. Fragestellung
  6. 6. pP Wozu benötigen wir heute noch Orientierung in den Medien, obwohl seit Jahrhunderten die Medienkultur weitergegeben wird?
  7. 7. Orientierung
  8. 8. pP orientieren: 18. Jhd., entlehnt aus frz. orienter, Ableitung von frz. orient „Sonnenaufgang“, „Osten“, „Orient“, die Bedeutung als Verallgemeinerung von: „die Position nach der (aufgehenden) Sonne bestimmen.“ Friedrich Kluge, Etymologisches Wörterbuch der deutschen Sprache. de Gruyter, 2011, S. 670
  9. 9. pP„O.K. Siri, wo bin ich ?“
  10. 10. Quelle: Nokia.com
  11. 11. Aktuelle Mediennutzung im digitalen Zeitalter „„ Das Smartphone ist der wichtigste Begleiter in allen Lebenslagen „„ 18 Millionen Deutsche nutzen ein Tablet (jeder vierte ab 14 Jahren)* „„ Sprachbefehle oder akustische Analyse (Siri, Shazam,…) „„ Instant Publishing (Facebook  Co.) „„ Augmented Reality, LiveView etc. „„ Metadaten für die Unterscheidung von Informationen „„ Tags, Hashtags, Likes, Favourites, Retweets, Posts, Voice Control… „„ Die Welt wird (ist) objektorientiert. Quelle: Bitkom, 02/2014
  12. 12. drama monarchy language loc:Stratford-upon-Avon facebook.com/willshakespeare twitter: @guildenstern #married #male #english #writer #actor
  13. 13. Medien
  14. 14. Old School: Top down Quelle: clu, iStockphoto.com
  15. 15. Quelle: Fotolia.de
  16. 16. Quelle: Cogneus.com
  17. 17. Gent vel et, quidus volescillo quis molorem corunti busciissit initium et fuga. Nem voluptu reprae corum reicimeostasdoluptiaalignatereritis solorequisquepratepedutquinectur alisnemvellaccumet,siverspedmoet. Ommoluptatem quis adicipsumquo occatio. Nam, quuntor emporibus, audit- at ulpa doluptat od min et que premodit is doluptati ressin et deliquas ullitiis essit eaquuntio. Lorehenient accaborio con- sequi nos ma vid quam, nissu- sa nistius doluptasitia comnitio berferem. Quam quos expel eos modit, to dolest ad ut re et quam que pore dolorum nulpa dolo- reris molorionet endem con est quati culliae. Udis eles posti oc- caboratis nos erianis et maioria pella ipiet, sinvenis et. Dis nobis ut que perferum fuga. Ut illibus. Int, consene sto- rerenditutofficatioccaborroidel- lorrum quas mo odiatum eture et ent aute „Volupturit“ officiu mquiaecearum faccum etur auda natem. Edit mollamende ipis dit ipsapita natias nam, con pel et. Rovit voluptat porerem facerovi- te sincipsam recus net labo. Ne- quaernam iscia amus voloreper- nam rerat quam, offictem. Ut exerferrovit expla comni quodi cuptat ad molupiciis quam dunt. S iorepe rnatur autem as et volorehenis „Quis- sinvenim“ id moluptate cor ma prat aut volupti- um etusciuribus sapitat ioreic te sinciae natquam illen- derro dolescipsum adi ut asse- quas. Solora in perovidunt omnim commolu ptumqui officim inctur re nos int. y SENSATION PERFEKT Unterzeilen unterstreichen die Überschrift. Quelle: Cogneus.com
  18. 18. Responsive Design
  19. 19. iPhone 4/4S — 1.94” x 2.9” The New iPad/iPad 2 — 5.88” x 7.84” iPad mini — 4.71” x 6.28” iPhone 5 — 1.96” x 3.49” HTC Evo — 3.43” x 6.1” Kindle Fire HD (8.9) — 4.72” x 7.55” Samsung Galaxy S3 — 2.35” x 4.18” Kindle Fire/HD — 3.43” x 6.1” Nokia Lumina 920 — 2.32” x 3.86” *Microsoft Surface — 5.2” x 9.24” Google Nexus — 3.71” x 5.94” Sony Tablet S — 4.98” x 7.97” Samsung Galaxy Note 10.1/ Motorola Xoom — 5.35” x 8.56” Quelle: Quark.com Format: liquid.
  20. 20. Quelle: mycelly.com
  21. 21. Textfluss
  22. 22. ficim inctur sequid ullesendiam, inullorpor aut moluptium, videbis ea veliatias volorerunt am, netus, arit la sitia que qui ullecat uribus ullis- sum rernam cus alis id magnatus es ut audam ipsae. Tendae labore pedit mi, quaspienim qui voluptae conserum reicidu ntotaque offici tem et eriat eum nestio minus simporum quas debi- tEllestotate nate volupta et lanis eos eum nis ea aut quis etus magnimagnim debit etur sequunt aut laboriossim non rerum doluptiis enectat la natio cuptatiis remperu ptureped eatur magna- tu repudae pratur? Agnis alicae porum remporeped quisi as sint laut voluptam, quamet, aut quiaspe ritintiunt. Olest, tor aut imoluptatur alitatis ut quo qui re la asin pore nonse id qui am es aces eturio te volores sequas dis doloresequi offic tem delit, offici ium quunt pore aliatem porenturiam aut utae consequ iamendis ationsequis este dolenis cus entis sitas pro maximet occupic imintem conecto estrum, simus, in conserro videlicia vi- deliquis dolupta ant aut doluptate consed min- ciae nonet quibus et iliquibus dolores tibusda ndunda di conet alisint es molecta dolum do- Acepeliq uibus, et magnihit quosa quas mag- nisqui re seque maximus nobit derunt. Con parchiciis enienis dolest, quam, commos et inveni voluptasit eum quis eum expedit ae- cuptis alibusa dolupta tatias peri aut pedis mo- luptatem velene venis veles ent. Gia sum imus im et aut prem quostiosae offic tem ium nihil exerataque officillit la velenih ilicil et adi ad eatessit venem es vero dit aut voluptatet quatem comnim core optat ad eos sanda quasper uptatet erum quiae excerspit et reresti oratem es dolecto quam, torum et fugi- ae is eossimi litatur si odis mo voluptatem ali- quo magnis rem dolo temo corati nest lab ipi- ci consectur samet vene pa doluptatem. Iquae nis quas num re, cum as resequam, sitis simi, ullic tem eum fugiassimus seque od mollendit venisque vellandus sequi ulluptatquam ut eum rae qui consercid ut deratae que nis si solla- ta quibusa ntiatum re ipienis reperis doluptas nusdae ipsaerisint hiciis mi, vellige nimillesto eum aliquam ataqui assequi intem. Nonsen- dentqueomniamerestrumerspidenitquoquas denimusdae pel et qui nulparis ius eumqui of-
  23. 23. ficim inctur sequid ullesendiam, inullorpor aut moluptium, videbis ea veliatias volorerunt am, netus, arit la sitia que qui ullecat uribus ullis- sum rernam cus alis id magnatus es ut audam ipsae. Tendae labore pedit mi, quaspienim qui voluptae conserum reicidu ntotaque offici tem et eriat eum nestio minus simporum quas debi- tEllestotate nate volupta et lanis eos eum nis ea aut quis etus magnimagnim debit etur sequunt aut laboriossim non rerum doluptiis enectat la natio cuptatiis remperu ptureped eatur magna- tu repudae pratur? Agnis alicae porum remporeped quisi as sint laut voluptam, quamet, aut quiaspe ritintiunt. Olest, tor aut imoluptatur alitatis ut quo qui re la asin pore nonse id qui am es aces eturio te volores sequas dis doloresequi offic tem delit, offici ium quunt pore aliatem porenturiam aut utae consequ iamendis ationsequis este dolenis cus entis sitas pro maximet occupic imintem conecto estrum, simus, in conserro videlicia vi- deliquis dolupta ant aut doluptate consed min- ciae nonet quibus et iliquibus dolores tibusda ndunda di conet alisint es molecta dolum do- Acepeliq uibus, et magnihit quosa quas mag- nisqui re seque maximus nobit derunt. Con parchiciis enienis dolest, quam, commos et inveni voluptasit eum quis eum expedit ae- cuptis alibusa dolupta tatias peri aut pedis mo- luptatem velene venis veles ent. Gia sum imus im et aut prem quostiosae offic tem ium nihil exerataque officillit la velenih ilicil et adi ad eatessit venem es vero dit aut voluptatet quatem comnim core optat ad eos sanda quasper uptatet erum quiae excerspit et reresti oratem es dolecto quam, torum et fugi- ae is eossimi litatur si odis mo voluptatem ali- quo magnis rem dolo temo corati nest lab ipi- ci consectur samet vene pa doluptatem. Iquae nis quas num re, cum as resequam, sitis simi, ullic tem eum fugiassimus seque od mollendit venisque vellandus sequi ulluptatquam ut eum rae qui consercid ut deratae que nis si solla- ta quibusa ntiatum re ipienis reperis doluptas nusdae ipsaerisint hiciis mi, vellige nimillesto eum aliquam ataqui assequi intem. Nonsen- dentqueomniamerestrumerspidenitquoquas denimusdae pel et qui nulparis ius eumqui of-
  24. 24. pP Moderne Medien haben kein einheitlichen Format. Layouts sind heute „responsiv“, passen sich also an das Anzeigegerät an. Der Inhalt fließt in die Layoutform.
  25. 25. Acepeliq uibus, et magnihit quosa quas magnisqui re seque maximus nobit derunt. Con parchiciis enienis dolest, quam, commos et inveni voluptasit eum quis eum expedit aecuptis alibusa dolupta tatias peri aut pedis moluptatem velene venis veles ent. Gia sum imus im et aut prem quostiosae offic tem ium nihil exerataque officillit la velenih ilicil et adi ad eatessit venem es vero dit aut voluptatet quatem com- nim core optat ad eos sanda quasper uptatet erum quiae excerspit et reresti oratem es dolecto quam, torum et fugiae is eossimi litatur si odis mo voluptatem aliquo magnis rem dolo temo corati nest lab ipici consectur samet vene pa doluptatem. Iquae nis quas num re, cum as resequam, sitis simi, ullic tem eum fu- giassimus seque od mollendit venisque vellandus sequi ulluptatquam ut eum rae qui consercid ut deratae que nis si sollata quibusa ntiatum re ipienis reperis doluptas nusdae ipsaerisint hiciis mi, vellige nimillesto eum aliquam ataqui assequi intem. Nonsendent que omniame restrum erspidenit quo quas denimus- dae pel et qui nulparis ius eumqui officim inctur sequid ullesendiam, inullorpor aut moluptium, videbis ea veliatias volorerunt am, netus, arit la sitia que qui ullecat uribus ullissum rernam cus alis id magnatus es ut audam ipsae. Tendae labore pedit mi, quaspienim qui voluptae conserum reicidu ntotaque offici tem et eriat eum nestio minus simporum quas debitEllestotate nate volupta et lanis eos eum nis ea aut quis etus magnimagnim debit etur sequunt aut laboriossim non rerum doluptiis enectat la natio cuptatiis remperu ptureped eatur magnatu repudae pratur? Agnis alicae porum remporeped quisi as sint laut voluptam, quamet, aut quiaspe ritintiunt. Olest, tor aut imoluptatur alitatis ut quo qui re la asin pore nonse id qui am es aces eturio te volores sequas dis doloresequi offic tem delit, offici ium quunt pore aliatem porenturiam aut utae consequ iamendis ationsequis este dolenis cus entis sitas pro maximet occupic imintem conecto estrum, simus, in conserro vi- delicia videliquis dolupta ant aut doluptate consed minciae nonet quibus et iliquibus dolores tibusda ndunda di conet alisint es molecta dolum dolupture, tem abori de maximint, omnimaiora dio blatus maio eostia dollaccum iust, assiminctus re dolut eos eatem iusdand eliquis dolorem volenis eum re asitaturist quatis sequam estem deliquatiis dolo qui non recaerrum abor sit dentum consero qui quatur? Aximi, officat. Idebit illupta ectibus, omni atiam rehenes doluptas ipsunt hilit vene nihil ipsame mosae et facepud animus sedit inciata eatus anitibu scipicim volorro evelesed quid maximenist offi Nam ea sed quis sitiaeres ex enihici iscilit, offic tendicium remporitatat quam volorep erumqui offici odiatem corrumqui aut erepell uptatus. Tatiassimo et odi qui que ne nonectibusa serum quidellecum exeria dusciania nimo est reperatistia corit maximus restiumque quasperum fugiatur accusam quas estium audi ad que nisitatque eum quatat esseriti dem utem aut latemquatet aliae. Les andignat excerio ipsae eos raecepere prae et possum a ipient ulpa- rumque nia plab id quos as eum quis doluptatempe exped mos sus, aliquam vendae dolorer sperum volupta tenihil inus. Ignihil molluptam cume rem. Sit doluptae voluptae venti ne dolupta sinverum ut quias rem quam, quas dem. Ut officia soluptas et ditiumque et vellandi bearci- libus esed qui nestiae voluptatatis audit exeribus, incia alignat emquideles as am quam inverrum aut vel mo deratet, omnihit asinihit eaque vel eos nus, cuscid et dolupta periorr ovidel estem qui apis acia quam, cullesero moluptatque volorectem dolupid modiasperati as min reribus repellu ptatem fugias ma nectios soluptamus nobis consecus adi apidem quo blabore perrovid ulparchil int labore et aut ipsunt. Voluptur molore, cum aperchilit, quiam es nonse sus voluptas eium doluptat ex ex eaquiatur rentio tet is ipsunt auta nos audanimin nobitas comnis ea perspe pliquo que nonsequam assi blaccumqui officiis et untentiunda solorro repudipiet estem aspicto tatio. Magnatum ius, sinvelibus mi, unt. Rum quam ra dolorempost laborunt et ipsuntio. Odignam aped min et atem nobis dolorrum volorum derisquam que volorep ernatecum, aut ommolup tatiur sume lam alicias se pre explit, officta tiistio nsecus voluptium non eos none ra voles ma vit ipsapide invelenis apercium consed etus estia cor magnima gnimus parunto ent pro tempor aut qui tent vellest iorias dolor acitibusci corem eum volores tionsequis am voluptatur sapere et eliqui rectotatque litionsequia prese- dicabo. Ectibus et as dolutest odis explisciis minulluptae provid etus, odit liquassi cum labore lacerumquae. Ga. Santem est rem fugit as delestemqui doluptu ribusam, sit quiant ra sent eaquo excessu sdandaero conse estiant, te sunda accum et ea quos et et ad que dolent doluptatur sin pliberchicia arum quis pos et eostem hil imoluptas vernate mporeped quunt. Quia vent. Ta sitiuntur? Qui omnihic itiuntia volendis re pelitas enis pro cum illorerum autest accae nonsera tibusam volore corera dit, sunt ut andigenim sed que as iliqui aut id qui toreici optat. Et ipicita testrum voloreperunt molestior soluptatur sit et ut doles sed quiatest, vent. Icideri buscia qui nossed magnihi llaccus ciisquis venis eseristempor sitassin pore molorem quiaspi squaectiorem qui blaut utempor magnimet eiciisciam utat. Et eatio tem et excestem ipsam, ommodit voluptatum eos verum expe la pro ipsam re velia ente nectam estrumq uatendae qui te sit, omnis qui asitiur asped ul- labo. Icatur, occuptatior autem que consed qui as et estio molum quist facerias dolorem quiamus ipsaest, offic tem harchil laborup tiaeper orehendunt eossunt est, uta venet fugit fugia invendae. Oris acea nobis magnimi, quis volest, sus dolorunt. Dus con ea volorum nest expligenis et iscimus es numqui blabo. Nequatem dolores simagnat pra ipiduci moluptae dellum qui que nobis videbist, nonserrovid modicabore soluptam ipsam quae eosae pro esti odi re pra doluptur? Orestione conserum everio. Andenis rae porrovitatur sapiet autas aut lani to dit latentum facipsum repudae quoditatur reperro beatiunt, nem quas as reserum alit aut utae pror sandit aut eatenti dolendis quas destem eum sinullita quibus natem dis sandestem ut faccupti cus eliquiscim que etus anderfe ruptaqu amenia conseniatur? Reribus eos molupti nitio conseniet audae cones ent optaes volor alicimpor accuptaturia solectur aut magnatque volupti nimolo mo blaut maximiniene pore la nimagnis eum eate none dessit aut maior alignimo imus.
  26. 26. Acepeliq uibus, et magnihit quosa quas mag- nisqui re seque maximus nobit derunt. Con parchiciis enienis dolest, quam, commos et inveni voluptasit eum quis eum expedit ae- cuptis alibusa dolupta tatias peri aut pedis mo- luptatem velene venis veles ent. Gia sum imus im et aut prem quostiosae offic tem ium nihil exerataque officillit la velenih ili- cil et adi ad eatessit venem es vero dit aut volup- tatet quatem comnim core optat ad eos sanda quasper uptatet erum quiae excerspit et reresti oratem es dolecto quam, torum et fugiae is eos- simi litatur si odis mo voluptatem aliquo mag- nis rem dolo temo corati nest lab ipici consec- tur samet vene pa doluptatem. Iquae nis quas num re, cum as resequam, sitis simi, ullic tem eum fugiassimus seque od mollendit venisque vellandus sequi ulluptatquam ut eum rae qui consercid ut deratae que nis si sollata quibusa ntiatum re ipienis reperis doluptas nusdae ip- saerisint hiciis mi, vellige nimillesto eum ali- quam ataqui assequi intem. Nonsendent que omniame restrum erspidenit quo quas deni- musdae pel et qui nulparis ius eumqui of Ost faccusant, sa voluptatate parum fugiamus. Tias dem quas ducimperis seque sitature por moluptati odio. El il ma dolenim poreculla vo- lupidel invelligeni cuptatempori od erum ut ulpa quis et ilibus mo odigent quia venessimint et quam quatio exceaquature moluptae sus, sin nobit doluptas quiatur, sum fuga. Nem hillo
  27. 27. pP Ein ePUB besteht nicht aus Seiten, es ist mehr ein Code, der auf mehreren Bildschirmen umbrochen wird.
  28. 28. Interaktion
  29. 29. Quelle: mobiletuxedo.com
  30. 30. Lesbarkeit, Interaktion und Usability. „„ Neben der Typografie, Bildern und Grafiken bilden interaktive Elemente eine gleichwertige und teilweise übergeordnete Rolle. „„ Gestiken und Befehle müssen erlernt werden, das Medium sollte fehlertolerant reagieren. „„ Information und Interaktion sollen eindeutig unterscheidbar sein „„ Interaktionen sollten gekennzeichnet werden „„ Bilderserien, Videos, Animationen, Scrollboxen, PopUps, Hyperlinks,… „„ Web-Inhalte können online in einem Medium eingebunden werden. „„ Augmented Reality stellt eine hohe Herausforderung für Medium und User dar.
  31. 31. Navigation
  32. 32. Orientierung in einem Print-Magazin Cover Content Chapter 1 Chapter 2 Chapter 3 Chapter 4 Chapter 5 Imprint Preview t
  33. 33. Hyperlink Hyperlink Orientierung in einem Print-Magazin Cover Content Chapter 1 Chapter 2 Chapter 3 Chapter 4 Chapter 5 Imprint Preview t
  34. 34. pP Der User betritt ein digitales Medium wie einen Korridor, von dem aus die Türen offen stehen und in jedem Raum eine Überraschung auf ihn wartet.
  35. 35. Cover Content Chapter 1 Chapter 2 Chapter 3 Chapter 4 Chapter 5 Imprint Preview Korridor in einem digitalen Magazin t Interest
  36. 36. Alternative Cover Animation Video Content Gallery Chapter 1 HotSpot Chapter 2 Scrollbox Realtime 3D Chapter 3 Video Advertorial Chapter 4 Advert News Chapter 5 Imprint Preview Korridor in einem digitalen Magazin t Interest
  37. 37. Alternative Cover Animation Video Content Gallery Chapter 1 HotSpot Chapter 2 Scrollbox Realtime 3D Chapter 3 Video Advertorial Chapter 4 Advert News Chapter 5 Imprint Preview Website WebsiteContact Form Contact FormNewsletter Shop Korridor in einem digitalen Magazin t Interest
  38. 38. Quelle: Wired App
  39. 39. pP Wie gelingt es, dem Nutzer zu vermitteln, wo er suchen soll und welche Informationen auf ihn warten?
  40. 40. Raum
  41. 41. Quelle: Christoph Luchs
  42. 42. Quelle: Christoph Luchs
  43. 43. pP Jeder Mensch besitzt ein Grundverständnis von Raum. Richtungen, Bewegungen und Entfernungen werden erfahren und als mentale Karte gespeichert.
  44. 44. Quelle: HBK Braunschweig, 2012
  45. 45. Quelle: HBK Braunschweig, 2012
  46. 46. Methodik
  47. 47. Arbeitsschritte zur Gestaltung von Bedienoberflächen „„ Personas: Zielgruppen in konkrete Charaktere formulieren „„ MoodBoards: Stimmungen einfangen „„ Storyboard: Wesentliche Schritte skizzieren „„ FlowChart: Prozesse sichtbar machen „„ Screenlayout: Informationen fest oder flexibel verorten „„ Screendesign: Pixelgenaue Gestaltung „„ Interaktion: Ergänzung der statischen Seiten mit Multimedia- Elementen
  48. 48. Quelle: HBK Braunschweig, 2012
  49. 49. Quelle: Lynette Liwanag, Dribble.com Quelle: www.davewrightjr.com
  50. 50. Lust
  51. 51. pP Der User will auf eine Entdeckungsreise gehen. Dabei braucht er keine absolute Sicht auf alle Inhalte. Sondern subtile Hinweise und vor allem eins: Überraschungen!
  52. 52. Fazit
  53. 53. Mit dem iPad von uns gegangen Hier ruht die Seite Sie war uns stets eine feste Größe: geduldig, anpassungsfähig und nicht nachtragend. Die Bleisetzung findet im engsten Familienkreis statt.
  54. 54. Orientierungsstörung und Desorientiertheit Orientierungsstörungen finden sich […] im Zusammenhang mit Bewusstseinsstörungen, Gedächtnisstörungen, Psychosen,organischem Psychosyndrom, Demenz oder Wahrnehmungsstörungen. (ICD-10-Code R41 - Sonstige Symptome, die das Erkennungsvermögen und das Bewusstsein betreffen). Quelle: http://de.wikipedia.org/wiki/Orientierung_(mental)
  55. 55. pP Methoden für die Gestaltung von digitalen Medien „„ Digitale Medien müssen auch als digital begriffen werden: Non-linear, dynamisch, flüchtig „„ Grundregeln der Typografie und Bildgestaltung gelten auch für die nächsten Jahrhunderte „„ Das einfache Kopieren von Print- Medien auf digitale Geräte ist zwar (fast) umsonst, aber erfolglos „„ Responsives Layout wird zur Kernaufgabe in der Herstellung von digitalen Magazinen „„ Die Konzentration auf das Erzählen der Inhalte führt zu neuen Layouts „„ Balance aus Orientierung und Entdeckungslust „„ Leserinteresse und -verhalten mithilfe von Personas formulieren „„ Layout über WireFrames festlegen „„ Prototyping mithilfe von WebTools wie Balsamiq oder Themes (CMS) „„ Die digitale Qualität eines Mediums bildet sich erst heraus
  56. 56. Danke. luchs@cogneus.com

×