Das grobe Design meiner Affiliate Website (4)

vom 24.09.2011

Da ich entschieden habe, meine Webseite via Eigenentwicklung zusammen zu basteln, muss ich nun natürlich auch ein Layout dafür erstellen. Ich versuche, mich mit dieser Arbeit kurz zu fassen.

: Grober, grafischer Rohentwurf meiner Affiliate Webseite

Grafischer Entwurf

Ich gestalte die grafischen Entwürfe am liebsten mit einem Vektorgrafikprogramm und zwar mit dem Open-Source-Tool Inkscape.

Ich hatte bereits noch einen von einer Kundin abgelehnten Entwurf für eine Webseite irgendwo herum liegen. Dort habe ich mir die selbstgemachten floralen Elemente für meinen jetzigen Entwurf heraus geholt. Diese habe ich dann einfach in ein einfaches, weißes Rechteck als Inhaltsbereich in den Seitenkopf und -Fuß eingefügt. Ein Logo dazu, ein paar Platzhalter für eventuelle Werbebanner, zwei einfache Textmenüs.

Dabei ich habe ich noch Einiges an Zeit investiert mit den Farben herum zu probieren und dabei auch Screenshots von real existierenden Bannern eingefügt und diese im Entwurf herumgeschoben. Zuerst hatte ich z.B. einen roten Hintergrund mit Verlauf. Das sah aber schon zu bunt und auch zu finster aus.

Der grafische Entwurf links im Bild ist nicht unbedingt die Form, die ich auch einem Kunden vorlegen würde. Aber meine Vorstellungskraft reicht aus, wie das ganze dann inklusive Inhalten aussehen könnte.

Ich finde diesen Entwurf zwar einfach, aber doch ziemlich gut gelungen. Viele Banner, die Produkte bewerben, die irgendwas mit Garten zu tun haben, sind in passenden Farben, also Grüntönen gehalten. Mir ist es auch lieber, dass es kein Foto im Header gibt. Da Banner ja auch oft Fotos enthalten, würde es evtl. zu überladen wirken oder das Foto im Header würde von den bunten Bannern zu stark ablenken.

Umsetzung des Entwurfes in HTML - erster Schritt

: Erste Umsetzung des grafischen Entwurfes einer Webseite in HTML

Nachdem ich den grafischen Entwurf fertig hatte, habe ich mit der Umsetzung in HTML begonnen. Ich komme mit drei Hintergrundgrafiken für diesen Entwurf bisher aus, es ist also wirklich eine sehr simple Angelegenheit. Es wird sich auch positiv auf die Ladezeiten auswirken.

Ich habe eine fixe Breite verwendet und alle Elemente gestaltet, die so auf jeder Unterseite erscheinen sollen, also den gesamten Rahmen der Webseite inkl. der Platzhalter für Banner, die dort erscheinen sollen.

Das heißt, in HTML/CSS umgesetzt sind jetzt:

Seitenkopf
Hauptmenü
Bereich für die Inhalte
Seitenfuß
Nebenmenü im Seitenfuß
Platzhalter ein Skyscraper-Banner rechts und ein Banner im Footer mit 728 x 90p Pixel

Da die einzelnen Inhaltsbereiche von der Gestaltung her variieren werden, werde ich sie während der Entwicklung und Implementierung designen.

Ich möchte nicht, dass via Webinterface zur Verfügung gestellte "Datenbanken" wie z.B. das Pflanzenlexikon in der äußeren Form von Blogartikeln dargestellt werden. Das macht für mich keinen Sinn und ich glaube, für den Nutzer auch weniger. Auch bei den Bereichen "Tipps" und "Gartenlexikon" wird es sich weder um Artikel noch um einfache Seiten a la Wordpress handeln. Das meine ich mit unterschiedlicher Gestaltung.

In meinem System gibt es dafür eigene Elemente, die ihrem spezifischen Anwendungsgebiet nach in meiner mySQL-Datenbank eigene Tabellen erhalten und im Backend entsprechend bearbeitet werden können. Genauer erläutern werde ich das im Laufe dieser Artikelserie.

Als nächstes folgt die Implementierung des Ganzen in mein System.