RWD Workflow Step 2 – Color Schema

Herzlich Willkommen im „Fachchinesisch Kurs“ Teil 2?
Nein, nicht wirklich. Aber zum Thema Design brauchen wir auch eine Richtung, die uns eine farbliche Gestaltung ermöglicht. Die Reche ist von Farbharmonien.
Die meisten Personen würden behaupten, eine Webseite ist „blau“, „grün“… oder was auch immer. Doch dabei nimmt man nur die so genannte „Primär Farbe“ wahr. In der Tat gibt es aber immer einen zweiten Farbton und so genannte Signal-Farben. Was zusammenpasst wird ein einer „Farbharmonie“ definiert. Wer mehr über Farbharmonien lernen möchte findet es [hier].

Die Suche nach dem richtigen Farbton

Farbharmonie-OCNun, jetzt müssen wir mal reden 😉 Das aktuelle OC Design beruht auf ein [Template aus dem Jahre 2006]. Seit dem haben sich nicht nur Template sondern auch Farben weiterentwickelt. Im Moment Dominiert ein „dunkles Himmelblau“ mit helleren Kontrast und einem grünem Signal-Farbton. Auch diese Farben entsprechen bereits einer Harmonie mit angrenzenden Farben.

Im Zuge des Redesign stellen wir diese Farbgebung aber auf den Prüfstand.

Bevor wir diese Seite erweitern, brauchen wir eure ersten Kommentare.

Wie würdet ihr die neue Seite, farblich gestalten?

7 Kommentare zu “RWD Workflow Step 2 – Color Schema

  1. Hoernchen

    Hallo, ich bin Hörnchen und neu hier. Zu meiner Person: Ich bin gelernter Mediengestalter und arbeite seit fünf Jahren in diesem Beruf. Davor habe ich woanders im IT-Bereich gearbeitet(Anwendungsentwicklung). Ich möchte auch meine Meinung dazu sagen. Ich weiß ich werde vielleicht dafür kritisiert werden, aber folgendes lässt mich nicht in ruhe: es geht um das Thema Responsive Design. Meist steckt der Grund für die Entscheidung für Responsie Design, dass man mithilfe von mobilen Endgeräten wie Smartphone eine Plattform anbieten möchte. In diesem Fall wäre es nicht zu empfehlen. Warum? Responsive Design ist eine schöne Sache mit der man vieles lösen kann, aber es nicht immer mit Vorteilen behaftet ist. Viele Elemnte müssen an alle Endgeräte gleichzeitig angepasst werden und es muss stimmig sein. Dabei verzichtet man auf viele gesltaterische Elemente oder lässt diese gleich weg. Es gibt sehr viele Nachteile mit RD.
    Lösung und Denkansatz: Ich würde empfehlen eine Seite für PC’s und Tablets zu gestalten und eine eigene App zu erstellen, die es ermöglicht auch an das Engerät die Lösung anzupassen. Hier steht im Vordergrund Drop-Down-Menüs, große Buttons, wenig schaltflächen und angepasste Menü- und Einstellungsführung. Auch die Ladezeiten können extra für das Handy angepasst werden, da ganz andere Elemente geladen werden müssen. Zudem steht im Mittelpunkt auch die Performance, die durche eine App viel besser gestaltet werden kann. Es gibt viele, viele Vorteile ein anderes Modell für OC auszuwählen. Ich habe mit App’s sehr gute Erfahrungen gemacht und weiß, welche Vorteile und Nachteile eine App-Lösung hat.

    1. Hi Hörnchen,
      toll dass Du quasi als „Fachberater“ mit Deiner Meinung an Board kommst.
      Responsives und adaptives Design wird oft in einem Topf geworfen – wer hat da schon den Durchblick 🙂
      Unser Ziel ist es an ein flaches Design, angelehnt an die „Google Material Design“ Beschreibung heranzugehen.
      Dazu setzen wir künftig ein Framework (Foundation) ein. Das Design wollen wir hier im RWD Blog zusammen finden.
      Das heißt es wäre gut, wenn Du den Blog im Auge hast und Dich gerne mit Deiner Meinung einbringst.

      Es wird weiterhin nach „Mobile-First“-Prinzip entwickelt.
      Jedoch wollen wir die Seite nicht 100% Mobil gestalten, denn eine APP ist natürlich im Vorteil. Dazu hoffen wir dann einfach, dass uns c:geo die „ewige Treue“ hält.
      Basisfunktionen wie ein Log, werden wir aber auch so (mobil) bereitstellen.
      Dazu werden wir einige Sachen wir einen „Nachtmodus“ berücksichtigen; das die mobile Seite mit noch weniger Grafiken und möglichst schwarz und weiß auskommt.
      So in etwa ist der Plan.

  2. as2008

    Moin,
    dann geb ich auch hier nochmal meinen Senf dazu 😉
    Ich finde die Farben eigentlich ok, habe aber einen zusätzliche Idee für alle Mobilnutzer mit AMOLED Display… vielleicht könnte man für die Bereiche in Schwarz (Text) und Weiß (Hintergrund) noch ein zweites Farbschema mit Invertierung vorhalten, also Weiß für Text und Schwarz für den Hintergrund. Das würde beim genannten Displaytyp ggf. den Stromverbrauch reduzieren und des nachts die Blendung und die Helligkeit reduzieren…

    Gruß Andreas.

    1. Hi as2008,
      das ist ein wirklich guter Ansatz, den wir im Rahmen des Responsive Design und im Sinne des Mobile-first sicherlich aufnehmen können. Das neue Design wird rein aus CSS gesteuert werden. Hier könnte man neben dem „Standard“ Farbschema zu einem späteren Zeitpunkt – vielleicht auch „zeitgesteuert“ eine Option einbringen, die eine Art „Nach-Modus“ verwendet.
      Eine tolle Idee, die hiermit auch aufgegriffen wird.
      BIG THANKS.

  3. mariomb2

    An der Farbgestaltung finde ich gut, dass sie angenehm zurückhaltend ist und man nicht gleich von knalligen Farben erschlagen wird. An manchen Stellen finde ich die Seite aber etwas unübersichtlich. Ich habe keine konkrete Idee, aber evtl. könnte man dem auch mit einer anderen Farbgestaltung entgegenwirken (z.B. farbliche Hervorhebung besonders wichtiger Bereiche oder Schlagwörter etc.)?

    Viele Grüße
    Mariomb

  4. Riedxela

    Ich schliesse mich der Meinung von Miesegreet an. Die Farbkombination passt. Vielleicht kann man bei der CSS hover Funktion „on mouse over“ den Hintergrund des Menüs in einer anderen Farbe darstellen, damit der Menüpunkt farblich hervorgehoben wird, wenn man mit dem Nagetier darüber fährt.

    Grüße Riedxela (Alex)

  5. Miesegreet

    Hallo nochmal ,

    ich finde das hellblau mit grüner Signalfarbe voll OK, auch der weiße Hintergrund ist gut und man kann alles lesen. Klar man könnte überlegen Erd- und Grüntöne zu nehmen weil das ja Thematisch passt, aber vielleicht wird es dann etwas zu trist. Und diese Farben haben „die Anderen“ ja schon.
    Grüße

    Miesegreet

Hinterlasse ein Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.