{"id":290,"date":"2018-10-25T10:48:00","date_gmt":"2018-10-25T10:48:00","guid":{"rendered":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/?p=290"},"modified":"2020-07-22T09:44:12","modified_gmt":"2020-07-22T09:44:12","slug":"living-styleguides","status":"publish","type":"post","link":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/living-styleguides\/","title":{"rendered":"Living Styleguides &#8211; die Zukunft im UI-Design?"},"content":{"rendered":"\n<p>Wie so ziemlich alle Artefakte in der Softwareentwicklung befindet sich auch der Styleguide in einem stetigen Wandel. Dennoch werden heutzutage h\u00e4ufig noch klassische Varianten eingesetzt, obwohl sich mit dem technischen Fortschritt l\u00e4ngst neue M\u00f6glichkeiten er\u00f6ffnet haben, um klassische Dokumente zum Leben zu erwecken. Dieser Blogbeitrag greift diese Thematik auf und soll am Beispiel Styleguide zeigen, wie durch dessen Weiterentwicklung die Zusammenarbeit zwischen Designer und Entwickler verbessert werden kann: Sind Living Styleguides die Zukunft im UI-Design?<\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Es war einmal \u2026 der dokumentenbasierte Styleguide<\/h3>\n\n\n\n<p>Lange Zeit herrschte ein Artefakt \u00fcber die Zusammenarbeit zwischen UX-Designer und Frontend-Entwickler: der dokumentenbasierte Styleguide. Dieser entsteht klassischerweise wie folgt:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Als Erstes wird eine Anforderungsanalyse durchgef\u00fchrt.<\/li><li>Auf Basis der Anforderungen erstellt der Designer Mockups.<\/li><li>Die Mockups werden mit dem Kunden diskutiert (x-Iterationen) und final abgenommen.<\/li><li>Danach erstellt der Designer die abgestimmten Grafiken im Design-Tool.<\/li><li>Aus den Grafiken inkl. beschreibendem Text entsteht dann das Dokument \u201eStyleguide\u201c.<\/li><li>Bei Anpassungen m\u00fcssen alle Schritte wiederholt werden.<\/li><\/ol>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-medium\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"156\" src=\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2020\/04\/201810_living_styleguides_1-600x156.png\" alt=\"Grafik zum dokumentenbasierten Styleguide\" class=\"wp-image-293\" srcset=\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2020\/04\/201810_living_styleguides_1-600x156.png 600w, https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2020\/04\/201810_living_styleguides_1-768x200.png 768w, https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2020\/04\/201810_living_styleguides_1-640x167.png 640w, https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2020\/04\/201810_living_styleguides_1.png 1024w\" sizes=\"auto, (max-width: 639px) 98vw, (max-width: 1199px) 64vw, 600px\" \/><figcaption><em>Abbildung 1: Der dokumentenbasierte Styleguide<\/em><\/figcaption><\/figure>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Als Kommunikationsgrundlage sollte ein guter Styleguide folgende Punkte beinhalten:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Konzept (Anwendung aus Projektsicht, Produktvision, UX-Ziele)<\/li><li>Struktur (Aufbau der Anwendung)<\/li><li>Interaktionsdesign (Gestaltung des Dialogs zwischen Nutzer und System)<\/li><li>Farbgestaltung (Verwendungsregeln f\u00fcr Farben)<\/li><li>Typografie (Schriftarten und -gr\u00f6\u00dfen)<\/li><li>Icons und Grafiken (\u00dcbersicht aller Icons und Grafiken der Anwendung)<\/li><li>Standard-Interaktionselemente (wiederholt benutzte User-Interface-Elemente)<\/li><li>Spezialansichten (nicht dem Standard entsprechende UI-Ansichten und Steuerelemente)<\/li><li>Sprache (Kommunikationsstil und Wortwahl)<\/li><li>Multimedia (Einsatz von Bildern, Audio und Video)<\/li><\/ul>\n\n\n\n<p>Doch vor allem die Auflistung der Standard-Interaktionselemente ist in einem starren, dokumentenbasierten Styleguide nicht optimal. Diese kann bei der Menge verschiedener UI-States wie hover, active, selected, \u2026 pro Element schnell etliche Seiten lang werden. Die wenigsten Entwickler w\u00fchlen sich gerne durch seitenlange Dokumente und so besteht die Gefahr, dass der Styleguide nicht beachtet wird.<\/p>\n\n\n\n<p>Die klassische Variante des Styleguides beinhaltet weiterhin folgende zwei Probleme: Die starre Sicht auf ein meist sehr langes Dokument erfordert viel Vorstellungsverm\u00f6gen und es besteht keine Interaktionsm\u00f6glichkeit mit den verschiedenen Elementen.<\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Status Quo &amp; Zukunft im UI-Design \u2026 es wird lebendig<\/h3>\n\n\n\n<p>Um die oben beschriebenen Kritikpunkte zu verbessern, bieten sich mehrere Ans\u00e4tze an. Beispielsweise k\u00f6nnen mit Hilfe eines parallel gepflegten UI-Prototypen die Inhalte des Styleguide zum Leben erweckt werden. So wird erm\u00f6glicht, verschiedenen States der Standard-Interaktionselemente im Anwendungskontext auszuprobieren oder aber auch Spezialansichten im Detail abzubilden. Mit dieser \u201eHands-on\u201c-Mentalit\u00e4t wird schneller klar, was die Designanforderungen sind und das lange Bl\u00e4ttern in Styleguide-Dokumenten f\u00e4llt weg.<\/p>\n\n\n\n<p>Dieser L\u00f6sungsansatz beseitigt jedoch noch nicht folgende Probleme: Oft ist es im Projektalltag der Fall, dass der Designer Vorlagen entwirft, welche zu au\u00dfergew\u00f6hnlich sind und mit dem eingesetzten UI-Framework nicht ohne erheblichen Mehraufwand umsetzbar sind. Ein weiteres Problem besteht im eingeschr\u00e4nkten Funktionsumfang des Prototyping-Tools. Denn nicht immer ist es m\u00f6glich, das Endverhalten eins zu eins nachzubilden, wodurch falsche Annahmen entstehen k\u00f6nnen.<\/p>\n\n\n\n<p>Der aktuelle Trend geht daher in die Richtung, den kompletten Styleguide \u201elebendig\u201c als eigene Webanwendung umzusetzen. Die Elemente werden also vor ihrer Verwendung in der eigentlichen Anwendung implementiert und die Entwickler m\u00fcssen sich nur noch den Quellcode kopieren.<\/p>\n\n\n\n<p>Folgend ein paar gute Referenzen:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>IBM: <a href=\"https:\/\/www.ibm.com\/design\/language\/\">https:\/\/www.ibm.com\/design\/language\/<\/a><\/li><li>Google (Material): <a href=\"https:\/\/material.io\/\">https:\/\/material.io\/<\/a><\/li><li>Lonely Planet: <a href=\"http:\/\/rizzo.lonelyplanet.com\/styleguide\/\">http:\/\/rizzo.lonelyplanet.com\/styleguide\/<\/a><\/li><li>Yelp: <a href=\"https:\/\/www.yelp.com\/styleguide\">https:\/\/www.yelp.com\/styleguide<\/a><\/li><li>CodePen: <a href=\"https:\/\/codepen.io\/guide\">https:\/\/codepen.io\/guide<\/a><\/li><li>Atlassian: <a href=\"https:\/\/atlassian.design\/\">https:\/\/atlassian.design\/<\/a> &amp; <a href=\"https:\/\/atlaskit.atlassian.com\/\">https:\/\/atlaskit.atlassian.com\/<\/a><\/li><\/ul>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-medium\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"180\" src=\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2020\/04\/201810_living_styleguides_2-600x180.png\" alt=\"Beispiel aus dem IBM Styleguide\" class=\"wp-image-294\" srcset=\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2020\/04\/201810_living_styleguides_2-600x180.png 600w, https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2020\/04\/201810_living_styleguides_2-640x192.png 640w, https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2020\/04\/201810_living_styleguides_2.png 708w\" sizes=\"auto, (max-width: 639px) 98vw, (max-width: 1199px) 64vw, 600px\" \/><figcaption><em>Abbildung 2: Beispiel aus dem IBM Styleguide (www.ibm.com)<\/em><\/figcaption><\/figure>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Die Vorteile einer solchen Umsetzung liegen auf der Hand: Neben einer guten Strukturierung der ben\u00f6tigten Informationen und Elemente wird vor allem die Wartbarkeit erheblich verbessert. Denn falls eine Farbe ge\u00e4ndert werden muss, ist dies im \u201eLiving Styleguide\u201c meist nur eine Farbcode-\u00c4nderung im Stylesheet, w\u00e4hrend im traditionellen, dokumentenbasierten Styleguide unz\u00e4hlige Abschnitte und Designs angepasst werden m\u00fcssen. Dar\u00fcber hinaus kann die QA-Abteilung schon vor der eigentlichen Entwicklung das angeforderte Verhalten testen. Es besteht sogar die M\u00f6glichkeit, \u00c4nderungen am Styleguide direkt in die Anwendung flie\u00dfen zu lassen, wenn beide Anwendungen auf das gleiche Stylesheet referenzieren. Dadurch k\u00f6nnen Redundanzen und Inkonsistenzen von vornherein ausgeschlossen werden. Wie sehr der Styleguide in den Entwicklungsprozess integriert wird, ist sicherlich projektabh\u00e4ngig, jedoch sind den M\u00f6glichkeiten der Optimierung hierbei keine Grenzen gesetzt.<\/p>\n\n\n\n<p>Der \u201eLiving Styleguide\u201c ist mittlerweile in aller Munde und wird von zahlreichen Top IT-Unternehmen wie beispielsweise Google oder IBM verwendet. Er l\u00e4sst die L\u00fccke zwischen Design und Entwicklung immer kleiner werden und am Ende lacht vor allem einer: der Nutzer :-)!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Der Blogbeitrag zeigt am Beispiel Styleguide, wie mit dessen Weiterentwicklung die Zusammenarbeit zwischen Designer und Entwickler verbessert werden kann.<\/p>\n","protected":false},"author":29,"featured_media":1094,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"advgb_blocks_editor_width":"","advgb_blocks_columns_visual_guide":"","footnotes":""},"categories":[14],"tags":[150,151,152,153,155,156,157,158,78,126],"topics":[333],"class_list":["post-290","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-usability","tag-user-experience","tag-measuring","tag-tracking","tag-cui","tag-custom-usability-index","tag-ui","tag-ux","tag-metrics","tag-ucd","tag-usability","topics-usability"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Living Styleguides - Zukunft im UI-Design? - ZEISS Digital Innovation Blog<\/title>\n<meta name=\"description\" content=\"Der Blogbeitrag zeigt am Beispiel Styleguide, wie mit dessen Weiterentwicklung die Zusammenarbeit zwischen Designer und Entwickler verbessert werden kann.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/living-styleguides\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Living Styleguides - Zukunft im UI-Design? - ZEISS Digital Innovation Blog\" \/>\n<meta property=\"og:description\" content=\"Der Blogbeitrag zeigt am Beispiel Styleguide, wie mit dessen Weiterentwicklung die Zusammenarbeit zwischen Designer und Entwickler verbessert werden kann.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/living-styleguides\/\" \/>\n<meta property=\"og:site_name\" content=\"Digital Innovation Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/ZEISSDigitalInnovation\/\" \/>\n<meta property=\"article:published_time\" content=\"2018-10-25T10:48:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-07-22T09:44:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2018\/10\/201810_living_styleguides_1_fi.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1281\" \/>\n\t<meta property=\"og:image:height\" content=\"734\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Erik Schiller\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ZEISS_di\" \/>\n<meta name=\"twitter:site\" content=\"@ZEISS_di\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Erik Schiller\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"4\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/living-styleguides\/\",\"url\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/living-styleguides\/\",\"name\":\"Living Styleguides - Zukunft im UI-Design? - ZEISS Digital Innovation Blog\",\"isPartOf\":{\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/living-styleguides\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/living-styleguides\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2018\/10\/201810_living_styleguides_1_fi.png\",\"datePublished\":\"2018-10-25T10:48:00+00:00\",\"dateModified\":\"2020-07-22T09:44:12+00:00\",\"author\":{\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/#\/schema\/person\/7613933bc4992fa9b37f065ce0933994\"},\"description\":\"Der Blogbeitrag zeigt am Beispiel Styleguide, wie mit dessen Weiterentwicklung die Zusammenarbeit zwischen Designer und Entwickler verbessert werden kann.\",\"breadcrumb\":{\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/living-styleguides\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/living-styleguides\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/living-styleguides\/#primaryimage\",\"url\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2018\/10\/201810_living_styleguides_1_fi.png\",\"contentUrl\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2018\/10\/201810_living_styleguides_1_fi.png\",\"width\":1281,\"height\":734},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/living-styleguides\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Living Styleguides &#8211; die Zukunft im UI-Design?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/#website\",\"url\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/\",\"name\":\"Digital Innovation Blog\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/#\/schema\/person\/7613933bc4992fa9b37f065ce0933994\",\"name\":\"Erik Schiller\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2024\/06\/Schiller_Erik_Profilbild_300x300px-150x150.jpg\",\"contentUrl\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2024\/06\/Schiller_Erik_Profilbild_300x300px-150x150.jpg\",\"caption\":\"Erik Schiller\"},\"description\":\"Erik Schiller ist Wirtschaftsinformatiker (M.Sc.) und arbeitet als Business Analyst f\u00fcr die ZEISS Digital Innovation. Als fachlichen Schwerpunkt besch\u00e4ftigt er sich mit der Usability und User Experience in der Softwareentwicklung. Dar\u00fcber hinaus ist er in verschiedenen Projekten der Energiewirtschaft t\u00e4tig und hat dabei stets ein offenes Ohr f\u00fcr den Nutzer.\",\"url\":\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/author\/erikschiller\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Living Styleguides - Zukunft im UI-Design? - ZEISS Digital Innovation Blog","description":"Der Blogbeitrag zeigt am Beispiel Styleguide, wie mit dessen Weiterentwicklung die Zusammenarbeit zwischen Designer und Entwickler verbessert werden kann.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/living-styleguides\/","og_locale":"de_DE","og_type":"article","og_title":"Living Styleguides - Zukunft im UI-Design? - ZEISS Digital Innovation Blog","og_description":"Der Blogbeitrag zeigt am Beispiel Styleguide, wie mit dessen Weiterentwicklung die Zusammenarbeit zwischen Designer und Entwickler verbessert werden kann.","og_url":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/living-styleguides\/","og_site_name":"Digital Innovation Blog","article_publisher":"https:\/\/www.facebook.com\/ZEISSDigitalInnovation\/","article_published_time":"2018-10-25T10:48:00+00:00","article_modified_time":"2020-07-22T09:44:12+00:00","og_image":[{"width":1281,"height":734,"url":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2018\/10\/201810_living_styleguides_1_fi.png","type":"image\/png"}],"author":"Erik Schiller","twitter_card":"summary_large_image","twitter_creator":"@ZEISS_di","twitter_site":"@ZEISS_di","twitter_misc":{"Verfasst von":"Erik Schiller","Gesch\u00e4tzte Lesezeit":"4\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/living-styleguides\/","url":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/living-styleguides\/","name":"Living Styleguides - Zukunft im UI-Design? - ZEISS Digital Innovation Blog","isPartOf":{"@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/living-styleguides\/#primaryimage"},"image":{"@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/living-styleguides\/#primaryimage"},"thumbnailUrl":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2018\/10\/201810_living_styleguides_1_fi.png","datePublished":"2018-10-25T10:48:00+00:00","dateModified":"2020-07-22T09:44:12+00:00","author":{"@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/#\/schema\/person\/7613933bc4992fa9b37f065ce0933994"},"description":"Der Blogbeitrag zeigt am Beispiel Styleguide, wie mit dessen Weiterentwicklung die Zusammenarbeit zwischen Designer und Entwickler verbessert werden kann.","breadcrumb":{"@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/living-styleguides\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blogs.zeiss.com\/digital-innovation\/de\/living-styleguides\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/living-styleguides\/#primaryimage","url":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2018\/10\/201810_living_styleguides_1_fi.png","contentUrl":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2018\/10\/201810_living_styleguides_1_fi.png","width":1281,"height":734},{"@type":"BreadcrumbList","@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/living-styleguides\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/"},{"@type":"ListItem","position":2,"name":"Living Styleguides &#8211; die Zukunft im UI-Design?"}]},{"@type":"WebSite","@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/#website","url":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/","name":"Digital Innovation Blog","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Person","@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/#\/schema\/person\/7613933bc4992fa9b37f065ce0933994","name":"Erik Schiller","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/#\/schema\/person\/image\/","url":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2024\/06\/Schiller_Erik_Profilbild_300x300px-150x150.jpg","contentUrl":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2024\/06\/Schiller_Erik_Profilbild_300x300px-150x150.jpg","caption":"Erik Schiller"},"description":"Erik Schiller ist Wirtschaftsinformatiker (M.Sc.) und arbeitet als Business Analyst f\u00fcr die ZEISS Digital Innovation. Als fachlichen Schwerpunkt besch\u00e4ftigt er sich mit der Usability und User Experience in der Softwareentwicklung. Dar\u00fcber hinaus ist er in verschiedenen Projekten der Energiewirtschaft t\u00e4tig und hat dabei stets ein offenes Ohr f\u00fcr den Nutzer.","url":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/author\/erikschiller\/"}]}},"author_meta":{"display_name":"Erik Schiller","author_link":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/author\/erikschiller\/"},"featured_img":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-content\/uploads\/sites\/2\/2018\/10\/201810_living_styleguides_1_fi-600x344.png","coauthors":[],"tax_additional":{"categories":{"linked":["<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/category\/usability\/\" class=\"advgb-post-tax-term\">Usability<\/a>"],"unlinked":["<span class=\"advgb-post-tax-term\">Usability<\/span>"]},"tags":{"linked":["<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/category\/usability\/\" class=\"advgb-post-tax-term\">user experience<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/category\/usability\/\" class=\"advgb-post-tax-term\">measuring<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/category\/usability\/\" class=\"advgb-post-tax-term\">tracking<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/category\/usability\/\" class=\"advgb-post-tax-term\">cui<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/category\/usability\/\" class=\"advgb-post-tax-term\">custom usability index<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/category\/usability\/\" class=\"advgb-post-tax-term\">UI<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/category\/usability\/\" class=\"advgb-post-tax-term\">UX<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/category\/usability\/\" class=\"advgb-post-tax-term\">metrics<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/category\/usability\/\" class=\"advgb-post-tax-term\">UCD<\/a>","<a href=\"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/category\/usability\/\" class=\"advgb-post-tax-term\">Usability<\/a>"],"unlinked":["<span class=\"advgb-post-tax-term\">user experience<\/span>","<span class=\"advgb-post-tax-term\">measuring<\/span>","<span class=\"advgb-post-tax-term\">tracking<\/span>","<span class=\"advgb-post-tax-term\">cui<\/span>","<span class=\"advgb-post-tax-term\">custom usability index<\/span>","<span class=\"advgb-post-tax-term\">UI<\/span>","<span class=\"advgb-post-tax-term\">UX<\/span>","<span class=\"advgb-post-tax-term\">metrics<\/span>","<span class=\"advgb-post-tax-term\">UCD<\/span>","<span class=\"advgb-post-tax-term\">Usability<\/span>"]}},"comment_count":"0","relative_dates":{"created":"Posted 8\u00a0Jahren ago","modified":"Updated 6\u00a0Jahren ago"},"absolute_dates":{"created":"Posted on Oktober 25, 2018","modified":"Updated on Juli 22, 2020"},"absolute_dates_time":{"created":"Posted on Oktober 25, 2018 10:48 a.m.","modified":"Updated on Juli 22, 2020 9:44 a.m."},"featured_img_caption":"","series_order":"","_links":{"self":[{"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-json\/wp\/v2\/posts\/290","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-json\/wp\/v2\/users\/29"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-json\/wp\/v2\/comments?post=290"}],"version-history":[{"count":9,"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-json\/wp\/v2\/posts\/290\/revisions"}],"predecessor-version":[{"id":1438,"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-json\/wp\/v2\/posts\/290\/revisions\/1438"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-json\/wp\/v2\/media\/1094"}],"wp:attachment":[{"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-json\/wp\/v2\/media?parent=290"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-json\/wp\/v2\/categories?post=290"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-json\/wp\/v2\/tags?post=290"},{"taxonomy":"topics","embeddable":true,"href":"https:\/\/blogs.zeiss.com\/digital-innovation\/de\/wp-json\/wp\/v2\/topics?post=290"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}