Website Workshop Teil 2

Entwurf und Design

Einer der wichtigsten Fragen ist, wie wir die Website optisch und inhaltlich gestalten. Wichtig dabei ist, dass eine Vorplannung vorgenommen wird.

Welche Inhalte, möchte ich dem Besucher bieten?
Welchen Grundaufbau soll die Seite haben (Anordnung Logo, Menü, Inhaltsbereich, Zusatzinformationen, Fußbereich etc.)?
Plannung der Menüstruktur!
Welche Grundfarben soll die Seite erhalten?
Wie hebe ich Inhalte hervor, Gestaltung von Überschriften, Texten etc?
In welcher Form bringe ich Bilder, Grafiken auf die Seite?

Das sind natürlich jede Menge Fragen über die man sich Gedanken machen sollte. Natürlich könnte man einfach loslegen. Jedoch zahlt sich eine Vorplannung aus und erspart später evtl. eine kompletten Umarbeitung des Konzeptes.

Das hört sich jetzt sehr kompliziert und anspruchsvoll an, ist es aber nicht. Ich verrate ein Geheimnis, welches selbst die Profis benutzen. Nein, ich brauche dafür kein aufwendiges Plannungstool oder Spezial-Software.

Es ist verblüffend einfach. Man nehme sich ein Blatt Papier und einen Bleistift. Wahrscheinlich führt der erste Versuch nicht gleich zum gewünschten Ergebnis. Fangt daher mit einem zweiten Blatt an und verändert hier und dort das Aussehen. So tastet man sich optisch an die Sache ran und kann auch schnell sehen welche Version besser aussieht. Es kommt dabei nicht auf Schönheit an, es soll ja nur ein Entwurf sein.  

Um die farbliche Gestaltung kümmern wir uns später. Es geht wirklich erst nur um ein Grobkonzept. Ein Tipp: Geht sparsam mit der Anordnung um, haltet den Entwurf möglichst schon jetzt schlicht. Details kann man später noch einplanen. Auch sollte man die Gestaltung nicht zu kompakt anordnen. Oftmals begeht man den Fehler zu viele Elemente auf eine Seite zu packen. Dies wirkt dann unübersichtlich und bewirkt eine Unruhe. Gebt den einzelnen Elementen Raum & Luft. Manchmal ist weniger einfach mehr...

Mein konkreter Entwurf sieht dann wie folgt aus

[Website Workshop] Entwurf Ich habe hierbei ein Zweispalten-Layout gewählt. In der Mitte im Contentbereich befinden sich die Vorschaugrafiken des Portfolios (Bildergalerie). Auf der Startseite kommt dann anstatt der Vorschaugrafiken eine größere Grafik als Eyecatcher. Rechts befindet sich eine schmalere Spalte die als Informationspanel dient und wo man je nach Belieben später auch ein Untermenü, z.B. eine Kategorieauflistung unterbringen kann (wenn es sehr viele Fotos werden).  

Oben und unten wird die Seite von einem Querbalken gesäumt. Im Kopfbereich enthält dieser Querbalken das Logo mit Schriftzug. Im unteren Balken ist Platzt um später dort alle möglichen Informationen unterzubringen. Zum Beispiel verlinkte Grafiken auf Twitter und / oder Facebook.

Grafische Umsetzung des Layouts

Prima, der erste Entwurf steht. Jetzt können wir mit der grafischen Umsetzung starten. Welches Programm ihr dafür nutzt ist zweitrangig. Ich habe den Reinentwurf mittels Gimp erstellt, natürlich kann man auch Photoshop oder ein anderes Grafikbearbeitungsprogramm benutzen.

Macht euch bei der grafischen Umsetzung keine Gedanken wie es später in xhtml und css umgesetzt wird. Falls man ein wenig zu wild war, kann man später immer noch Kompromisse eingehen. Hier gilt auch wieder geht sparsam mit den Farben um. Für die farbliche Umsetzung sollte man sich auch 3 bis 4 Grundfarben festlegen.  

Einige Beispiele wie Farben wirken:

Graue und schwarze Töne wirken seriös und wirken stylisch (benutzen oft Designer & Fotographen)
helle Pastelltöne, wirken fröhlich und frisch
blaue Töne erinnern an Meer, Frische und werden gerne von Firmen benutzt
Rottöne wirken warm und geschmeidig

Ein wichtiger Aspekt ist die Lesbarkeit von Texten. Zwar wirken auf einem dunklen, schwarzen Hintergrund Bilder, Fotographien gut. Weiße Schrift auf dunklen Hintergrund ist jedoch sehr schlecht lesbar und das Auge des Besuchers ermüdet sehr schnell. Benutzt daher lieber einen hellen, zB. weißen Hintergrund. Großformatige Schrift, kann man natürlich als Überschrift auf schwarz setzen oder kürzere Texte wie ich es im oberen und unteren schwarzen Balken gemacht habe. Dies verfehlt sicherlich nicht seine Wirkung. Auf manchen Websiten wird auch in den Hintergrund des Textes wiederum eine großformatige Grafik gesetzt, der Text verschwimmt dann mit dieser Grafik, wird somit unruhig und schlecht lesbar.

Nun für unser Beispiel habe ich die Farbkombination aus Rottönen und schwarz gewählt, der Hintergrund (Hauptbereich) bleibt schön weiß. Aus dem obigen Bleistiftentwurf konnte man noch nicht viel ableiten. Es ist auch wichtig schon Texte und das Menü einzubauen, damit ein Gesamteindruck entsteht. In der Mitte erwartet den Besucher ein großer Eyecatcher. Wir reden damit nicht um den heißen Brei rum, sondern möchten den Besucher damit gleich auf das Portfolio, Fotogalerie lenken. Nach dem Motto "Entdecke mehr ...". Diese Grafik wird später in xhtml verlinkt, man kommt somit direkt bei einem Klick zur Galerie.

Hier nun mein Reinentwurf

[Website Workshop] Reinentwurf Wer möchte kann auch die Gimpdatei (entwurf-workshop.xcf) und die Photoshopdatei (entwurf-workshop.psd) als ZIP-Datei downloaden um evtl. noch kleine Änderungen vorzunehmen. Die einzelnen Grafiken und Texte liegen dann jeweils in einer separaten Ebene. By the way: Die Texte wie z.B. "Blende 3.5, eine Demoseite ... etc. braucht ihr nicht abändern, da diese Teile nicht als Grafik später eingefügt werden, sondern als reiner Text.

Im dritten Teil zeige ich dann wie wir die Teile aus der Grafik ausschneiden (slicen) die zur Umsetzung in xhtml benötigt werden. Danach folgt der erste Aufbau eines Grundgerüstes in xhtml.

 
Diese Website benutzt Cookies. Wenn du die Website weiter nutzt, gehen wir von deinem Einverständnis aus. Mehr Information findest du in unserer Datenschutzerklärung.
OK