t3l3tubby: Plastisches Webdesign

Hallöchen,

bisher hatte ich mich mit schlichten, minimalistischen Webdesigns "durchschlagen" können. Diese sind einfach zu erstellen, wirken "seriös" und dynamisch, und verursachen keinen Augenkrebs, weil man meistens schwarz/weiß/grau als Farbe hat, mit einer Blickfang-Farbe orange/grün/rot...

Jetzt bin ich aber in der Situation, eine Seite eines Vereins zu gestalten. Dieser Verein hat bereits ein Logo, welches natürlich schön ist. Aber leider ist es sehr farbig und plastisch (blau (#00a7e3) und gelb (#fabb00), ein wenig weiß, und schwarz als Abgrenzung von gelb-blau). Der Verein möchte, dass sich diese "CI" auch in der Internet-Seite widerspiegelt.

Meine Versuche sind bisher auch gar nicht soooo schlecht. Nur diese blöden Buttons für die Navigation bekomme ich nicht so hin. Sie sind mir zu kantig und fügen sich nicht so richtig in den Gesamteindruck:

Die Buttons haben außerdem einen Hovereffekt, die gelben werden dabei grün. Und grün wird gelb.
Insgesamt macht die Seite jetzt den Eindruck eines Kindergartens.
Könnt ihr mir Tipps geben, wie ich das in Ordnung bringen kann?

Vielen Dank.
Euer T3l3tubby

  1. Insgesamt macht die Seite jetzt den Eindruck eines Kindergartens.
    Könnt ihr mir Tipps geben, wie ich das in Ordnung bringen kann?

    Ich würde die Farbwerte des Logos nicht in gleicher Form für das Layout übernehmen. Das sieht nicht gut aus und lässt das Logo vermutlich auch völlig untergehen in all dem Farbwust.
    Schau mal, ob Du nicht besser Abstufungen der Logofarben verwendest, sowohl in der Helligkeit als auch in der Sättigung.

    Und was die schrägen Buttons angeht: Horizontal haut das noch halbwegs hin, wenn Du die Lücken enger machst und dadurch die Buttons zusammen rückst.

    Vertikal empfinde ich diese Buttons als viel zu hecktisch. Vielleicht etwas abstrahieren: Nur den oberen und den unteren Button abschrägen, alle anderen dazwischen gerade laufen lassen. Und auch mit weniger Abstand, so dass sie gemeinsam ein Navigationselement bilden.

    Oder ganz auf die Schrägen pfeiffen. Ich finde, sie wirken ungeschickt und helfen niemandem weiter.

    Viele Grüße
    _Dirk

    1. Hi.

      Ich würde die Farbwerte des Logos nicht in gleicher Form für das Layout übernehmen. Das sieht nicht gut aus und lässt das Logo vermutlich auch völlig untergehen in all dem Farbwust.
      Schau mal, ob Du nicht besser Abstufungen der Logofarben verwendest, sowohl in der Helligkeit als auch in der Sättigung.

      Das finde ich auf jeden Fall empfehlenswert, denn der Kontrast blau zu gelb ist trotz der schwarzen Linie dazwischen so stark, dass es vor den Augen anfängt zu flimmern.

      Vertikal empfinde ich diese Buttons als viel zu hecktisch.

      Was hat denn der Dieter Thomas damit zu tun? ;)

      Vielleicht etwas abstrahieren: Nur den oberen und den unteren Button abschrägen, alle anderen dazwischen gerade laufen lassen. Und auch mit weniger Abstand, so dass sie gemeinsam ein Navigationselement bilden.

      Ich könnte mir sogar vorstellen, gar keinen Abstand zu lassen und nur die jeweils angewählte Zeile andersfarbig darzustellen.

      Schönen Sonntag noch!
      O'Brien

      --
      "Haalloo! Willkommen in der Show! Ihr kommt spät, aber es sind noch Plätze frei."
  2. Hi!

    Mit den Farben muss es grell werden. Komm davon ab, genau diese Farben verwenden zu wolen. Versuch mal den Color Scheme Designer Hier mit deinem Blau als Hauptfarbe.

    --
    Signaturen sind blöd!
  3. HAllo,

    ich verstehe die Intention, die Vereinsfarben in der Website einzubinden. Allerdings finde ich die Kombo ziemlich abstoßend. Frage doch lieber, ob du nicht das Logo einbinden und den Rest frei gestalten kannst.

    Gruß Hans

  4. Hallo,

    danke für eure Tipps.
    Ich bin das Design nun ein bisschen anders angegangen. Die Hauptfarben füllen nun nur noch zwei vertikale Streifen aus. Der Rest ist neutral gehalten:

    Die Streifen gehen über die komplette Seitenhöhe und kleben mit position:fixed an der Seite. Der weiße Kasten ist die Inhalts-Box. Wenn gescrollt werden muss, dann bleiben die vertikalen Streifen stehen.
    Die Untermenüs lassen sich auf- und zuklappen (JQuery SlideDown/SlideUp). Auch Unter-Unter-Menüs gibt es.

    Über den Menüs hängt das (kleine) Logo.
    Die Menüpunkte, die im ersten Versuch grün waren, sind nun die Unterpunkte B1 bis B6. Auf die eckigen Buttons habe ich verzichtet und normale ul/li-Listen als Menü genommen.
    Insgesamt sieht die Seite so sehr gut aus. Die Farben wirken nicht überladen.

    Ihr habt bestimmt noch Kritik daran. Nur zu.

    Vielen Dank schonmal
    Tubby winke winke
    t3l3tubby

    1. Ihr habt bestimmt noch Kritik daran. Nur zu.

      Sieht für mich aus, wie ein Terminkalender. Finde ich nicht sehr ansprechend und würde mich nicht reizen, mich länger da aufzuhalten.

      Ob das mit Inhalten nochmal anders wirkt, weiss ich nicht, aber genau so find ichs langweilig.

      Die Farbzusammenstellung selbst ist aber durchaus in Ordnung.

  5. Nur diese blöden Buttons für die Navigation bekomme ich nicht so hin. Sie sind mir zu kantig

    dann mach sie doch runder.