Post on 29-Oct-2014
description
Gestalten für das iPad.Design. Kantine. Namics.
Zürich, 19. Oktober 2010
Namics.2 Gestalten für das iPad. Würze. Designkantine.
„We see the iPad as the Mac for the masses.“
Wall Street Analyst Gene Munster von Piper Jaffray im September 2010
29.5.2009
Namics.3 Gestalten für das iPad. Würze. Designkantine.
…more than 50 percent of the Fortune 100 are deploying or testing the iPad.
Wall Street Analyst Gene Munster von Piper Jaffray im September 2010
29.5.2009
Namics.Gestalten für das iPad. Würze. Designkantine.4
Das Menü.
Antipasti
User-Interface Prinzipien und Häppchen
Primi Piatti
Zutaten und Gewürze
Secondi Piatti
Kochutensilien und Zubereitungshinweise
Dolci
Kitsch vs. Corporate
Menü.
29.5.2009
Namics.
Antipasti
Namics.
User-Interface Prinzipien und Häppchen
Delight People
Enhance Interactivity
Simplicity is powerful
Pay attention to patterns
Make it self-explanatory
29.5.2009 Gestalten für das iPad. Würze. Designkantine.6
Namics.Gestalten für das iPad. Würze. Designkantine.729.5.2009
Namics.Gestalten für das iPad. Würze. Designkantine.829.5.2009
Namics.Gestalten für das iPad. Würze. Designkantine.929.5.2009
Namics.Gestalten für das iPad. Würze. Designkantine.1029.5.2009
Namics.Gestalten für das iPad. Würze. Designkantine.1129.5.2009
Namics.Gestalten für das iPad. Würze. Designkantine.1229.5.2009
Namics.Gestalten für das iPad. Würze. Designkantine.1329.5.2009
Namics.Gestalten für das iPad. Würze. Designkantine.1429.5.2009
Namics.Gestalten für das iPad. Würze. Designkantine.1529.5.2009
Namics.Gestalten für das iPad. Würze. Designkantine.1629.5.2009
Namics.Gestalten für das iPad. Würze. Designkantine.
Weitere Beispiel.
Wilmaa TV
Memonic
Photoshop Express
Sleep
Vogue Deutschland
Datum
Wired
Cool Hunting (News & Gadgets)
Marvel Comics
Associated Press
Tap Tap Radiation (Interaktion & Sound)
iDesk Lite
Das Foto-Kochbuch
Antipasti. User-Interface Prinzipien und Häppchen.
29.5.2009 17
Namics.
Primi Piatti
Namics.Gestalten für das iPad. Würze. Designkantine.19
Morphologischer Kasten. Lecker.
Primi Piatti . Zutaten und Gewürze.
29.5.2009
some rights reserved by andrea joseph's illustrations
Namics.Gestalten für das iPad. Würze. Designkantine.20
Morphologischer Kasten. Lecker.
Primi Piatti . Zutaten und Gewürze.
29.5.2009
Marktthema
Branche
Verfügbarkeit
Nutzungsdauer
Häufigkeit
Nutzungskontext
Designkonzept
Online Strategie
Marken-kommunikation
Online Marketing E-Commerce
SocialApplication
Web ContentManagement
Intranet/E-Collaboration
Automobil Energie Finanz NahrungIndustrie/Transport
Konsum-güter
Medien/Verlage
NGOPharma/Chemie
...
offline Mobiles Netz ISDN Breitband
JahreWochenTageStundenMinuten
einmalig immerselten regelmässig oft
spielenerkunden suchen arbeitenlernen unterhalten
Kitsch Desktop Physikalisch iOS StandardBrandInfografik
Namics.Gestalten für das iPad. Würze. Designkantine.21
Morphologischer Kasten. Lecker.
Primi Piatti . Zutaten und Gewürze.
29.5.2009
Marktthema
Branche
Verfügbarkeit
Nutzungsdauer
Häufigkeit
Nutzungskontext
Designkonzept
Online Strategie
Marken-kommunikation
Online Marketing E-Commerce
SocialApplication
Web ContentManagement
Intranet/E-Collaboration
Automobil Energie Finanz NahrungIndustrie/Transport
Konsum-güter
Medien/Verlage
NGOPharma/Chemie
...
offline Mobiles Netz ISDN Breitband
JahreWochenTageStundenMinuten
einmalig immerselten regelmässig oft
spielenerkunden suchen arbeitenlernen unterhalten
Kitsch Desktop Physikalisch iOS StandardBrandInfografik
Namics.Gestalten für das iPad. Würze. Designkantine.22
Full Service. Website.
Primi Piatti . Zutaten und Gewürze.
29.5.2009
Namics.Gestalten für das iPad. Würze. Designkantine.23
Single Minded. iPad App.
Primi Piatti . Zutaten und Gewürze.
29.5.2009
Namics.Gestalten für das iPad. Würze. Designkantine.24
Single Minded. iPad App.
Primi Piatti . Zutaten und Gewürze.
29.5.2009
Namics.Gestalten für das iPad. Würze. Designkantine.25
Morphologischer Kasten. Lecker.
Primi Piatti . Zutaten und Gewürze.
29.5.2009
Marktthema
Branche
Verfügbarkeit
Nutzungsdauer
Häufigkeit
Nutzungskontext
Designkonzept
Online Strategie
Marken-kommunikation
Online Marketing E-Commerce
SocialApplication
Web ContentManagement
Intranet/E-Collaboration
Automobil Energie Finanz NahrungIndustrie/Transport
Konsum-güter
Medien/Verlage
NGOPharma/Chemie
...
offline Mobiles Netz ISDN Breitband
JahreWochenTageStundenMinuten
einmalig immerselten regelmässig oft
spielenerkunden suchen arbeitenlernen unterhalten
Kitsch Desktop Physikalisch iOS StandardBrandInfografik
Namics.Gestalten für das iPad. Würze. Designkantine.26
Full Service. Website.
Primi Piatti . Zutaten und Gewürze.
29.5.2009
Namics.Gestalten für das iPad. Würze. Designkantine.27
Single Minded. iPad App.
Primi Piatti . Zutaten und Gewürze.
29.5.2009
Namics.Gestalten für das iPad. Würze. Designkantine.28
Morphologischer Kasten. Lecker.
Primi Piatti . Zutaten und Gewürze.
29.5.2009
Marktthema
Branche
Verfügbarkeit
Nutzungsdauer
Häufigkeit
Nutzungskontext
Designkonzept
Online Strategie
Marken-kommunikation
Online Marketing E-Commerce
SocialApplication
Web ContentManagement
Intranet/E-Collaboration
Automobil Energie Finanz NahrungIndustrie/Transport
Konsum-güter
Medien/Verlage
NGOPharma/Chemie
...
offline Mobiles Netz ISDN Breitband
JahreWochenTageStundenMinuten
einmalig immerselten regelmässig oft
spielenerkunden suchen arbeitenlernen unterhalten
Kitsch Desktop Physikalisch iOS StandardBrandInfografik
Namics.Gestalten für das iPad. Würze. Designkantine.29
Full Service. Website.
Primi Piatti . Zutaten und Gewürze.
29.5.2009
Namics.Gestalten für das iPad. Würze. Designkantine.30
iPad optimiert. Website.
Primi Piatti . Zutaten und Gewürze.
29.5.2009
Namics.
Secondi Piatti
Namics.
Paper Prototyping
Designskizzen. Simulation. Prototyping.
29.5.2009 32 Gestalten für das iPad. Würze. Designkantine.
Namics.Gestalten für das iPad. Würze. Designkantine.33
Paper Prototyping
29.5.2009
Namics.Gestalten für das iPad. Würze. Designkantine.34
Paper Prototyping
29.5.2009
Namics.
iPad GUI PSD
Designskizzen. Simulation. Prototyping.
29.5.2009 35 Gestalten für das iPad. Würze. Designkantine.
Namics.Gestalten für das iPad. Würze. Designkantine.36
iPad GUI PSD für Photoshop
29.5.2009
http://www.teehanlax.com/blog/2010/02/01/ipad-gui-psd/
Namics.
iPad GUI InDesign
Designskizzen. Simulation. Prototyping.
29.5.2009 37 Gestalten für das iPad. Würze. Designkantine.
Namics.Gestalten für das iPad. Würze. Designkantine.38
iPad GUI – Vorlage und Libraries für InDesign
29.5.2009
Namics.
LiveView
Designskizzen. Simulation. Prototyping.
29.5.2009 39 Gestalten für das iPad. Würze. Designkantine.
Namics.Gestalten für das iPad. Würze. Designkantine.40
LiveView – Preview vom Desktop auf das iPad
29.5.2009
http://zambetti.com/projects/liveview/
Namics.
Interface HD
Designskizzen. Simulation. Prototyping.
29.5.2009 41 Gestalten für das iPad. Würze. Designkantine.
Namics.Gestalten für das iPad. Würze. Designkantine.42
Interface HD – Rapid Prototyping auf dem iPad
29.5.2009
http://lesscode.co.nz/interface?p=ipad
Namics.
Hybrid. Native. Programmierung.
29.5.2009 43 Gestalten für das iPad. Würze. Designkantine.
Namics.Gestalten für das iPad. Würze. Designkantine.44
Hybrid. Native. Programmierung.
Apple Software Development Kit
Objective-C Programmierung
Flash CS5
Flash CS5 Professional
Adobe Digital Publishing Tools
InDesign CS5 + Digital Content Builder
PhoneGap
HTML + JavaScript
Sencha Touch (HTML Framework)
HTML + JavaScript
29.5.2009
Namics.
Sencha Touch
Hybrid. Native. Programmierung.
29.5.2009 45 Gestalten für das iPad. Würze. Designkantine.
Namics.
Dolci
Was würden Sie wählen?
Namics.Gestalten für das iPad. Würze. Designkantine.
Was würden Sie wählen?
Dolci. Kitsch vs. Corporate.
29.5.2009 48
Keine Originaldarstellung möglich
Namics.49
Nach der Stimmabgabe „Browser-Back“.
http://www.surveymonkey.com/s/8Z8G269
Dolci. Kitsch vs. Corporate.
29.5.2009 Gestalten für das iPad. Würze. Designkantine.
Was ist eigentlich Kitsch?
Some rights reserved by genevieveromier
Namics.Gestalten für das iPad. Würze. Designkantine.
Auch auf Deinem iPad ist Kitsch…
Unnötige Texturen
Material-Imitat
Reale Objekte oder Interfaces
Unsere tägliche Umgebung wird zitiertDer Nutzen ist meist fraglich…
Dolci. Kitsch vs. Corporate.
29.5.2009 52
Books oder Lonley Planet
“A graphically rich look at a wide variety of trips.”- New York Times
“Wonderful. Grab it now.” - Gizmodo
Warum spricht uns Kitsch so an?
Logos(Verstand)
Pathos (Emotion)
Ethos(Normen & Werte)
Namics.Gestalten für das iPad. Würze. Designkantine.58
Drei Überzeugungsmittel der visuellen Rhetorik.
Dolci. Kitsch vs. Corporate.
Logos(Verstand)
Ethos(Normen & Werte)
Pathos (Emotion)
Emotionale Assoziationen
Illusion der Existenz
Einladung zum Anfassen Intuitive Interaktion
29.5.2009
Namics.59 Gestalten für das iPad. Würze. Designkantine.
Bezug zur Realität schafft Kontext.29.5.2009
Namics.60 Gestalten für das iPad. Würze. Designkantine.
Kontext ist wichtig.29.5.2009
Namics.Gestalten für das iPad. Würze. Designkantine.61
Kontext ist verantwortlich für:
Emotionale Assoziation
Ein Ort an dem man gerne wäre
Dinge, die einfach schön sind
Ein tolles Fest
Dolci. Kitsch vs. Corporate.
29.5.2009
Namics.Gestalten für das iPad. Würze. Designkantine.64
Kontext ist verantwortlich für:
Emotionale Assoziation
Illusion der Existenz
Ein digitales Buch Realität werden lassen
Meine Notiz auf Papier festhalten
Dolci. Kitsch vs. Corporate.
29.5.2009
Some rights reserved by jensjeppe
Namics.Gestalten für das iPad. Würze. Designkantine.66
Kontext ist verantwortlich für:
Emotionale Assoziation
Illusion der Existenz
Einladung zum Anfassen
Objekte die auch “in echt” benutzt werden
Oberflächen, die man gern berührt
Dolci. Kitsch vs. Corporate.
29.5.2009
Some rights reserved by realblades
Namics.Gestalten für das iPad. Würze. Designkantine.68
Kontext ist verantwortlich für:
Emotionale Assoziation
Illusion der Existenz
Einladung zum Anfassen
Intuitive Interaktion
Interaktion ohne Neues zu lernen
Keine Hürde für ungeübte Beginner
Steuer-Elemente zum Drehen, Schieben, Bewegen
Schalter oder Hebel zum Tippen, Drücken, Umlegen
Griffe zum Festhalten und Bewegen
Dolci. Kitsch vs. Corporate.
29.5.2009
Some rights reserved by quinn.anya
Logos(Verstand)
Pathos (Emotion)
Ethos(Normen & Werte)
Namics.Gestalten für das iPad. Würze. Designkantine.71
Logos(Verstand)
Ethos(Normen & Werte)
Wo viel Licht ist, ist viel Schatten ;-).
Dolci. Kitsch vs. Corporate.
29.5.2009
Pathos (Emotion)
Vorsicht Stolperfallen
Kitsch-O-Meter
Was steht vor der ersten Seite?
Kitsch-O-Meter
Und was kommt jetzt noch?
Kitsch-O-Meter
Kitsch-O-Meter
OFF ON
Kitsch-O-Meter
Was ist an einem realen Schalter falsch?
Namics.Gestalten für das iPad. Würze. Designkantine.78
Was ist an einem realen Schalter falsch?
Dolci. Kitsch vs. Corporate.
K29.5.2009
Meta-Information fehlt
Vorne Bühne Spots Mitte
Hinten Rechts Links Mitte
Namics.
Das sind iPad Schalter.
Vordere Lichtleiste
Bühne
Spots für Bilder
Raumlicht
Spots am Fenster
Raumsteuerung
29.5.2009 82
Dolci. Kitsch vs. Corporate.
Gestalten für das iPad. Würze. Designkantine.
Namics.
Zurück zum Beispiel.
29.5.2009 83
Some rights reserved by Horia Varlan
Dolci. Kitsch vs. Corporate.
Gestalten für das iPad. Würze. Designkantine.
Namics.
Morphologischer Kasten. Raiffeisen iPad.
29.5.2009 84
MarktthemaOnline
StrategieMarken-
kommunikationOnline
Marketing E-CommerceSocial
ApplicationWeb ContentManagement
Intranet/E-Collaboration
Branche Automobil Energie Finanz NahrungIndustrie/Transport
Konsum-güter
Medien/Verlage
NGOPharma/Chemie
...
Verfügbarkeit offline Mobiles Netz ISDN Breitband
Nutzungsdauer JahreWochenTageStundenMinuten
Häufigkeit einmalig immerselten regelmässig oft
Nutzungskontext spielenerkunden suchen arbeitenlernen unterhalten
Designkonzept Kitsch Desktop Physikalisch iOS StandardBrandInfografik
Dolci. Kitsch vs. Corporate.
Gestalten für das iPad. Würze. Designkantine.
Namics.
Unsere Entscheidung.
Corporate Design vor Kitsch
Markenkommunikation: Eine Raiffeisen Welt – emotional ausreichend
Lernen: Finanzierung eines Eigenheims
Intuitive Bedienung
Intensive Nutzung in einem kurzen Zeitraum
Regelmässige, seltene Nutzung auf Dauer
Touch-Steuerung für Geldbeträge
29.5.2009 85
Dolci. Kitsch vs. Corporate.
Gestalten für das iPad. Würze. Designkantine.
Namics.Gestalten für das iPad. Würze. Designkantine.
Raiffeisen iPad Prototyp
29.5.2009 86
Keine Originaldarstellung
Namics.Gestalten für das iPad. Würze. Designkantine.87
Und was ist Ihre Wahl?
http://www.surveymonkey.com/s/8Z8G269
Dolci. Kitsch vs. Corporate.
29.5.2009
Namics.
Fazit29.5.2009 88 Gestalten für das iPad. Würze. Designkantine.
Namics.89 Gestalten für das iPad. Würze. Designkantine.
Delight People
“Delight People with Stunning Graphics – One way to increase the perceived value of your application is to replicate the look of high- quality or precious materials. For example, if the e ect of wood, ffleather, or metal is appropriate in your application, take the time to make sure the material looks realistic and valuable.”
iPad Human Interface Guidelines p.24
29.5.2009
Namics.90 Gestalten für das iPad. Würze. Designkantine.
Enhance Interactivity
“The best iPad applications give people innovative ways to interact with content while they perform a clearly defined, finite task. Resist the temptation to fill the large screen with features that are not directly related to the main task.”
iPad Human Interface Guidelines p.19
29.5.2009
Namics.91 Gestalten für das iPad. Würze. Designkantine.
Simplicity is powerful
Simplicity fuels many elements of good design, including ease of use, speed, visual appeal, and accessibility. But simplicity starts with the design of a product‘s fundamental functions.
Googley user experience
29.5.2009
Namics.92 Gestalten für das iPad. Würze. Designkantine.
Pay attention to patterns
Users spend the majority of their time on interfaces other than your own. There is no need to reinvent the wheel. Those interfaces may solve some of the same problems that users perceive within the one you are creating. By using familiar UI patterns, you will help your users feel at home.
Think Vitamin – 10 User Interface Guidelines
29.5.2009
Namics.93 Gestalten für das iPad. Würze. Designkantine.
Make it self-explanatory
Good design makes a product understandable. It clarifies the product’s structure. Better still, it can make the product talk. At best, it is self-explanatory.
Dieter Rams: ten principles for good design.
29.5.2009
Namics.Gestalten für das iPad. Würze. Designkantine.94
Designprinzipien.
iPad User Experience Guidelines (Apple)
http://www.lukew.com/ff/entry.asp?995
10 User Interface Design Fundamentals (Think Vitamin)
http://thinkvitamin.com/design/10-user-interface-design-fundamentals/
10 Heuristics for User Interface Design (Jakob Nielsen)
http://www.useit.com/papers/heuristic/heuristic_list.html
The Googley User Experience Principles (Google)
http://www.google.com/corporate/ux.html
Ten Principles of Good Design (Dieter Rams)
http://www.vitsoe.com/en/re/about/dieterrams/gooddesign
Design Principles Glossary
http://www.usabilityfirst.com/glossary/design-principles/
Fazit.
29.5.2009
Namics.95 Gestalten für das iPad. Würze. Designkantine.
Fazit
Zweckorientiert. Reduziert. Intuitiv.
29.5.2009
Namics.Gestalten für das iPad. Würze. Designkantine.
Single Minded 29.5.2009 96
Namics.
Vielen Dank für Ihre Aufmerksamkeit.
claus.medvesek@namics.comdaniel.demel@namics.comthomas.link@namics.com
© Namics
29.5.2009 97 Gestalten für das iPad. Würze. Designkantine.