Der Einsatz eines Design-Systems f\u00fchrt zu:<\/h4>\n\n- einem einheitlichen und einpr\u00e4gsamen Markenerlebnis<\/li>\n
- einer Verbesserung der Design-Qualit\u00e4t<\/li>\n
- einer Reduzierung des Aufwands innerhalb des Qualit\u00e4tssicherung und Pflege<\/li>\n<\/ul>\n
Insbesondere mit einem \u00abdigitalen\u00bb, d.h. web-basierten Design-System lassen sich alle visuellen Assets eines Unternehmens \u00fcbersichtlich verwalten und digitale Produkte wesentlich einfacher entwickeln. Ein einmal erstelltes Design kann auf diese Weise systematisch weiterentwickelt werden. Kurskorrekturen und teure Relaunches werden weitgehend vermieden.<\/p>\n
![\"Ein](\"https:\/\/thomas-sokolowski.com\/de\/wp-content\/uploads\/2023\/06\/3-e1687345915292.png\")
<\/p>\n
Ein Design-System schafft ein team\u00fcbergreifendes Verst\u00e4ndnis f\u00fcr den Marken- und Designauftritt und hilft dem gesamten Unternehmen, ein einheitliches Erscheinungsbild bereitzustellen.<\/p>\n
<\/p>\n
Ein paar Keyfacts f\u00fcr alle, die sich noch nicht so gut mit dem Thema auskennen:<\/h3>\n\n- Ein Design-System<\/strong> deckt von der Farbpalette \u00fcber Schriften bis hin zu ganzen Seitenvorlagen alle visuellen Aspekte einer Anwendung oder Marke ab.<\/li>\n
- Bei einer mit dem Design-System verkn\u00fcpften Pattern Library<\/strong> handelt es sich um eine Sammlung von Komponenten, die sofort einsatzbereit sind und in die Anwendungen und an den Touchpoints der Unternehmenskommunikation integriert werden k\u00f6nnen. Auf diese Weise wird die Implementierung digitaler L\u00f6sungen beschleunigt und eine konsistente User Experience \u00fcber alle Touchpoints hinweg sichergestellt.<\/li>\n
- Atomic Design<\/strong> ist eine Design-Methodik, die davon ausgeht, dass funktionierendes, also gutes Design modular aus Bausteinen aufgebaut sein muss. Weitere Informationen finden Sie hier: Atomic Design<\/a><\/li>\n<\/ul>\n
<\/p>\n
Ein code-basiertes Designsystem schliesst die L\u00fccke zwischen Design und Entwicklung<\/h2>\n
Ein code-basiertes Design-System ist ein m\u00e4chtiger Werkzeugkasten, mit dem Designer und Entwickler gleichermassen Produkte in hoher Qualit\u00e4t und mit geringem Aufwand realisieren k\u00f6nnen. Das \u00abMaterial Design<\/a>\u00bb von Google ist eines der bekanntesten Beispiele f\u00fcr ein code-basiertes Design-System.<\/p>\nBei einem code-basierten Design-System liegen alle Bausteine und Komponenten bereits in HTML, CSS und JS vor. Das heisst f\u00fcr die technische Umsetzung von Designkomponenten muss der Code nicht \u00fcbersetzt werden. Das spart Zeit und Kosten und hilft Fehl-Interpreationen zu vermeiden, da ein solches System auf nativer Weise zeigt, wie sich Elemente verhalten, wenn sich die Gr\u00f6sse des Browserfensters \u00e4ndert, wenn man mit der Maus dar\u00fcberf\u00e4hrt oder klickt. Es gibt auf klare und selbsterkl\u00e4rende Weise das tats\u00e4chliche Look & Feel einer oder mehrerer Anwendungen wieder. Dadurch werden Korrekturschleifen und der Kommunikationsaufwand deutlich reduziert. Alle Designelemente k\u00f6nnen bereits vor ihrer eigentlichen Implementierung vollst\u00e4ndig evaluiert oder von echten Benutzern getestet werden. Ein aufw\u00e4ndiges Prototyping des Frontends entf\u00e4llt in der Regel somit auch.<\/p>\n
Alle genannten Faktoren reduzieren die Kosten f\u00fcr die Entwicklung und Pflege einer digitalen Anwendung. Ich empfehle daher grunds\u00e4tzlich, das visuelle Design einer Applikation oder Website mit einem modularen und code-basierten Design-System zu entwickeln, da sich diese Vorgehensweise sowohl \u00f6konomisch als auch qualitativ sehr schnell amortisiert.<\/p>\n
Die Vorteile auf einem Blick:<\/h3>\nKonsistenz durch wiederverwendbare Module<\/h4>\n
Durch ein code-basiertes Design-System gibt es nicht nur feste Vorgaben f\u00fcr das Designteam und andere Partneragenturen, sondern auch verbindliche, bereits getesteten Code-Bausteine. Dadurch werden Widerspr\u00fcche und Missverst\u00e4ndnisse vermieden. Es stellt die einzige Quelle (\u00abSingle Point of Truth<\/a>\u00bb) f\u00fcr g\u00fcltige Regeln dar. Die Entwicklung von digitalen Produkten wie Apps, Software und Websites wird dadurch deutlich schneller, effizienter und kosteng\u00fcnstiger.<\/p>\nEinfache Verf\u00fcgbarkeit, volle Kontrolle<\/h4>\n
Ein web-basiertes Design-System steht team\u00fcbergreifend rund um die Uhr zur Verf\u00fcgung. So kann der iterative Projekt-Fortschritt vom Kunden mitverfolgt werden und alle Beteiligten haben zu jeder Zeit einen vollst\u00e4ndigen \u00dcberblick \u00fcber das Design, inklusive responsivem Verhalten, Interaktionsstatus und Mikroanimationen. Dadurch entfallen aufw\u00e4ndige Pr\u00e4sentationen weitgehend. Assets und Pattern k\u00f6nnen \u00fcber eine AutoSuggest-Suche einfach gefunden und als Code oder Bilddatei heruntergeladen werden.<\/p>\n
<\/p>\n
AtomicKitchen<\/h2>\n
F\u00fcr die Erstellung code-basierter Design-Systeme verwende ich das von mir entwickelte Tool \u00abAtomic Kitchen<\/a>\u00bb, mit dem sich modulare Designsysteme komfortabel erstellen und verwalten lassen. Dieses auf Wunsch passwortgesch\u00fctzte System kann sowohl online als auch offline betrieben werden und stellt ein pixelgenaues und 100% responsives Design dar. Daraus k\u00f6nnen einzelne \u00abCode Pattern\u00bb f\u00fcr die technische Umsetzung per Copy & Paste entnommen und zu fertigen L\u00f6sungen zusammengesetzt werden. F\u00fcr den produktiven Dialog steht zudem eine Kommentar-\/Dialogfunktion zur Verf\u00fcgung, mit der alle beteiligten Stakeholder Feedback zu einzelnen Komponenten geben k\u00f6nnen.<\/p>\n
Insbesondere mit einem \u00abdigitalen\u00bb, d.h. web-basierten Design-System lassen sich alle visuellen Assets eines Unternehmens \u00fcbersichtlich verwalten und digitale Produkte wesentlich einfacher entwickeln. Ein einmal erstelltes Design kann auf diese Weise systematisch weiterentwickelt werden. Kurskorrekturen und teure Relaunches werden weitgehend vermieden.<\/p>\n
<\/p>\n
Ein Design-System schafft ein team\u00fcbergreifendes Verst\u00e4ndnis f\u00fcr den Marken- und Designauftritt und hilft dem gesamten Unternehmen, ein einheitliches Erscheinungsbild bereitzustellen.<\/p>\n
<\/p>\n
Ein paar Keyfacts f\u00fcr alle, die sich noch nicht so gut mit dem Thema auskennen:<\/h3>\n\n- Ein Design-System<\/strong> deckt von der Farbpalette \u00fcber Schriften bis hin zu ganzen Seitenvorlagen alle visuellen Aspekte einer Anwendung oder Marke ab.<\/li>\n
- Bei einer mit dem Design-System verkn\u00fcpften Pattern Library<\/strong> handelt es sich um eine Sammlung von Komponenten, die sofort einsatzbereit sind und in die Anwendungen und an den Touchpoints der Unternehmenskommunikation integriert werden k\u00f6nnen. Auf diese Weise wird die Implementierung digitaler L\u00f6sungen beschleunigt und eine konsistente User Experience \u00fcber alle Touchpoints hinweg sichergestellt.<\/li>\n
- Atomic Design<\/strong> ist eine Design-Methodik, die davon ausgeht, dass funktionierendes, also gutes Design modular aus Bausteinen aufgebaut sein muss. Weitere Informationen finden Sie hier: Atomic Design<\/a><\/li>\n<\/ul>\n
<\/p>\n
Ein code-basiertes Designsystem schliesst die L\u00fccke zwischen Design und Entwicklung<\/h2>\n
Ein code-basiertes Design-System ist ein m\u00e4chtiger Werkzeugkasten, mit dem Designer und Entwickler gleichermassen Produkte in hoher Qualit\u00e4t und mit geringem Aufwand realisieren k\u00f6nnen. Das \u00abMaterial Design<\/a>\u00bb von Google ist eines der bekanntesten Beispiele f\u00fcr ein code-basiertes Design-System.<\/p>\nBei einem code-basierten Design-System liegen alle Bausteine und Komponenten bereits in HTML, CSS und JS vor. Das heisst f\u00fcr die technische Umsetzung von Designkomponenten muss der Code nicht \u00fcbersetzt werden. Das spart Zeit und Kosten und hilft Fehl-Interpreationen zu vermeiden, da ein solches System auf nativer Weise zeigt, wie sich Elemente verhalten, wenn sich die Gr\u00f6sse des Browserfensters \u00e4ndert, wenn man mit der Maus dar\u00fcberf\u00e4hrt oder klickt. Es gibt auf klare und selbsterkl\u00e4rende Weise das tats\u00e4chliche Look & Feel einer oder mehrerer Anwendungen wieder. Dadurch werden Korrekturschleifen und der Kommunikationsaufwand deutlich reduziert. Alle Designelemente k\u00f6nnen bereits vor ihrer eigentlichen Implementierung vollst\u00e4ndig evaluiert oder von echten Benutzern getestet werden. Ein aufw\u00e4ndiges Prototyping des Frontends entf\u00e4llt in der Regel somit auch.<\/p>\n
Alle genannten Faktoren reduzieren die Kosten f\u00fcr die Entwicklung und Pflege einer digitalen Anwendung. Ich empfehle daher grunds\u00e4tzlich, das visuelle Design einer Applikation oder Website mit einem modularen und code-basierten Design-System zu entwickeln, da sich diese Vorgehensweise sowohl \u00f6konomisch als auch qualitativ sehr schnell amortisiert.<\/p>\n
Die Vorteile auf einem Blick:<\/h3>\nKonsistenz durch wiederverwendbare Module<\/h4>\n
Durch ein code-basiertes Design-System gibt es nicht nur feste Vorgaben f\u00fcr das Designteam und andere Partneragenturen, sondern auch verbindliche, bereits getesteten Code-Bausteine. Dadurch werden Widerspr\u00fcche und Missverst\u00e4ndnisse vermieden. Es stellt die einzige Quelle (\u00abSingle Point of Truth<\/a>\u00bb) f\u00fcr g\u00fcltige Regeln dar. Die Entwicklung von digitalen Produkten wie Apps, Software und Websites wird dadurch deutlich schneller, effizienter und kosteng\u00fcnstiger.<\/p>\nEinfache Verf\u00fcgbarkeit, volle Kontrolle<\/h4>\n
Ein web-basiertes Design-System steht team\u00fcbergreifend rund um die Uhr zur Verf\u00fcgung. So kann der iterative Projekt-Fortschritt vom Kunden mitverfolgt werden und alle Beteiligten haben zu jeder Zeit einen vollst\u00e4ndigen \u00dcberblick \u00fcber das Design, inklusive responsivem Verhalten, Interaktionsstatus und Mikroanimationen. Dadurch entfallen aufw\u00e4ndige Pr\u00e4sentationen weitgehend. Assets und Pattern k\u00f6nnen \u00fcber eine AutoSuggest-Suche einfach gefunden und als Code oder Bilddatei heruntergeladen werden.<\/p>\n
<\/p>\n
AtomicKitchen<\/h2>\n
F\u00fcr die Erstellung code-basierter Design-Systeme verwende ich das von mir entwickelte Tool \u00abAtomic Kitchen<\/a>\u00bb, mit dem sich modulare Designsysteme komfortabel erstellen und verwalten lassen. Dieses auf Wunsch passwortgesch\u00fctzte System kann sowohl online als auch offline betrieben werden und stellt ein pixelgenaues und 100% responsives Design dar. Daraus k\u00f6nnen einzelne \u00abCode Pattern\u00bb f\u00fcr die technische Umsetzung per Copy & Paste entnommen und zu fertigen L\u00f6sungen zusammengesetzt werden. F\u00fcr den produktiven Dialog steht zudem eine Kommentar-\/Dialogfunktion zur Verf\u00fcgung, mit der alle beteiligten Stakeholder Feedback zu einzelnen Komponenten geben k\u00f6nnen.<\/p>\n
<\/p>\n
Ein code-basiertes Designsystem schliesst die L\u00fccke zwischen Design und Entwicklung<\/h2>\n
Ein code-basiertes Design-System ist ein m\u00e4chtiger Werkzeugkasten, mit dem Designer und Entwickler gleichermassen Produkte in hoher Qualit\u00e4t und mit geringem Aufwand realisieren k\u00f6nnen. Das \u00abMaterial Design<\/a>\u00bb von Google ist eines der bekanntesten Beispiele f\u00fcr ein code-basiertes Design-System.<\/p>\n Bei einem code-basierten Design-System liegen alle Bausteine und Komponenten bereits in HTML, CSS und JS vor. Das heisst f\u00fcr die technische Umsetzung von Designkomponenten muss der Code nicht \u00fcbersetzt werden. Das spart Zeit und Kosten und hilft Fehl-Interpreationen zu vermeiden, da ein solches System auf nativer Weise zeigt, wie sich Elemente verhalten, wenn sich die Gr\u00f6sse des Browserfensters \u00e4ndert, wenn man mit der Maus dar\u00fcberf\u00e4hrt oder klickt. Es gibt auf klare und selbsterkl\u00e4rende Weise das tats\u00e4chliche Look & Feel einer oder mehrerer Anwendungen wieder. Dadurch werden Korrekturschleifen und der Kommunikationsaufwand deutlich reduziert. Alle Designelemente k\u00f6nnen bereits vor ihrer eigentlichen Implementierung vollst\u00e4ndig evaluiert oder von echten Benutzern getestet werden. Ein aufw\u00e4ndiges Prototyping des Frontends entf\u00e4llt in der Regel somit auch.<\/p>\n Alle genannten Faktoren reduzieren die Kosten f\u00fcr die Entwicklung und Pflege einer digitalen Anwendung. Ich empfehle daher grunds\u00e4tzlich, das visuelle Design einer Applikation oder Website mit einem modularen und code-basierten Design-System zu entwickeln, da sich diese Vorgehensweise sowohl \u00f6konomisch als auch qualitativ sehr schnell amortisiert.<\/p>\n Durch ein code-basiertes Design-System gibt es nicht nur feste Vorgaben f\u00fcr das Designteam und andere Partneragenturen, sondern auch verbindliche, bereits getesteten Code-Bausteine. Dadurch werden Widerspr\u00fcche und Missverst\u00e4ndnisse vermieden. Es stellt die einzige Quelle (\u00abSingle Point of Truth<\/a>\u00bb) f\u00fcr g\u00fcltige Regeln dar. Die Entwicklung von digitalen Produkten wie Apps, Software und Websites wird dadurch deutlich schneller, effizienter und kosteng\u00fcnstiger.<\/p>\n Ein web-basiertes Design-System steht team\u00fcbergreifend rund um die Uhr zur Verf\u00fcgung. So kann der iterative Projekt-Fortschritt vom Kunden mitverfolgt werden und alle Beteiligten haben zu jeder Zeit einen vollst\u00e4ndigen \u00dcberblick \u00fcber das Design, inklusive responsivem Verhalten, Interaktionsstatus und Mikroanimationen. Dadurch entfallen aufw\u00e4ndige Pr\u00e4sentationen weitgehend. Assets und Pattern k\u00f6nnen \u00fcber eine AutoSuggest-Suche einfach gefunden und als Code oder Bilddatei heruntergeladen werden.<\/p>\n <\/p>\n F\u00fcr die Erstellung code-basierter Design-Systeme verwende ich das von mir entwickelte Tool \u00abAtomic Kitchen<\/a>\u00bb, mit dem sich modulare Designsysteme komfortabel erstellen und verwalten lassen. Dieses auf Wunsch passwortgesch\u00fctzte System kann sowohl online als auch offline betrieben werden und stellt ein pixelgenaues und 100% responsives Design dar. Daraus k\u00f6nnen einzelne \u00abCode Pattern\u00bb f\u00fcr die technische Umsetzung per Copy & Paste entnommen und zu fertigen L\u00f6sungen zusammengesetzt werden. F\u00fcr den produktiven Dialog steht zudem eine Kommentar-\/Dialogfunktion zur Verf\u00fcgung, mit der alle beteiligten Stakeholder Feedback zu einzelnen Komponenten geben k\u00f6nnen.<\/p>\nDie Vorteile auf einem Blick:<\/h3>\n
Konsistenz durch wiederverwendbare Module<\/h4>\n
Einfache Verf\u00fcgbarkeit, volle Kontrolle<\/h4>\n
AtomicKitchen<\/h2>\n