Einleitung und Motivation

1

Motivation und Lernziel dieser Lerneinheit

Überblick Layout für Multimedia sowie Mittel u. Bedingungen zur Gestaltung d. graf. Raumes

Themen dieser Lerneinheit

• Gestaltungsprinzip Raster
• Aufbau einer Seite
• Tables und Frames
• Gestaltung, Aufbau und Benutzung multimedialer Inhalte abhängig von Wahl des Formates (Seite oder Window)

ästhetische Ansprache durch

• Zusammenwirken Proportion/Grundfläche u. positionierter graf. und typograf. Elemente
• Verhältnis zw. benutzten u. unbenutzen Flächen

2

Motivation und Lernziel dieser Lerneinheit

Diese Lerneinheit beschäftigt sich mit dem Thema „Layout für multimediale Anwendungen“ und behandelt dabei die Mittel und Bedingungen zur Gestaltung des grafischen Raumes und des Aufbaus einer Seite.

Die stattfindende Vermittlung soll weniger über den so oft – wenn von Gestaltung für Multimedia die Rede ist – praktizierten Weg der Kriterien der technischen Realisation hin zur Gestaltung erfolgen, als umgekehrt: ausgehend von eingeführten Gestaltungsprinzipien wird über den Aufbau von Layout für Multimedia – unter Berücksichtigung technischer Bedingtheiten der Vermittlungsmedien – gesprochen.

* Wohl bewusst bleibt dabei die Tatsache, dass Bedingungen neuer medialer Entwicklungen immer auch deren Gestalt nachhaltig beeinflusst haben.

Fest in Zusammenhang stehen Gestaltung, Aufbau und Benutzung multimedialer Inhalte mit der Wahl des Formates (einer Seite oder eben Windows). Erst das Zusammenwirken von Proportion der Grundfläche und der darauf positionierten grafischen und typografischen Elemente bzw. das Verhältnis zwischen benutzten und unbenutzen Flächen spricht ästhetisch an.

Layout und Raster

1

Wahrnehmungpsychologie

• Objekte innerhalb unseres Gesichtsfeldes als zusammengehörig betrachtet
• kulturell tradiert
• durch Sehgewohnheiten bedingt

Prozess des Layoutens

• Ordnen von Daten (Schrift u. Bild)
• um Gesamtes ansprechend zu gestalten
• um im Detail leicht erfassbar zu machen
• zuerst Aufmerksamkeit des Rezipienten zu erwecken
• vom passiven Sehen zu Interpretieren/Bewerten von Informationen führen

Abtasten des Bildfeldes webs2004 PC

• Nummerierung .1 –.3
  • grobes Abtasten Bildfeld (.1)
  • feines Abtasten Bildfeld (.2)
  • Kategorisieren u. Zuordnen v. Information (Lesen Überschriften) (.3)

Abtasten des Bildfeldes webs2004 PDA_Phone

• Nummerierung .1 –.3
  • grobes Abtasten Bildfeld (.1)
  • feines Abtasten Bildfeld (.2)
  • Kategorisieren u. Zuordnen v. Information (Lesen Überschriften) (.3)

Rezipient

Online-Leser sehen erst Headlines u. Subheadlines, dann erst Bilder u. Grafiken (Studie Stanford Univ)

• unübersichtliche Struktur - hoher kognitiver Aufwand für Benutzer
• gelungene Seitengestaltung wirkt entgegen
• Erstellung einer durchgängigen visuellen Hierarchie
• von Usability-Experten empfohlen

2

Wahrnehmungspsychologie

„Objekte, die sich innerhalb unseres Gesichtsfeldes befinden, werden als zusammengehörig betrachtet und aufeinander bezogen, ausser man grenzt Teile davon bewusst aus.“ Dies gilt als wahrnehmungpsychologische Tatsache, die kulturell tradiert und durch Sehgewohnheiten bedingt ist.

Prozess des Layoutens

Im Grunde handelt es sich bei dem Prozess des Layoutens um das Ordnen von Daten, im Detail Schrift und Bild, um .1 ihr Gesamtes ansprechend zu gestalten und sie .2 im Detail leicht erfassbar zu machen.

Wie schon in der Lerneinheit der Typograpie: Form und Erscheinungsbild zum Thema Typografie bemerkt, geht es zuerst darum, die Aufmerksamkeit des Rezipienten zu erwecken und ihn dabei vom blossen passiven Sehen zu jenem aktiven Prozess des Interpretierens und Bewertens von Informationen im Zuge des Wahrnehmens zu führen.

Abtasten des Bildfeldes webs2004 PC

Erst einem groben (.1) und dann feineren (.2) Abtasten des Bildfeldes durch den Rezipienten folgt in der Regel mit dem Lesen der Überschriften (.3) die Kategorisierung und das Zuordnen von Information.

Dabei ist es für den Benutzer mit einem hohen kognitiven Aufwand verbunden, eine unübersichtliche oder überladene Struktur wahrzunehmen. Diesem Umstand entgegenzuwirken war immer Fundament einer gelungenen Seitengestaltung (und wird seit Verbreitung des Web mit Geltung für die Benutzbarkeit multimedialer Bereiche nun auch von Usability-Experten empfohlen). Die Erstellung einer durchgängigen visuellen Hierarchie unter Anwendung von deutlichen Kontrasten ist primäre Aufgabe im Informationsdesign.

Abtasten des Bildfeldes webs2004 PDA_Phone

Erst einem groben (.1) und dann feineren (.2) Abtasten des Bildfeldes durch den Rezipienten folgt in der Regel mit dem Lesen der Überschriften (.3) die Kategorisierung und das Zuordnen von Information.

Dabei ist es für den Benutzer mit einem hohen kognitiven Aufwand verbunden, eine unübersichtliche oder überladene Struktur wahrzunehmen. Diesem Umstand entgegenzuwirken war immer Fundament einer gelungenen Seitengestaltung (und wird seit Verbreitung des Web mit Geltung für die Benutzbarkeit multimedialer Bereiche nun auch von Usability-Experten empfohlen). Die Erstellung einer durchgängigen visuellen Hierarchie unter Anwendung von deutlichen Kontrasten ist primäre Aufgabe im Informationsdesign.

3

Information

Eine Studie der Stanford University und The Poynter fand heraus, dass die Blicke der Leser von Online-News zuerst auf Headlines und Subheadlines und erst dann auf Grafiken fallen. www.poynter.org

Der Gestaltungsraster

1

Historisches Beispiel

19.Jh Napoleon III beauftragt Baron Haussmann Paris neu zu gestalten

• rasch und effizient zu vollziehen
• grossflächige Umstrukturierungen und Bautätigkeiten
• Rastersystem über bestehendes Paris gelegt (später auch New York)

Städtebau im Jahr 1833 PC yale2000

Städtebau im Jahr 1833 PDA_Phone yale2000

Raster in Typografie boss2000, 20

• als Werkzeug zum Ordnen von Elementen (Text u. Bild)
• Regelwerk zur Vorwegnahme grundsätzlicher formaler Entscheidungen
• kreative wie produktionstechnische Prozesse vereinfacht
• durchgängige Gestaltung gewährleistet
• 60er Jahre typografische Gestaltung (print) mittels Raster übertrieben
• Raster heute grundlegendes Instrument grafischer Gestaltung
• auch im Multimedia-Design -Frames u. Tables- grundlegend

Angewandter Gestaltungsraster im Print boss2000, 19 PC

• Raster unterteilt Grundfläche (Format) in rechteckige Felder
• gröberes Rastersystem - geringere Möglichkeiten in Layout
• fein gegliederte Rastersysteme - differenziertere Abbildungsgrössen u. präzisere Bildausschnitte

Angewandter Gestaltungsraster im Print boss2000, 19 PDA_Phone

• Raster unterteilt Grundfläche (Format) in rechteckige Felder
• gröberes Rastersystem - geringere Möglichkeiten in Layout
• fein gegliederte Rastersysteme - differenziertere Abbildungsgrössen u. präzisere Bildausschnitte

Abb_LE24_04 Format und Rasterm: Gliederung quadratischer Fläche boss2000, 174 PC

• Kleinere, gleichgrosse Quadrate - wenig Dynamik, Gestaltungsmöglichkeiten in Grenzen, Arbeit einfach (Abb.1)
• unterschiedliche Rasterfelder – variabler, komplexer zu handhaben (Abb. 2 und 3)
• zwei oder mehrere überlagernde Rastersysteme – am meisten möglich (Abb.4)

Abb_LE24_04 Format und Rasterm: Gliederung quadratischer Fläche boss2000, 174 PDA_Phone

• Kleinere, gleichgrosse Quadrate - wenig Dynamik, Gestaltungsmöglichkeiten in Grenzen, Arbeit einfach (Abb.1)
• unterschiedliche Rasterfelder – variabler, komplexer zu handhaben (Abb. 2 und 3)
• zwei oder mehrere überlagernde Rastersysteme – am meisten möglich (Abb.4)

Abb_LE24_05 Rastersysteme PC boss2000, 187

Abb_LE24_05 Rastersysteme PDA_Phone boss2000, 187

Bilder

• Rastersystem definiert Grösse u. Proportionen von Abb. durch Feldanzahl
• „Bilder entwickeln Eigenleben (Grösse, Proportion, innere Struktur)“ • „Abbildungen immer aufeinander wahrgenommen“
• optimaler Raster lässt immer genügend Positionierungen zu vereinfacht Gestaltungsprozess, ohne Freiheit einzuschränken

auto

• Im Rastersystem wirken hin zum gemeinsamen Ganzen (Layout):
• Ausrichtung
• Zeilenabstand
• Schriftart
• Textstruktur und Überschriften
• Gruppierung und Abfolge von Text und Bild
• Weissraum für Gesamteindruck ausschlaggebende Rolle

Gestaltungsraster in

• Zeitungs-Produktion / zur Disposition von Inhalten
• MM-Designprozess / Ordnung, Klarheit und erleichtert Überblick

2

Historisches Beispiel

Als im Frankreich des 19. Jahrhunderts der Präfekt von Paris Georges Baron Haussmann von Napoleon III beauftragt wurde, die Stadt von Grund auf neu zu gestalten, stand er vor der Problematik dies rasch und effizient zu vollziehen und dabei „mit Blick für das Ganze“ ein völlig neues Erscheinungsbild zu erzielen. Dazu folgten die grossflächigen Umstrukturierungen und Bautätigkeiten einem Rastersystem, das über das bestehende Paris gelegt wurde. Ein städtbauliches System, dem man bald auch bei der Planung New Yorks Rechnung trug.

Städtebau im Jahr 1833 PC yale2000

Städtebau im Jahr 1833 PDA_Phone yale2000

Raster in Typografie

Auch für die Typografie stellt der Raster ein gestalterisches Werkzeug zum Ordnen von (grafischen) Elementen – Texten und Bildern – dar. Der Raster dient damit sozusagen als vom Designer definiertes „Regelwerk, mit dem grundsätzliche formale Entscheidungen vorweggenommen werden.“ boss2000, 20

Durch die Anwendung eines Rastersystems werden grundlegende formale Entscheidungen vorweggenommen. Damit können kreative wie produktionstechnische Prozesse vereinfacht und eine durchgängige Gestaltung gewährleistet werden.

auto

Während in den 60er Jahren die typografische Gestaltung von Printprodukten mittels Raster mancherorts zum Dogma übertrieben wurde (etwa durch den schweizer Typografen Josef Müller-Brockmann), gilt das Raster heute als grundlegendes Instrument der grafischen Gestaltung und zählt letzlich auch im Design für Multimedia (als Gestaltung mittels Frames und Tables) zur Basis programmtechnischer Mittel.

Der typografische Raster unterteilt eine Grundfläche (das Format) in quadratische oder rechteckige Felder, die wiederum durch schmale Zwischenräume getrennt sind. Je gröber ein Rastersystem ist, um so geringer gestalten sich die Möglichkeiten bei der Dimensionierung und Proportionierung von Abbildungen. Fein gegliederte Rastersysteme hingegen ermöglichen differenziertere Abbildungsgrössen und präzisere Bildausschnitte

Angewandter Gestaltungsraster im Print boss2000, 19 PC

• Raster unterteilt Grundfläche (Format) in rechteckige Felder
• gröberes Rastersystem - geringere Möglichkeiten in Layout
• fein gegliederte Rastersysteme - differenziertere Abbildungsgrössen u. präzisere Bildausschnitte

Angewandter Gestaltungsraster im Print boss2000, 19 PDA_Phone

• Raster unterteilt Grundfläche (Format) in rechteckige Felder
• gröberes Rastersystem - geringere Möglichkeiten in Layout
• fein gegliederte Rastersysteme - differenziertere Abbildungsgrössen u. präzisere Bildausschnitte

Abb_LE24_04 Format und Rasterm: Gliederung quadratischer Fläche boss2000, 174 PC

Das folgende Beispiel zeigt die Gliederung einer quadratischen Grundfläche.

• Kleinere, gleichgrosse Quadrate entwickeln wenig Dynamik, ihre Gestaltungsmöglichkeiten halten sich in Grenzen, die Arbeit mit ihnen gestaltet sich entsprechend einfach (Abb.1)
• Variabler, wennauch komplexer zu handhaben, sind Rastersysteme mit unterschiedlichen Rasterfeldern (Abb. 2 und 3)
• Am meisten Spielraum bieten Konzepte mit zwei oder mehreren sich überlagernden Rastersystemen. (Abb.4).

Abb_LE24_04 Format und Rasterm: Gliederung quadratischer Fläche boss2000, 174 PDA_Phone

Das folgende Beispiel zeigt die Gliederung einer quadratischen Grundfläche.

• Kleinere, gleichgrosse Quadrate entwickeln wenig Dynamik, ihre Gestaltungsmöglichkeiten halten sich in Grenzen, die Arbeit mit ihnen gestaltet sich entsprechend einfach (Abb.1)
• Variabler, wennauch komplexer zu handhaben, sind Rastersysteme mit unterschiedlichen Rasterfeldern (Abb. 2 und 3)
• Am meisten Spielraum bieten Konzepte mit zwei oder mehreren sich überlagernden Rastersystemen. (Abb.4).

Rastersysteme PC boss2000, 187

Rastersysteme PDA_Phone boss2000, 187

Bilder boss2000, 187

Durch die Anzahl seiner Felder bestimmt ein Rastersystem nicht nur die Grösse von Abbildungen, sondern auch deren Proportionen.

„Bilder entwickeln durch Grösse, Proportion und innere Struktur (Komposition, Dynamik und Ausschnitt) ein mehr oder weniger intensives Eigenleben. Abbildungen nimmt man jedoch nicht einzeln wahr, sondern immer aufeinander, auf den Text und auf die Grundfläche bezogen.“

Für den Einsatz von Bildern lässt ein optimaler Raster immer genügend Bildformate bzw. -anordnungen zu. Das Rastersystem dient dabei auch als proportionales Regulativ. Es kann den Gestaltungsprozess vereinfachen, ohne dass die gestalterische Freiheit wesentlich eingeschränkt wird.

auto

Im Detail wirken innerhalb eines Rastersystems: die Ausrichtung, der Zeilenabstand und die Schriftart, dann Textstruktur und Überschriften und letztlich die Gruppierung und Abfolge von Text und Bild - zum gemeinsamen Ganzen und zum gesamten Layout. Der zwischen den Elementen sich befindliche Weissraum kann für den visuellen Gesamteindruck ausschlaggebende Rolle spielen und wird daher nicht selten ausdrücklich angepasst.

Zeitungsproduktion

In der täglichen Zeitungs-Produktion ist der Gestaltungsraster eine unabdingbare Notwendigkeit zur täglichen Berechnung und Disposition von Inhalten und Mitarbeitern geworden. Auch dem multimedialen Designprozess bringt die Arbeit mit dem Raster Ordnung und Klarheit und erleichtert den Überblick über die zu gestaltende Fläche

Raster und Multimedia

1

auto

• gängige Programm-Werkzeuge folgen Prinzip des Rasters
• MM-Layout: neben Content (Bild u. Text) auch Interaktionszonen definiert

2

auto

Für die Gestaltung im multimedialen Bereich folgen auch gängige Programm-Werkzeuge zur Erstellung von Anwendungen dem Prinzip des Rasters. Für Multimedia allerdings wesentlich ist die Tatsache, dass es beim Layout nicht einfach nur bei Inhalten (Content) – in Form von Bild und Text – bleibt. Vielmehr müssen ebenso unterschiedliche Zonen der Interaktion definiert und später durch den User differenziert werden.

Seiten-Bereiche

1

Bereiche im Aufbau einer Webpage

• Header / Kopfzeile
• Navigation
• Content
• Footer / Fusszeile

Webpage-Bereiche PC ibmh2004

Webpage-Bereiche PDA_Phone ibmh2004

2

Bereiche im Aufbau einer Webpage

Die Bereiche, die etwa im Aufbau einer durchschnittlichen Webpage unterschiedlichen Widmungen folgen und daher differenziert werden, können grob wie folgt definiert sein:

• Header / Kopfzeile
• Navigation
• Content
• Footer / Fusszeile

Webpage-Bereiche PC ibmh2004

Webpage-Bereiche PDA_Phone ibmh2004

Header / Kopfzeile

1

auto

• transportiert Identität einer Website
• Position für Site-Suche

Abb: Kopfzeile PC

Abb: Kopfzeile PDA_Phone

2

auto

• transportiert in der Regel die Identität einer Website;
• auch auffällige Position für die Site-Suche

Abb: Kopfzeile PC

Abb: Kopfzeile PDA_Phone

Navigation

1

auto

• Kernzone der Interaktion u. der Orientierung für Benutzer
• manchmal im Header horizontal od. Seiten-linksbündig vertikal

Abb_LE24_08 Navigation all

2

auto

• Kernzone der Interaktion u. der Orientierung für Benutzer
• manchmal im Header horizontal od. Seiten-linksbündig vertikal

Abb_LE24_08 Navigation all

Content

1

auto

• Schrift, Bild, multimediale Inhalte

Abb: Content PC

Abb: Content PDA_Phone

2

auto

• Schrift, Bild, multimediale Inhalte

Abb: Content PC

Abb: Content PDA_Phone

Footer / Fusszeile

1

auto

• Kleingedrucktes“ einer Website: Impressum, Rechtliches, Kontakt, etc.
• untergeordnete Funktionalitäten: Navigation zur nächsten Seite, Drucken des Inhalts, ...

Abb: Fusszeile PC

Abb: Fusszeile PDA_Phone

2

auto

• oftmals Ort für das „Kleingedruckte“ einer Website: Impressum, Rechtliches, Kontakt, etc.
• auch für Funktionalitäten bzgl alles am Fusse eines Contents Relevanten: Navigation zur nächsten Seite oder Drucken des Inhalts

auto

• Kleingedrucktes“ einer Website: Impressum, Rechtliches, Kontakt, etc.
• untergeordnete Funktionalitäten: Navigation zur nächsten Seite, Drucken des Inhalts, ...

Abb: Fusszeile PC

Abb: Fusszeile PDA_Phone

Konsistenz

1

auto

• wesentliche Seiten-Bereiche auch in Folge-Seiten vorhanden
• Inkonsistenzen im vertikalen Navigationbereich durch
• Bereichs-Header: derzeitiger Website-Standort, imageträchtige Bildwelt,
• Layout: varible Navigation in Content kein Problem
• Aufbau und Raster gleichbleibend

Abb: Konsistente Bereichsstruktur 1 PC

Abb: Konsistente Bereichsstruktur 2 PDA_Phone

2

auto

Deutlich erkennbar bleiben die wesentlichen Seiten-Bereiche auch in den Folge-Seiten der Website bestehen (sieht man von geringen Inkonsistenzen zum Home-Screen im vertikalen Navigationbereich durch Einführung einer detailreichen Kontakt-Zone ab). Ein Bereichs-Header verweist – unterstützt durch eine imageträchtige Bildwelt – jederzeit deutlich auf den derzeit befindlichen Website-Standort (Produkte&Services bzw. Support&Download). Selbst dass im Content-Bereich ein weiteres Navigations-Schema (Reiter-Navigation) eingeführt wird, bereitet dem durchgängigen Layout-Rahmen keine Probleme. Aufbau und Raster bleiben dieselben. (... wenn sich auch mit der Wahl des Namings die Begriffswelt dieses Computerriesen wohl an geschulte Kunden orientieren dürfte)

Abb: Konsistente Bereichsstruktur 1 PC

Abb: Konsistente Bereichsstruktur 2 PDA_Phone

Problematik

1

auto

• Web - flexibles Medium
• Variablen: Plattform, Bildschirmformat und –auflösung, Farbtiefe, Browser-Typ, Windowformat, verfügbare Schrift-Typen
• Design-Aufgabe schwierig: durchgängiges und ausgewogenes Erscheinungsbild
• Beispiele
  • Problematik geforderter individuellen Anpassbarkeit
  • zu kleine u. zu grosse Schriftgrösse bringt visuelles Gewicht ins Wanken - visuelle Konsistenz bleibt

Abb: Schriftwahl klein PC

Abb: Schriftwahl klein PDA_Phone

Abb: Schriftwahl gross PC

Abb: Schriftwahl gross PDA_Phone

2

auto

Das Web wurde als flexibles Medium entworfen. Eine Vielzahl von variablen Grössen wie Plattform, Bildschirmformat und –auflösung, Farbtiefe sowie Browser-Typ, Windowformat oder verfügbare Schrift-Typen lassen sich (fast naturgemäss) mit den fundamentalen Aufgaben von Design – eben ein durchgängiges und ausgewogenes Erscheinungsbild festzulegen und zu gewährleisten – manchmal schwierig auf einen Nenner bringen.

Beispiel

Auch die Problematik rund um die dem Wesen des Webs eigentümlichen und im Auftrag des Users geforderten individuellen Anpassbarkeit (etwa der Schriftgrösse) wurde bereits angesprochen. Am folgenden Beispiel wird ersichtlich, wie zwar sowohl bei zu kleiner als auch bei zu gross vorgewählter Schriftgrösse das visuelle Gewicht des Layouts ins Wanken gerät, eine visuelle Konsistenz dennoch einigermassen gewährleistet bleibt.

Abb: Schriftwahl klein PC

Abb: Schriftwahl klein PDA_Phone

Abb: Schriftwahl gross PC

Abb: Schriftwahl gross PDA_Phone

3

auto

Zur Problematik grössenvariabler Window-Formate und der (Un-)Sichtbarkeit von Seitenaufbau und Seiteninhalten in Web-Browsern und den damit verbundenen Unannehmlichkeiten für die Handhabung, siehe Lerneinheit Layout: Format.

Tables und Frames

1

Werkzeug für Layout an Webpages

• Tables
• Frames

HTML-Tables (Tabellen)

• legen Raster einer Seite fest
• können ineinander verschachtelt werden
• definieren Seitenbereiche (ganze Seite, Spalte, Absatz)
• legen Zeilenlänge, Ränder und Spalten fest
• verknüpfen multimediale Materialien

Abb: Tables PC

Abb: Tables PDA_Phone

Frames

• Parallele Darstellung verschiedener Inhalte auf einer (Web)Seite
• zur (verborgenen) Trennung unterschiedlicher medialer Materialien od. Funktionalitäts-Bereiche
• Unannehmlichkeiten (Bookmarking, Ladezeit und Browserkompatibilität)
• gestalterische Handhabung beschwerlich

Abb: Frames PC webs2004

Abb: Frames PDA_Phone webs2004

2

Werkzeug für Layout an Webpages

Für die Arbeit am Layout können im Design fürs Webpages HTML-Tables (Tabellen) und Frames eingesetzt werden.

Tables

Tables eignen sich gut, den eigentlichen Raster einer Seite festzulegen. Dabei können sie ineinander verschachtelt werden und mehr oder weniger grosse Seitenbereiche (ganze Seite, Spalte, Absatz) definieren. Mittels Tables können Zeilenlänge, Ränder und Spalten festgelegt oder etwa unterschiedliche multimediale Materialien verknüpft werden.

Abb: Tables PC

Abb: Tables PDA_Phone

Frames

Frames erlauben die parallele Darstellung verschiedener Inhalte auf einer (Web)Seite. Sie können vor allem im Verborgenen zur Trennung unterschiedlicher medialer Materialien oder voneinander getrennter Funktionalitäts-Bereiche eingesetzt werden. Ihre in Designkreisen weitgehende Unbeliebtheit bezieht sich auf die mit ihnen oft verbundenen Unannehmlichkeiten (bzg. Bookmarking, Ladezeit und Browserkompatibilität) und ihre gestalterische Handhabung.

Abb: Frames PC webs2004

Abb: Frames PDA_Phone webs2004

Quellen

1

Literatur

boss2000 muel1981 gali2002 komm2002 mull1995

2

Literatur

boss2000 muel1981 gali2002 komm2002 mull1995