- \n
- Aesthetic Integrity,<\/li>\n
- direct Manipulation<\/li>\n
- Mataphors<\/li>\n
- Consistency<\/li>\n
- Feedback<\/li>\n<\/ul>\n
Auch Google\u2019s Material Design Guidelines<\/a> nennt drei Standards:<\/p>\n
- \n
- Material is the metaphor<\/li>\n
- Bold, graphic, intentional<\/li>\n
- Motion provides meaning<\/li>\n<\/ul>\n
![\"Apple,](\"https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2017\/03\/styleguide_apple_design_principals-254x240.png\")
<\/a>Apple, Design Principles<\/figcaption><\/figure>\n ![\"Google,](\"https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2017\/03\/styleguide_google_principals-254x163.png\")
<\/a>Google, Design Principles<\/figcaption><\/figure>\n Von diesen Grundprinzipien aus, werden detaillierte Regeln f\u00fcr die verschiedenen Bereiche aufgestellt.<\/p>\n
Apple (Auszug aus Human Interface Guidelines<\/a>):<\/p>\n
- \n
- Interaction<\/li>\n
- Features<\/li>\n
- Visual Design<\/li>\n
- Graphics<\/li>\n
- UI Bars<\/li>\n
- UI Views<\/li>\n
- UI Controls<\/li>\n
- Extensions<\/li>\n<\/ul>\n
Google (Auszug aus Material Design Guidelines<\/a>):<\/p>\n
- \n
- Motion<\/li>\n
- Style<\/li>\n
- Layout<\/li>\n
- Components<\/li>\n
- Patterns<\/li>\n
- Growth & communications<\/li>\n
- Usability<\/li>\n<\/ul>\n
Neben den Regeln f\u00fcr \u00c4sthetik und Usability sollten auch immer gute Beispiele und die Bezugsquellen f\u00fcr z.B. Schriften, Bilder, Codes und Templates genannt werden.<\/p>\n
Wie stellt man den Styleguide zur Verf\u00fcgung?<\/h3>\n
F\u00fcr die Dokumentation selbst muss entschieden werden, ob diese in einem printf\u00e4higem Format oder online realisiert werden soll. Dem iterativen Gedanken folgend, ist ein Online-Styleguide die erste Wahl. Hier kann ohne gro\u00dfen Aufwand der Styleguide aktuell gehalten werden und er steht allen Beteiligten immer in der aktuellsten Form zu Verf\u00fcgung. Dies setzt nat\u00fcrlich eine passende technische Infrastruktur voraus. Aber auch mit einer (ggf. passwortgesch\u00fctzten) einfachen WordPress-Seite kann ein guter Online-Styleguide erstellt und gepflegt werden.<\/p>\n
Styleguides helfen, bei der Produktentwicklung (Apps, Websites, Anwendungen, \u2026) schneller zu den richtigen Entscheidungen im Designprozess zu kommen. Auf dieser Basis kann die notwendige Kommunikation zwischen den beteiligten Personen ziemlich reibungslos ablaufen.<\/p><\/blockquote>\n
Die Basis: das Layoutraster<\/h3>\n
Basis f\u00fcr jede Layoutentwicklung ist das oder die zu Grunde liegende(n) Raster. Dieses Raster muss f\u00fcr alle Anwendungsf\u00e4lle definiert und dokumentiert werden. Werden Anwendungen, Apps oder Websites eines Unternehmens von unterschiedlichen Personen entwickelt, kann es von Vorteil sein, Templates im HTML-Format oder im jeweiligen CMS zur Verf\u00fcgung zu stellen oder ein Front-end Framework, wie z.B. Bootstrap<\/a> als Basis zu definieren. Hier ist z.B. das responsive Verhalten f\u00fcr mobile Endger\u00e4te bereits integriert.<\/p>\n
![\"Bootstrap](\"https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2017\/03\/styleguide_bootstrap_lg_grid-254x148.jpg\")
<\/a>Bootstrap Grid (Quelle: bootstrap-sass.happyfuncorp.com\/bootstrap-sass\/layout\/README.html<\/a>)<\/figcaption><\/figure>\n ![\"Bootstrap,](\"https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2017\/03\/styleguide_bootstrap2.png\")
<\/a>Bootstrap, Breakpoints (Quelle: bootstrap-sass.happyfuncorp.com\/bootstrap-sass\/layout\/grid.html<\/a>)<\/figcaption><\/figure>\n Falls man alles selber in die Hand nehmen m\u00f6chte, gibt es zahlreiche Grid-Kalkulatoren im Netz. Eines davon ist der „Grid Generator“<\/a> bei dem man gleich HTML und CSS f\u00fcr ein responsives Layout f\u00fcr mobile Endger\u00e4te mitgeliefert bekommt.<\/p>\n
![\"Grid](\"https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2017\/03\/styleguide_gridcalc-254x247.png\")
<\/a>Grid calculator, Quelle: www.responsivegridsystem.com<\/a><\/figcaption><\/figure>\n Definierte Layoutraster erm\u00f6glicht es, einen hohen Qualit\u00e4tsstandard \u00fcber alle Produkte hinweg zu halten.<\/p><\/blockquote>\n
Farben definieren<\/h3>\n
Farben sind die einfachsten Elemente, welche definiert, dokumentiert und damit weitergegeben werden k\u00f6nnen. Auf alle F\u00e4lle sollten die Farbwerte f\u00fcr Online-Medien in HEX oder RGB angegeben werden. Dies ist der genaue Code f\u00fcr die Programmierung. Werden die Farben in CMYK oder Pantone angeben, kann es leicht zu Konvertierungsfehlern kommen.<\/p>\n
Agenturen sollten also neben den Pantone- oder CMYK-Farbwerten auch die Werte in RGB oder HEX liefern. Manchmal m\u00fcssen dabei Anpassungen vorgenommen werden, da Farben im Print anders wirken als auf dem Monitor.<\/p>\n
![\"Farben](\"https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2017\/03\/styleguide_colors_apple-254x82.png\")
<\/a>Farben in HEX-Werten angeben<\/figcaption><\/figure>\n Beispiel Apples Human Interface Guidelines<\/a><\/p>\n
F\u00fcr Online-Medien Farbwerte in HEX oder RGB angeben<\/p><\/blockquote>\n
Typografie und Schriften festlegen<\/h3>\n
Eines der Elemente, welches wesentlich zu einem konsistenten Design beitr\u00e4gt, ist die Verwendung einer durchg\u00e4ngig einheitlichen typografischen Sprache. So viel wie n\u00f6tig und so wenig wie m\u00f6glich unterschiedliche Typografien sollten definiert und verwendet werden.<\/p>\n
Definition<\/h4>\n
Es muss von Displayschriften bis runter zum Button alles definiert werden. Gut ist es, wenn man gleich sieht, wie es aussehen soll.<\/p>\n
![\"Google,](\"https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2017\/03\/styleguide_google_font-254x248.png\")
<\/a>Google, Material Design, Typografie, Beispiel Googles Material Design Guidelines<\/a><\/figcaption><\/figure>\n Bezugsquellen<\/h4>\n
Geben Sie Bezugsquellen f\u00fcr die Schriften an und wie Lizenzen gehandhabt werden. Am einfachsten ist es, wenn z.B. Google-Fonts verwendet werden. Diese stehen auch f\u00fcr die Entwicklung kostenfrei zur Verf\u00fcgung. Schwieriger wird es, wenn kostenpflichtige Schriften verwendet werden. Bei der Wahl f\u00fcr die Online-Medien ist es empfehlenswert auf die Lizenzbedingungen zu achten. Wieviel kostet die Schrift pro Corporate Website, wieviele Seitenzugriffe sind darin enthalten etc. F\u00fcr die Entwicklung kann man auf Dienste wie www.fonts.com<\/a> zur\u00fcckgreifen. Hier kann man f\u00fcr einen kleineren Abo-Betrag unterschiedlich viele Schriften f\u00fcr die Entwicklung nutzen.<\/p>\n
Empfehlung: Zeigen Sie gute typografische Anwendungsbeispiele. Das erleichtert den Entscheidungsprozess f\u00fcr neu zu entwickelnde Produkte enorm.<\/p><\/blockquote>\n
Bilder, Illustrationen, Icons: Emotionen lenken<\/h3>\n
Bilder, Illustrationen und Icons sind relevante Kommunikationsmittel und wecken Emotionen beim Betrachter. Deshalb ist es wichtig, eine einheitliche Bild-, Illustrations- und Iconsprache zu entwickeln und zu dokumentieren. F\u00fcr Bilder geh\u00f6ren u.a. Angaben zu Farbstimmung, Perspektive, Motivwahl und Beleuchtung dazu. Ebenfalls sollte dokumentiert werden, wo man die Bilder erhalten (Bilddatenbanken) kann oder was bei einem Shooting zu ber\u00fccksichtigen ist.<\/p>\n
Bei Icons und Illustrationen kann ggf. auch ein eigener Styleguide erforderlich sein.<\/p>\n
![\"Icon](\"https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2017\/03\/styleguide_icon_magento-254x259.png\")
<\/a>Icon Library von Magento, Magento<\/a><\/figcaption><\/figure>\n ![\"Google,](\"https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2017\/03\/styleguide_google_imagery-254x194.png\")
<\/a><\/p>\nGoogle, Material Design, imagery, Material Design Guidelines<\/a><\/p>\n
Hinweise zu bevorzugten Bezugsquellen sichern eine gleichbleibend gute Qualit\u00e4t bei der Bildauswahl.<\/p><\/blockquote>\n
Zeit und Kosten sparen 1: UI Komponenten definieren<\/h3>\n
Entwickler nutzen gern UI Komponenten f\u00fcr die Entwicklung von z.B. Anwendungen. Daher ist es ratsam, UI Komponenten im Styleguide zu dokumentieren. Vor allem, wenn unterschiedliche Personen oder Teams Anwendungen entwickeln, erspart es das Re-Engineering und Re-Designing.<\/p>\n
Wird ein Front-end Framework, wie z.B. Bootstrap<\/a>, genutzt, so sind Basiselemente wie Formularelemente, Buttons etc bereits definiert.<\/p>\n
![\"Komponenten](\"https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2017\/03\/styleguide_bspl_Komponenten_bootstrap-254x264.png\")
<\/a>Komponenten in Bootstrap<\/figcaption><\/figure>\n UI Komponenten sind aber noch mehr als das; es k\u00f6nnen komplexe Komponenten sein, wie Cards, Accordions oder Sliders. F\u00fcr die Programmierung kann es hilfreich sein, sich auf eine einheitliche Script-Library f\u00fcr Event-Handling, Animationen etc. wie z.B. jQuery<\/a>, zu verst\u00e4ndigen.<\/p>\n
Die Definition und Dokumentation von UI Komponenten im Styleguide und eine Script-Library erspart Zeit \u2013 und damit Kosten \u2013 bei Design und Entwicklung<\/p><\/blockquote>\n
Zeit und Koste sparen 2: Animation\/Motion<\/h3>\n
Neben statischen Elementen sind auch Animationen (Motion) dem Anspruch der Konsistenz unterworfen. Die hierf\u00fcr geltenden Regeln (z.B. zu Dauer oder Transformationen) sollen die Entwicklung vereinheitlichen und vereinfachen. Hilfreich ist es, wenn diese an Hand von Beispielen, z.B. in Form von Videos oder interaktiven Elementen, im Styleguide dokumentiert werden.<\/p>\n
![\"Bewegung,](\"https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2017\/03\/styleguide_motion_apple-254x255.png\")
<\/a>Bewegung, Apple, Human Interface Guidelines<\/a><\/figcaption><\/figure>\n ![\"Bewegung,](\"https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2017\/03\/styleguide-motion-goolge-254x232.png\")
<\/a>Bewegung, Google, Material Design, Material Design Guidelines<\/a><\/figcaption><\/figure>\n Hier gilt auch, wie bei den UI Komponenten: um Design und Programmierung zu erleichtern kann auf eine einheitliche Script-Library, wie z.B. jQuery<\/a>, zur\u00fcckgegriffen werden.<\/p>\n
Ein Styleguide definiert nicht nur statische Elemente, sondern auch alle Interaktionen und Animationen.<\/p><\/blockquote>\n
Weiterf\u00fchrende Informationen<\/h3>\n
- \n
- www.designtagebuch.de\/wiki\/corporate-design-manuals\/<\/a> (Stand 03\/2017: 240 Manuals\/Handb\u00fccher)<\/li>\n
- www.ci-portal.de\/styleguides\/<\/a> (Corporate Design Manuals und Styleguides)<\/li>\n
- speckyboy.com\/styleguide-toolbox\/<\/a> (Styleguide Toolbox \u2013 Templates, UI Kits, Tools & Generators)<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
Konsistentes Design schafft Vertrauen! Mit Styleguides werden Regeln, Standards, Bausteine hinsichtlich des Designs verbindlich festgelegt.<\/p>\n","protected":false},"author":6,"featured_media":1125,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":3,"activitypub_interaction_policy_quote":"anyone","activitypub_status":"","footnotes":""},"categories":[1],"tags":[30,15,28,29,12,17],"class_list":["post-1093","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","tag-cms","tag-marketing","tag-rebrush","tag-relaunch","tag-tipps","tag-usability"],"yoast_head":"\n
Styleguides \u2013 mit Konsistenz Vertrauen schaffen - VisionConnect: TYPO3 CMS, Wordpress, Shops - Ihre Agentur in Hannover<\/title>\n<meta name=\"description\" content=\"Konsistentes Design schafft Vertrauen! Mit Styleguides werden Regeln, Standards, Bausteine hinsichtlich des Designs verbindlich festgelegt.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.visionconnect.de\/blog\/2017\/styleguides-mit-konsistenz-vertrauen-schaffen\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Styleguides \u2013 mit Konsistenz Vertrauen schaffen - VisionConnect: TYPO3 CMS, Wordpress, Shops - Ihre Agentur in Hannover\" \/>\n<meta property=\"og:description\" content=\"Konsistentes Design schafft Vertrauen! Mit Styleguides werden Regeln, Standards, Bausteine hinsichtlich des Designs verbindlich festgelegt. Egal ob mobile Seiten, Apps oder Corporate Websites, alle haben das gleiche konsistente Design und sind vom Betrachter sofort einem Unternehmen zuzuordnen.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.visionconnect.de\/blog\/2017\/styleguides-mit-konsistenz-vertrauen-schaffen\/\" \/>\n<meta property=\"og:site_name\" content=\"VisionConnect GmbH Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/VisionConnectGmbH\" \/>\n<meta property=\"article:author\" content=\"www.facebook.com\/Y.Scherzer\" \/>\n<meta property=\"article:published_time\" content=\"2017-05-19T07:58:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-04-29T06:50:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2017\/03\/design-styleguides-mit-konsistenz-vertrauen-schaffen.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"590\" \/>\n\t<meta property=\"og:image:height\" content=\"331\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Yvonne Scherzer\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Konsistentes Design schafft Vertrauen! Mit Styleguides werden Regeln, Standards, Bausteine hinsichtlich des Designs verbindlich festgelegt.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2017\/03\/design-styleguides-mit-konsistenz-vertrauen-schaffen.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@elbeallee\" \/>\n<meta name=\"twitter:site\" content=\"@visionconnect\" \/>\n<meta name=\"twitter:label1\" content=\"Geschrieben von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Yvonne Scherzer\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"10\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.visionconnect.de\\\/blog\\\/2017\\\/styleguides-mit-konsistenz-vertrauen-schaffen\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.visionconnect.de\\\/blog\\\/2017\\\/styleguides-mit-konsistenz-vertrauen-schaffen\\\/\"},\"author\":{\"name\":\"Yvonne Scherzer\",\"@id\":\"https:\\\/\\\/www.visionconnect.de\\\/blog\\\/#\\\/schema\\\/person\\\/a82b6a4e5ceec47e4e9fddf6d9a8ceba\"},\"headline\":\"Styleguides \u2013 mit Konsistenz Vertrauen schaffen\",\"datePublished\":\"2017-05-19T07:58:01+00:00\",\"dateModified\":\"2022-04-29T06:50:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.visionconnect.de\\\/blog\\\/2017\\\/styleguides-mit-konsistenz-vertrauen-schaffen\\\/\"},\"wordCount\":1346,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.visionconnect.de\\\/blog\\\/2017\\\/styleguides-mit-konsistenz-vertrauen-schaffen\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.visionconnect.de\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/03\\\/programming-2115930_1920.jpg\",\"keywords\":[\"CMS\",\"Marketing\",\"Rebrush\",\"Relaunch\",\"Tipps\",\"Usability\"],\"articleSection\":[\"Design\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.visionconnect.de\\\/blog\\\/2017\\\/styleguides-mit-konsistenz-vertrauen-schaffen\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.visionconnect.de\\\/blog\\\/2017\\\/styleguides-mit-konsistenz-vertrauen-schaffen\\\/\",\"url\":\"https:\\\/\\\/www.visionconnect.de\\\/blog\\\/2017\\\/styleguides-mit-konsistenz-vertrauen-schaffen\\\/\",\"name\":\"Styleguides \u2013 mit Konsistenz Vertrauen schaffen - VisionConnect: TYPO3 CMS, Wordpress, Shops - Ihre Agentur in Hannover\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.visionconnect.de\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.visionconnect.de\\\/blog\\\/2017\\\/styleguides-mit-konsistenz-vertrauen-schaffen\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.visionconnect.de\\\/blog\\\/2017\\\/styleguides-mit-konsistenz-vertrauen-schaffen\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.visionconnect.de\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/03\\\/programming-2115930_1920.jpg\",\"datePublished\":\"2017-05-19T07:58:01+00:00\",\"dateModified\":\"2022-04-29T06:50:42+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.visionconnect.de\\\/blog\\\/#\\\/schema\\\/person\\\/a82b6a4e5ceec47e4e9fddf6d9a8ceba\"},\"description\":\"Konsistentes Design schafft Vertrauen! Mit Styleguides werden Regeln, Standards, Bausteine hinsichtlich des Designs verbindlich festgelegt.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.visionconnect.de\\\/blog\\\/2017\\\/styleguides-mit-konsistenz-vertrauen-schaffen\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.visionconnect.de\\\/blog\\\/2017\\\/styleguides-mit-konsistenz-vertrauen-schaffen\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.visionconnect.de\\\/blog\\\/2017\\\/styleguides-mit-konsistenz-vertrauen-schaffen\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.visionconnect.de\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/03\\\/programming-2115930_1920.jpg\",\"contentUrl\":\"https:\\\/\\\/www.visionconnect.de\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/03\\\/programming-2115930_1920.jpg\",\"width\":1920,\"height\":1080},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.visionconnect.de\\\/blog\\\/2017\\\/styleguides-mit-konsistenz-vertrauen-schaffen\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.visionconnect.de\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Styleguides \u2013 mit Konsistenz Vertrauen schaffen\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.visionconnect.de\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.visionconnect.de\\\/blog\\\/\",\"name\":\"VisionConnect GmbH Blog\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.visionconnect.de\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.visionconnect.de\\\/blog\\\/#\\\/schema\\\/person\\\/a82b6a4e5ceec47e4e9fddf6d9a8ceba\",\"name\":\"Yvonne Scherzer\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/7d64f53d285da0cf54ed03465146356a309226e1d76fd837c8cdf6095821bc6c?s=96&d=mm&r=pg\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/7d64f53d285da0cf54ed03465146356a309226e1d76fd837c8cdf6095821bc6c?s=96&d=mm&r=pg\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/7d64f53d285da0cf54ed03465146356a309226e1d76fd837c8cdf6095821bc6c?s=96&d=mm&r=pg\",\"caption\":\"Yvonne Scherzer\"},\"description\":\"Seit mehr als 15 Jahren arbeite ich als Webdesignerin bei VisionConnect GmbH. Eine Aufgabe, die sehr vielf\u00e4ltig ist und wirklich Spa\u00df macht. Neben der virtuellen Arbeit tausche ich in meiner Freizeit gerne Monitor gegen Pinsel und Staffelei.\",\"sameAs\":[\"http:\\\/\\\/www.visionconnect.de\",\"www.facebook.com\\\/Y.Scherzer\",\"https:\\\/\\\/x.com\\\/elbeallee\"],\"url\":\"https:\\\/\\\/www.visionconnect.de\\\/blog\\\/author\\\/scherzer\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Styleguides \u2013 mit Konsistenz Vertrauen schaffen - VisionConnect: TYPO3 CMS, Wordpress, Shops - Ihre Agentur in Hannover","description":"Konsistentes Design schafft Vertrauen! Mit Styleguides werden Regeln, Standards, Bausteine hinsichtlich des Designs verbindlich festgelegt.","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:\/\/www.visionconnect.de\/blog\/2017\/styleguides-mit-konsistenz-vertrauen-schaffen\/","og_locale":"de_DE","og_type":"article","og_title":"Styleguides \u2013 mit Konsistenz Vertrauen schaffen - VisionConnect: TYPO3 CMS, Wordpress, Shops - Ihre Agentur in Hannover","og_description":"Konsistentes Design schafft Vertrauen! Mit Styleguides werden Regeln, Standards, Bausteine hinsichtlich des Designs verbindlich festgelegt. Egal ob mobile Seiten, Apps oder Corporate Websites, alle haben das gleiche konsistente Design und sind vom Betrachter sofort einem Unternehmen zuzuordnen.","og_url":"https:\/\/www.visionconnect.de\/blog\/2017\/styleguides-mit-konsistenz-vertrauen-schaffen\/","og_site_name":"VisionConnect GmbH Blog","article_publisher":"https:\/\/www.facebook.com\/VisionConnectGmbH","article_author":"www.facebook.com\/Y.Scherzer","article_published_time":"2017-05-19T07:58:01+00:00","article_modified_time":"2022-04-29T06:50:42+00:00","og_image":[{"width":590,"height":331,"url":"https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2017\/03\/design-styleguides-mit-konsistenz-vertrauen-schaffen.jpg","type":"image\/jpeg"}],"author":"Yvonne Scherzer","twitter_card":"summary_large_image","twitter_description":"Konsistentes Design schafft Vertrauen! Mit Styleguides werden Regeln, Standards, Bausteine hinsichtlich des Designs verbindlich festgelegt.","twitter_image":"https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2017\/03\/design-styleguides-mit-konsistenz-vertrauen-schaffen.jpg","twitter_creator":"@elbeallee","twitter_site":"@visionconnect","twitter_misc":{"Geschrieben von":"Yvonne Scherzer","Gesch\u00e4tzte Lesezeit":"10\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.visionconnect.de\/blog\/2017\/styleguides-mit-konsistenz-vertrauen-schaffen\/#article","isPartOf":{"@id":"https:\/\/www.visionconnect.de\/blog\/2017\/styleguides-mit-konsistenz-vertrauen-schaffen\/"},"author":{"name":"Yvonne Scherzer","@id":"https:\/\/www.visionconnect.de\/blog\/#\/schema\/person\/a82b6a4e5ceec47e4e9fddf6d9a8ceba"},"headline":"Styleguides \u2013 mit Konsistenz Vertrauen schaffen","datePublished":"2017-05-19T07:58:01+00:00","dateModified":"2022-04-29T06:50:42+00:00","mainEntityOfPage":{"@id":"https:\/\/www.visionconnect.de\/blog\/2017\/styleguides-mit-konsistenz-vertrauen-schaffen\/"},"wordCount":1346,"commentCount":0,"image":{"@id":"https:\/\/www.visionconnect.de\/blog\/2017\/styleguides-mit-konsistenz-vertrauen-schaffen\/#primaryimage"},"thumbnailUrl":"https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2017\/03\/programming-2115930_1920.jpg","keywords":["CMS","Marketing","Rebrush","Relaunch","Tipps","Usability"],"articleSection":["Design"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.visionconnect.de\/blog\/2017\/styleguides-mit-konsistenz-vertrauen-schaffen\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.visionconnect.de\/blog\/2017\/styleguides-mit-konsistenz-vertrauen-schaffen\/","url":"https:\/\/www.visionconnect.de\/blog\/2017\/styleguides-mit-konsistenz-vertrauen-schaffen\/","name":"Styleguides \u2013 mit Konsistenz Vertrauen schaffen - VisionConnect: TYPO3 CMS, Wordpress, Shops - Ihre Agentur in Hannover","isPartOf":{"@id":"https:\/\/www.visionconnect.de\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.visionconnect.de\/blog\/2017\/styleguides-mit-konsistenz-vertrauen-schaffen\/#primaryimage"},"image":{"@id":"https:\/\/www.visionconnect.de\/blog\/2017\/styleguides-mit-konsistenz-vertrauen-schaffen\/#primaryimage"},"thumbnailUrl":"https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2017\/03\/programming-2115930_1920.jpg","datePublished":"2017-05-19T07:58:01+00:00","dateModified":"2022-04-29T06:50:42+00:00","author":{"@id":"https:\/\/www.visionconnect.de\/blog\/#\/schema\/person\/a82b6a4e5ceec47e4e9fddf6d9a8ceba"},"description":"Konsistentes Design schafft Vertrauen! Mit Styleguides werden Regeln, Standards, Bausteine hinsichtlich des Designs verbindlich festgelegt.","breadcrumb":{"@id":"https:\/\/www.visionconnect.de\/blog\/2017\/styleguides-mit-konsistenz-vertrauen-schaffen\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.visionconnect.de\/blog\/2017\/styleguides-mit-konsistenz-vertrauen-schaffen\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.visionconnect.de\/blog\/2017\/styleguides-mit-konsistenz-vertrauen-schaffen\/#primaryimage","url":"https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2017\/03\/programming-2115930_1920.jpg","contentUrl":"https:\/\/www.visionconnect.de\/blog\/wp-content\/uploads\/2017\/03\/programming-2115930_1920.jpg","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/www.visionconnect.de\/blog\/2017\/styleguides-mit-konsistenz-vertrauen-schaffen\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.visionconnect.de\/blog\/"},{"@type":"ListItem","position":2,"name":"Styleguides \u2013 mit Konsistenz Vertrauen schaffen"}]},{"@type":"WebSite","@id":"https:\/\/www.visionconnect.de\/blog\/#website","url":"https:\/\/www.visionconnect.de\/blog\/","name":"VisionConnect GmbH Blog","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.visionconnect.de\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Person","@id":"https:\/\/www.visionconnect.de\/blog\/#\/schema\/person\/a82b6a4e5ceec47e4e9fddf6d9a8ceba","name":"Yvonne Scherzer","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/secure.gravatar.com\/avatar\/7d64f53d285da0cf54ed03465146356a309226e1d76fd837c8cdf6095821bc6c?s=96&d=mm&r=pg","url":"https:\/\/secure.gravatar.com\/avatar\/7d64f53d285da0cf54ed03465146356a309226e1d76fd837c8cdf6095821bc6c?s=96&d=mm&r=pg","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7d64f53d285da0cf54ed03465146356a309226e1d76fd837c8cdf6095821bc6c?s=96&d=mm&r=pg","caption":"Yvonne Scherzer"},"description":"Seit mehr als 15 Jahren arbeite ich als Webdesignerin bei VisionConnect GmbH. Eine Aufgabe, die sehr vielf\u00e4ltig ist und wirklich Spa\u00df macht. Neben der virtuellen Arbeit tausche ich in meiner Freizeit gerne Monitor gegen Pinsel und Staffelei.","sameAs":["http:\/\/www.visionconnect.de","www.facebook.com\/Y.Scherzer","https:\/\/x.com\/elbeallee"],"url":"https:\/\/www.visionconnect.de\/blog\/author\/scherzer\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.visionconnect.de\/blog\/wp-json\/wp\/v2\/posts\/1093","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.visionconnect.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.visionconnect.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.visionconnect.de\/blog\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.visionconnect.de\/blog\/wp-json\/wp\/v2\/comments?post=1093"}],"version-history":[{"count":30,"href":"https:\/\/www.visionconnect.de\/blog\/wp-json\/wp\/v2\/posts\/1093\/revisions"}],"predecessor-version":[{"id":1846,"href":"https:\/\/www.visionconnect.de\/blog\/wp-json\/wp\/v2\/posts\/1093\/revisions\/1846"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.visionconnect.de\/blog\/wp-json\/wp\/v2\/media\/1125"}],"wp:attachment":[{"href":"https:\/\/www.visionconnect.de\/blog\/wp-json\/wp\/v2\/media?parent=1093"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.visionconnect.de\/blog\/wp-json\/wp\/v2\/categories?post=1093"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.visionconnect.de\/blog\/wp-json\/wp\/v2\/tags?post=1093"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}} - www.ci-portal.de\/styleguides\/<\/a> (Corporate Design Manuals und Styleguides)<\/li>\n
- www.designtagebuch.de\/wiki\/corporate-design-manuals\/<\/a> (Stand 03\/2017: 240 Manuals\/Handb\u00fccher)<\/li>\n