Webdesign-Tutorial, Hilfe zur Gestaltung der eigenen Homepage

Das größte Problem für Webdesigner ist wohl immer einen gut passenden Aufbau oder auch eine sinnvolle Einteilung für eine Webseite zu finden.

Zuerst einmal müsst ihr euch grundlegenden Dingen bewusst sein:

• Der Inhalt der Webseite ist grundlegend und kann sich im Aufbau und in Elementen wiederfinden lassen. Bei einem Schlosserladen wäre es beispielsweise sinnvoll einen Schlüssel in auffälliger Position als Element im Aufbau zu integrieren.
• Wenn es ein Logo oder ein Zeichen gibt, das auf der Seite im Kopf angezeigt werden soll, wird es am besten immer als fester Bestandteil integriert und an einer auffälligen Position plaziert. Das steigert den Wiedererkennungswert.
• Die Navigation ist wohl das wichtigste Element einer Homepage. Ohne sie wäre das Surfen auf einer Seite unmöglich. Also muss sie auch in der Seite eingespielt werden. Auf einige Dinge zur Navigation komme ich später noch zurück.

Nun zurück zu unserem eigentlichen Problem. Einen passenden Aufbau zu finden ist manchmal gar nicht so einfach. Ich kenne aber aus meinen Erfahrungern 2 Lösungswege.

1.

Auch wenn es absurd klingt, schaut euch mal in euerem Zimmer um, guckt mal aus dem Fenster oder einfach irgendwo in die Landschaft. Was ihr davon habt? Sinn und Zweck davon ist, dass ihr dabei sozusagen die Konturen, die ihr in der Landschaft erkennt, in Gedanken in 2D-flächige Formen umwandelt und ausfüllt. Das Ganze ist auch manchmal gut mit Gegenständen möglich. Am besten kann man meine Vorgehensweise an einem Beispiel deutlich machen.

Zur Abbildung:

Das ist eine gewöhnliche Landschaftsaufnahme.

Zur Abbildung:

In Gedanken oder auch in einer Skizze auf Papier könnte man diese ungefähren Bereiche trennen. Wie ihr auch erkennen könnt werden die Konturen nicht exakt nachgezeichnet, sondern nur schemenhaft. Aber gerade das bewirkt die Entwicklung solcher Formen.

Zur Abbildung:

Der in Formen gestaltete Bereich könnte der Header einer Webseite werden, wie ihr in der Skizze sehen könnt. Ausserdem könnt ihr erkennen, dass auch schon andere Mittel eingesetzt wurden, um die Formen in Szene zu setzen. Zum einen die gestrichelte Linie, zum anderen durch eine passende Farbwahl. Außerdem habe ich schon einige zusätzliche Seitenelemente mit eingezeichnet.

Natürlich ist nicht jedes Bild oder jede Ansicht für einen Webseitenaufbau geeignet. Entweder ihr habt schon ein Gefühl dafür gute Bildausschnitte und Landschaftsteile ausfindig zu machen, oder das Motto lautet: "Learning by doing", immer wachsam sein und die Augen "benutzen" ;-).

Mit dem menschlichen Auge hat man immer ein 3D-Ansicht, besonders stark, wenn man beispielsweise auf Gegenstände achtet. Leider kann man keine 3D-Formen für unsere Problemlösung gebrauchen, also muss die 3D-Form in eine 2D-Form umgewandelt werden. Wie das geht zeigt die folgende Abbildung am besten.

Zur Abbildung:

Im ersten Schritt wurden einfach die die äußeren Konturen des Objekts nachgezogen und mit einer Farbe gefüllt, so entstand ein 2D-Objekt. Genauso müsst ihr das in euren Gedanken versuchen. Als Beispiel könnte dies eine ausgefallene Navigation werden.

2.

Ich sprach von 2 Lösungen, die sich uns bieten. Die zweite ist auf alle Fälle etwas einfacher und etwas kreativer. Da es schon sehr viele Formen von Webseiten im Netz gibt wird es immer schwerer neue und vor allem effektive Aufbauten für Homepages zu finden. Vielleicht hilft es euch, wenn ihr euch ein Blatt Papier nehmt und einfach mal drauflos probiert. Vorher solltet ihr noch ca. 5 - 6 außergeöhnliche oder auch Standard-Formen auf das Papier zeichnen.

Jetzt habt ihr ein Blatt Papier vor euch liegen, auf dem ihr 5 - 6 verschiedene Formen sehen könnt. Analysiert diese nun und schaut, wie man die einzelnen Elemente miteinander verbinden könnte, um so eine neue kreative Form zu entwickeln. Damit sich eine sinnvolle und machbare Form für eine Navigation oder eine komplette Website ergibt muss man schon etwas basteln und viele Entwürfe machen.

Ihr dürft dabei natürlich auch soviele neue Objekte hinzunehmen, wie ihr braucht. Ihr dürft alles benutzen, um den Aufbau zu erstellen, was euch beim Zeichnen gerade in den Sinn kommt.

3.

Nun möchte ich noch etwas auf die Position der Navigation einer Internetpräsenz eingehen.

Die Position ist natürlich von allen vorgegebenen Elementen der Seite abhängig. Im Grunde gibt es aber hauptsächlich die horizontale und die vertikale Anordnung der Navigationspunkte.

Vertikale Navigation:

Die vertikale Anordnung der Navigationspunkte ist die typischste Variante, die auch am häufigsten im Web benutzt wird.

Vorteile:

• Sie bietet eine hohe Benutzerfreundlichkeit, weil sie bei allen Usern schon beim Betreten der Seite an dieser Stelle erwartet wird.
• Sie lässt sich sehr einfach in übersichtliche Kategorien und gegebenenfalls Untergruppen einteilen.

Horizontale Navigation:

Bei manchen Website-Konstruktionen ist es aber besser und sinnvoller die horizontale Lösung zu wählen. Zwar ist dieser Art der Navigation nicht unbedingt sehr gute Usability zugeschrieben, aber auch sie birgt Vorteile.

Vorteile:

• Ein wichtiger Aspekt ist die platzsparende Eigenschaft. Wenn sie beispielsweise aus Textlinks aufgebaut ist verschlingt sie höchstens 25 - 30 Pixel in der Höhe.
• Wo sonst könnte man so gut schöne Pulldown-Menüs einbauen? Dafür sind die Horizontalen wirklich sehr gut geeignet.