Mediengestaltung II at Hochschule für Technik, Wirtschaft und Kultur Leipzig

Gemeinsamkeiten

• Informationscodierung hat Einfluss auf Kognition & Infospeicherung
• Rezeption über Wahrnehmung → Speicherung → Reaktion
• Trennung verbale, nonverbale Aufnahme, Speichern in Wortmarken (Logogene) und Bildmarken (Imagene)
• Querverbindungen existieren

Unterschiede

Engelkamp: 

1. Aufnahme 

2. Verarbeitung in: sensumotorisches Syst. 

→ konzeptuelles Syst. 

→ sensumotor. Syst.

3. Reaktion

- Querverbindungen bei Paivio symmetrisch (verbal, nonverbal gleichwertig)  

- Engelkamp: Verbindung verbal sensumotorisch zu nonverbal konzeptuell, aber nicht andersrum

- Engelkamp: Teilung konzeptuell/sensumotorisch

• Bilder werden in Gedächtnistests mit höherer Wahrscheinlichkeit erinnert als Wörter
• Bilder besser merkbar, wenn sie beim Lernen mit Vorstellungsbild gekoppelt (stelle dir vor: eine rosa Tür)
• bildnahe Begriffe (Hund) leichter merkbar als abstrakte (Demokratie)

• Zu Beginn des 20. Jahrhunderts von verschiedenen Psychologen (Koffka, Köhler, Wertheimer...) beschriebene universelle Gestaltprinzipien 
• meist auf Besonderheiten der menschlichen Wahrnehmung basierend

• sind nur auf Detailprobleme ausgerichtet
• sind keine Gesetze im mathematischen Sinne
• sind nicht widerspruchsfrei

• Elemente in raumzeitlicher Nähe werden als zusammengehörig erlebt
• Folge: Inhaltlich zusammengehörige Elemente sollten nah beieinander stehen
• gilt auch für auditive Modalität (Töne mit ähnlicher Höhe -> gruppiert zu Melodieverlauf) 

• ist wohl ältestes und bekannteste Gestaltungsraster
• ist die typografische Nutzfläche eines Buches, ggf. aufgeteilt in Spalten (Kolumnen)
• umgeben von nichtbedruckten Randbereichen: Bundsteg und Außensteg; Kopfsteg und Fußsteg

• unterstützen transparente, modulare, gut Lesbare, einheitliche, übersichtliche und ausgewogene Verteilung der relvanten Inhalte

• folgen klassischen Proportionsgesetzen 
• Konstruktion durch Diagonalzug (Villard'sche Figur) 
• ästhetisch aber unwirtschaftlich
• Teilung im goldenen Schnitt: schmaler Bundesteg
• Neunerteilung: entspricht modernen Druckanforderungen

Gesetz der Nähe

○ Auditiv:

■ Töne mit ähnlicher Tonhöhe werden zu Melodieverlauf gruppiert

■ Aufgrund dieses Effektes kann Bobby Mc Ferrin als Solist

mehrstimmig singen

○ Film:

■ Aneinanderreihung von Bildausschnitten spiegeln Parallelität der

Handlung wider

• Gestaltung Websiten passt sich an Nutzer an, um effizientes Nutzererlebnis zu schaffen 
• Messbar durch Eye-tracking oder Cookies

Rückschlüsse:

• statische, globale Navigation 
• Anzahl Hauptnavigationslinks: 8-10
• sollte alle in Frage kommenden Navigationsoptionen anzeigen
• Redundante Navigation vermeiden
• Logo oben links leitet zur Homepage
• größere Websites: Suchfunktion, die auf ihren Informationsraum beschränkt sind

fluid/flexibel:

• in % des Anzeigefensters (Viewport) angegeben
• ändert Dimension in Relation zur umgebung, Vermeidung Leerräume und horizontale Scrollbalken

elastisch:

• Mischform fest & fluid, in em (-> relativ bezogen auf Schriftgröße)
• Layout ändert sich bei Schriftgrößenänderung, aber nicht bei Veränderung Bildschirmbreite

hybrid:

• Kombination mehrerer Layouttypen, z.B. feste Breite Werbeanzeigen, sonst alles in %
• es können horizontale Scrollbalken entstehen

responsiv:

• Kombi aus fluidem und adaptiven Layout
• ändert sich bei Breakpoints stärker
• nutzt den zur Verfügung stehenden Platz immer optimal aus, weniger Leerraum als beim adaptiven Layout 

above = Bereich über Scrollgrenze

• Information hoher Priorität
• mehr Grafiken 
• Top Links / Navigation 

below = Bereich unter Scrollgrenze

• Bedeutung Information nimmt ab
• mehr Texte 
• Footer, Impressum