Webdesign-Tutorial, Hilfe zur Gestaltung der eigenen Homepage

Wenn die Thematik und der Inhalt entschieden ist, kannst du erstmals kreativ gestalten, und zwar schwarz auf weiß.

Schritt 6 dieses Webdesign-Tutorials führt man normalerweise als Zeichnung, ein sogenanntes Scribble, durch. Als Zeichenwerkzeug kannst du einen Bleistift, einen dünnen Filzstift oder einen Kuli verwenden. Worauf du Scribblest ist mir völlig egal ;-). Ich nehme bevorzugt aussortierte Zettel (Recycling ;).

Bei einem Scribble wird der gröbste Aufbau, die Aufteilung und die Anordnung des Inhalts auf der Startseite skizziert. Deswegen ist eine schnelle Zeichenweise angebracht, sodass du dich beim Zeichnen nicht zu lange an Einzelheiten aufhälst.

Der Vorteil eines Scribbles liegt darin, dass man vor der mühseligen Gestaltung im Grafikprogramm die Wirkung eines Aufbaus testen und sich durch eine schnelle Skizze besser vorstellen kann. Wenn die Wirkung nicht den Erwartungen entspricht kann man so ohne viel Mühe die ganze Sache nochmal überdenken.

Texte werden in so einer Zeichnung als Schlangenlinien oder einfach waagerechte Linien angedeutet. Für Bilder, Fotos und Grafiken werden meistens Rechtecke benutzt. Manchmal sieht man diese Rechtecke auch ausgefüllt mit einem Kreuz. Hilfreich ist es zudem, wenn du dir vorher schon Gedanken um die Größe einzelner Elemente machst (z.B. Länge einer Tabelle oder eines Containers) und sie direkt in das Scribble als sinvolle Markierung mit einem Zahlenwert aufnimmst.

Zur Abbildung:

Die Abbildung zeigt den Hauptbereich einer Seite, in dem der Inhalt erscheint.

Als Inhalt wurden hier 2 Bilder eingefügt, und der Text wird als Linien dargestellt. Außerdem sind einige Pixelangaben zur Breite des DIV-Containers und der Größer einiger Abstände, sowie die Breite der Bilder angegeben.

Diese Zeichnung dient als Anschauung, wie so ein Scribble aussieht und wie man beispielsweise Werte einzeichnen kann.

Bei der Umsetzung der Seite im Grafikprogramm dient das Scribble als Hilfe und Unterstützung zur Gestaltung der Seite.

1.

Ein erster Schritt bei jedem Scribble ist das Zeichnen der Grundform. Der Anfang könnte zum Beispiel so aussehen:

Zur Abbildung:

Dieses Rechteck soll das Browserfenster darstellen.

2.

Der nächste Schritt des Scribbles kann nur ausgeführt werden wenn du dir einen Aufbau für die Seite überlegt hast. Mehr zum Aufbau lernst du in Teil 7.

Hast du eine Idee im Kopf, so versuch sie einfach irgendwie aufs Papier zu bringen. Denn später darf noch kräftig drübergeschmiert und durchgestrichen werden, falls dir etwas besseres in den Sinn kommt. Wenn ein Versuch zu chaotisch wird und du kaum noch etwas erkennst, fang doch einfach ein neues Blatt Papier an.

Ein kleine Strategie: Skizzier deine grobe Vorstellung mit leichtem Aufdrücken des Zeichengeräts. Wenn dir der Aufbau gefällt, ziehst du einfach die wichtigen Linien fester nach. So vermeidest du unnötiges Chaos auf dem Papier.

Skizzieren solltest du in diesem Schritt die Navigation, den Kopf der Seite und eventuelle Platzhalter für Dinge (z.B. News, Infos, Downloads, eine 2. Navigation, etc.). Der Bereich für den Inhalt sollte später klar zu erkennen sein.

Zur Abbildung:

Man kann erkennen, dass nicht besonders fest aufgedrückt wurde und wirklich die erste Idee einfach aufgezeichnet wurde. Die Position des Logos wurde schon definiert und mit einem Rechteck gekennzeichnet.

Am rechten Rand kann man schon ein weiteres Feld sehen, worin später News angezeigt werden sollen.

3.

Wie schon in der Strategie beschrieben wird die erste fertige Zeichnung nun soweit verändert, dass man die für die spätere Gestaltung wichtigen Linien hervorhebt und nochmal kräftig nachzieht. Außerdem kann das Scribble bei diesem Schritt auch verändert werden, wenn man beispielsweise neue Ideen hat oder nur ein Detail umgestalten möchte. Auch komplett neue Elemente können im Laufe des Zeichnens entstehen.

Zur Abbildung:

Bei der Nachbesserung wurden die Ränder der Navigation und des News-Feldes weiterentwickelt und grafisch etwas moderner gestaltet. Zudem wurde ein neues passendes Feld für ©-Angaben und einer Subnavigation angelegt. Alle wichtigen Konturen sind nun kräftig hervorgehoben.

Der Contentbereich wird mit einem Rechteck, für eine Grafik, und Linien, für Text, dargestellt.

4.

Am Ende kann man sich noch am Rand einige Markierungen machen und diese mit Pixelangaben versehen, damit man bei der Gestaltung schon auf richtige Proportionen und Größen achtet.

Zur Abbildung:

Zum schluss wurden noch an den Seiten einige Breiten und Höhen einzelner Elemente aufgeschrieben.

5.

Im Grunde ist damit das Scribble abgeschlossen. Übung macht ja bekanntlich den Meister, deshalb nutzt jede Gelegenheit ein Scribble anfertigen zu können. So findet man am besten seinen eigenen Stil. Oft sind auch 2 - 3 Scribbles ein und der selben Seite, aber mit jeweils verschiedenem Aufbau, hilfreich, um daraus einen sehr guten Kompromiss zu finden.