Der Weg zur eigenen Website — Teil 3: Wireframes

Der letzte Artikel befasste sich mit der Struktur der Website und mit den sich daraus ergebenden Möglichkeiten der Navigation. Wireframes befassen sich dagegen mit der Struktur der einzelnen Seiten. Mit einem Wireframe wird jede einzelne Seite im Detail entworfen um die Wirkung zu testen und die beste Anordnung der Seitenelemente fest zu legen.

Auf jeder Seite gibt es Elemente, die bei allen Seiten an der selben Stelle platziert sind. Hiermit bekommen die Website ein Grundgerüst und eine einheitliche Linie. Je nach Funktion der einzelnen Seite gibt es hierfür unterschiedliche Elemente, deren Anordnung in dem individuellen Bereich der einzelnen Seite festgelegt wird.

Die nachfolgenden Abbildungen sollen dies am Beispiel unserer Website verdeutlichen:

Start- und Service-Seite
Start- und Service-Seite
Portfolio und Blogroll
Portfolio und Blogroll
Kontakt und Impressum
Kontakt und Impressum

Die Größen und Proportionen der einzelnen Blöcke in den Wireframes sind nicht so konkret, wie das obige Abbildungen vermuten lassen könnten. Bei der Umsetzung der Seiten und entsprechend dem gewählten Design ergeben sich die Größen und Proportionen meist zwangsläufig. Wird z.B. eine feste Seitenbreite von 960 Pixeln gewählt, so ergeben sich die Breite der Blöcke aufgrund der Teilungen und Zwischenräume. Die Höhe wird bei den meisten Blöcken durch den Inhalt dynamisch ermittelt.

Der nächste Artikel wird den Einsatz der Farben auf der Website behandeln.

Alle Teile dieser Serie:

Teil 1 – Recherche
Teil 2 – Struktur und Navigation
Teil 3 – Wireframes
Teil 4 – Die Farben
Teil 5 – Die Schriften