Im Vorfeld gesagt: Wer lesefaul ist sollte sich überwinden. Zudem dient das Tutorial nur als Übung und Wegweisung für das Erstellen einer Website. Das bedeutet: Auf euren Rechnern könnt ihr alles draufhaben, was ihr wollt. Gebt ihr allerdings eine 1:1 (oder beinahe 1:1) Kopie im Internet als euer Design bzw. eure Page aus, müsst ihr mit unangenehmen Konsequenzen rechnen. PSD-Dateien werde ich nicht zum download anbieten.
Photoshop Grundkenntnisse setze ich voraus.

 

Teil 2: Hauptdesign der Page

Es gibt ein paar Grundregeln, die man beachten sollte.
1. Im Optimalfall sollten Boxen mit dem Design sich nach unten und zur Seite ausdehnen können. Dieses muss beim Erstellen der Grafik immer Berücksichtig werden.
2. Lass euch Zeit beim erstellen eines Designs.
3. Arbeitet sauber und mit vielen Details.
4. Baut euer Design logisch auf, damit der User sich zu Recht findet.
5. Achtet auf die Auflösung der Seite. Die meisten Benutzen 1024x768, also sollten wir es auch benutzen.
6. Grundsätzlich kann man jedes Design (sehr grob gesagt) in Hintergrund und Vordergrund aufteilen.

Na gut, jetzt kommen wir mal zum Design. Ich habe versucht eine einfache Homepagevorlage zu erstellen (ohne viel Innovativität), damit ihr es nachmachen könnt. Arbeitet mit Ebenen und Ebenensets, benennt diese, damit ihr später beim "Zerschneiden des Designs" die Übersicht habt, wo alles ist.

Schriftarten, die ich benutzt habe sind: Arial; Federation; Visitor TT2 (die könnt ihr auf der Seite unter downloads runterladen)

Erstellt eine neue Datei (996 x 900). Wieso 996: ganz einfach, beim dem Browser kommt der Rahmen und die Scrollleiste hinzu.

Hintergrund:

Füllt die erste Ebene mit Grauton aus (#404040). Erstellt eine neue Ebene und zeichnet einen Viereck in der Farbe (#CCCCCC). Kommen wie zu den Details, die ich am Anfang erwähnt habe: Über und unter dem Viereck habe ich 1px breite Linien in einem etwas dunklem Grau (#898989) gezogen. Zudem habe ich 1px breite vertikale schwarze Linien gezogen, und bei diesen die Spitzen mit einem weichen Radiergummi transparent gemacht.
Zum Schluss noch das Logo, welches wir im ersten Teil des Tutorials verstellt haben, einfügen.

Vordergrund:

Fangen wir mit den Boxen an. Dazu erstellt ihr ein Abgerundetes Rechteck (Radius 20 Pixel) in einem Grauton (#585858). Jetzt wird es etwas kompliziert: Also, markiert nur das abgerundete Rechteck (strg + linke Maustaste auf die Ebene). Erstellt eine neue Ebene (Markierung muss erhalten bleiben) und geht dann auf Bearbeiten / Kontur füllen (Breite=5px; Farbe = #CCCCCC; Position= Außen). (Markierung muss erhalten bleiben) Geht dann wieder auf Bearbeiten / Kontur füllen , stellt aber diesmal die Breite auf 2px und die Farbe auf #404040. Und wie immer dürfen Details nicht fehlen: Ich habe zum Beispiel mit dem Abwedler-Werkzeug die Ecken etwas aufgehellt und 2 abgerundete Rechtecke oben und unten eingesetzt.

Genau das gleiche macht ihr mit der ContentBox. Bei dieser Box habe ich zusätzlich unten ein "nach oben Button" eingefügt. Mit dieser kleinen Feinheit bringt ihr etwas Abwechslung in das Design der Boxen hinein. Zudem ist es für den User praktisch, denn er muss nicht nach oben scrollen.

Login-Bereich: Grundsätzlich sollten Texteingabefelder (z.b. Suche, Login etc.) für jeden User gleich zu sehen sein. Aus dieser Überlegung heraus, habe ich den Login Bereich nach oben gesetzt. Um es besser hervorzuheben, habe ich den Bereich, wo die Felder sich befinden mit einem Farbverlauf (#404040(unsere Hintergrundfarbe der Seite) / #585858) unterlegt.

Was jetzt noch fehlt, ist das Design für den Inhalt: Dieses bedeutet vor allem: Position der Texte, Farbe der Schrift (z.B. normal/rollover/active/ beim link etc.), Position der Bilder und und und ...

Aber fangen wir erst mal mit der Navigation an :)

Dazu gibt es nicht viel zu sagen, den das Bild spricht für sich. Es ist manchmal sehr Sinnvoll Navigationsgruppen farbig zu kennzeichnen. Somit hat der User einen schnellen Überblick über einzelne Navigationsgruppen, und kann sich besser zurecht finden.

Contentbereich: Unsere ContentBox habe ich in 2 Bereiche unterteilt: in die Übersicht "welche Spiele gespielt werden/wurden" und in News. Bei der Überlegung welche inhaltliche Bereiche auf der Startseite / Unterseiten erscheinen, ist es Vorteilhaft auch andere Menschen zu fragen und sich in die Perspektive eines Besuchers zu versetzen. Stellt euch selber die Frage: "Was interessiert die User am meisten?" (diese Fragestellung ist natürlich von der Zielsetzung eurer Seite abhängig. Bei einem Onlinehändler würde die Fragestellung etwas anders sein z.B. "Wie schaffe ich dem Kunden viel anzudrehen?")

Aber ihr müsst aufpassen, dass die Seite nicht zu überladen wirkt.
Und wie schon ganz am Anfang gesagt: Arbeitet sauber und Detailreich, dann klappt's auch mit dem Nachbar --- ne ich meine mit der Homepage :) .

Was jetzt noch fehlt sind die Unterseiten. Diese habe ich nicht gemacht, da ich mich eigentlich nur wiederholen würde. Denn im Prinzip ist es das selbe.

 

Last but not Least: Seid kreativ, verharrt nicht auf dem Design, welches ich erstellt habe, kombiniert andere Farben miteinander, erstellt neue Formen.