Unterstützung im kreativen Prozess Teil 1– Kuler für mehr Farbe im Design

Gerade im kreativen Prozess bzw. dem Design der User Experience eines Projekts steht man schnell vor essenziellen Fragen, bei denen man sich am Kopf kratzt – Welche Farben harmonieren mit den Vorgaben des Corporate Designs? Wie sind da nochmal die Farbcodes? Mit „Kuler“ von Adobe hat man schnell ein Freeware-Tool an der Hand, das genau in diesem Prozess unschätzbar wertvoll sein kann. Ein kurzer Einblick –

Beim Einsatz von Farben scheiden sich oft die Geister, da es schnell zur „Geschmackssache“ des Einzelnen erklärt wird. Dabei ist die Kritik in einem Review oft gerechtfertigt. Nicht zu selten werden Farben bei UI-Designern nach dem eigenen Ermessen ausgewählt. Dies erfordert massives Ausprobieren und endet dann doch meist in einer Diskussion über die Geschmackssache. Dabei hat die Farblehre doch einige Regeln herausgestellt, die dafür sorgen, dass Harmonien entstehen. Für alle die jetzt an diesem Punkt schon aufgeben wollen, da Ihnen Farblehre nicht geläufig ist, kommt Kuler von Adobe wie der glänzende Ritter auf dem weißen Pferd daher.

Auf https://kuler.adobe.com/ findet sich die Einstiegsseite des komplett im Browser laufenden Tools, in sehr ansprechender Erscheinung. Die Oberfläche ist klar strukturiert und wirkt sehr aufgeräumt.


Abbildung 1. Start von Kuler im Edit-Mode

Wer hier komplett ohne Vorgaben bzgl. Corporate Design etc. ins Rennen geht, kann sich unter „Explore“ in der großen Bibliothek von fertigen Styles umsehen, die Kuler allen Usern zur Verfügung stellt. Das Panel „View“ liefert Filtermöglichkeiten welche die enorme Vielzahl von Farbzusammenstellungen einschränken kann. Hat man eine Farbpalette gefunden die zusagt, öffnet sich nach dem Klick auf diese eine Liste von Funktionen die nun aufgerufen werden können. Für das Speichern in Favoriten ist allerdings ein Account bei Adobe erforderlich. Der Punkt „Download“ lädt die Palette im Format „ASE“. Dieses kann dann zum Beispiel in „Gimp“ als Colorpalette geladen werden.


Abbildung 2. Der Explore-Mode. Mit dem Klick auf die Farbpalette Copy of DDD werden die Features wie Favorit, Download, Copy Link oder eben auch das Laden des Editors mit dieser Palette als Startfarben geladen

Sind allerdings schon einige Farben als Vorgabe im Spiel ist es wahrscheinlich sinnvoller sich eine eigene Palette zu bauen, als in den fertigen Paletten nach den wenigen zu suchen, die exakt die Vorgabe enthalten. Aber keine Angst, das gestaltet sich in Kuler als wirklich sehr einfach. Kuler bedient sich der Regeln der Farblehre und sucht je nach Regel die passenden Farben zum Signal, welches man dem Tool mitgibt. Um zu starten sollte zunächst die richtige Regel ausgewählt werden. Dies passiert unter „Color Rule“.


Abbildung 3. Der „Color Rule“ Explorer stellt alle anwendbaren Farblehren-Regeln zur Verfügung

Nach der Auswahl der richtigen Regel geht es an das Initialisieren der Ursprungsfarbe, von der alle anderen Farben abgeleitet werden sollen. Hierfür gibt es zwei Möglichkeiten:

  • Die Eingabe des fixen Farbwertes im mittleren Farbfeld
  • Die Auswahl der Initialfarbe über das Farbrad.

Verwendet man die Eingabefelder unter den Farb-Quadraten werden automatisch  4 Farben von Kuler dazu berechnet, die nach der ausgewählten Regel zum Initialwert passen.

Bei der Auswahl über das Farbrad stehen mehrere „Color Points“ zur Verfügung, die frei mit der Maus verschoben werden können. Der ColorPoint der zum ausgewählten Farbfeld aus der unteren Reihe gehört ist mit einem kleinen Pfeil im Kreis gekennzeichnet. Verändert man nun die Position eines Color Points, setzt Kuler alle anderen Points für die anderen Farbfelder automatisch nach der ausgewählten „Color Rule“. Mit dem Slider zwischen dem Farbfeld und der Eingabe-Region für RGB und HEX, kann die Helligkeit der generieren Farbe nachträglich nach Belieben angepasst werden.


Abbildung 4. Der Initialfarbwert von dem Kuler ausgehen soll kann über das Setzen der Farbcodes unter der Primärfarbe gesetzt, oder im Farbrad per Color Point verschoben werden. Der Color Point des aktiven Farbfeldes ist mit einem kleinen Pfeil gekennzeichnet.

Ist das Ergebnis wie erwünscht kann die erstellte Palette mittels dem „Save-Knopf“ unter „My Themes“ gespeichert werden. Mit einem Klick auf den Stift rechts neben dem Save-Knopf kann vorher der Name der Palette angepasst werden. Allerdings ist auch hier wieder ein Adobe-Account von Nöten. Wer diesen nicht anlegen möchte kann die Palette.


Abbildung 5. Speichern der Palette

Wem das Erstellen des Account zu aufwändig ist kann sich die HEX bzw. RGB-Werte einfach abschreiben und lokal in seiner Ressourcenverwaltung hinterlegen.

Leave a reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>