Stapelkamp Web X.0

Erfolgreiches Webdesign und professionelle Webkonzepte. Gestaltungsstrategien, Styleguides und Layouts für stationäre und mobile Medien
2010
ISBN: 978-3-642-02072-8
Verlag: Springer
Format: PDF
Kopierschutz: 1 - PDF Watermark

E-Book, Deutsch, 575 Seiten

Reihe: X.media.press

Der Autor beschreibt in dem Buch professionelle Konzepte, die ein erfolgreiches Webdesign ausmachen, und zeigt das Zusammenwirken von Designmethodiken, Informationsarchitektur und Designmanagement auf. Wissenschaftliche Analysen übersetzt er dabei in anwendbare medienspezifische Gestaltungsmethodiken und stellt auch wesentliche Strategien und Gestaltungskonzepte wie Mitmach-Internet, Semantisches Internet oder Ubiquitous Computing vor, die erst mit dem Web 2.0 und Web 3.0 aufkamen. Weiterführende Informationen unter www.designismakingsense.de.

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.

Autoren/Hrsg.

Stapelkamp, Torsten

Inhaltsverzeichnis

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