Gestaltung einer Webseite

[Helmchen]

Vorweg: Ich bin mir mit der Forenkategorie nicht wirklich sicher, bei Bedarf bitte verschieben.

Da ich aus der Programmiererecke komme und mit Grafikdesign usw. eher wenig am Hut habe, aber dennoch meine eigene, nicht kommerzielle, Internetpräsenz veröffentlichen möchte, habe ich ein Problem.
Grafisch sind von mir natürlich keine Meisterleistungen zu erwarten, aber mir bereitet schon etwas viel essentielleres Probleme: Die Gestaltung an sich, d.h. Strukturierung, Farben, Schriftarten etc.

Dies ist mein bisheriger Ansatz und wie ihr seht, alles andere als vollständig. Die Seite besteht aus einem Stock-Foto und den Hauptfarben von eben diesem.

Mein Problem ist nun: Wie soll es weiter gehen? Deshalb ersuche ich bei euch Hilfe, um Tipps, Anregungen und weiterführende Links zu erhalten, falls ihr welche parat habt.

Vielen Dank schon mal im Voraus.

MfG
Helmchen

[Impi]

[Helmchen]

Gut, dann nenne ich an dieser Stelle mal den Punkt "Farbgestaltung".
Wie ihr seht, ist das Feld für den Inhalt z.zT. weiss, was nicht sonderlich gut aussieht. Würde ich es aber dunkel färben, würde alles erdrückend wirken. Wie könnte ich dieses Feld am Besten gestalten?

[LampE]

Also erstmal allgemein - reduziere die max. Anzahl grundlegend verschiedener Farben auf zwei, max. drei.

Den Content könntest du in diesem Fall beispielsweise in einem hellen beige-Ton färben, heller als der Hintergrund, bzw. komplementär dazu dunkler.
Versuch also die verschiedenen Farbstufen, als Ersatz für deine momentan alternativen Farben, die das Gesamtbild überhäufen, zu nutzen. Weiss ist nicht gleich weiss, es gibt immerhin noch die 50% grau, bis es dann vom Farbwert ins Schwarze geht.

Zudem musst du versuchen die Seite interessanter zu gestalten. D.h. du baust kleine unauffällige Ergänzungen ein, wie z.B. einen leichten Verlauf, Rahmen (die nicht(!) einfach aus 1px Schwarz bestehen).

Viele neigen dazu, dieses Wort 'interessant' gleich überzubewerten und patschen irgendwo Farbklekse/-Striche rein, wie auch immer, aber Ziel ist es eigentlich, den Inhalt gekonnt in Szene zu setzen und durch die Farben inhaltlich wichtiges von unwichtigem zu trennen.

[deLiTe.]

Ich nehme an du hast dazu vorher keinen Designentwurf in Photoshop gemacht sondern das einfach so aus dem HTML heraus gebaut oder?

[Helmchen]

Ja, die Seite habe ich von Anfang an in HTML geschrieben, was den Vorschlag mit den Verläufen diesbezüglich betrifft: Grafikprogrammtechnischen Schnickschnack wollte ich eigtl. bestmöglich umgehen, um zumindest bei der technischen Umsetzung bei dem zu bleiben, was ich kann (CSS).
Um auf den Vorschlag mit dem Beige zurückzukommen: Dazu sollte ich dann wohl besser den gesammten Farbstil der Seite umändern, damit der Kontrast zur Inhaltsbox nicht zu groß ist, oder? Dann stellt sich mir aber die Frage: Ist es überhaupt möglich mit dem aktuellen Titelbild eine ansprechende Seite zu kreiren?

[LampE]

Naja, bisher sinds ja nur 3 Kasten, eins mit Bild, und eine Hintergrundfarbe.

Das einzige was du also übernehmen kannst / solltest ist der Aufbau.
Aber das mit dem beige, sowie den Verläufen, war auch nur ein Vorschlag. Du kannst natürlich auch bei weiss bleiben, aber dann sollte der Rest entsprechend angepasst werden

[Dick3rl3]

Schriftartenmäßig ist Times new roman eine ganz ungünstige Wahl, mit Verdana, Tahoma o.Ä. bist du wesentlich besser bedient, dabei am besten darauf achten auch vllt. jeweils eine Schriftgröße (und Farbe) für Überschriften, und eine andere für normalen Text zu benutzen. Wenns noch andere arten gibt, kannst du ja z.b. für Zitate nochmal variieren, wenn benötigt.

[Helmchen]

Ich habe das ganze mal ein wenig überarbeitet.
Link.

Allerdings bin ich immer noch nicht mit der Inhaltsbox zufrieden und die Navigationsliste benötigt definitiv noch eine Überarbeitung.

[Dick3rl3]

Es wird doch langsam Navigation und die Überschrift gehen meiner Meinung nach in Ordnung, die Schrift für den Inhalt würd ich dann doch noch nen Ticken kleiner machen, sieht einfach nicht so klobig aus.

Grau ist meiner meinung nach für größere Flächen nie schön, deshalb würd ich dir da entweder zu nem Weiß, oder wie die Glühbirne schon sagte zu nem beige, creme, o.Ä. raten.

[Helmchen]

Recht hast du. Für mich sah der Hintergrund gar nicht so grau aus.
Mittlweile bin ich so weit:
Klick.

Allerdings versuche ich noch, die rote Trennlinie auch im IE6 richtig anzeigen zu lassen, oder hat jemand einen anderen Vorschlag zur Abgrenzung von Kopf- und Inhaltsbereich?

[Dick3rl3]

Ich würd vielleicht kein rot nehmen, direkt an dem schwarz find ich das irgendwie unangenehm fürs auge, vielleicht eher ein braun oder so

[AEQUITAS]

Ich habe damals auch sowas gemacht und hatte als Farbkombination Bech, Weiss und ein helles, nicht so krasses grün genommen. Könntest du ja mal ausprobieren. Das Schwarz macht irgendwie alles kaputt!

[phoenix.hi]

Wenn es um Farben geht, kann dir das vielleicht helfen:

klick

[Helmchen]

Nun ist der Strich rotbraun und ragt nicht mehr zu den Seiten hinaus.
Wenn mir das Schwarz alles zerstört, gibt es dann überhaupt eine Möglichkeit mit diesem Bild, welches zweifelsohne ziemlich dunkel ist, eine Ansprechende Präsenz zu formen?
Vielen Dank für den Link, dieser scheint wirklich interessant und hilfreich zu sein.