Typografie Farbgestaltung Schreiben fürs Web

Transkript

1 Typografie Farbgestaltung Schreiben fürs Web Prof. Astrid Beck Gestaltung Ziel der Gestaltung mit Schrift und Farbe Aufmerksamkeit wecken Gute Lesbarkeit Inhalt unterstreichen Inhalt vermitteln Vermeidung von Missverständnissen Anliegen vermitteln 2 1

2 Abhängigkeiten der Gestaltung Abhängig... vom Verbreitungsmedium von der gewünschten Wirkung des Dokuments (Zweck/Funktion) Zielgruppe Zeit / Mode / Trends Umfeld 3 Typographie Kunst des Buchdrucks Seitenorientiert Wahl der Schrift Layout Seitenränder Anordnung von Text- und Bildblöcken Abstände zwischen den Blöcken 2000 Springer- Verlag, Bln. ISBN:

3 Auswahlkriterien Möglichstwenig Schriftarten lb eines Dokuments Schriftcharakter sollte inhaltliche Aussage unterstützen Je schlichter die Schrift, desto höher die Lesbarkeit Auf Computerbildschirm und Overheadfolien möglichst nur serifenlose Schrift Überschriften sollten sich deutlich hervorheben und eine vollständige Aussage über den nachfolgenden Inhalt geben. Sie sollten aber aus dem gleichen Schriftstil stammen, wie der Gesamttext. Schriftstile sollten niemals gemischt werden. Eine Überschrift sollte nie länger als zwei Zeilen sein. Modifizierung der Schrift sollte vermieden werden. Weder gestauchte noch gestreckte Schriften dienen der Lesbarkeit. Man sollte darauf verzichten. Flattersatz rechtsbündig sollte bis auf Ausnahmefälle vermieden werden, besser ist ein Blocksatz. Ein linksbündiger Flattersatz ist jedoch nicht so langweilig wie ein Blocksatz. Zeilenlänge sollte idealer Weise so groß sein, dass sie mit einem Blick erfassbar ist. Ein schnelles Lesen ist dann möglich. Zur Verkürzung der Zeilenlänge schreibt man man deshalb zweispaltig und nützt horizontale Zwischenräume zur Gliederung des Inhalts. 5 Auswahlkriterien Großbuchstaben sollten für Texte jeder Art vermieden werden. Sie wirken langweilig und sind schwer lesbar. Schrift wirkt nur interessant in Groß- und Kleinbuchstaben. Unterstreichungen jeder Art sollte ein guter Designer vermeiden. Sie stören die Ruhe des Satzbildes. Außerdem werden sie mittlerweile leicht mit Hyperlinks verwechselt. Fette Auszeichnungen sind auffällig. Sie treten aus dem ruhigen Erscheinungsbild des Textes hervor, da sie einen Blickfang bilden. Man sollte sehr gezielt damit umgehen. Kursive Schrift am Zeilenanfang stört das vertikale Erscheinungsbild des Textes. Am Zeilenanfang sollte kursive Schrift vermieden werden. Schwerpunkte einer Aussage sollten etwas über die Seitenmitte, in der optischen Mitte, platziert werden. Text und andere Elemente einer Seite sollten aufeinander abgestimmt sein. Zu einer sachlichen Schrift und einer sachlichen Anordnung des Textes passen am besten sachlich anmutende Linien und Flächen (Buttons). Umgekehrt, gehören zu einer stimmungsvollen Schrift und einer stimmungsvollen Anordnung des Textes natürlich stimmungsvoll anmutende Linien und Flächen. Text auf Hintergrund ist nur dann sinnvoll, wenn ein guter Kontrast gegeben ist. Texte auf detailreichem Hintergrund oder ähnlicher Farbstufung sind schwer zu lesen und deshalb zu vermeiden. 6 3

4 7 Farben Farben beeinflussen die Lesbarkeit Farben haben Gefühlswirkung auf den Betrachter Farben sind mit Bedeutung belegt Kombinationen von Farben können die oben genannten Eigenschaften verstärken 8 4

5 Wirkung von Farben Verschiedene Arten der Wirkung natürliche Wirkung physiologisch angeboren psychologische Wirkung Erfahrung gesellschaftliche und kulturelle Prägung 9 Farbwahrnehmung 10 5

6 Kulturelle Aspekte Hochzeit in Weiss? esources/maps/wed.html

7 Wirkung von Farbe gelb bis rot hell, heiter, leicht warm, nah, dynamisch, unruhig grün über blau bis violett dunkel, ernst, schwer kalt, fern, statisch, ruhig 13 Wirkung von Farbe Blau kalt, dunkel, passiv, ruhig, in-sich-ziehend, technisch, seriös auf Schwarz: leuchtend, rein auf Gelb: dunkel, ohne Ausstrahlung auf Lila: leer und kraftlos A A A 14 7

8 Wirkung von Farbe Rot warm, aktiv, nervös, strahlend, königlich, Liebe, Gefahr auf Orange: brandig, dunkel, ohne Kraft auf Grün: frech, hitzig, laut auf Grünblau: intensiv, kalt A A A 15 Wirkung von Farbe Gelb besonders hell, unruhig, nervös, frisch, erheiternd auf Rosa: keine Strahlkraft mehr auf Violett: charaktervoll, hart auf mittelhellem Blau: hell strahlend, abweisend A A A 16 8

9 Diskussion freenet Deutsche Bank Lufthansa Ryanair

10

11 21 Text Design Groß- und Kleinschreibung verwenden EINE ÜBERSCHRIFT - nein Eine Überschrift - ja einheitliches, klares, wiedererkennbares Grundlayout kurze Zusammenfassung als Lockmittel (Teaser) zu Beginn kurze Sätze verwenden Information chunks anbieten 22 11

12 Nachrichtenstil fürs Web Der am besten für das Web geeignete Schreibstil ist der des klassischen Nachrichtenjournalismus. Die jedem Journalisten bekannte sog. inverse Pyramide beschreibt die Struktur. Bereits in den ersten Sätzen oder im Vorspann eines Texts erfährt der Leser um was es in dem Text geht. Schlussfolgerungen und Ergebnisse stellen den Anfang der Berichterstattung dar, Details und Hintergründe den Schluss

13 25 Kurze Texte, sparsame Grafik Zeilenlänge 35 bis 40 Zeichen Längere Texte sollte in Spalten dargeboten oder auf mehrere Seiten aufgeteilt werden nur halb so viele Wörter (oder weniger) wie in konventionellen Texten pro Textseite ein Bild (<50Kb) weiterführende Links 26 13

14 27 So nicht! Die folgenden Beispiele zeigen Seiten, wie sie nicht aussehen sollten Warum nicht? Gegen welche Regel wird verstossen? 28 14

15

16

17 Quiz 1. Was versteht man unter Gebrauchstauglichkeit? 2. Was ist Typographie? 3. Was sind Ziele der Gestaltung? 4. Welche Schriftgröße sollte man für Folien verwenden? 5. Was versteht man unter Schriftschnitt? 6. Nennen Sie Auswahlkriterien für Schrift. 33 Erstellen Sie einen Beitrag Erstellen Sie einen Beitrag für den Mörike-Auftritt Erstellen Sie einen gut gestalteten Text Überlegen Sie, welches Bildmaterial in Frage kommt und ob es weiterführende Links gibt Themen können sein: Unser Klassenausflug, Klassenfahrt Das Mörike (Geschichte, Gebäude...) Vorstellung einer AG (Theater, Internet, Tanzen, Sport...) Über den bilingualen Zug (Ziele, Fächer, Lehrer, wichtige Englische Redewendungen...) Buch-, CD- oder Film-Tipp Esslinger Weihnachstmarkt Glosse (etwas Spaßiges...) oder ihr eigenes