{"id":1604,"date":"2015-10-26T10:51:13","date_gmt":"2015-10-26T10:51:13","guid":{"rendered":"https:\/\/blogs.gov.scot\/digital\/?p=1604"},"modified":"2018-02-19T17:30:16","modified_gmt":"2018-02-19T17:30:16","slug":"design-style-guide","status":"publish","type":"post","link":"https:\/\/blogs.gov.scot\/digital\/2015\/10\/26\/design-style-guide\/","title":{"rendered":"Design style guide"},"content":{"rendered":"

This is a post by Chay Nicholson, our Creative Lead.<\/em><\/p>\n

The first pass of our Design style guide has just been published to the mygov.scot resources site<\/a>. The Design style guide aims to provide guidance to developers and designers in producing digital services for or aligned with mygov.scot<\/a>.<\/p>\n

The guide covers design thinking and approach, as well as providing inline working examples of components. In this sense it is an amalgamation of design elements and style guide – putting the what<\/em>, and the why <\/em>in the same place.\u00a0By providing the context around decisions that we have made, we can hopefully help designers and developers come up with solutions in situations where there may not be a\u00a0pre-prescribed solution. An example of this is where it may be necessary to fine-tune spacing to compensate for the css interpretation of line-height.<\/p>\n

\"\"<\/a>

Some fine-tuning of text margins is sometimes required to compensate for the css interpretation of line-height, which takes its reference from the centre line rather than the baseline of the type.<\/p><\/div>\n

<\/p>\n

There’s more to come, but for the time-being, we have focused on The grid, Typography and Link\/button language:<\/p>\n

The grid<\/strong>\u00a0\u2013 The grid is the\u00a0backbone of every site; it informs layout and provides a visual framework for layout and vertical rhythm. This section of the Design style guide is where you can read about everything grid-related.<\/p>\n

Typography<\/strong>\u00a0\u2013 Good legible type facilitates quick and easy digestion of information. There are many factors that contribute to good typography and good readability. It’s\u00a0not just a pretty face.<\/p>\n

Link\/button language<\/strong> \u2013\u00a0The creation of\u00a0buttons and links is easy… until you realise that users don’t interact with them in the way that you anticipated. Over the coming weeks we’ll be sharing some thoughts on\u00a0this\u00a0and how others can learn from our findings.<\/p>\n

There’s lots still to come: Colour palette; Refinements to list items, accordions and tabs; Further detail around link and button language elements; Additional elements as they are developed.<\/p>\n

We’re not there yet, there are some gaps to fill and a few creases to iron out. With that in mind, take a look at the guide and let us know what you think.<\/p>\n

We\u2019ll be sharing updates on this, and much more on social, so follow the team via @mygovscot on Twitter<\/a> for more updates. Want to comment? Get in touch below!<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"

This is a post by Chay Nicholson, our Creative Lead. The first pass of our Design style guide has just been published to the mygov.scot resources site. The Design style guide aims to provide guidance to developers and designers in producing digital services for or aligned with mygov.scot. The guide covers design thinking and approach,…<\/p>\n","protected":false},"author":401,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,10],"tags":[68],"class_list":["post-1604","post","type-post","status-publish","format-standard","hentry","category-digital-public-services","category-mygov-scot","tag-design-and-user-experience"],"yoast_head":"\nDesign style guide - 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\/2015\/10\/26\/design-style-guide\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Design style guide - Digital\" \/>\n<meta property=\"og:description\" content=\"This is a post by Chay Nicholson, our Creative Lead. The first pass of our Design style guide has just been published to the mygov.scot resources site. The Design style guide aims to provide guidance to developers and designers in producing digital services for or aligned with mygov.scot. The guide covers design thinking and approach,...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blogs.gov.scot\/digital\/2015\/10\/26\/design-style-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"Digital\" \/>\n<meta property=\"article:published_time\" content=\"2015-10-26T10:51:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-02-19T17:30:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blogs.gov.scot\/digital\/wp-content\/uploads\/sites\/5\/2017\/07\/design-style-guide.png\" \/>\n\t<meta property=\"og:image:width\" content=\"700\" \/>\n\t<meta property=\"og:image:height\" content=\"700\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"craigmilligan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"craigmilligan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/blogs.gov.scot\/digital\/2015\/10\/26\/design-style-guide\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/blogs.gov.scot\/digital\/2015\/10\/26\/design-style-guide\/\"},\"author\":{\"name\":\"craigmilligan\",\"@id\":\"https:\/\/blogs.gov.scot\/digital\/#\/schema\/person\/ef1ff8acf7c47992d04cea9ca3f9b3e9\"},\"headline\":\"Design style guide\",\"datePublished\":\"2015-10-26T10:51:13+00:00\",\"dateModified\":\"2018-02-19T17:30:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/blogs.gov.scot\/digital\/2015\/10\/26\/design-style-guide\/\"},\"wordCount\":412,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/blogs.gov.scot\/digital\/2015\/10\/26\/design-style-guide\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blogs.gov.scot\/digital\/wp-content\/uploads\/sites\/5\/2017\/07\/design-style-guide.png\",\"keywords\":[\"Design and User Experience\"],\"articleSection\":[\"Digital Public Services\",\"mygov.scot\"],\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/blogs.gov.scot\/digital\/2015\/10\/26\/design-style-guide\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/blogs.gov.scot\/digital\/2015\/10\/26\/design-style-guide\/\",\"url\":\"https:\/\/blogs.gov.scot\/digital\/2015\/10\/26\/design-style-guide\/\",\"name\":\"Design style guide - Digital\",\"isPartOf\":{\"@id\":\"https:\/\/blogs.gov.scot\/digital\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/blogs.gov.scot\/digital\/2015\/10\/26\/design-style-guide\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/blogs.gov.scot\/digital\/2015\/10\/26\/design-style-guide\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blogs.gov.scot\/digital\/wp-content\/uploads\/sites\/5\/2017\/07\/design-style-guide.png\",\"datePublished\":\"2015-10-26T10:51:13+00:00\",\"dateModified\":\"2018-02-19T17:30:16+00:00\",\"author\":{\"@id\":\"https:\/\/blogs.gov.scot\/digital\/#\/schema\/person\/ef1ff8acf7c47992d04cea9ca3f9b3e9\"},\"breadcrumb\":{\"@id\":\"https:\/\/blogs.gov.scot\/digital\/2015\/10\/26\/design-style-guide\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/blogs.gov.scot\/digital\/2015\/10\/26\/design-style-guide\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/blogs.gov.scot\/digital\/2015\/10\/26\/design-style-guide\/#primaryimage\",\"url\":\"https:\/\/blogs.gov.scot\/digital\/wp-content\/uploads\/sites\/5\/2017\/07\/design-style-guide.png\",\"contentUrl\":\"https:\/\/blogs.gov.scot\/digital\/wp-content\/uploads\/sites\/5\/2017\/07\/design-style-guide.png\",\"width\":700,\"height\":700,\"caption\":\"Some fine-tuning of text margins is sometimes required to compensate for the css interpretation of line-height, which takes its reference from the centre line rather than the baseline of the type.\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/blogs.gov.scot\/digital\/2015\/10\/26\/design-style-guide\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/blogs.gov.scot\/digital\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Design style guide\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/blogs.gov.scot\/digital\/#website\",\"url\":\"https:\/\/blogs.gov.scot\/digital\/\",\"name\":\"Digital\",\"description\":\"Updates from the Scottish Government'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\/ef1ff8acf7c47992d04cea9ca3f9b3e9\",\"name\":\"craigmilligan\",\"url\":\"https:\/\/blogs.gov.scot\/digital\/author\/craigmilligan\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Design style guide - 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\/2015\/10\/26\/design-style-guide\/","og_locale":"en_GB","og_type":"article","og_title":"Design style guide - Digital","og_description":"This is a post by Chay Nicholson, our Creative Lead. The first pass of our Design style guide has just been published to the mygov.scot resources site. The Design style guide aims to provide guidance to developers and designers in producing digital services for or aligned with mygov.scot. The guide covers design thinking and approach,...","og_url":"https:\/\/blogs.gov.scot\/digital\/2015\/10\/26\/design-style-guide\/","og_site_name":"Digital","article_published_time":"2015-10-26T10:51:13+00:00","article_modified_time":"2018-02-19T17:30:16+00:00","og_image":[{"width":700,"height":700,"url":"https:\/\/blogs.gov.scot\/digital\/wp-content\/uploads\/sites\/5\/2017\/07\/design-style-guide.png","type":"image\/png"}],"author":"craigmilligan","twitter_card":"summary_large_image","twitter_misc":{"Written by":"craigmilligan","Estimated reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/blogs.gov.scot\/digital\/2015\/10\/26\/design-style-guide\/#article","isPartOf":{"@id":"https:\/\/blogs.gov.scot\/digital\/2015\/10\/26\/design-style-guide\/"},"author":{"name":"craigmilligan","@id":"https:\/\/blogs.gov.scot\/digital\/#\/schema\/person\/ef1ff8acf7c47992d04cea9ca3f9b3e9"},"headline":"Design style guide","datePublished":"2015-10-26T10:51:13+00:00","dateModified":"2018-02-19T17:30:16+00:00","mainEntityOfPage":{"@id":"https:\/\/blogs.gov.scot\/digital\/2015\/10\/26\/design-style-guide\/"},"wordCount":412,"commentCount":0,"image":{"@id":"https:\/\/blogs.gov.scot\/digital\/2015\/10\/26\/design-style-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/blogs.gov.scot\/digital\/wp-content\/uploads\/sites\/5\/2017\/07\/design-style-guide.png","keywords":["Design and User Experience"],"articleSection":["Digital Public Services","mygov.scot"],"inLanguage":"en-GB","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/blogs.gov.scot\/digital\/2015\/10\/26\/design-style-guide\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/blogs.gov.scot\/digital\/2015\/10\/26\/design-style-guide\/","url":"https:\/\/blogs.gov.scot\/digital\/2015\/10\/26\/design-style-guide\/","name":"Design style guide - Digital","isPartOf":{"@id":"https:\/\/blogs.gov.scot\/digital\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blogs.gov.scot\/digital\/2015\/10\/26\/design-style-guide\/#primaryimage"},"image":{"@id":"https:\/\/blogs.gov.scot\/digital\/2015\/10\/26\/design-style-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/blogs.gov.scot\/digital\/wp-content\/uploads\/sites\/5\/2017\/07\/design-style-guide.png","datePublished":"2015-10-26T10:51:13+00:00","dateModified":"2018-02-19T17:30:16+00:00","author":{"@id":"https:\/\/blogs.gov.scot\/digital\/#\/schema\/person\/ef1ff8acf7c47992d04cea9ca3f9b3e9"},"breadcrumb":{"@id":"https:\/\/blogs.gov.scot\/digital\/2015\/10\/26\/design-style-guide\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blogs.gov.scot\/digital\/2015\/10\/26\/design-style-guide\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/blogs.gov.scot\/digital\/2015\/10\/26\/design-style-guide\/#primaryimage","url":"https:\/\/blogs.gov.scot\/digital\/wp-content\/uploads\/sites\/5\/2017\/07\/design-style-guide.png","contentUrl":"https:\/\/blogs.gov.scot\/digital\/wp-content\/uploads\/sites\/5\/2017\/07\/design-style-guide.png","width":700,"height":700,"caption":"Some fine-tuning of text margins is sometimes required to compensate for the css interpretation of line-height, which takes its reference from the centre line rather than the baseline of the type."},{"@type":"BreadcrumbList","@id":"https:\/\/blogs.gov.scot\/digital\/2015\/10\/26\/design-style-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blogs.gov.scot\/digital\/"},{"@type":"ListItem","position":2,"name":"Design style guide"}]},{"@type":"WebSite","@id":"https:\/\/blogs.gov.scot\/digital\/#website","url":"https:\/\/blogs.gov.scot\/digital\/","name":"Digital","description":"Updates from the Scottish Government'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\/ef1ff8acf7c47992d04cea9ca3f9b3e9","name":"craigmilligan","url":"https:\/\/blogs.gov.scot\/digital\/author\/craigmilligan\/"}]}},"_links":{"self":[{"href":"https:\/\/blogs.gov.scot\/digital\/wp-json\/wp\/v2\/posts\/1604","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\/401"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.gov.scot\/digital\/wp-json\/wp\/v2\/comments?post=1604"}],"version-history":[{"count":0,"href":"https:\/\/blogs.gov.scot\/digital\/wp-json\/wp\/v2\/posts\/1604\/revisions"}],"wp:attachment":[{"href":"https:\/\/blogs.gov.scot\/digital\/wp-json\/wp\/v2\/media?parent=1604"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.gov.scot\/digital\/wp-json\/wp\/v2\/categories?post=1604"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.gov.scot\/digital\/wp-json\/wp\/v2\/tags?post=1604"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}