Gestalten für das iPad. Design. Kantine. Namics.

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


…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.

Weitere Beispiel.

Wilmaa TV

Memonic

Photoshop Express

Sleep

Vogue Deutschland

Datum

Wired

Twitter

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


Morphologischer Kasten. Lecker.

Primi Piatti . Zutaten und Gewürze.

29.5.2009

some rights reserved by andrea joseph's illustrations




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




29.5.2009

Marktthema

Branche

Verfügbarkeit

Nutzungsdauer

Häufigkeit

Nutzungskontext

Designkonzept

Online Strategie



SocialApplication




Konsum-güter

Medien/Verlage

NGOPharma/Chemie

...







Full Service. Website.


29.5.2009


Single Minded. iPad App.


29.5.2009




29.5.2009




29.5.2009

Marktthema

Branche

Verfügbarkeit

Nutzungsdauer

Häufigkeit

Nutzungskontext

Designkonzept

Online Strategie



SocialApplication




Konsum-güter

Medien/Verlage

NGOPharma/Chemie

...









29.5.2009




29.5.2009

Marktthema

Branche

Verfügbarkeit

Nutzungsdauer

Häufigkeit

Nutzungskontext

Designkonzept

Online Strategie



SocialApplication




Konsum-güter

Medien/Verlage

NGOPharma/Chemie

...









29.5.2009


iPad optimiert. Website.


29.5.2009

Namics.

Secondi Piatti

Namics.

Paper Prototyping

Designskizzen. Simulation. Prototyping.

29.5.2009 32 Gestalten für das iPad. Würze. Designkantine.


Paper Prototyping

29.5.2009

Namics.

iPad GUI PSD




iPad GUI PSD für Photoshop

29.5.2009

http://www.teehanlax.com/blog/2010/02/01/ipad-gui-psd/

Namics.

iPad GUI InDesign




iPad GUI – Vorlage und Libraries für InDesign

29.5.2009

Namics.

LiveView




LiveView – Preview vom Desktop auf das iPad

29.5.2009

http://zambetti.com/projects/liveview/

Namics.

Interface HD




Interface HD – Rapid Prototyping auf dem iPad

29.5.2009

http://lesscode.co.nz/interface?p=ipad

Namics.

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

http://www.adobe.com/go/digpublabs

Namics.

Sencha Touch



Namics.

Dolci

Was würden Sie wählen?


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


29.5.2009 Gestalten für das iPad. Würze. Designkantine.

Was ist eigentlich Kitsch?

Some rights reserved by genevieveromier


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…


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)


Drei Überzeugungsmittel der visuellen Rhetorik.


Logos(Verstand)


Pathos (Emotion)

Emotionale Assoziationen

Illusion der Existenz

Einladung zum Anfassen Intuitive Interaktion

29.5.2009


Bezug zur Realität schafft Kontext.29.5.2009


Kontext ist wichtig.29.5.2009


Kontext ist verantwortlich für:

Emotionale Assoziation

Ein Ort an dem man gerne wäre

Dinge, die einfach schön sind

Ein tolles Fest


29.5.2009





Ein digitales Buch Realität werden lassen

Meine Notiz auf Papier festhalten


29.5.2009

Some rights reserved by jensjeppe





Einladung zum Anfassen

Objekte die auch “in echt” benutzt werden

Oberflächen, die man gern berührt


29.5.2009

Some rights reserved by realblades





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


29.5.2009

Some rights reserved by quinn.anya

Logos(Verstand)

Pathos (Emotion)



Logos(Verstand)


Wo viel Licht ist, ist viel Schatten ;-).


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?


Was ist an einem realen Schalter falsch?


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


Gestalten für das iPad. Würze. Designkantine.

Namics.

Zurück zum Beispiel.

29.5.2009 83

Some rights reserved by Horia Varlan



Namics.

Morphologischer Kasten. Raiffeisen iPad.

29.5.2009 84

MarktthemaOnline

StrategieMarken-

kommunikationOnline

Marketing E-CommerceSocial

ApplicationWeb ContentManagement


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



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




Raiffeisen iPad Prototyp

29.5.2009 86

Keine Originaldarstellung


Und was ist Ihre Wahl?

http://www.surveymonkey.com/s/8Z8G269


29.5.2009

Namics.

Fazit29.5.2009 88 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


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


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


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


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


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

http://www.lukew.com/ff/entry.asp?995



http://www.useit.com/papers/heuristic/heuristic_list.html

http://www.google.com/corporate/ux.html

http://www.vitsoe.com/en/re/about/dieterrams/gooddesign

http://www.usabilityfirst.com/glossary/design-principles/


Fazit

Zweckorientiert. Reduziert. Intuitiv.

29.5.2009


Single Minded 29.5.2009 96

Gestalten für das iPad. Design. Kantine. Namics.

Design

Transcript of Gestalten für das iPad. Design. Kantine. Namics.