Das Farbensystem: ScCreate legt mit CSS Custom Properties Standards fest

Lauren Spence präsentiert SoCreate-Farbensystem.

Unser letztes Lunch Meet - eine vom SoCreate-Team geführte Lernreihe - könnte das bisher farbenfrohste gewesen sein! UX-Entwicklerin Lauren Spence hat dieses Mal das Wort gehabt, um dem Team alles über die hochmodernen Praktiken zu erklären, die im UX-Bereich unserer SoCreate-Projekte angewendet werden. Während wir anderen unseren Hunger mit einem gelieferten Mittagessen stillten, befriedigte Lauren unseren Sehsinn mit ihrer Präsentation über das SoCreate-Farbensystem.

Das Farbensystem ist ein innovativer Ansatz, der die Farben in allen Apps, die wir entwickeln, kontrolliert und thematisch zusammenfasst. Das System fügt Ebenen und Regeln zum einfachen CSS hinzu und gibt uns ein System, das leicht zu verwenden, zu dokumentieren und thematisch zu ordnen ist. Es basiert auf einer Bibliothek globaler CSS Custom Properties, jedes davon mit einem einzigartigen Namen für seinen angedachten Zweck.

„Mit dieser Bibliothek einzigartiger Farbnamen können wir leicht die richtige Farbe für jeden Zweck auswählen und Farben ohne unerwünschte Auswirkungen ändern“, erklärte Lauren. „Wir haben einen umfassenden Farbkatalog in der App, eine Art Styleguide, der in den Code eingebaut ist.“

Lauren erklärte weiter, dass wir fast ohne zusätzliche Anstrengungen der Entwickler mit den Custom Properties Themen in der App festsetzen können. Eine Win-Win-Situation!

Der Hauptvorteil des Farbsystems ist dreifacher Natur, da das Farbsystem mehrere Probleme lösen soll, mit denen es UX-Entwickler zu tun haben:

Leichte Entscheidungsfindung durch unseren Katalog globaler Farben. Zwei beliebige Entwickler, die eine neue Komponente erstellen, können jetzt ganz einfach dieselbe Entscheidung darüber treffen, welche Farbe sie verwenden sollen.
Müheloses Erstellen von Themes. Während wir früher per Hand für jede Komponente der App ein Theme erstellen mussten, können wir dank der CSS Custom Properties jetzt kostenlos Themes erhalten.
Unzerstörbarer Text. Der Text wird nie unleserlich (und deine App dadurch unbrauchbar) werden, weil es keinen Farbkontrast gibt. Wir haben dies erreicht, indem wir die Hintergrundfarben der App genau kontrolliert und zu jedem Hintergrund die Farben dokumentiert haben. Wenn wir eine neue Farbe einführen, können wir so leicht sehen, ob der Text an irgendeiner Stelle zerstört wird.

Lauren sagte, dass UX-Team von SoCreate freue sich darauf, die CSS Custom Properties weiter zu erkunden. Dies ist ein recht neuer Ansatz. Entwickler, die ältere Browser unterstützen müssen, konnten die CSS Custom Properties noch nicht lange nutzen und damit experimentieren.

„Das bedeutet, dass wir an vorderster Front bei der Erkundung der Möglichkeiten dieser Technologie stehen und wir glauben, wir haben einen coolen Weg gefunden, uns diese Möglichkeiten zunutze zu machen.“

An vorderster Front… Ja, das klingt nach SoCreate! Ich bin immer wieder beeindruckt von der unbändigen Neugier unseres Teams: wie können wir dies besser, schneller oder anders machen?

Dies sind Fragen, die wir uns bei unserer Suche nach neuem Wissen stellen sollten.

Los, Team, los!