Layout: Grafik + Texte im WWW

Ich frage mich, wo ich hier anfangen soll... Mit den Gestaltungsrastern, dem 'goldenen Schnitt' ...? Was könnte ich sagen, was nicht schon längst und viel besser beschrieben wurde.

Layout hat - wie alles Design - unmittelbar was mit Funktionalität zu tun. "Form follows function" - Die Form folgt der Funktion - das ist die Quintessens guten Designs.

Wenn das nicht unmittelbar einsichtig erscheint, machen Sie bitte mal folgendes Experiment:

Wenn Sie das nächste Mal Ihren Frühstückstisch decken: plazieren Sie einmal Besteck oder Kaffeetassen mindestens 50 cm entfernt von den Brettchen oder Tellern ... und warten auf die Kommentare der TischgenossInnen ... und dann behaupten Sie mal frech: Sie fänden das einfach schöner so!
Sie werden Unmut, Unglauben und Vorträge über den Nutzen / die Unbequemlichkeit bestimmter Anordnungen der Frühstücksutensilien ernten ... und befinden sich augenblicklich mitten drin im Thema, was ein gutes Layout (des Frühstückstisches) ausmacht.

Ein gutes Layout MUSS sich nach den technischen Möglichkeiten des Trägermediums und den Erfordernissen des Präsentierten strecken. Es darf dabei aber niemals langweilig sein. Das bekäme den Inhalten schlecht!

Gutes Layout / Design fängt mit den zu präsentierenden Einzelteilen an: hier sind Texte und Bilder gemeint.

Texte(n) für das WWW

JedeR kann es bestätigen: lange Texte lese ich lieber im Ausdruck.
Woran liegt das?

1. Zeilenlänge: im Buch ist eine Textzeile kaum länger als 10cm und sie bleibt unverändert. Im Zeitungsformat sorgt der Spaltensatz für angenehme Zeilenlängen.
2. Unveränderliche Positionierung: Ein Wort im Buch steht immer an derselben Stelle auf einer bestimmten Seite. Klingt blöde, aber Sie werden noch sehen ...
3. Physische Präsenz des Werkes: Ich kann mir Notizen an die Seitenränder schreiben oder ... Eselsohren machen... naja
4. Lesen längerer Texte macht bei ausreichender Beleuchtung und passender Brille keine Schwierigkeiten

Der digitale Text hingegen

1. hat meist keine feste Zeilenlänge [vergrößern und verkleinern Sie mal das Browserfenster und beobachten den Textumbruch]
   Die Textposition ist variabel.
2. Digitale Texte sind 'flüchtig.
   Es kommt vor, daß ich ganze Kapitel innerhalb einer mir bekannten Homepage plötzlich nicht mehr wiederfinde: sie wurden gelöscht oder überarbeitet. Andere Kapitel sind unverändert und auf dem alten Klickweg erreichbar. Das verwirrt.
3. Lange Texte am Bildschirm zu lesen fällt der Mehrheit der Leser schwer. Es ist physisch anstrengender weil wir in eine Lichtquelle hineinschauen und die Lochmaske der Röhrenmonitore die Schriften recht grob erscheinen läßt. TFT-Bildschirme sind da besser, allerdings meist zu grell in den Kontrasten voreingestellt.

Selten können (längere!) Texte, die für den Print geschrieben wurden, unverändert in die Screen-Produktion übernommen werden.
Sie müssen redaktionell überarbeitet werden.

In der Regel wird folgende Arbeit nötig:

• Sätze kürzen!
• Satzstruktur vereinfachen!
• Fließtext in kleinere Absätze unterteilen
• Weiche Zeilenumbrüche in Absätze verwandeln
• Zusätzliche Zwischenüberschriften einfügen
• Aufzählungen im Fließtext in Listen umformatieren
• Zusätzliche Illustrationsgrafik zur Auflockerung und Gliederung einfügen
• Layout ggf. beruhigen:
  • alle Illustrationen auf eine Seite des Textes z.B.
  • weniger 'optische Aufreger': weg mit 'fett', 'kursiv', 'gesperrt' etc
• Schriftfarbe: Ein Dunkelgrau vor hellem, aber nicht weißem Hintergrund mildert die Kontaste

Literarisch wertvolle, nicht ohne weiteres an Onlineerfordernisse anpaßbare und geschützte Texte sollten in der Online-Version nur anzitiert werden und als PDF in Druckfassung zum Download angeboten werden.

Grafik für das WWW

Web-optimierte Grafik eignet sich nicht für den Ausdruck - das werden Sie schon bemerkt haben.

• Sie hat nur 72 dpi (72 Druckpunkte pro Inch - im Gegensatz zu 300 dpi in der Druckversion).
• Sie liegt im RGB-Farbmodus [3-Farben] vor - im Gegensatz zum CMYK-Modus [4 Farben] für den Druck.
• Die Browser können nur die Dateiformate
  .jpg
  .gif und
  .png
  .svg (scalable vector graphics)
  darstellen
  
  Im Druck geläufig: .pdf, .eps, .tif, .psd, .ai ... und und und

Optische Ungetüme

Im Irrtum ist, wer meint, daß großformatige Bilder im WWW auch 'groß' wirken! Großformatige Bilder wirken im Gesamtlayout meist grobschlächtig, deplaziert, unproportioniert.
< Beispiel >

Wer auf Großansichten Wert legt, bietet sie an, aber quetscht sie nicht auf Teufel komm raus ins Layout.
< Beispiel >

Gutes Design funktioniert ...

aber kann aufregendes Design auch funktionieren?

[da kütt noch mehr ... ]

Literatur:
Andreas und Regina Maxbauer: "Praxishandbuch Gestaltungsraster" - Verlag Hermann Schmid, Mainz - ISBN 3-87439-571-5

[Claudia]
Stand: 10.03.2008 ..:: ^ ::..

Zettel-wolke

CMS SEO Logo [Web]-design Web 2.0 CSS- basiertes Layout CSS PHP VHS Köln Corporate Design Layout Formular Suchmaschine HTML E-Learning Shop Interaktivität Typographie Content Management System Barrierefreies Webdesign