Web-Konzeption

Für eine korrekte Darstellung sollten Systemschriften verwendet werden.

Windows: Arial, Times New Roman, Tahoma, Verdana,...

MacOS: Helvetica, Times, Verdana,...

- Serifenlose Schriften für bessere Lesbarkeit
- Webfonts ermöglichen individuelle gestaltung
 

Seitenverhältnis:
- Bildschirm zeigt Querformat (3:2 bzw. 16:10)
- Printprodukt DIN-Hochformat (1:V2)

Auflösung
- Druck - 300dpi = Schriften und Bilder schärfer
- Web - 72dpi = verschwommene Ränder

Navigation
- Druck: Inhaltsverzeichnis auf Voderseite
- Web: Navigation, Verlinkungen, Scrollbar

Lesefluss auf Bildschirm schlechter

Schriftarten müssen skalierbar sein

Texte
- Druck: verschiedene Satzarten möglich
- Web: linksbündiger Flattersatz

Eingeschränkte Layoutmöglichkeiten durch verschiedene Browser

- Beide enthalten alle fontmetrischen Angaben - keine weitere Datei (wie bei PostScript-Fonts) notwendig

- OpenType  verwendet 16-bit-Unicode - 65.000 Zeichen möglich (wichtig für Sonderzeichen)

- OpenType ist plattformunabhngig einsetzbar

- TrueType-Fonts - große qualitative Unterschiede, die bei Belchtung und Druck schwierigkeiten bereiten

- TrueType = Bildschirmausgabe

- OpenType = Printprodukt

- mehrspaltige Anordnung

- Zeilenbreiten von 35-60 Zeichen

- kleinere Textblöcke mit Freiräumen

- Inhalt mit erläuternden Bildern untergliedern

- Text auf mehrere Seiten verteilen

- langes Scrollen vermeiden

- guter aber nicht maximaler Kontrast

- nicht unterstreichen

- kursiven Text vermeiden

Anti-Aliasing oder Glätten:
Treppeneffekt wird durch abgestuft schattierte Pixel zwischen Schrift- und Hintergrundfarbe gemindert.
Durch Angleichung der Schrift an den Hintergrund wird diese zur Grafik.

Vorteil
- führt bei größeren Schriftgraden zu besseren Lesbarkeit

Nachteil
- je kleiner der Schriftgrad, desto unleserlich (unscharf)
- mehr Speicherplatz benötigt

Lesefreundliche und deshalb bildschirmtauglich sind
- unterschiedliche Schriftgrößen
- unterschiedliche Schriftarten
- unterschiedliche Schriftschnitte, z.B. fett, mager
- farbliche Hervorhebungen

Vermieden werden sollte
- Kursivstellung
- Unterstreichung
- Versalsatz
- Sperrung
- grelle Farbkombinationen
 

Screen-Reader lesen Inhalte einer Internetseite bzw. der einzelnen Screen vor (Text, Navigation, Title der Bilder, etc.)

- zu jedem Weg gehört ein Rückweg

- Startseite & Impressum sollen von jeder Seite erreichbar sein

- Verweis auf angebotene Formulare (z.B. Produktbeschreibungen, Flyer)

- Übergeordnete Seite können übersprungen werden (Unternavigation)

- keine zu tiefen Hierachien
 

- Wo bin ich?

- Woher komme ich?

- Wohin geht es als nächstes?

- Wo ist das, was ich suche?

- Was gibt es sonst noch?

- Lineare Struktur

- jump-Lineare Struktur

- Baumstruktur

- Matrixstruktur

- Netzstruktur
 

Gitter-/Tabellenstruktur
- Seiten stehen logisch in Spalten und Zeilen einer Matrix - jede Seite = ein Tabellenfeld
- Spalten können z.B. Produkte, Zeilen für bestimmte Infos dazu (Produktbeschreibung) stehen
- jede Seite verweist auf Seite in gleicher Spalte und Zeile
- strenge Regelmäßigkeit
- kann Baumstruktur anbauen
 

- keine Nacheinander oder Über- bzw. Unterordnung, Spalten oder Zeilen
- jede Seite verweist auf mehrere Seiten
- Umfangreiche Struktur = schwer zu überblicken
- hohe Anforderung an Navigationsgestaltung

- hier gibt es Über- und Unterordnungsverhältnisse
- jede Übergeordnete Seite verweist auf mehrere Untergeordnete Seiten
- Übergeordnete haben allgemeine, überblickartige Inhalte
- Untergeordnete enthalten spezielle, ins Detail gehende Inhalte
- Struktur ähnelt Gleiderung eines Sachbuchs mit Kapiteln, etc.
- kann flexibel an Inhalt und Umfang

- hier gibt es Über- und Unterordnungsverhältnisse
- jede Übergeordnete Seite verweist auf mehrere Untergeordnete Seiten
- Übergeordnete haben allgemeine, überblickartige Inhalte
- Untergeordnete enthalten spezielle, ins Detail gehende Inhalte
- Struktur ähnelt Gleiderung eines Sachbuchs mit Kapiteln, etc.
- kann flexibel an Inhalt und Umfang angepasst werden
- nachträgliche Erweiterung möglich
- Übersicht kann rasch undurchschaubar werden

- die Seiten folgen aufeinander
- keine Über- oder Unterordnungsverhältnisse
- logisches Nacheinander, jede Seite verweist auf die folgende Seite
- z.B. Nicht-Interaktive Präsentation
 

- eine zusätzliche Seite verweist auf alle wie ein Inhaltsverzeichnis
- Seiten können direkt angesprungen werden oder nacheinander
 

Usability = Nutzbarkeit, Gebrauchstauglich, Nutzerfreundlich

Effektivität: Ziel soll für Nutzer erreichbar sein
Effizienz: geringer zeitlicher Aufwand
Zufriedenheit: geringer Aufwand + Erwartung erfüllt

- Übersichtliche, durchschaubare Struktur

- Hierachie weder zu tief noch zu breit

- Kurze Ladezeiten

- nachvollziehbare Zuordnung von Kategorien

- allg. übliche u. verständliche Navigationsbegriffe

- Navigationselemente an fester Position

- Kurze Navigationswege

- alternative Navi (Sitemap, Suche)

- eindeutige Kennzeichnung der geöffneten Seite

- übersichtliche Seitengestaltung

- Lesefreundliche Typo

- Wesentlicher Inhalt,

- Funktion der Seite (Werben, Informieren, Unterhalten, etc.)

- Ziele (Bekannheitsgrad erhöhen, Absatz von Produkten steigern, etc.)

- Zielgruppe

- Vorhandenes Corporate Design zur Umsetzung vorhanden?

- Domain-Name

- Stil, Tonalität (sachlich, seriös, kompetent, schrill, billig, etc.)

- Technische Rahmenbedingunen

- Termine

-Briefing

- Strukturplan

- Navigationsplan

- Seitenskizzen

- Gestaltungsraster

- Usability-Test

- Demoversion
 

- mind. 2 Farben benötigt (schrift und Hintergrund)

- Helligkeitskontrast: Schwarze Schrift auf hellem Hintergrund
  > rein weiß wirkt störend, eher helles Grau

- Beschränkung auf Web-sichere Farben nicht mehr wichtig

- Abweichende Farbdarstellungen durch individuelle Mot-Blau-Kontrast
  > Flimmern an Kanten + Unschärfe

- große Datenmenge im Vergleich zu codiertem Text

- grobe Auflösung vom Monitor

- unsichere Farbwiedergabe durch unterschiedliche Einstellungen

- dekorative Funktion

- sRGB-Farbraum = Standard Farbraum für Webbilder

- weniger statische Bilder durch Animationen