G4E|TUTORIALS

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 1: Theorie + Logo

1) Idee
2) Farbe
3) Layout
4) Navigation
5) Schrift
6) Logo

Teil 2: Hauptdesign der Page
Teil 3: Grundlagen der Programmierung + Slicen der Page

Blau unterlegte Schrift bezieht sich auf unser Beispiel.

1) Die Idee: Dieser Schritt wird gerne unterschätzt, da er sehr simpel ist. Er ist aber dennoch wichtig.

1. Mit welchem Thema (en) beschäftigt sich die Seite?
   Nehmen wir als Beispiel an, das es ist eine "Clanpage" sein soll. In diesem Fall wären die Themen "Spiel, Anwerbung von Spielern, Werbung für sich" im Vordegrund.
2. Welche Zielgruppe soll die Seite ansprechen?
   Die Zielgruppe in unserem Fall wären Jugendliche in eurem Alter (15 - 20 Jahre).
3. Wie viel Information kommt auf die Seite.
   Für einen durchschnittlichen Clan, braucht ihr nicht so viel Platz. (ist für den Layout wichtig)
4. Was will ich mit der Seite erreichen?
   Clanpage soll bekannt werden.
5. Name der Seite / Logo?
   Der Name / Logo sollte nicht zu lang und doch einprägsam sein. Ich habe mir "x.gaming" ausgedacht.
6. Für welche Auflösung ist die Page ausgelegt.
   Normaler Weise benutzen alle 1024 x 768.
7. Farben der Seite.
   Wir nehmen mal dunkel grau + orange.
8. Menü Punkte der Navigation
9. Werbung auf der Seite.

2) Farbe:
Ich mache mir immer zuerst eine Farbtabelle mit den Farben, die ich verwenden werde. Grundsätzlich wähle ich mir die Hintergrundfarbe aus und erstelle mir dann Farbmuster, sodass die Farben mit dem Hintergrund harmonieren. Bei diesem Schritt könnt ihr euch schon Gedanken machen, welche Farbe die Schrift, die Links, Überschriften etc... bekommen.

In unserem Fall ist die Hintergrundfarbe ein dunkles grau (# 404040)

3) Layout:
Unterteilung in Spalten:

Das Beispiel 1 (3 spaltig ) eignet sich für die, die viel Information unterbringen wollen. Nachteil bei dieser Aufteilung ist es, dass die Übersichtlichkeit leidet.

Das Beispiel 2 (2 spaltig ) eignet sich für die, die eine kleine bis mittlere Menge an Information haben (wie in unserem Fall)

Das Beispiel 3 (1 spaltig) eignet sich für "über mich" Seiten mit wenig Inhalt.

4) Navigation / Aufteilung der Seiten:

1. Die Navigation soll sichtbar und übersichtlich sein. Das bedeutet, dass beim ersten Anblick der Besucher    der Seite weiß, wohin er klicken soll.
2. Die Schrift sollte leserlich sein. Arial 11 - 14 px ist eine optimale Lösung. (hängt wiederum mit der    Zielgruppe zusammen)
3. Navigation Abfolge soll logisch sein. Das heißt, wenn ich auf einen Link klicke, will ich den Inhalt, den    ich angeklickt habe, gleich sehen.

Bei einer Navigation mit wenigen Menüpunkten (höchstens 10) ist es sinnvoll eine direkte Navigation zu machen.

Bei mehr als 10 Menüpunkten ist es besser "Unternavigationen (subnavigation)" zu gestallten. Wobei es besser ist, diese Subnavigation farbig abzutrennen. Somit verliert der User nicht den Überblick, in welcher Rubrik er sich befindet.

5) Schrift:

Die Wahl der Schriftart, der Größe und der Farbe ist sehr wichtig.

Es gibt (nicht nur) zwei wichtige "Schrifttypen"
Antiqua-Schrift = Times New Roman etc. (Serifen (Häkchen) mit abgerundeten Übergängen , fette Längsbalken erleichtern das Lesen)
Grotesk = Arial etc. (Sie wirken kühl und sachlich und eleganter als Schriften mit verspielten Serifen)

Grundsätzlich sollte man die Schriftarten in einer Page nicht vermischen, also entweder Antiqua oder Grotesk. Die Wahl der Schriftart richtet sich am Thema der Seite. Für eine CS - Seite würde ich Groteskschrift nehmen, für eine Fantasie-Seite eine Antiquaschrift. (natürlich ist es euch überlassen, für welche Schriftart ihr euch entscheidet.)

Die Größe der Schriftart sollte so gewählt werden, dass sie nicht so sehr auffällt, aber dennoch gut leserlich ist. Für die Leserlichkeit ist auch die Farbe verantwortlich. Dieses hängt meistens mit dem Hintergrund der Seite zusammen. Auf der einen Seite muss die Farbe der Schrift mit der Seite harmonieren, auf der anderen Seite muss die Schrift leserlich sein. (Hell-Dunkel Kontrast (schwarz /weiß) oder Farbkontrast.)