{"id":1477,"date":"2014-09-08T14:57:09","date_gmt":"2014-09-08T14:57:09","guid":{"rendered":"https:\/\/blogs.gov.scot\/digital\/?p=1477"},"modified":"2017-07-20T09:19:45","modified_gmt":"2017-07-20T09:19:45","slug":"dipping-design-composition-fundamentals","status":"publish","type":"post","link":"https:\/\/blogs.gov.scot\/digital\/2014\/09\/08\/dipping-design-composition-fundamentals\/","title":{"rendered":"Dipping into design \u2013 composition fundamentals"},"content":{"rendered":"

Design elements describe basic\u00a0ideas around the practice of good visual design. These elements include colour, shape, texture and space. I\u2019m going to dip into an aspect of this, exploring some fundamentals of composition, as this helps set the scene for\u00a0the work we will be doing \/ have done so far.<\/span><\/p>\n

We started\u00a0with\u00a0composition and typography \u2013\u00a0our\u00a0fundamentals<\/b><\/span><\/p>\n

As a design challenge, mygov.scot<\/span><\/a> is not that complicated in comparison to some of the more complex web projects out there. The creative angle\u00a0of this ever growing website is limited, as research so far has told us simplicity is a good thing for users. Initial\u00a0thoughts point to\u00a0things like\u00a0photography and graphics causing more harm than good, most notably if we\u00a0consider the speed at which they become outdated.<\/span><\/p>\n

At the same time, because it is so simple, it is also actually very complicated \u2013 as you spend more time on more granular aspects. Our approach will likely require an element of math to be involved the closer we look. It\u2019s not always the most obvious option that\u2019s the best option for us to take. We\u00a0can\u2019t\u00a0put a full screen photo of a little kitten to soften the user up, even though it might have the desired effect. We need to seek out fundamental\u00a0rules around\u00a0composition and typography, helping us to design content that feels natural and seamless.<\/span><\/p>\n

Translating\u00a0recommendations for English<\/b><\/span><\/p>\n

How can something that is simpler actually be more complicated? The origin of modern print was credited to\u00a0Johannes Gutenberg in Germany. People read a lot of great books about\u00a0typography in English, however it is important to understand that most of them, the very best\u00a0of them, were actually written in German and are thus based on usage of the German language. So, we actually need to\u00a0translate these\u00a0recommendations into\u00a0something that is specific for\u00a0English language users.<\/span><\/p>\n

The average length of a word in English is 5.1 characters, compared to the German average of 6.26. A\u00a0quick calculation thus tells us that\u00a0German words are 23% longer than their English equivalents.<\/span><\/p>\n

This gives us a\u00a0consistent way of translating recommendations.<\/span><\/p>\n

Translation of recommendations = 1.23 (100% + 23% extra = 123% = 1.23)<\/span><\/p>\n

We can now use this to translate\u00a0the English equivalent\u00a0of\u00a0German recommendations.<\/span><\/p>\n

Working out the best length for a line of text<\/b><\/span><\/p>\n

Let\u2019s find out how\u00a0long a line of text on our website should be so users can comfortably read it.<\/span><\/p>\n

Josef Muller-Brockmann<\/a><\/span>\u00a0said, in his book \u2018Grid systems in graphic design<\/span><\/a>\u2018:<\/span><\/p>\n

\u201cThere is a rule which states that a column is easy to read if it is wide enough to accommodate an average of 10 words per line\u201d<\/i><\/span><\/p>\n

To\u00a0calculate the recommended average number\u00a0of words per line in English, using our mentioned translation for recommendations, gives us 10 x 1.23 = 12.3 words. It should thus be fairly safe to say that, in practice,\u00a010 to 14 words per line <\/b>is our target.<\/span><\/p>\n

Emil Ruder<\/a><\/span>\u00a0said,\u00a0in his book \u2018Typography<\/i><\/span><\/a>\u2018:<\/i><\/span><\/p>\n

\u201cA line of more than 60 characters is hard to read\u2019<\/i><\/span><\/p>\n

According to Ruder\u2019s rule, we are aiming to achieve no more then 60 x 1.23 = 73.8 characters per line<\/b> of text in English.<\/span><\/p>\n

We now need to double-check that both recommendations make sense when considered as one. If we divide the number\u00a0of characters by the average word length, we should get a combined view of the maximum number of words recommended for one line. The calculation: 73.8 \/ 5.1 = 14.4, after rounding, gives us 14 words per line,\u00a0<\/b>which helps confirm our conclusions are correct.<\/span><\/p>\n

This gives us our fundamentals to begin to explore things a little further. I\u2019ll be writing a new post on setting\u00a0up a grid system for mygov.scot<\/span><\/a>, based on the above rule, in the coming weeks.<\/span><\/p>\n

This\u00a0is a\u00a0post by <\/i>Greg Kozakiewicz<\/i><\/span><\/a>, our Head of UX, Design and Research.<\/i><\/span><\/p>\n

We\u2019ll be sharing updates on this, and much more on social, so follow the team via <\/i>@mygovscot<\/i><\/span><\/a>\u00a0 on Twitter for more updates. Want to\u00a0comment? Let us know below!<\/i><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"

Design elements describe basic\u00a0ideas around the practice of good visual design. These elements include colour, shape, texture and space. I\u2019m going to dip into an aspect of this, exploring some fundamentals of composition, as this helps set the scene for\u00a0the work we will be doing \/ have done so far. We started\u00a0with\u00a0composition and typography \u2013\u00a0our\u00a0fundamentals…<\/p>\n","protected":false},"author":224,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,10],"tags":[68,73],"class_list":["post-1477","post","type-post","status-publish","format-standard","hentry","category-digital-public-services","category-mygov-scot","tag-design-and-user-experience","tag-standards-guidelines"],"yoast_head":"\nDipping into design \u2013 composition fundamentals - 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\/2014\/09\/08\/dipping-design-composition-fundamentals\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Dipping into design \u2013 composition fundamentals - Digital\" \/>\n<meta property=\"og:description\" content=\"Design elements describe basic\u00a0ideas around the practice of good visual design. These elements include colour, shape, texture and space. I\u2019m going to dip into an aspect of this, exploring some fundamentals of composition, as this helps set the scene for\u00a0the work we will be doing \/ have done so far. We started\u00a0with\u00a0composition and typography \u2013\u00a0our\u00a0fundamentals...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blogs.gov.scot\/digital\/2014\/09\/08\/dipping-design-composition-fundamentals\/\" \/>\n<meta property=\"og:site_name\" content=\"Digital\" \/>\n<meta property=\"article:published_time\" content=\"2014-09-08T14:57:09+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-07-20T09:19:45+00:00\" \/>\n<meta name=\"author\" content=\"Jono Ellis\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jono Ellis\" \/>\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\/2014\/09\/08\/dipping-design-composition-fundamentals\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/blogs.gov.scot\/digital\/2014\/09\/08\/dipping-design-composition-fundamentals\/\"},\"author\":{\"name\":\"Jono Ellis\",\"@id\":\"https:\/\/blogs.gov.scot\/digital\/#\/schema\/person\/ee4d9f144db1f0c55b7d4f1118dfeeb6\"},\"headline\":\"Dipping into design \u2013 composition fundamentals\",\"datePublished\":\"2014-09-08T14:57:09+00:00\",\"dateModified\":\"2017-07-20T09:19:45+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/blogs.gov.scot\/digital\/2014\/09\/08\/dipping-design-composition-fundamentals\/\"},\"wordCount\":667,\"commentCount\":0,\"keywords\":[\"Design and User Experience\",\"Standards & Guidelines\"],\"articleSection\":[\"Digital Public Services\",\"mygov.scot\"],\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/blogs.gov.scot\/digital\/2014\/09\/08\/dipping-design-composition-fundamentals\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/blogs.gov.scot\/digital\/2014\/09\/08\/dipping-design-composition-fundamentals\/\",\"url\":\"https:\/\/blogs.gov.scot\/digital\/2014\/09\/08\/dipping-design-composition-fundamentals\/\",\"name\":\"Dipping into design \u2013 composition fundamentals - Digital\",\"isPartOf\":{\"@id\":\"https:\/\/blogs.gov.scot\/digital\/#website\"},\"datePublished\":\"2014-09-08T14:57:09+00:00\",\"dateModified\":\"2017-07-20T09:19:45+00:00\",\"author\":{\"@id\":\"https:\/\/blogs.gov.scot\/digital\/#\/schema\/person\/ee4d9f144db1f0c55b7d4f1118dfeeb6\"},\"breadcrumb\":{\"@id\":\"https:\/\/blogs.gov.scot\/digital\/2014\/09\/08\/dipping-design-composition-fundamentals\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/blogs.gov.scot\/digital\/2014\/09\/08\/dipping-design-composition-fundamentals\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/blogs.gov.scot\/digital\/2014\/09\/08\/dipping-design-composition-fundamentals\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/blogs.gov.scot\/digital\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Dipping into design \u2013 composition fundamentals\"}]},{\"@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\/ee4d9f144db1f0c55b7d4f1118dfeeb6\",\"name\":\"Jono Ellis\",\"description\":\"Performance Manager for the MyGov programme.\",\"sameAs\":[\"https:\/\/www.twitter.com\/jonoellis\"],\"url\":\"https:\/\/blogs.gov.scot\/digital\/author\/jonoellis\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Dipping into design \u2013 composition fundamentals - 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\/2014\/09\/08\/dipping-design-composition-fundamentals\/","og_locale":"en_GB","og_type":"article","og_title":"Dipping into design \u2013 composition fundamentals - Digital","og_description":"Design elements describe basic\u00a0ideas around the practice of good visual design. These elements include colour, shape, texture and space. I\u2019m going to dip into an aspect of this, exploring some fundamentals of composition, as this helps set the scene for\u00a0the work we will be doing \/ have done so far. We started\u00a0with\u00a0composition and typography \u2013\u00a0our\u00a0fundamentals...","og_url":"https:\/\/blogs.gov.scot\/digital\/2014\/09\/08\/dipping-design-composition-fundamentals\/","og_site_name":"Digital","article_published_time":"2014-09-08T14:57:09+00:00","article_modified_time":"2017-07-20T09:19:45+00:00","author":"Jono Ellis","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Jono Ellis","Estimated reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/blogs.gov.scot\/digital\/2014\/09\/08\/dipping-design-composition-fundamentals\/#article","isPartOf":{"@id":"https:\/\/blogs.gov.scot\/digital\/2014\/09\/08\/dipping-design-composition-fundamentals\/"},"author":{"name":"Jono Ellis","@id":"https:\/\/blogs.gov.scot\/digital\/#\/schema\/person\/ee4d9f144db1f0c55b7d4f1118dfeeb6"},"headline":"Dipping into design \u2013 composition fundamentals","datePublished":"2014-09-08T14:57:09+00:00","dateModified":"2017-07-20T09:19:45+00:00","mainEntityOfPage":{"@id":"https:\/\/blogs.gov.scot\/digital\/2014\/09\/08\/dipping-design-composition-fundamentals\/"},"wordCount":667,"commentCount":0,"keywords":["Design and User Experience","Standards & Guidelines"],"articleSection":["Digital Public Services","mygov.scot"],"inLanguage":"en-GB","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/blogs.gov.scot\/digital\/2014\/09\/08\/dipping-design-composition-fundamentals\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/blogs.gov.scot\/digital\/2014\/09\/08\/dipping-design-composition-fundamentals\/","url":"https:\/\/blogs.gov.scot\/digital\/2014\/09\/08\/dipping-design-composition-fundamentals\/","name":"Dipping into design \u2013 composition fundamentals - Digital","isPartOf":{"@id":"https:\/\/blogs.gov.scot\/digital\/#website"},"datePublished":"2014-09-08T14:57:09+00:00","dateModified":"2017-07-20T09:19:45+00:00","author":{"@id":"https:\/\/blogs.gov.scot\/digital\/#\/schema\/person\/ee4d9f144db1f0c55b7d4f1118dfeeb6"},"breadcrumb":{"@id":"https:\/\/blogs.gov.scot\/digital\/2014\/09\/08\/dipping-design-composition-fundamentals\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blogs.gov.scot\/digital\/2014\/09\/08\/dipping-design-composition-fundamentals\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/blogs.gov.scot\/digital\/2014\/09\/08\/dipping-design-composition-fundamentals\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blogs.gov.scot\/digital\/"},{"@type":"ListItem","position":2,"name":"Dipping into design \u2013 composition fundamentals"}]},{"@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\/ee4d9f144db1f0c55b7d4f1118dfeeb6","name":"Jono Ellis","description":"Performance Manager for the MyGov programme.","sameAs":["https:\/\/www.twitter.com\/jonoellis"],"url":"https:\/\/blogs.gov.scot\/digital\/author\/jonoellis\/"}]}},"_links":{"self":[{"href":"https:\/\/blogs.gov.scot\/digital\/wp-json\/wp\/v2\/posts\/1477","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\/224"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.gov.scot\/digital\/wp-json\/wp\/v2\/comments?post=1477"}],"version-history":[{"count":0,"href":"https:\/\/blogs.gov.scot\/digital\/wp-json\/wp\/v2\/posts\/1477\/revisions"}],"wp:attachment":[{"href":"https:\/\/blogs.gov.scot\/digital\/wp-json\/wp\/v2\/media?parent=1477"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.gov.scot\/digital\/wp-json\/wp\/v2\/categories?post=1477"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.gov.scot\/digital\/wp-json\/wp\/v2\/tags?post=1477"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}