{"id":3898,"date":"2021-07-21T08:59:29","date_gmt":"2021-07-21T08:59:29","guid":{"rendered":"https:\/\/blogs.gov.scot\/digital\/?p=3898"},"modified":"2021-07-21T08:59:29","modified_gmt":"2021-07-21T08:59:29","slug":"what-is-a-design-system-and-why-do-we-need-one-for-planning","status":"publish","type":"post","link":"https:\/\/blogs.gov.scot\/digital\/2021\/07\/21\/what-is-a-design-system-and-why-do-we-need-one-for-planning\/","title":{"rendered":"What is a design system and why do we need one for planning?"},"content":{"rendered":"<p><strong>A design system is a toolkit of reusable components which together make up the overall interface that users will interact with \u2013 this short guest blog by <a href=\"https:\/\/www.transformingplanning.scot\/news?\">Scottish Government Digital Planning<\/a>\u00a0colleagues explores the process of creating such a system and the benefits it will deliver.\u00a0<\/strong><\/p>\n<p>A design system is a <strong>toolkit of reusable components<\/strong> &#8211; for example:<\/p>\n<ul>\n<li>buttons<\/li>\n<li>headers<\/li>\n<li>form input<\/li>\n<li>navigation, and more<\/li>\n<\/ul>\n<p>Basically, everything that together makes up the overall interface users will interact with &#8211; which can be deployed in different combinations to build products and services.<\/p>\n<p>A design system explains how element interactions work. For example, what happens when you focus on a button, what error messages look and act like and how the page responsively reacts to varying window or device sizes.<\/p>\n<p>Developing a design system for planning early in our transformation programme will enable us to create services and products more easily, with greater consistency and will allow us to have others such as private sector suppliers develop parts of the planning ecosystem that meet our design standards.<\/p>\n<p>Some components used in the design system for planning, including form fields and labels, button styles , headers, text and colours<\/p>\n<p>Prior to the launch of the <a href=\"https:\/\/www.gov.scot\/publications\/transforming-places-together-scotlands-digital-strategy-planning\/\">Digital Strategy for Planning<\/a> we were designing <a href=\"https:\/\/www.transformingplanning.scot\/digital-planning\/visualising-the-future\/\">concept prototypes<\/a> without a strict component library which allowed us to get ideas out there quickly however this lacked the consistency and scalability required for effective service design.<\/p>\n<p>Our aim is for new services to be a consistent, quality and familiar experience for people. This will ensure people feel confident they are engaging with a trustworthy, end-to-end system.<\/p>\n<p>The Design System for Planning will be modular by nature and create an environment that allows our product teams to focus more on the problems they are trying to solve rather than worrying about the visual aspect of it.<\/p>\n<p>Our teams responsible for developing the future digital planning system will be able to use our design system\u2019s library of components to build the product they are working on and when they identify the need for a new element we will design one, test it and incorporate it into the wider design system allowing the product teams to use it.<\/p>\n<p>Prioritisation of components creation will be driven by our focused delivery roadmap.<\/p>\n<p><strong>The design system is a living document<\/strong><\/p>\n<p>We are closely aligned to the <a href=\"https:\/\/designsystem.gov.scot\/\">Scottish Government\u2019s Design System<\/a> and because much of the heavy lifting has been done for us here it allows us to start with a strong foundation and to act quickly for future developments. This alignment is also great news as it will create further consistency and familiarity across government while also giving us flexibility to apply our own styles or branding.<\/p>\n<p>Our design system will be an open, living document which, as the programme progresses, will be constantly added to and updated.<\/p>\n<p>We are using a collaborative interface design tool called <a href=\"https:\/\/www.figma.com\/\">Figma<\/a> to create, manage and share the Design System.<\/p>\n<p>You can check out our<a href=\"https:\/\/www.figma.com\/file\/3PzmBbAueJv71QFdhQUSur\/Design-System?node-id=322%3A1837\"> progress in creating the Design System for Planning<\/a>.<\/p>\n<p>The Design System for Planning will enable us and our partners to build the products and services set out in the Digital Strategy for Planning with consistency, efficiency and scalability.<\/p>\n<p>Follow us on Twitter <a href=\"https:\/\/twitter.com\/digiplanningsg\">@DigiPlanningSG<\/a> for updates on our activities as we progress with work on the Design System for Planning.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A design system is a toolkit of reusable components which together make up the overall interface that users will interact with \u2013 this short guest blog by Scottish Government Digital Planning\u00a0colleagues explores the process of creating such a system and the benefits it will deliver.\u00a0 A design system is a toolkit of reusable components &#8211;&#8230;<\/p>\n","protected":false},"author":317,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[253],"tags":[266,254,267],"class_list":["post-3898","post","type-post","status-publish","format-standard","hentry","category-digital-scotland-design-system","tag-design-system-for-planning","tag-digital-scotland-design-system","tag-reusable"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>What is a design system and why do we need one for planning? - Digital<\/title>\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.gov.scot\/digital\/2021\/07\/21\/what-is-a-design-system-and-why-do-we-need-one-for-planning\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What is a design system and why do we need one for planning? - Digital\" \/>\n<meta property=\"og:description\" content=\"A design system is a toolkit of reusable components which together make up the overall interface that users will interact with \u2013 this short guest blog by Scottish Government Digital Planning\u00a0colleagues explores the process of creating such a system and the benefits it will deliver.\u00a0 A design system is a toolkit of reusable components &#8211;...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blogs.gov.scot\/digital\/2021\/07\/21\/what-is-a-design-system-and-why-do-we-need-one-for-planning\/\" \/>\n<meta property=\"og:site_name\" content=\"Digital\" \/>\n<meta property=\"article:published_time\" content=\"2021-07-21T08:59:29+00:00\" \/>\n<meta name=\"author\" content=\"Stewart Hamilton\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Stewart Hamilton\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/blogs.gov.scot\/digital\/2021\/07\/21\/what-is-a-design-system-and-why-do-we-need-one-for-planning\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/blogs.gov.scot\/digital\/2021\/07\/21\/what-is-a-design-system-and-why-do-we-need-one-for-planning\/\"},\"author\":{\"name\":\"Stewart Hamilton\",\"@id\":\"https:\/\/blogs.gov.scot\/digital\/#\/schema\/person\/fd47935c780321ad6c4ecbb2f10da552\"},\"headline\":\"What is a design system and why do we need one for planning?\",\"datePublished\":\"2021-07-21T08:59:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/blogs.gov.scot\/digital\/2021\/07\/21\/what-is-a-design-system-and-why-do-we-need-one-for-planning\/\"},\"wordCount\":568,\"commentCount\":0,\"keywords\":[\"Design System for Planning\",\"Digital Scotland Design System\",\"reusable\"],\"articleSection\":[\"Digital Scotland Design System\"],\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/blogs.gov.scot\/digital\/2021\/07\/21\/what-is-a-design-system-and-why-do-we-need-one-for-planning\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/blogs.gov.scot\/digital\/2021\/07\/21\/what-is-a-design-system-and-why-do-we-need-one-for-planning\/\",\"url\":\"https:\/\/blogs.gov.scot\/digital\/2021\/07\/21\/what-is-a-design-system-and-why-do-we-need-one-for-planning\/\",\"name\":\"What is a design system and why do we need one for planning? - Digital\",\"isPartOf\":{\"@id\":\"https:\/\/blogs.gov.scot\/digital\/#website\"},\"datePublished\":\"2021-07-21T08:59:29+00:00\",\"author\":{\"@id\":\"https:\/\/blogs.gov.scot\/digital\/#\/schema\/person\/fd47935c780321ad6c4ecbb2f10da552\"},\"breadcrumb\":{\"@id\":\"https:\/\/blogs.gov.scot\/digital\/2021\/07\/21\/what-is-a-design-system-and-why-do-we-need-one-for-planning\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/blogs.gov.scot\/digital\/2021\/07\/21\/what-is-a-design-system-and-why-do-we-need-one-for-planning\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/blogs.gov.scot\/digital\/2021\/07\/21\/what-is-a-design-system-and-why-do-we-need-one-for-planning\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/blogs.gov.scot\/digital\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"What is a design system and why do we need one for planning?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/blogs.gov.scot\/digital\/#website\",\"url\":\"https:\/\/blogs.gov.scot\/digital\/\",\"name\":\"Digital\",\"description\":\"Updates from the Scottish Government&#039;s Digital Directorate\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/blogs.gov.scot\/digital\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/blogs.gov.scot\/digital\/#\/schema\/person\/fd47935c780321ad6c4ecbb2f10da552\",\"name\":\"Stewart Hamilton\",\"description\":\"Communications and Engagement Officer\",\"url\":\"https:\/\/blogs.gov.scot\/digital\/author\/stewarthamilton\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"What is a design system and why do we need one for planning? - Digital","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.gov.scot\/digital\/2021\/07\/21\/what-is-a-design-system-and-why-do-we-need-one-for-planning\/","og_locale":"en_GB","og_type":"article","og_title":"What is a design system and why do we need one for planning? - Digital","og_description":"A design system is a toolkit of reusable components which together make up the overall interface that users will interact with \u2013 this short guest blog by Scottish Government Digital Planning\u00a0colleagues explores the process of creating such a system and the benefits it will deliver.\u00a0 A design system is a toolkit of reusable components &#8211;...","og_url":"https:\/\/blogs.gov.scot\/digital\/2021\/07\/21\/what-is-a-design-system-and-why-do-we-need-one-for-planning\/","og_site_name":"Digital","article_published_time":"2021-07-21T08:59:29+00:00","author":"Stewart Hamilton","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Stewart Hamilton","Estimated reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/blogs.gov.scot\/digital\/2021\/07\/21\/what-is-a-design-system-and-why-do-we-need-one-for-planning\/#article","isPartOf":{"@id":"https:\/\/blogs.gov.scot\/digital\/2021\/07\/21\/what-is-a-design-system-and-why-do-we-need-one-for-planning\/"},"author":{"name":"Stewart Hamilton","@id":"https:\/\/blogs.gov.scot\/digital\/#\/schema\/person\/fd47935c780321ad6c4ecbb2f10da552"},"headline":"What is a design system and why do we need one for planning?","datePublished":"2021-07-21T08:59:29+00:00","mainEntityOfPage":{"@id":"https:\/\/blogs.gov.scot\/digital\/2021\/07\/21\/what-is-a-design-system-and-why-do-we-need-one-for-planning\/"},"wordCount":568,"commentCount":0,"keywords":["Design System for Planning","Digital Scotland Design System","reusable"],"articleSection":["Digital Scotland Design System"],"inLanguage":"en-GB","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/blogs.gov.scot\/digital\/2021\/07\/21\/what-is-a-design-system-and-why-do-we-need-one-for-planning\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/blogs.gov.scot\/digital\/2021\/07\/21\/what-is-a-design-system-and-why-do-we-need-one-for-planning\/","url":"https:\/\/blogs.gov.scot\/digital\/2021\/07\/21\/what-is-a-design-system-and-why-do-we-need-one-for-planning\/","name":"What is a design system and why do we need one for planning? - Digital","isPartOf":{"@id":"https:\/\/blogs.gov.scot\/digital\/#website"},"datePublished":"2021-07-21T08:59:29+00:00","author":{"@id":"https:\/\/blogs.gov.scot\/digital\/#\/schema\/person\/fd47935c780321ad6c4ecbb2f10da552"},"breadcrumb":{"@id":"https:\/\/blogs.gov.scot\/digital\/2021\/07\/21\/what-is-a-design-system-and-why-do-we-need-one-for-planning\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blogs.gov.scot\/digital\/2021\/07\/21\/what-is-a-design-system-and-why-do-we-need-one-for-planning\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/blogs.gov.scot\/digital\/2021\/07\/21\/what-is-a-design-system-and-why-do-we-need-one-for-planning\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blogs.gov.scot\/digital\/"},{"@type":"ListItem","position":2,"name":"What is a design system and why do we need one for planning?"}]},{"@type":"WebSite","@id":"https:\/\/blogs.gov.scot\/digital\/#website","url":"https:\/\/blogs.gov.scot\/digital\/","name":"Digital","description":"Updates from the Scottish Government&#039;s Digital Directorate","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blogs.gov.scot\/digital\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Person","@id":"https:\/\/blogs.gov.scot\/digital\/#\/schema\/person\/fd47935c780321ad6c4ecbb2f10da552","name":"Stewart Hamilton","description":"Communications and Engagement Officer","url":"https:\/\/blogs.gov.scot\/digital\/author\/stewarthamilton\/"}]}},"_links":{"self":[{"href":"https:\/\/blogs.gov.scot\/digital\/wp-json\/wp\/v2\/posts\/3898","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.gov.scot\/digital\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.gov.scot\/digital\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.gov.scot\/digital\/wp-json\/wp\/v2\/users\/317"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.gov.scot\/digital\/wp-json\/wp\/v2\/comments?post=3898"}],"version-history":[{"count":0,"href":"https:\/\/blogs.gov.scot\/digital\/wp-json\/wp\/v2\/posts\/3898\/revisions"}],"wp:attachment":[{"href":"https:\/\/blogs.gov.scot\/digital\/wp-json\/wp\/v2\/media?parent=3898"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.gov.scot\/digital\/wp-json\/wp\/v2\/categories?post=3898"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.gov.scot\/digital\/wp-json\/wp\/v2\/tags?post=3898"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}