Web X.0 (eBook)

Prof. Torsten Stapelkamp ist mit einer breiten gestalterischen Ausrichtung in den Bereichen digitale Produkte, Interface Design und Informationsdesign tätig. Er studierte Industrial Design an der Universität Wuppertal und Mediendesign an der Kunsthochschule für Medien Köln. Er entwickelt projekt- und adressatenspezifische Konzepte und gestaltet interaktive Produkte und Dienstleistungen mit medienadäquaten Verknüpfungen. Servicedesign und Interfacedesign sieht er dabei als zentrale Themen. Mit ihnen gestaltet er nicht nur die Funktion, sondern er sieht ein Interface sowohl als Serviceangebot, als auch als Bedeutungsträger, mit dem u. a. auch das Image eines Produktes gestaltet wird. Interfaces gestaltet er dabei zu Dialogoberflächen und bildet so die Grundlage für Interaktion. Wissenschaftliche Auseinandersetzungen und Analysen sind ihm dabei genauso bedeutsam wie Autorenschaft und angewandte Gestaltung. Agentur-Tätigkeit: seit 2002 Partner der Firma „Maas + Co“, Agentur für Produkt- und Markenentwicklung: Produkt-, Interface- und Corporate Design, www.maas-co.com Hochschul-Tätigkeit: seit 2009 Professor für Mediendesign an der Hochschule Hof; 2007 - 2009 Professur für Kommunikationsdesign an der MHMK, Hochschule für Medien und Kommunikation in Köln; 2001 - 2006 Professor für Gestaltung interaktiver Medien an der FH Bielefeld.

1EinführungForm und Funktion 9
2 Wahrnehmung 14
Gesichtsfeld 20
Räumlichkeit 22
Nähe 23
Geschlossenheit 23
Aufmerksamkeit 24
Erkennbarkeit 25
Kontext 26
Plastizität 26
Figur und Grund 27
Auffälligkeit 28
Intensität 28
Ähnlichkeit 29
Abweichung 29
Mustererkennung 30
3 Farbe 32
3.1 33
3.2 33
3.3 37
3.4 39
3.5 40
3.6 42
Dithering 44
3.7 46
3.8 47
3.9 48
Simultankontrast 48
Komplementärkontrast 50
Farbe-an-sich-Kontrast 52
Quantitätskontrast 54
Bunt-Unbunt-Kontrast 56
Hell-Dunkel-Kontrast 58
Kalt-Warm-Kontrast 60
Qualitätskontrast 62
3.10 64
Druckerzeugnisse 65
Fernseh-Röhrenmonitor 66
Plasmamonitor 67
Computer-Röhrenmonitor 67
Liquid Crystal Display ( 68
Anzeigetafeln, Displays 69
Architektur als Medium bzw. Display 70
3.11 76
3.11.1 Farbkodierung – Farbe als Symbol 76
3.11.2 Farbkodierung – Farbe als Struktur 80
3.11.3 Farbkodierung – Farbe für Funktionsabläufeund Funktions zustände 81
3.11.4 Farbkodierung – Farbe zur Benutzerführung 82
3.11.5 Farbkodierung – Farbe und Kontrast 84
3.11.6 Farbbedeutung 86
3.11.7 Farbe, Text und Hintergrund 88
3.11.8 Farbenfehlsichtigkeit 90
3.11.9 Visualisierung von Farbenfehlsichtigkeit 92
Regeln und Tipps zum Gebrauch von Farbe beim Screenund Interfacedesign 94
4 Typografi e 96
4.1 97
serifenbetonte Schriften 98
Antiquaschriften 98
Groteskschriften 99
themenspezifische Schriften 99
4.2 102
4.3 103
4.4 104
4.5 105
4.6 106
4.7 107
4.8 110
4.9 114
Fernseh-Monitor 116
Computermonitor 122
Medizinische Geräten 124
Produktionsmaschinen 125
Multimediakioske 126
Mobile Geräte 128
Mobiltelefone 130
e-Paper 131
LED-Informationsdisplays 132
Architekturfassade 133
4.10 134
5 Projektentwicklung –Workfl ow 140
5.1 143
5.2 144
5.2.1 Kriterien für das Pflichtenheft 145
5.3 147
5.3.1 Scrum – Projektmanagement auf Basis von Zeitmanagement 148
5.3.2 Designprozess/Problemlösung 151
5.3.3 Zeitplanung/Tabelle 152
5.3.4 Kostenkalkulation 154
5.3.5 Software für Projektmanagement – CRM, ERP 159
5.3.6 Hilfsmittel für die Projektentwicklung 163
5.4 169
5.4.1 Benutzerprofil 169
5.4.2 Polaritätsprofil 170
5.5 174
5.5.1 Moodboard 174
5.5.2 Farbschema 178
5.6 182
5.6.1 Exemplarische Flowcharts 186
Hinweise und Empfehlungen zur Erstellung eines Flowcharts 198
5.7 199
5.8 211
5.9 219
Gründe für ein Funktionslayout und seine Vorteile 218
5.9.1 Drehbuch 219
5.9.2 Exposé 219
5.9.3 Treatment 219
5.9.4 Das literarische und das technische Drehbuch 219
5.9.5 Storyboard 220
5.9.6 Die äußere Form des Drehbuchs 226
5.10 228
5.10.1 Fläche 228
5.10.2 Format 229
Goldener Schnitt 230
Fibonacci-Zahlenfolge 230
Format 231
Display-Formate 232
softwarebedingte Formate 234
5.10.3 Raster/Layout-Framework 236
8 × 8 Pixel Submatrix 240
960Pixel-System 242
5.10.4 Komposition 246
5.10.5 Dynamik mit System 274
5.11 284
5.11.1 Styleguide für Funktionssoftware 286
GNOME 286
KDE 286
Mac OS X 286
Palm OS 287
Java 287
Windows Vista 287
Styleguide für Informationssoftware 288
Passepartout 288
www.bundesregierung.de 292
Gebote und Kriterien für einen Styleguide 306
Anhaltspunkte zur Erstellung eines Styleguides und mögliche Bestandteile 306
5.12 308
Gebote, Tipps, Eigenschaften und Voraussetzungen barrierefreier Angebote 314
5.12.1 Barrierefreie Automaten und interaktive Multimediakioske 316
6 Screendesignbeispiele 318
6.1 321
6.1.1 Layout 321
6.1.2 Inhalte 322
6.1.3 Orientierung 324
6.1.4 Anreize, Motivation 330
6.1.5 Auswahl- und Interaktionsmöglichkeiten 334
6.2 342
Fernsehfernbedienung 344
Desk Tools 346
6.3 348
JODI 348
shiftcontrol 350
[kleine welt] 352
JetBlue Check-in-Terminal 354
MetroCard 356
Navigationsgeräte 358
Computer-Betriebssysteme 359
6.4 362
Perspektive und Raumdarstellung 363
Murphys Loch 364
Schöne Heimat 366
1944: Operation Teddybär 370
Myst 372
The Endless Forest 374
6.5 378
Antizipation 380
Verbrechen der Wehrmacht 382
Made in MTL 384
Nanoreisen 386
7 Web 1.0 388
8 Web 2.0 –Das Mitmach-Internet 396
8.1 Web 2.0 – Soziale Netzwerke 398
Wikipedia 398
mySpace 398
del.icio.us 398
mevio 399
flickr 399
XING 399
YouTube 399
8.2 416
8.3 418
8.4 422
8.5 423
8.6 436
8.7 440
8.8 444
8.9 461
8.10 464
9 Web 3.0 474
9.1 476
9.2 484
9.3 489
9.4 490
9.5 491
9.6 493
9.7 506
9.8 510
9.9 517
9.10 518
9.11 525
Protosphere 547
Entropia Universe 547
Active Worlds 547
OpenSimulator 548
web.alive 548
Forterra OLIVE Plattform 548
Qwaq Forums 549
There 549
9.12 551
9.13 556
10 Anhang 560
10.1 561
10.2 562
10.2.1 Haftungsausschluss für Dateien und Programme 562
10.2.2 Verweise und Links 563
10.3 564
10.4 565
Corporate Identity / Corporate Design 565
Farben, Farbwirkung, Farbbedeutung 565
Informationdesign, Leiten und Orientieren 565
Interactiondesign, Interaktivität 566
Interfacedesign 567
Konzeptentwicklung 569
Lehr-/Lerntheorie 569
Marketing 569
Medientheorie 570
Ontologie 571
Projektmanagement 571
Screendesign 571
Semantic Web 572
Semiotik 572
Typografie, Layout 573
Usability 573
Visualisierung 573
Wahrnehmung 574
Web 2.0 574
Web 3.0 575
Zeichen, Symbole, Icons 575
10.5 576