{"id":16339,"date":"2018-03-20T06:41:52","date_gmt":"2018-03-20T13:41:52","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=16339"},"modified":"2024-06-12T20:56:10","modified_gmt":"2024-06-13T03:56:10","slug":"create-component-based-websites-with-design-systems","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/design-systems\/create-component-based-websites-with-design-systems\/","title":{"rendered":"Create Component-Based Websites with Design Systems"},"content":{"rendered":"<p>While it\u2019s not necessarily a visual or interactive trend, design systems undoubtedly influence the look and feel of all the properties they govern. They provide the principles, tools, libraries, and code that create the trends we see on the web today.<\/p>\n<p>Design systems are becoming more than a trend\u2014they\u2019re a best practice that will last for a long time because of their usefulness. In the coming years, we can expect improved design consistency across the web.<\/p>\n<p>That doesn\u2019t mean that every website will look the same, but rather that each website will be more consistent with itself and with user expectations of functionality and usability.<\/p>\n<p>Design systems help solve the problems of scale that come with large and remote teams working together. They give everyone standardized principles and components, which leads to benefits including:<\/p>\n<ul>\n<li><strong>Faster time to market<\/strong>: Design systems create a Lego-like process where everything is reusable, minimizing the time spent rebuilding the same components.<\/li>\n<li><strong>Consistent UX across platforms and products<\/strong>: Standardized components create a much more coherent \u201clook and feel.\u201d<\/li>\n<li><strong>Less version control issues<\/strong>: If you update a component in a design system, the changes populate across all instances. The design system is the final record of truth.<\/li>\n<li><strong>Easier collaboration and communication<\/strong>: Design systems create a shared general knowledge base and components for designers, PMs, and engineers.<\/li>\n<\/ul>\n<p>That\u2019s why <a href=\"https:\/\/www.uxpin.com\/enterprise-ux-design-2017-2018-industry-report\">69% of 3157 designers surveyed<\/a> said they were currently building their own design system, if they didn\u2019t have one already.<\/p>\n<p>While only large companies had the resources to build design systems before, new tools and processes have now made it much more feasible for companies of all sizes. We\u2019ve seen it firsthand as small companies and agencies have even utilized UXPin\u2019s design systems platform.<\/p>\n<p>Let\u2019s explore the nuts and bolts of a design system, learn how to build one, and showcase a few examples of websites built using a design system.<\/p>\n<h2>What exactly is a design system?<\/h2>\n<p>First, let\u2019s get the definitions straight.<\/p>\n<ul>\n<li><strong>Design System<\/strong>: The complete set of design standards, documentation, and principles along with the toolkit (UI patterns and code components) to achieve those standards.<\/li>\n<li><strong>Pattern Library<\/strong>: A subclass in the design system, this is the set of design patterns for use across a company.<\/li>\n<li><strong>Style guide<\/strong>: Another subclass in the design system, this static documentation describes the design system itself: how products should look and feel, use cases for UI patterns, correct typographic scales, etc.<\/li>\n<\/ul>\n<p>Bottom line: A pattern library (e.g. set of symbols and assets in Sketch) and style guide are only parts of the much more robust design system.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-16332 size-large\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/03\/blog\u2013design-systems-1024x576.png\" alt=\"design systems blog UXPin\" width=\"660\" height=\"371\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/03\/blog\u2013design-systems-1024x576.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/03\/blog\u2013design-systems-533x300.png 533w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/03\/blog\u2013design-systems-768x432.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/03\/blog\u2013design-systems.png 1600w\" sizes=\"auto, (max-width: 660px) 100vw, 660px\" \/><\/p>\n<h2>How it all connects<\/h2>\n<p>First, keep your focus broad and think about the idea of design systems.<\/p>\n<p>At the broadest level, a design system is a living entity containing the common linguistics, principles, and tools to help teams build products coherently. As <a href=\"https:\/\/medium.com\/eightshapes-llc\/a-design-system-isn-t-a-project-it-s-a-product-serving-products-74dcfffef935\">Nathan Curtis says<\/a>, a \u201cdesign system isn\u2019t a project. It\u2019s a product serving products.\u201d<\/p>\n<p><a href=\"https:\/\/polaris.shopify.com\/\">Shopify\u2019s Polaris Design System<\/a> is one of the best examples. On the homepage, they\u2019ve already broken down all the core sections:<\/p>\n<ul>\n<li><strong>Product principles<\/strong>: What is the purpose and soul behind all the products?<\/li>\n<li><strong>Written content<\/strong>: How should the product\u2019s interface copy look and feel?<\/li>\n<li><strong>Visual properties<\/strong>: What should the \u201cskin\u201d of the product look and feel like?<\/li>\n<li><strong>Components<\/strong>: What are the UI patterns and code components needed to build products coherently across devices?<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-16333 size-large\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/03\/blog-design-systems-examle-shopify-1024x486.png\" alt=\"design systems example shopify\" width=\"660\" height=\"313\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/03\/blog-design-systems-examle-shopify-1024x486.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/03\/blog-design-systems-examle-shopify-633x300.png 633w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/03\/blog-design-systems-examle-shopify-768x364.png 768w\" sizes=\"auto, (max-width: 660px) 100vw, 660px\" \/><\/p>\n<p style=\"text-align: center;\"><em>Shopify\u2019s Polaris Design System<\/em><\/p>\n<p>In this case, Polaris is the complete design system of principles, written content, visual properties, and components. The style guide is simply the static documentation on the Polaris website which describes how to use the design system. The pattern library is part of the components in the Polaris design system.<\/p>\n<p>The differences are subtle but unmistakably important when it comes to improving product development. A style guide on its own becomes quickly updated since documentation requires maintenance. A pattern library lacks the instructions and principles for coherent implementation.<\/p>\n<p>The design system ties everything together.<\/p>\n<h2>How to create a design system<\/h2>\n<p>Now that you know what these terms mean and how they work together, let\u2019s quickly review how to build a design system. Here is a quick excerpt from our 50-page ebook <a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/create-design-system-guide-checklist\/\"><i>Creating a Design System: The 100-Point Process Checklist<\/i><\/a>.<\/p>\n<ul>\n<li><strong>Create the UI inventory<\/strong>: First list and describe all of the design patterns currently used in your interface and note the inconsistencies therein.<\/li>\n<li><strong>Get support of the organization<\/strong>: Present your findings and explain the utility of a common design language to everyone. As explained in our <a href=\"https:\/\/www.uxpin.com\/evangelizing-design-system-roi-template\">Evangelizing Design Systems templates<\/a>, estimate the number of design and engineering hours wasted on redundant work and how product coherence can improve NPS scores.<\/li>\n<li><strong>Establish design principles<\/strong>: Codify your practices. You\u2019re now starting to work on the style guide for the design system.<\/li>\n<li><strong>Build the color palette<\/strong>: When building the UI inventory, we found 116 different shades of grey that needed consolidation. Create the palette and its naming convention.<\/li>\n<li><strong>Build the typographic scale<\/strong>: You can optimize the scale to serve existing styles, or you might try to build a harmonious scale using the golden ratio or major second. When building the scale, don\u2019t forget that you\u2019re not only setting the size of the font, but also weight, line-height and other properties.<\/li>\n<li><strong>Implement icons library and other styles<\/strong>: Decide which icons from the UI inventory will become part of the design system, then <a href=\"https:\/\/medium.com\/@marcintreder\/design-system-sprint-6-the-fastest-icons-on-earth-bf91c0a47ef9\">standardize the implementation<\/a>.<\/li>\n<li><strong>Start building your first patterns<\/strong>: This is the task that will never end. Patterns should always either reflect the truth about the product, or reflect the aspirational state of the product in the near future.<\/li>\n<\/ul>\n<h2>Websites built with a design system<\/h2>\n<p>You can find plenty of websites that describe <a href=\"http:\/\/styleguides.io\/examples\">each company\u2019s design system<\/a>.<\/p>\n<p>But what does a website look and feel like when it\u2019s built with a design system? It is much more logical, consistent, and better-performing thanks to less code bloat.<\/p>\n<p>Here are a few websites that were built with the principles and toolkits of some of the best design systems around.<\/p>\n<p><a href=\"https:\/\/www.ge.com\/digital\/\"><strong>GE Digital<\/strong><\/a><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-16334 size-large\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/03\/blog-ge-1024x526.png\" alt=\"blog\" width=\"660\" height=\"339\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/03\/blog-ge-1024x526.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/03\/blog-ge-584x300.png 584w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/03\/blog-ge-768x395.png 768w\" sizes=\"auto, (max-width: 660px) 100vw, 660px\" \/><\/p>\n<p><i>Built according to <\/i><a href=\"https:\/\/www.predix-ui.com\/#\/gallery\"><i>Predix<\/i> <\/a><i>design system.<\/i><\/p>\n<p><strong><a href=\"http:\/\/www.shopify.com\">Shopify<\/a><\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-16335 size-large\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/03\/blog-shopify-1024x526.png\" alt=\"shopify blog\" width=\"660\" height=\"339\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/03\/blog-shopify-1024x526.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/03\/blog-shopify-584x300.png 584w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/03\/blog-shopify-768x395.png 768w\" sizes=\"auto, (max-width: 660px) 100vw, 660px\" \/><\/p>\n<p><i>Built according to <\/i><a href=\"https:\/\/polaris.shopify.com\/\"><i>Polaris design system<\/i><\/a><i>.<\/i><\/p>\n<p><strong><a href=\"https:\/\/www.atlassian.com\/\">Atlassian<\/a><\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-16336 size-large\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/03\/blog-atlassian-1024x526.png\" alt=\"atlassian blogs\" width=\"660\" height=\"339\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/03\/blog-atlassian-1024x526.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/03\/blog-atlassian-584x300.png 584w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/03\/blog-atlassian-768x395.png 768w\" sizes=\"auto, (max-width: 660px) 100vw, 660px\" \/><\/p>\n<p><i>Built according to <\/i><a href=\"https:\/\/atlassian.design\/\"><i>Atlassian Design Guidelines<\/i><\/a><i>. <\/i><\/p>\n<p><strong><a href=\"https:\/\/mailchimp.com\/\">MailChimp<\/a><\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-16338 size-large\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/03\/blog-mailchimp-1024x518.png\" alt=\"mailchimp blog\" width=\"660\" height=\"334\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/03\/blog-mailchimp-1024x518.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/03\/blog-mailchimp-593x300.png 593w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/03\/blog-mailchimp-768x389.png 768w\" sizes=\"auto, (max-width: 660px) 100vw, 660px\" \/><\/p>\n<p><i>Built according to <\/i><a href=\"http:\/\/ux.mailchimp.com\/patterns\/\"><i>MailChimp Design System<\/i><\/a><i>. <\/i><\/p>\n<p><strong><a href=\"http:\/\/github.com\">Github<\/a><\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-16337 size-large\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/03\/blog-github-1024x526.png\" alt=\"github blog\" width=\"660\" height=\"339\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/03\/blog-github-1024x526.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/03\/blog-github-584x300.png 584w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/03\/blog-github-768x395.png 768w\" sizes=\"auto, (max-width: 660px) 100vw, 660px\" \/><\/p>\n<p><i>Built according to <\/i><a href=\"https:\/\/github.com\/styleguide\"><i>Github Design System<\/i><\/a><\/p>\n<p>This is an excerpt from our full-length ebook, an overview of web design trends. You can read the <a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/web-design-trends-2018\/\">full ebook for free here<\/a>. If you\u2019re interested in learning more about design systems, click here to view recordings of <a href=\"https:\/\/www.uxpin.com\/design-systems-virtual-summit-2018\">UXPin\u2019s Design Systems Virtual Summit<\/a>. Try UXPin\u2019s design systems capabilities <a href=\"https:\/\/www.uxpin.com\/\">for free here<\/a>.<\/p>\n<p><strong>UXPin is the design process tool that helps product teams around the world turn ideas into products faster.<\/strong><\/p>\n<p><strong>With Merge, UXPin\u2019s revolutionary technology, companies like PayPal can easily solve DesignOps challenges. <a href=\"https:\/\/www.uxpin.com\/merge\">UXPin Merge<\/a> allows you to design with React components to achieve full consistency with the final product.<\/strong><\/p>\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.uxpin.com\/merge\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"300\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/01\/MergeAccess_Blog-13.png\" alt=\"MergeAccess Blog 13\" class=\"wp-image-23511\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/01\/MergeAccess_Blog-13.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/01\/MergeAccess_Blog-13-700x280.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/a><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>While it\u2019s not necessarily a visual or interactive trend, design systems undoubtedly influence the look and feel of all the properties they govern. They provide the principles, tools, libraries, and code that create the trends we see on the web today. Design systems are becoming more than a trend\u2014they\u2019re a best practice that will last<\/p>\n","protected":false},"author":9,"featured_media":16331,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,199,174,7],"tags":[],"class_list":["post-16339","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-design-systems","category-enterprise-ux","category-web-design"],"yoast_title":"","yoast_metadesc":"Design systems are becoming more than a trend\u2014they\u2019re a best practice that will extend far beyond 2018.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Create Component-Based Websites with Design Systems | UXPin<\/title>\n<meta name=\"description\" content=\"Design systems are becoming more than a trend\u2014they\u2019re a best practice that will extend far beyond 2018.\" \/>\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.uxpin.com\/studio\/design-systems\/create-component-based-websites-with-design-systems\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create Component-Based Websites with Design Systems\" \/>\n<meta property=\"og:description\" content=\"Design systems are becoming more than a trend\u2014they\u2019re a best practice that will extend far beyond 2018.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/design-systems\/create-component-based-websites-with-design-systems\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2018-03-20T13:41:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-06-13T03:56:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/03\/header-blog-uxpin-blog.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1400\" \/>\n\t<meta property=\"og:image:height\" content=\"400\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jerry Cao\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jerry Cao\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/design-systems\\\/create-component-based-websites-with-design-systems\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/design-systems\\\/create-component-based-websites-with-design-systems\\\/\"},\"author\":{\"name\":\"Jerry Cao\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e58da1b4c401eb288436977eb9810a18\"},\"headline\":\"Create Component-Based Websites with Design Systems\",\"datePublished\":\"2018-03-20T13:41:52+00:00\",\"dateModified\":\"2024-06-13T03:56:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/design-systems\\\/create-component-based-websites-with-design-systems\\\/\"},\"wordCount\":1156,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/design-systems\\\/create-component-based-websites-with-design-systems\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2018\\\/03\\\/header-blog-uxpin-blog.png\",\"articleSection\":[\"Blog\",\"Design Systems\",\"Enterprise UX\",\"Web Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/design-systems\\\/create-component-based-websites-with-design-systems\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/design-systems\\\/create-component-based-websites-with-design-systems\\\/\",\"name\":\"Create Component-Based Websites with Design Systems | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/design-systems\\\/create-component-based-websites-with-design-systems\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/design-systems\\\/create-component-based-websites-with-design-systems\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2018\\\/03\\\/header-blog-uxpin-blog.png\",\"datePublished\":\"2018-03-20T13:41:52+00:00\",\"dateModified\":\"2024-06-13T03:56:10+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e58da1b4c401eb288436977eb9810a18\"},\"description\":\"Design systems are becoming more than a trend\u2014they\u2019re a best practice that will extend far beyond 2018.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/design-systems\\\/create-component-based-websites-with-design-systems\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/design-systems\\\/create-component-based-websites-with-design-systems\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/design-systems\\\/create-component-based-websites-with-design-systems\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2018\\\/03\\\/header-blog-uxpin-blog.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2018\\\/03\\\/header-blog-uxpin-blog.png\",\"width\":1400,\"height\":400,\"caption\":\"header blog uxpin blog\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/design-systems\\\/create-component-based-websites-with-design-systems\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create Component-Based Websites with Design Systems\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e58da1b4c401eb288436977eb9810a18\",\"name\":\"Jerry Cao\",\"description\":\"Jerry Cao is a content strategist at UXPin where he gets to put his overly active imagination to paper every day. In a past life, he developed content strategies for clients at Brafton and worked in traditional advertising at DDB San Francisco. In his spare time he enjoys playing electric guitar, watching foreign horror films, and expanding his knowledge of random facts. Follow him on Twitter.\",\"sameAs\":[\"http:\\\/\\\/uxpin.com\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/jerrycao\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Create Component-Based Websites with Design Systems | UXPin","description":"Design systems are becoming more than a trend\u2014they\u2019re a best practice that will extend far beyond 2018.","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.uxpin.com\/studio\/design-systems\/create-component-based-websites-with-design-systems\/","og_locale":"en_US","og_type":"article","og_title":"Create Component-Based Websites with Design Systems","og_description":"Design systems are becoming more than a trend\u2014they\u2019re a best practice that will extend far beyond 2018.","og_url":"https:\/\/www.uxpin.com\/studio\/design-systems\/create-component-based-websites-with-design-systems\/","og_site_name":"Studio by UXPin","article_published_time":"2018-03-20T13:41:52+00:00","article_modified_time":"2024-06-13T03:56:10+00:00","og_image":[{"width":1400,"height":400,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/03\/header-blog-uxpin-blog.png","type":"image\/png"}],"author":"Jerry Cao","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Jerry Cao","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/design-systems\/create-component-based-websites-with-design-systems\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/design-systems\/create-component-based-websites-with-design-systems\/"},"author":{"name":"Jerry Cao","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e58da1b4c401eb288436977eb9810a18"},"headline":"Create Component-Based Websites with Design Systems","datePublished":"2018-03-20T13:41:52+00:00","dateModified":"2024-06-13T03:56:10+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/design-systems\/create-component-based-websites-with-design-systems\/"},"wordCount":1156,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/design-systems\/create-component-based-websites-with-design-systems\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/03\/header-blog-uxpin-blog.png","articleSection":["Blog","Design Systems","Enterprise UX","Web Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/design-systems\/create-component-based-websites-with-design-systems\/","url":"https:\/\/www.uxpin.com\/studio\/design-systems\/create-component-based-websites-with-design-systems\/","name":"Create Component-Based Websites with Design Systems | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/design-systems\/create-component-based-websites-with-design-systems\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/design-systems\/create-component-based-websites-with-design-systems\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/03\/header-blog-uxpin-blog.png","datePublished":"2018-03-20T13:41:52+00:00","dateModified":"2024-06-13T03:56:10+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e58da1b4c401eb288436977eb9810a18"},"description":"Design systems are becoming more than a trend\u2014they\u2019re a best practice that will extend far beyond 2018.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/design-systems\/create-component-based-websites-with-design-systems\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/design-systems\/create-component-based-websites-with-design-systems\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/design-systems\/create-component-based-websites-with-design-systems\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/03\/header-blog-uxpin-blog.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2018\/03\/header-blog-uxpin-blog.png","width":1400,"height":400,"caption":"header blog uxpin blog"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/design-systems\/create-component-based-websites-with-design-systems\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"Create Component-Based Websites with Design Systems"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e58da1b4c401eb288436977eb9810a18","name":"Jerry Cao","description":"Jerry Cao is a content strategist at UXPin where he gets to put his overly active imagination to paper every day. In a past life, he developed content strategies for clients at Brafton and worked in traditional advertising at DDB San Francisco. In his spare time he enjoys playing electric guitar, watching foreign horror films, and expanding his knowledge of random facts. Follow him on Twitter.","sameAs":["http:\/\/uxpin.com"],"url":"https:\/\/www.uxpin.com\/studio\/author\/jerrycao\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/16339","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=16339"}],"version-history":[{"count":5,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/16339\/revisions"}],"predecessor-version":[{"id":53507,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/16339\/revisions\/53507"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/16331"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=16339"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=16339"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=16339"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}