Webdesign - Webseiten planen, gestalten - Free-Hack Library

Abb. 6.8.2b: Abschalten der Schriftglättung in
Photoshop
234
Designarbeitsschritte
Beim Layouten kann man mit Blindtext und Platzhalterbildern
arbeiten, besser ist es jedoch, Realtext und Realbilder einzusetzen,
da man auf diese Weise sofort ein Gefühl dafür bekommt, welche
Textmengen im konkreten Fall zur Verfügung stehen und wie die
vorhandenen Bilder im Layout aussehen. Vor allem aber erreicht
man mit realem Material in der Kundenpräsentation einen weitaus
höheren Identifikationsgrad.
Teilen Sie Ihre Seite zunächst mit Hilfslinien in die gewünschten
Inhaltsbereiche. Standardmäßig wird ein Kopf-, ein seitlicher
Navigations- und ein großer Inhaltsbereich unterschieden. Legen
Sie dominante Flächen (Farbflächen, Bilder) zuerst an. Positionieren
Sie Logo, Headline und Bodytext.
Haupt- und Nebentext (z. B. Bildlegenden, Marginalien) können
durch unterschiedliche Schiftgrößen und -stärken deutlich voneinander
getrennt werden.
Achten Sie darauf, dass zwischen Texten und Browserrand bzw.
zwischen Texten und anderen Gestaltungselementen (Buttons,
Bilder etc.) ein großzügiger Abstand verbleibt.
Definieren Sie Ihre Navigationsbereiche und entwickeln Sie Ihr
Navigationsdesign weiter. Fügen Sie die Navigationsbegriffe oder
Ihre Buttons ein (Abb. 6.8.2a).
Erproben Sie unterschiedliche Schriften aus dem Repertoire der
Systemschriften oder experimentieren Sie mit Bildtypografie für
die Texte der Headline und Navigation und entscheiden Sie sich für
eine Schriftart aus den Systemschriften für den Fließtext. Prüfen
Sie, welcher Platzbedarf für die längsten Navigationsbegriffe
erforderlich ist.
Spielen Sie mit den Positionen von Texten und Bildern. Testen
Sie geeignete Einstellungen für Schriftgröße, Zeilenabstand und
Laufweite (Kerning) von Schrift in Bildern.
Der Vorteil des Photoshop-Layouts gegenüber einer direkten Umsetzung
im HTML-Editor liegt darin, dass dies wesentlich schneller
und einfacher von der Hand geht und man eher gewillt ist, sich
von nicht optimalen Entwürfen wieder zu trennen.
TIPP: Simulieren Sie Browser-Fließtext in Photoshop: Stellen Sie
in der Text-Zeichenpalette die Textdefinition auf „ohne“, das
erzeugt Text ohne Antialiasing und sieht Text im Browser sehr
ähnlich (Abb. 6.8.2b).
6.8.3 Rasterentwicklung
Wie im Printdesign ist ein Layoutraster auch im Webdesign ein
nützliches Hilfsmittel, um im Layout Ordnung zu schaffen. Es dient
dazu, gleichartige Gestaltungselemente auf unterschiedlichen Seiten
konsistent zu positionieren, denn am Bildschirm fällt es besonders
störend auf, wenn beim Durchklicken der Seiten z. B. die Seitenheadline
immer auf einer anderen Höhe steht. Zum anderen geht
es beim Layoutraster darum, die einzelnen Gestaltungselemente