{"id":31,"type":"Standard","slug":"\/produkte\/design-systems","media":[],"seo":{"title":"Design Systems","meta":[{"name":"description","content":"LfdA Design Systems. Tool f\u00fcr die technische Umsetzung von Web-Frontends."},{"name":"generator","content":"TYPO3 CMS x T3Headless"},{"property":"og:title","content":"Die LfdA Design Systems"},{"property":"og:description","content":"Tool f\u00fcr die technische Umsetzung von Website-Frontends."},{"name":"twitter:title","content":"Die LfdA Design Systems"},{"name":"twitter:description","content":"Tool f\u00fcr die technische Umsetzung von Website-Frontends."},{"name":"twitter:card","content":"summary"}],"link":[{"href":"https:\/\/backend.lfda.de\/produkte\/design-systems","rel":"canonical"}],"htmlAttrs":{"lang":"en","dir":null},"bodyAttrs":{"class":"pid-31 layout-layout-0"}},"meta":{"title":"Design Systems","subtitle":"","abstract":"Design Systems sind Software, mit denen Designs aus Grafiksoftware oder spezialisierter Software wie z.B. Sketch technisch umgesetzt werden. Mit der Nutzung eines Design Systems wird die technische Implementierung im CMS sehr vereinfacht.","description":"LfdA Design Systems. Tool f\u00fcr die technische Umsetzung von Web-Frontends.","keywords":"","canonical":"","robots":{"noIndex":false,"noFollow":false},"author":"","authorEmail":"","ogTitle":"Die LfdA Design Systems","ogDescription":"Tool f\u00fcr die technische Umsetzung von Website-Frontends.","ogImage":null,"twitterTitle":"Die LfdA Design Systems","twitterDescription":"Tool f\u00fcr die technische Umsetzung von Website-Frontends.","twitterCard":"","twitterImage":null},"categories":"","breadcrumbs":[{"title":"Home","link":"\/","target":"","active":1,"current":0,"spacer":0,"hasSubpages":1},{"title":"Produkte","link":"\/produkte","target":"","active":1,"current":0,"spacer":0,"hasSubpages":1},{"title":"Design Systems","link":"\/produkte\/design-systems","target":"","active":1,"current":1,"spacer":0,"hasSubpages":0}],"appearance":{"layout":"layout-0","backendLayout":"default"},"content":{"colPos0":[{"id":201,"type":"textpic","colPos":0,"categories":"","appearance":{"layout":"102","frameClass":"default","spaceBefore":"","spaceAfter":""},"content":{"header":"Wozu benutzt man ein Design System","subheader":"","headerLayout":0,"headerPosition":"","headerLink":"","enlargeImageOnClick":false,"bodytext":"

Bei einem \"Design System\" wird das Design in einzelne Komponenten unterteilt. Die Komponenten k\u00f6nnen sp\u00e4ter flexibel zu Modulen und diese zu Seiten zusammengesetzt werden.<\/p>\n

Wir unterscheiden dabei Atome, Molek\u00fcle und Seitenvorlagen. Atome sind kleinste Bausteine, wie z. B. Buttons, Textformatierungen, Listen und Bilder. Molek\u00fcle sind zusammengesetzte Inhaltselemente aus mehreren Atomen, z. B. ein News-Teaser mit Bild, \u00dcberschrift, Teaser-Text und Link oder ein \"Text-Media-Element\". Diese Inhaltselemente k\u00f6nnen sp\u00e4ter im CMS gepflegt werden.<\/p>\n

Aus den Molek\u00fclen k\u00f6nnen Vorlagen f\u00fcr Seiten zusammengesetzt werden. Am wichtigsten sind dabei die Homepage und eine Standard-Folgeseite. Oft gibt es noch spezielle Seite wie z. B. FAQs, Suchergebnisse, Download-Bereiche usw.<\/p>\n

Das Design System dient als Basis f\u00fcr die Entwicklung mit einem Content-Management-System. Im Grunde erzeugt die Software CSS und JavaScript sowie eine HTML-Volage f\u00fcr die Backend-Entwickler.<\/p>","gallery":{"position":{"horizontal":"right","vertical":"intext","noWrap":true},"width":700,"count":{"files":2,"columns":2,"rows":1},"columnSpacing":10,"border":{"enabled":false,"width":2,"padding":0},"rows":{"1":{"columns":{"1":{"publicUrl":"https:\/\/backend.lfda.de\/fileadmin\/_processed_\/1\/2\/csm_lfda-sutorbank-styleguide-buttons_d1c4f68271.webp","properties":{"title":"LfdA Arbeiten mit den Styleguide: Buttons","alternative":"LfdA Arbeiten mit den Styleguide: Buttons","description":"Der LfdA-Styleguide: Ansicht von verschiedenen Buttondesigns bei unserem Kunden Sutorbank","link":null,"linkData":null,"mimeType":"image\/webp","type":"image","filename":"csm_lfda-sutorbank-styleguide-buttons_d1c4f68271.webp","originalUrl":"\/fileadmin\/user_upload\/Produkte\/lfda-sutorbank-styleguide-buttons.jpg","uidLocal":89,"fileReferenceUid":122,"size":"4 KB","dimensions":{"width":345,"height":194},"cropDimensions":{"width":345,"height":194},"crop":{"default":{"cropArea":{"x":0,"y":0,"width":1,"height":1},"selectedRatio":"NaN","focusArea":null}},"autoplay":null,"extension":"webp"}},"2":{"publicUrl":"https:\/\/backend.lfda.de\/fileadmin\/_processed_\/c\/f\/csm_lfda-sutorbank-styleguide-seite1_09b8070bc9.webp","properties":{"title":"LfdA-Styleguide Ansicht einer Seite","alternative":"LfdA-Styleguide Ansicht einer Seite","description":"Ansicht einer fertigen Seite aus Einzelelementen mit dem LfdA-Styleguide","link":null,"linkData":null,"mimeType":"image\/webp","type":"image","filename":"csm_lfda-sutorbank-styleguide-seite1_09b8070bc9.webp","originalUrl":"\/fileadmin\/user_upload\/Produkte\/lfda-sutorbank-styleguide-seite1.jpg","uidLocal":91,"fileReferenceUid":123,"size":"5 KB","dimensions":{"width":345,"height":194},"cropDimensions":{"width":345,"height":194},"crop":{"default":{"cropArea":{"x":0,"y":0,"width":1,"height":1},"selectedRatio":"NaN","focusArea":null}},"autoplay":null,"extension":"webp"}}}}}}}},{"id":202,"type":"text","colPos":0,"categories":"","appearance":{"layout":"101","frameClass":"default","spaceBefore":"","spaceAfter":""},"content":{"header":"Der Workflow mit einem Design System","subheader":"","headerLayout":0,"headerPosition":"","headerLink":"","bodytext":"

Der Workflow mit unserer Software unterscheidet sich insbesondere im Punkt der technischen Umsetzung des Designs. Die Vorteile liegen darin, dass Kunden das technisch umgesetzte Design betrachten und abnehmen k\u00f6nnen. An dieser Stelle wird das Design nicht mehr ber\u00fchrt, was die sogenannte Integration des Designs ins CMS beschleunigt.<\/p>\n

    \t<li>Ein Designer erstellt das Design mit Sketch, Adobe XD oder einer Grafiksoftware.<\/li> \t<li>Der Frontend-Entwickler analysiert das Design und zerlegt es in wiederkehrende Patterns (Muster).<\/li> \t<li>Der Frontend-Entwickler baut HTML, CSS und JavaScript f\u00fcr die Komponenten.<\/li> \t<li>Der Kunde erh\u00e4lt mit dem Design System Sicht auf das tats\u00e4chliche Design der sp\u00e4teren Website: Im Webbrowser und responsive f\u00fcr Mobilger\u00e4te. In diesem Schritt k\u00f6nnen Korrekturen vorgenommen werden.<\/li> \t<li>Der Backend-Entwickler nutzt das HTML, CSS und JavaScript des Design Systems als Vorlage f\u00fcr die CMS-Templates.<\/li> <\/ol>"}},{"id":232,"type":"image","colPos":0,"categories":"","appearance":{"layout":"100","frameClass":"default","spaceBefore":"","spaceAfter":""},"content":{"header":"","subheader":"","headerLayout":0,"headerPosition":"","headerLink":"","enlargeImageOnClick":false,"gallery":{"position":{"horizontal":"center","vertical":"above","noWrap":false},"width":600,"count":{"files":1,"columns":1,"rows":1},"columnSpacing":10,"border":{"enabled":false,"width":2,"padding":0},"rows":{"1":{"columns":{"1":{"publicUrl":"https:\/\/backend.lfda.de\/fileadmin\/_processed_\/b\/7\/csm_styleguide-arbeitsprozess_773be66991.webp","properties":{"title":null,"alternative":"Prozess des LfdA Design Systems","description":"Der Arbeitsprozess mit einem Design System","link":null,"linkData":null,"mimeType":"image\/webp","type":"image","filename":"csm_styleguide-arbeitsprozess_773be66991.webp","originalUrl":"\/fileadmin\/user_upload\/Produkte\/styleguide-arbeitsprozess.png","uidLocal":88,"fileReferenceUid":119,"size":"18 KB","dimensions":{"width":600,"height":424},"cropDimensions":{"width":600,"height":424},"crop":{"default":{"cropArea":{"x":0,"y":0,"width":1,"height":1},"selectedRatio":"NaN","focusArea":null}},"autoplay":null,"extension":"webp"}}}}}}}},{"id":203,"type":"text","colPos":0,"categories":"","appearance":{"layout":"103","frameClass":"default","spaceBefore":"","spaceAfter":""},"content":{"header":"Ein Design System selbst in Ihrer Firma nutzen\u2026","subheader":"","headerLayout":0,"headerPosition":"","headerLink":"","bodytext":"

    Der Software zum Entwickeln eines Design Systems ist unter dem Namen Pangolin.js<\/em> Open-Source verf\u00fcgbar.<\/p>\n

    Die Dokumentation finden Sie unter pangolinjs.org<\/a>.<\/p>\n

    Das Tool ist immer dann geeignet, wenn Sie Website-Designs strukturiert in ein Frontend \u00fcberf\u00fchren m\u00f6chten. Die Software ist f\u00fcr Frontend-Entwickler in Internetagenturen interessant.<\/p>"}}],"colPos10":[{"id":139,"type":"text","colPos":10,"categories":"","appearance":{"layout":"100","frameClass":"default","spaceBefore":"","spaceAfter":""},"content":{"header":"Design Systems Unsere Software f\u00fcr Frontend-Entwicklung<\/small>","subheader":"","headerLayout":0,"headerPosition":"","headerLink":"","bodytext":"

    Internetdesign erfolgt mit Photoshop, Illustrator und vergleichbarer Software. Und nat\u00fcrlich vor allem auch mit spezialisierten Softwarel\u00f6sungen wie Sketch oder Adobe XD.<\/p>\n

    Nach dem Design steht die technische Entwicklung des Frontends: also die Umsetzung mittels HTML, CSS und JavaScript. LfdA nutzt daf\u00fcr eine eigens entwickelte Software. Mit dieser Software erstellen wir ein Design System f\u00fcr Ihre Website.<\/p>\n

    Sie k\u00f6nnen also das tats\u00e4chlich (technisch umgesetzte) Design Ihrer Internetseite sehen und auf Desktop-Computern oder Mobilger\u00e4ten testen, bevor es im CMS implementiert wird.<\/p>"}}]},"i18n":[{"languageId":0,"locale":"en_DE","title":"Deutsch","navigationTitle":"Deutsch","twoLetterIsoCode":"en","hreflang":"en-DE","direction":"ltr","flag":"flags-de","link":"\/produkte\/design-systems","active":1,"current":0,"available":1}]}