Webdesign - Webseiten planen, gestalten - Free-Hack Library

244
7.2
Einleitung
Einleitung
Wenn der Designentwurf verabschiedet ist, kann die technische
Umsetzung des Webangebotes beginnen. Dazu wird zunächst
ein HTML-Prototyp aufgebaut, um ein grundsätzliches Konzept
für die technische Umsetzung zu erhalten. Ziel des Prototypings
ist es, die Machbarkeit (Feasibility) Ihres Entwurfes zu prüfen,
denn sonst stellt man manchmal erst in der Phase der technischen
Implementierung fest, dass sich Designideen aus dem Photoshoplayout
nicht oder nur mit erheblichem Aufwand in HTML und CSS
realisieren lassen.
Außerdem wird in der Arbeitsphase des Prototypings der Styleguide
erstellt, d. h. die endgültige Definition der Designmerkmale.
7.3 HTML-Prototyp
Das Erstellen des HTML-Prototyps zählt eigentlich noch zur Entwurfsphase,
da es hier u.a. darum geht, in der HTML/CSS-Umsetzung exakte
Definitionen von Schriften, Farben und Positionen vorzunehmen.
Deshalb ist es wichtig, dass der Webdesigner in dieser Arbeitsphase
noch beteiligt ist, obgleich zu diesem Zeitpunkt der Auftrag oft
vom Designer an den technischen Webentwickler übergeben wird.
Unter Umständen wird man z. B. die Schriftwahl nochmals ändern,
wenn man erkennt, dass die Schrift, die im Photoshop-Entwurf
recht gut wirkte, in der Browserdarstellung schlechter aussieht.
Insbesondere die Einstellungen für Schriftgröße, Laufweite und
Zeilenabstände werden endgültig erst im HTML-Prototyp festgelegt.
Es ist also der Punkt gekommen, an dem Sie exemplarische
Seiten zu einem funktionierenden Prototyp zusammenbauen. Das
bedeutet, dass Sie aus Ihren Materialien eine statische HTML-Seite
erstellen, noch ohne dynamischen Content.
Ein Webprototyp enthält neben der Startseite (Homepage) alle
wichtigen vorkommenden Seitentypen. Idealerweise zeigt man
von der Homepage aus einen exemplarischen Navigationsweg bis
auf die unterste Navigationsebene auf.
Der Prototyp (auch: Klickmodell) dient vor allem dazu, dem Auftraggeber
gegenüber auf anschauliche Weise die Funktion Ihrer
Website zu demonstrieren. Man kann die exemplarisch ausgeführten
Funktionalitäten unter Realbedingungen im Browser testen und
die Musterseiten aufrufen.
7.3.1 Grundsätzlicher Aufbau der Seiten, HTML-Layout
Legen Sie zunächst eine geeignete Ordnerstruktur an und sammeln
Sie die bereits vorbereiteten Materialien (z. B. Bilder) dort.
Achten Sie bei der Benennung Ihrer Dateien auf vereinbarte
Namenskonventionen (vgl.: Siteplanung: Projektorganisation:
Namenskonventionen, S. 185).
Bauen Sie sich eine grundsätzliche HTML-Struktur auf (vgl.: Technische
Grundlagen: Struktur eines HTML-Dokuments). Legen Sie
die Ausgangsgröße Ihrer Seiten fest und die Seitenposition im
Browserfenster.