$Foo design basics for ios developers

104
Benjamin Reimold | Codenauts $foo-design basics for (iOS-)developers Mittwoch, 5. September 12

description

Slides of my talk about design basics for developers.

Transcript of $Foo design basics for ios developers

Page 1: $Foo design basics for ios developers

Benjamin Reimold | Codenauts

$foo-design basics for (iOS-)developers

Mittwoch, 5. September 12

Page 2: $Foo design basics for ios developers

This presentation is licenced underCC BY-NC-SA 3.0

visit www.creativecommons.orgfor more information

Mittwoch, 5. September 12

Page 3: $Foo design basics for ios developers

Benjamin Reimold@elektrojunge

tausendsassaesk.de

Mittwoch, 5. September 12

Page 4: $Foo design basics for ios developers

“Challenge accepted!“

Mittwoch, 5. September 12

Page 5: $Foo design basics for ios developers

You make my eyes water!

NSLog(@“You suck!“)

Kommunikation

Kommunikation

Mittwoch, 5. September 12

Page 6: $Foo design basics for ios developers

Mittwoch, 5. September 12

Page 7: $Foo design basics for ios developers

Design-Grundlagen

Mittwoch, 5. September 12

Page 8: $Foo design basics for ios developers

$foo-Design

Mittwoch, 5. September 12

Page 9: $Foo design basics for ios developers

$foo-Design

User Experience Design

Interface Design

Interaction Design

Sound Design

Human FactorsHuman-

ComputerInteraction

Information Architecture

Mittwoch, 5. September 12

Page 10: $Foo design basics for ios developers

Interaction Design

Mittwoch, 5. September 12

Page 11: $Foo design basics for ios developers

Interaction Design

Mittwoch, 5. September 12

Page 12: $Foo design basics for ios developers

Interaction Design

Mittwoch, 5. September 12

Page 13: $Foo design basics for ios developers

Interaction Design

Mittwoch, 5. September 12

Page 14: $Foo design basics for ios developers

Interaction Design

Mittwoch, 5. September 12

Page 15: $Foo design basics for ios developers

Die Idee

Mittwoch, 5. September 12

Page 16: $Foo design basics for ios developers

Die Idee

App

Mittwoch, 5. September 12

Page 17: $Foo design basics for ios developers

Die Idee

M-PaymentApp

Mittwoch, 5. September 12

Page 18: $Foo design basics for ios developers

Die Idee

M-Payment EssenApp

Mittwoch, 5. September 12

Page 19: $Foo design basics for ios developers

Die Idee

M-Payment EssenApp Nerd

Mittwoch, 5. September 12

Page 20: $Foo design basics for ios developers

Die Idee

M-Payment EssenApp Nerd

Mittwoch, 5. September 12

Page 21: $Foo design basics for ios developers

Interaction Design

Mittwoch, 5. September 12

Page 22: $Foo design basics for ios developers

Interaction Design

Mittwoch, 5. September 12

Page 23: $Foo design basics for ios developers

Interaction Design

Mittwoch, 5. September 12

Page 24: $Foo design basics for ios developers

Interaction Design

Mittwoch, 5. September 12

Page 25: $Foo design basics for ios developers

Interaction Design

Mittwoch, 5. September 12

Page 26: $Foo design basics for ios developers

Vorgehensweise

Mittwoch, 5. September 12

Page 27: $Foo design basics for ios developers

Erforschung & Beobachtungen

# Beobachten# Interviews# Aktivitäten

Mittwoch, 5. September 12

Page 28: $Foo design basics for ios developers

Analysierung & Strukturierung

# Visualisierung# Diagramme / Listen# Konzeptionelles Modell# Personas

Mittwoch, 5. September 12

Page 29: $Foo design basics for ios developers

Mittwoch, 5. September 12

Page 30: $Foo design basics for ios developers

Mittwoch, 5. September 12

Page 31: $Foo design basics for ios developers

Mittwoch, 5. September 12

Page 32: $Foo design basics for ios developers

Ideenfindung & Lösung

# Konzepte# Brainstorming-Techniken# Design-Prinzipien

Mittwoch, 5. September 12

Page 33: $Foo design basics for ios developers

Details & Überarbeitung

# Mentales Modell# $foo-Design Grundlagen

Mittwoch, 5. September 12

Page 34: $Foo design basics for ios developers

Details & Überarbeitung

Ideenfindung & Lösung

# Konzepte# Brainstorming-Techniken# Design-Prinzipien

Analysierung & Strukturierung

Forschen & Beobachtungen

# Beobachten# Interviews# Aktivitäten

# Visualisierung# Diagramme / Listen# Konzeptionelles Modell# Personas

# Mentales Modell# $foo-Design Grundlagen

Mittwoch, 5. September 12

Page 35: $Foo design basics for ios developers

„Und was is‘ mit Tee Entwicklung?“

Mittwoch, 5. September 12

Page 36: $Foo design basics for ios developers

Details & Überarbeitung

Ideenfindung & Lösung

# Konzepte# Brainstorming-Techniken# Design-Prinzipien

Analysierung & Strukturierung

Forschen & Beobachtungen

# Beobachten# Interviews# Aktivitäten

# Visualisierung# Diagramme / Listen# Konzeptionelles Modell# Personas

# Mentales Modell# $foo-Design Grundlagen

Mittwoch, 5. September 12

Page 37: $Foo design basics for ios developers

Ich bin nur das Erinnerungs-Lama

Mittwoch, 5. September 12

Page 38: $Foo design basics for ios developers

Details & Überarbeitung

Ideenfindung & Lösung

# Konzepte# Brainstorming-Techniken# Design-Prinzipien

Analysierung & Strukturierung

Forschen & Beobachtungen

# Mentales Modell# $foo-Design Grundlagen

# Beobachten# Interviews# Aktivitäten

# Visualisierung# Diagramme / Listen# Konzeptionelles Modell# Personas

Mittwoch, 5. September 12

Page 39: $Foo design basics for ios developers

Grundprinzipien

Mittwoch, 5. September 12

Page 40: $Foo design basics for ios developers

Grundprinzipien

Status

Mittwoch, 5. September 12

Page 41: $Foo design basics for ios developers

Grundprinzipien

Status

Metapher

Mittwoch, 5. September 12

Page 42: $Foo design basics for ios developers

Grundprinzipien

Status

Metapher

Freiheit/Kontrolle

Mittwoch, 5. September 12

Page 43: $Foo design basics for ios developers

Grundprinzipien

Status

Metapher

Freiheit/Kontrolle

Konsistenz/Standards

Mittwoch, 5. September 12

Page 44: $Foo design basics for ios developers

Grundprinzipien

Status

Metapher

Freiheit/Kontrolle

Konsistenz/Standards

Fehler

vermeid

ung

Mittwoch, 5. September 12

Page 45: $Foo design basics for ios developers

Grundprinzipien

Status

Metapher

Freiheit/Kontrolle

Konsistenz/Standards

Fehler

vermeid

ungEr

kenn

en s

tatt

eri

nner

n

Mittwoch, 5. September 12

Page 46: $Foo design basics for ios developers

Grundprinzipien

Status

Metapher

Freiheit/Kontrolle

Konsistenz/Standards

Fehler

vermeid

ungEr

kenn

en s

tatt

eri

nner

nFle

xibilit

ät/E

ffizie

nz

Mittwoch, 5. September 12

Page 47: $Foo design basics for ios developers

Grundprinzipien

Status

Metapher

Freiheit/Kontrolle

Konsistenz/Standards

Fehler

vermeid

ungEr

kenn

en s

tatt

eri

nner

nFle

xibilit

ät/E

ffizie

nz

Ästethik/Minimalismus

Mittwoch, 5. September 12

Page 48: $Foo design basics for ios developers

Grundprinzipien

Status

Metapher

Freiheit/Kontrolle

Konsistenz/Standards

Fehler

vermeid

ungEr

kenn

en s

tatt

eri

nner

nFle

xibilit

ät/E

ffizie

nz

Ästethik/Minimalismus

Fehlererkennung

Mittwoch, 5. September 12

Page 49: $Foo design basics for ios developers

Grundprinzipien

Status

Metapher

Freiheit/Kontrolle

Konsistenz/Standards

Fehler

vermeid

ungEr

kenn

en s

tatt

eri

nner

nFle

xibilit

ät/E

ffizie

nz

Ästethik/Minimalismus

Fehlererkennung

Dokumentation/Hilfe

Mittwoch, 5. September 12

Page 50: $Foo design basics for ios developers

Grundprinzipien

Status

Metapher

Freiheit/Kontrolle

Konsistenz/Standards

Fehler

vermeid

ungEr

kenn

en s

tatt

eri

nner

nFle

xibilit

ät/E

ffizie

nz

Ästethik/Minimalismus

Fehlererkennung

Dokumentation/HilfeGeschw

indigkeit

Mittwoch, 5. September 12

Page 51: $Foo design basics for ios developers

Grundprinzipien

Status

Metapher

Freiheit/Kontrolle

Konsistenz/Standards

Fehler

vermeid

ungEr

kenn

en s

tatt

eri

nner

nFle

xibilit

ät/E

ffizie

nz

Ästethik/Minimalismus

Fehlererkennung

Dokumentation/HilfeGeschw

indigkeitPers

önlic

hkei

t

Mittwoch, 5. September 12

Page 52: $Foo design basics for ios developers

# Mentales Modell# $foo-Design Grundlagen

Mittwoch, 5. September 12

Page 53: $Foo design basics for ios developers

# Mentales Modell# $foo-Design Grundlagen

Das mentale Modell

Mittwoch, 5. September 12

Page 54: $Foo design basics for ios developers

# Mentales Modell# $foo-Design Grundlagen

Das mentale Modell

Das UI-Modell

Mittwoch, 5. September 12

Page 55: $Foo design basics for ios developers

# Mentales Modell# $foo-Design Grundlagen

Das mentale Modell

Das UI-Modell

Das Implementierungsmodell

Mittwoch, 5. September 12

Page 56: $Foo design basics for ios developers

Mittwoch, 5. September 12

Page 57: $Foo design basics for ios developers

Mittwoch, 5. September 12

Page 58: $Foo design basics for ios developers

Mittwoch, 5. September 12

Page 59: $Foo design basics for ios developers

Realismus

# Mentales Modell# $foo-Design Grundlagen

Mittwoch, 5. September 12

Page 60: $Foo design basics for ios developers

# Mentales Modell# $foo-Design Grundlagen

Mittwoch, 5. September 12

Page 61: $Foo design basics for ios developers

Skeuomorphismen

# Mentales Modell# $foo-Design Grundlagen

Mittwoch, 5. September 12

Page 62: $Foo design basics for ios developers

Mittwoch, 5. September 12

Page 63: $Foo design basics for ios developers

1 Tuna 1,112. Sake 2.223. Avocado 3.33.4. Tomate 4.445. Gurke 5.551 Tuna 1,112. Sake 2.223. Avocado 3.33.4. Tomate 4.445. Gurke 5.551 Tuna 1,112. Sake 2.223. Avocado 3.33.4. Tomate 4.445. Gurke 5.551 Tuna 1,112. Sake 2.223. Avocado 3.33.4. Tomate 4.445. Gurke 5.551 Tuna 1,11

1 Tuna 1,112. Sake 2.223. Avocado 3.33.4. Tomate 4.445. Gurke 5.551 Tuna 1,112. Sake 2.223. Avocado 3.33.4. Tomate 4.445. Gurke 5.551 Tuna 1,112. Sake 2.223. Avocado 3.33.4. Tomate 4.445. Gurke 5.551 Tuna 1,112. Sake 2.223. Avocado 3.33.4. Tomate 4.445. Gurke 5.551 Tuna 1,11

Mittwoch, 5. September 12

Page 64: $Foo design basics for ios developers

Gestaltgesetz der…

# Mentales Modell# $foo-Design Grundlagen

…Prägnanz

…Nähe

…Ähnlichkeit

…Kontinuität

…Geschlossenheit

…gem. Bewegung

…fortgesetzt durchgehenden Linie

…gemeinsamen Region

…Gleichzeitigkeit

…verbundenen Elemente

Mittwoch, 5. September 12

Page 65: $Foo design basics for ios developers

Affordances

# Mentales Modell# $foo-Design Grundlagen

Mittwoch, 5. September 12

Page 66: $Foo design basics for ios developers

Mittwoch, 5. September 12

Page 67: $Foo design basics for ios developers

Feedback

# Mentales Modell# $foo-Design Grundlagen

Mittwoch, 5. September 12

Page 68: $Foo design basics for ios developers

Mittwoch, 5. September 12

Page 69: $Foo design basics for ios developers

Mittwoch, 5. September 12

Page 70: $Foo design basics for ios developers

Feedforward

# Mentales Modell# $foo-Design Grundlagen

Mittwoch, 5. September 12

Page 71: $Foo design basics for ios developers

Mittwoch, 5. September 12

Page 72: $Foo design basics for ios developers

Mittwoch, 5. September 12

Page 73: $Foo design basics for ios developers

vs

Mittwoch, 5. September 12

Page 74: $Foo design basics for ios developers

vs

Mittwoch, 5. September 12

Page 75: $Foo design basics for ios developers

Direkte Manipulation

# Mentales Modell# $foo-Design Grundlagen

Mittwoch, 5. September 12

Page 76: $Foo design basics for ios developers

Mittwoch, 5. September 12

Page 77: $Foo design basics for ios developers

Indirekte Manipulation

# Mentales Modell# $foo-Design Grundlagen

Mittwoch, 5. September 12

Page 78: $Foo design basics for ios developers

Mittwoch, 5. September 12

Page 79: $Foo design basics for ios developers

Fitts‘s Law

# Mentales Modell# $foo-Design Grundlagen

Mittwoch, 5. September 12

Page 80: $Foo design basics for ios developers

# Mentales Modell# $foo-Design Grundlagen

Mittwoch, 5. September 12

Page 81: $Foo design basics for ios developers

# Mentales Modell# $foo-Design Grundlagen

Mittwoch, 5. September 12

Page 82: $Foo design basics for ios developers

Die Wurstfinger-Regel

# Mentales Modell# $foo-Design Grundlagen

Mittwoch, 5. September 12

Page 83: $Foo design basics for ios developers

Poka-Yoke

# Mentales Modell# $foo-Design Grundlagen

Mittwoch, 5. September 12

Page 84: $Foo design basics for ios developers

Mittwoch, 5. September 12

Page 85: $Foo design basics for ios developers

Hierarchie

# Mentales Modell# $foo-Design Grundlagen

Mittwoch, 5. September 12

Page 86: $Foo design basics for ios developers

Mittwoch, 5. September 12

Page 87: $Foo design basics for ios developers

Mittwoch, 5. September 12

Page 88: $Foo design basics for ios developers

Animationen

# Mentales Modell# $foo-Design Grundlagen

Mittwoch, 5. September 12

Page 89: $Foo design basics for ios developers

Mittwoch, 5. September 12

Page 90: $Foo design basics for ios developers

Konsistenz

# Mentales Modell# $foo-Design Grundlagen

Mittwoch, 5. September 12

Page 91: $Foo design basics for ios developers

# Mentales Modell# $foo-Design Grundlagen

Mittwoch, 5. September 12

Page 92: $Foo design basics for ios developers

Konsistenz

Animationen

Hierarchie

Poka-Yoke

Die Wurstfinger-Regel

Fitts‘s Law

Indirekte Manipulation

Direkte Manipulation

Feedforward

Feedback

Affordances

Realismus

Mittwoch, 5. September 12

Page 93: $Foo design basics for ios developers

Habt eine Meinung!

# Mentales Modell# $foo-Design Grundlagen

Mittwoch, 5. September 12

Page 94: $Foo design basics for ios developers

# Mentales Modell# $foo-Design Grundlagen

Mittwoch, 5. September 12

Page 95: $Foo design basics for ios developers

Features

# Mentales Modell# $foo-Design Grundlagen

Mittwoch, 5. September 12

Page 96: $Foo design basics for ios developers

Mittwoch, 5. September 12

Page 97: $Foo design basics for ios developers

Design-Prozess

Mittwoch, 5. September 12

Page 98: $Foo design basics for ios developers

Design-Prozess+

Mittwoch, 5. September 12

Page 99: $Foo design basics for ios developers

Design-Prozess+

$foo-Design basics

Mittwoch, 5. September 12

Page 100: $Foo design basics for ios developers

Design-Prozess+

$foo-Design basics=

Mittwoch, 5. September 12

Page 101: $Foo design basics for ios developers

Design-Prozess+

$foo-Design basics=

einfachere Kommunikation

Mittwoch, 5. September 12

Page 102: $Foo design basics for ios developers

Design-Prozess+

$foo-Design basics=

einfachere Kommunikation+

Mittwoch, 5. September 12

Page 103: $Foo design basics for ios developers

Design-Prozess+

$foo-Design basics=

einfachere Kommunikation+

bessere Apps

Mittwoch, 5. September 12

Page 104: $Foo design basics for ios developers

Mittwoch, 5. September 12