{"id":1141,"date":"2022-09-06T12:00:00","date_gmt":"2022-09-06T11:00:00","guid":{"rendered":"https:\/\/thomas-sokolowski.de\/?p=1141"},"modified":"2023-06-17T12:06:42","modified_gmt":"2023-06-17T11:06:42","slug":"lighting-talk-atomickitchen","status":"publish","type":"post","link":"https:\/\/thomas-sokolowski.com\/de\/lighting-talk-atomickitchen\/","title":{"rendered":"Lighting Talk \u00abAtomicKitchen\u00bb"},"content":{"rendered":"\r\n

Handout der Case Study<\/p>\r\n\r\n\r\n\r\n

Entwicklung eines Designsystems f\u00fcr den Kanton Bern<\/h2>\r\n\r\n\r\n\r\n
\"Der\r\n
Der Atomic Design Styleguide des Kantons Bern verh\u00e4lt sich komplett responsive.<\/figcaption>\r\n<\/figure>\r\n\r\n\r\n\r\n
\r\n

Der Kanton Bern unterh\u00e4lt mehr als 50 Websites, die aus \u00fcber 80’000 Einzelseiten bestehen und j\u00e4hrlich mehr als 40 Millionen Mal besucht werden.<\/p>\r\n<\/blockquote>\r\n\r\n\r\n\r\n\r\n\r\n

2019 beauftragte mich der Kanton Bern mit der Entwicklung eines \u00abBasislayouts inkl. Key-Templates\u00bb f\u00fcr den kompletten Relaunch dieser 50 Websites.<\/p>\r\n

Die Herausforderung bestand im Wesentlichen darin, f\u00fcr die einzelnen Websites ein Design zu entwickeln, das jeder Seite individuellen Spielraum l\u00e4sst und gleichzeitig sicherstellt, dass die Websites des Kantons als Einheit wahrgenommen werden. Dabei mussten alle Elemente den Standards der Zug\u00e4nglichkeitsstufe AA entsprechen.<\/p>\r\n

Anstatt eine Reihe von Templates zu entwickeln, wie es der Kunde urspr\u00fcnglich wollte, konnte ich den Kanton Bern davon \u00fcberzeugen, einen modularen Ansatz zu w\u00e4hlen, der ihm mehrere Vorteile bieten w\u00fcrde.<\/p>\r\n

So entschieden wir uns, ein modulares, skalierbares Designsystem zu entwickeln, das auf den Prinzipien des Atomic Design basiert. Um dieses Designsystem zu erstellen, verwendeten wir ein Tool namens \u00abAtomicKitchen\u00bb, das ich in den letzten sechs Jahren entwickelt habe.<\/p>\r\n

Mit diesem Tool kann ein Atomic Design System iterativ erstellt und online ver\u00f6ffentlicht werden.<\/p>\r\n

Daraus lassen sich \u00abCode Patterns\u00bb f\u00fcr die technische Umsetzung ableiten und zu Websites zusammensetzen. Dies reduziert den Kommunikationsaufwand zwischen Design und Produktion und vermeidet Missverst\u00e4ndnisse, da das Design nicht in Code “\u00fcbersetzt” werden muss. Auf diese Weise liegt das Design nativ als HTML\/CSS-Code vor und verh\u00e4lt sich 100% pixelgenau und responsiv.<\/p>\r\n

Aus Kosten- und Komplexit\u00e4tsgr\u00fcnden haben wir uns f\u00fcr einen leichtgewichtigen Ansatz entschieden, d.h. nach der Entwicklung einer Reihe von Basiskomponenten wie Buttons, typografischen Grundelementen und einigen Teaser- und B\u00fchnenelementen haben wir nur die Elemente entwickelt, die tats\u00e4chlich in einer der Anwendungen verwendet werden. Dieser iterative Ansatz erh\u00f6hte die Benutzerfreundlichkeit des Designsystems und reduzierte den Aufwand auf beiden Seiten, Design und Implementierung.<\/p>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n

Bereits umgesetzte Designs:<\/h4>\r\n\r\n\r\n\r\n