Design-Systeme: mehr Konsistenz, mehr Qualität, bessere Kundenerfahrung

Ein Design-System bildet das Fundament einer nachhaltigen User Experience. Ist dieses auf Code-Basis erstellt, optimiert man zudem die Schnittstelle zwischen Konzeption und technischer Realisierung.

Die Mehrwerte

  • Ein Design-System bildet das Fundament einer nachhaltigen User Experience.
  • Ist dieses auf Code-Basis erstellt, optimiert man zudem die Schnittstelle zwischen Konzeption und technischer Realisierung.

Konzeption und Realisierung eines digitalen Design-Systems

Aufgrund der vielen Mehrwerte, die ein Design-System mit sich bringt, bietet Snowflake bei allen grösseren Projekten die Entwicklung und die Umsetzung eines Designs mithilfe eines Design-Systems an. Aber auch unabhängig davon macht die Entwicklung eines Design-Systems als eigenständige Massnahme durchaus Sinn.


Snowflake verfügt über eine umfassende Expertise im Aufbau und der Pflege von Design-Systemen. So haben wir unter anderem ein umfassendes Design-System für das digitale Ökosystem des Kantons Bern konzipiert. Weitere Informationen zu diesem Projekt finden Sie hier: «Ein atomares Designsystem für den Kanton Bern»

Ein Design-System als «Single-Source-of-Truth»

In einer Reihe von Workshops und in enger Zusammenarbeit mit dem Kanton wurde ein Design-System mit hoher Flexibilität erarbeitet, welches der Kommunikationsabteilung des Kantons und seinen zuliefernden Partner:innen als «Single-Source-of-Truth» dient.

 


Alle Designkomponenten werden in dem online-verfügbaren Styleguide nicht nur pixelgenau und 100% responsive dargestellt, sondern ihr zugrundeliegende HTML-, CSS- und JS-Code kann von dort aus per Copy-and-Paste entnommen werden.

Warum wir unseren Kund:innen ein code-basiertes Design-System empfehlen

Nur ein «Code-basiertes» Design-System schliesst auf effiziente Weise die Lücke zwischen Design und technischer Realisierung. Im Vergleich zu einem Design-System, welches NICHT auf Code-Basis erstellt wurde, reduziert es noch einmal zusätzlich die Aufwände, in dem es die sehr fehleranfällige Interpretation von Design in Code in die Konzeptionsphase zieht.

So weist der Styleguide eines codebasierten Design-Systems in seiner Vorlagenbibliothek neben Bildern, Schriften, Logos und den visuellen, responsiven Darstellungen der Designelemente auch Code-Snippets auf, welche per Copy-and-Paste entnommen werden können.

Die Kombination von Design und Code liefert die verbindlichsten und damit ökonomisch sinnvollsten Vorgaben, da es den Interpretationsspielraum, den Kommunikationsaufwand sowie die Anzahl notwendiger Korrekturen auf ein Minimum reduziert. 

Atomic Kitchen

Wir bei Snowflake haben für die Erstellung von code-basierten Designsystemen ein eigenes Tool namens «Atomic Kitchen» entwickelt, mit welchem man webbasiert ein modulares Designsystem erstellen kann. Im Backend dieses Tools können aufeinander aufbauende Designkomponenten und Module via Drag & Drop erstellt werden, um dann in einen umfassenden Styleguide veröffentlicht zu werden.

 

Code-Pattern

Aus dem von «Atomic Kitchen» publizierten Styleguide können alle Brand-Assets sowie auch die «Code Pattern» entnommen und zu fertigen Lösungen zusammengesetzt werden.

Bei Interesse stellen wir Ihnen gerne «Atomic Kitchen» detailliert vor und zeigen Ihnen, welche Vorteile sich dadurch in Ihren individuellen Workflow ergeben. Auch können wir Ihnen unkompliziert einen Link zu einem Demo-System schicken. Schreiben Sie uns kurz über den nachfolgenden Kontakt-Link.

Unverbindliches Beratungsgespräch anfordern

Als erfahrener Partner im Aufbau von Design-Systemen können wir auch für Ihr Unternehmen ein individuelles Design-System entwickeln, das Ihre Anforderungen präzise erfüllt. Kommen Sie auf uns zu. Wir zeigen Ihnen gerne, wie Sie ein Design-System gewinnbringend in Ihren Workflow integrieren können, sei es für einen geplanten Website-Relaunch oder zur Verwaltung Ihres Corporate Designs.

Jetzt unverbindlich anfragen