{"id":97,"date":"2017-03-18T15:49:17","date_gmt":"2017-03-18T15:49:17","guid":{"rendered":"https:\/\/www.open.ac.uk\/blogs\/design\/?p=97"},"modified":"2017-03-24T07:00:42","modified_gmt":"2017-03-24T07:00:42","slug":"organising-information-through-colours-design-tips","status":"publish","type":"post","link":"https:\/\/www.open.ac.uk\/blogs\/design\/organising-information-through-colours-design-tips\/","title":{"rendered":"Organising information through colours: design tips"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-99 alignleft\" src=\"https:\/\/www.open.ac.uk\/blogs\/design\/wp-content\/uploads\/2017\/03\/colour-shift-central-squares.jpg\" alt=\"Figure 2: The two small squares from illustration 1, juxtaposed here to show that they are the same \u200etint. (Image \u00a9 Gil Dekel).\u200e\" width=\"140\" height=\"74\" \/><\/p>\n<p style=\"text-align: justify\"><strong>By Dr. Gil Dekel<\/strong><\/p>\n<p style=\"text-align: justify\">How can colours support you in organising and designing information in your print or online projects? \u00a0Here is a summary of the chapter \u2018Colour\u2019 from Tufte\u2019s book \u2018Envisioning Information\u2019<span style=\"color: #808080\"><sup>[1]<\/sup><\/span>, with further suggestions I came across during my work as a design researcher<span style=\"color: #808080\"><sup>[2]<\/sup><\/span>:<\/p>\n<p style=\"text-align: justify\">Colours are a powerful visual tool to represent information. Many people can identify as much as 20,000 colours \u2013 and the limit of 20,000 colours is reached not because of the capacity to discriminate between two adjacent colours, but simply because of the limits of the human vision and memory.<\/p>\n<p style=\"text-align: justify\">Colours can be compared to music. You need to have accent in music to create coherency. Yet if every note\/word\/movement is accented, then the result is that we have no meanings. Likewise, you do not need accents of too many colours everywhere on your page. You do not need too many dominant colours. Rather, you need colours that support each other on the page, with only a few colours that are accented (dominant) to create structure and hierarchy.<\/p>\n<p style=\"text-align: justify\">Red, green and blue (the primary colours) and black provide the maximum differentiation between them. No other four colours deliver such differentiation.<\/p>\n<p style=\"text-align: justify\">Colour is described in three categories: hue, saturation and value. <a href=\"http:\/\/www.poeticmind.co.uk\/research\/hue-saturation-brightness-hsb\/\" target=\"_blank\" >Read more here.<\/a><\/p>\n<p style=\"text-align: justify\">Computer screens use red, green and blue \u2013 this is known as the additive method. The print industry uses cyan, magenta and yellow \u2013 this is the subtractive method. <a href=\"http:\/\/www.poeticmind.co.uk\/research\/rgb-cmyk-colour-systems\/\" target=\"_blank\" >Read more here.<\/a><\/p>\n<p style=\"text-align: justify\">A good strategy to coming up with colours and their combination is to look at nature. Nature\u2019s colours are \u2018familiar\u2019 to the human eye. The colours are also coherent and harmonious.<\/p>\n<p style=\"text-align: justify\">Grey colour is regarded one of the prettiest in art. It is seen as the most important and versatile colour. Muted colours (colours mixed with grey) provide the best backgrounds. Backgrounds need to be \u2018quiet\u2019, so to allow for even the smallest brighter area to stand out. Backgrounds need to support and \u2018hold\u2019 the important information on the page.<\/p>\n<p style=\"text-align: justify\">Colours depend on each other, and affect each other. When looking at colours they can \u2018shift\u2019, i.e. they look differently. This depends on adjacent colours and shapes. For example, the same colour will look different when placed on different background colours, as seen in figure 1. The colour of the small two squares is exactly the same, yet it shift slightly in our eyes because of the surrounding backgrounds. On the right the small square colour looks darker compared with the small square on the left\u2026<\/p>\n<figure id=\"attachment_98\" aria-describedby=\"caption-attachment-98\" style=\"width: 1407px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-98\" src=\"https:\/\/www.open.ac.uk\/blogs\/design\/wp-content\/uploads\/2017\/03\/colour-shift.jpg\" alt=\"Figure 1: the two small squares have the same tint, but look different as they \u2018shift\u2019 depending on \u200etheir background colours. The small square on the right looks darker. (Image created by Gil Dekel. Image file is licensed under the Creative Commons Attribution-Share Alike 4.0 International license.)\" width=\"1407\" height=\"708\" srcset=\"https:\/\/www.open.ac.uk\/blogs\/design\/wp-content\/uploads\/2017\/03\/colour-shift.jpg 1407w, https:\/\/www.open.ac.uk\/blogs\/design\/wp-content\/uploads\/2017\/03\/colour-shift-300x150.jpg 300w, https:\/\/www.open.ac.uk\/blogs\/design\/wp-content\/uploads\/2017\/03\/colour-shift-1024x515.jpg 1024w, https:\/\/www.open.ac.uk\/blogs\/design\/wp-content\/uploads\/2017\/03\/colour-shift-500x251.jpg 500w\" sizes=\"auto, (max-width: 1407px) 100vw, 1407px\" \/><figcaption id=\"caption-attachment-98\" class=\"wp-caption-text\">Figure 1: the two small squares have the same tint, but look different as they \u2018shift\u2019 depending on \u200etheir background colours. The small square on the right looks darker. (Image created by Gil Dekel. Image file is licensed under the Creative Commons Attribution-Share Alike 4.0 International license.)<\/figcaption><\/figure>\n<p>&nbsp;<\/p>\n<p>In figure 2 are the two small squares, where you can see that they have the same colour:<\/p>\n<figure id=\"attachment_99\" aria-describedby=\"caption-attachment-99\" style=\"width: 140px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-99\" src=\"https:\/\/www.open.ac.uk\/blogs\/design\/wp-content\/uploads\/2017\/03\/colour-shift-central-squares.jpg\" alt=\"Figure 2: The two small squares from illustration 1, juxtaposed here to show that they are the same \u200etint. (Image \u00a9 Gil Dekel).\u200e\" width=\"140\" height=\"74\" \/><figcaption id=\"caption-attachment-99\" class=\"wp-caption-text\">Figure 2: The two small squares from illustration 1, juxtaposed here to show that they are the same \u200etint. (Image \u00a9 Gil Dekel).\u200e<\/figcaption><\/figure>\n<p style=\"text-align: justify\">Colour blind people cannot distinguish between red and green. If you differentiate information solely on the colours red and green, then they will not see it. For example, if you place a green circle next to red circle, then colour blind people will see both circles the same.<\/p>\n<p style=\"text-align: justify\">Human cognitive processing tends to emphasise the weight of a contour lines (the line around shapes or text), sometimes giving it more weight than it usually has.<\/p>\n<p style=\"text-align: justify\">The tint of a colour can look different when there is a contour line around the colour (shape), as seen in figure 3.<\/p>\n<figure id=\"attachment_100\" aria-describedby=\"caption-attachment-100\" style=\"width: 1032px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-100\" src=\"https:\/\/www.open.ac.uk\/blogs\/design\/wp-content\/uploads\/2017\/03\/contour-around-colour.jpg\" alt=\"Figure 3: A contour dramatically changes the perceived tint, and also differentiate a colour (shape) \u200efrom its background. The tint in the two squares is exactly the same.\u200e\" width=\"1032\" height=\"557\" srcset=\"https:\/\/www.open.ac.uk\/blogs\/design\/wp-content\/uploads\/2017\/03\/contour-around-colour.jpg 1032w, https:\/\/www.open.ac.uk\/blogs\/design\/wp-content\/uploads\/2017\/03\/contour-around-colour-300x161.jpg 300w, https:\/\/www.open.ac.uk\/blogs\/design\/wp-content\/uploads\/2017\/03\/contour-around-colour-1024x552.jpg 1024w, https:\/\/www.open.ac.uk\/blogs\/design\/wp-content\/uploads\/2017\/03\/contour-around-colour-500x269.jpg 500w\" sizes=\"auto, (max-width: 1032px) 100vw, 1032px\" \/><figcaption id=\"caption-attachment-100\" class=\"wp-caption-text\">Figure 3: A contour dramatically changes the perceived tint, and also differentiate a colour (shape) \u200efrom its background. The tint in the two squares is exactly the same.\u200e<\/figcaption><\/figure>\n<p>&nbsp;<\/p>\n<p style=\"text-align: justify\">\u00a0Strong colours produce focus. If you add strong colours in areas which are not important on the page, then the focus will go there. The eye will be distracted to go there, and will not focus on the important details. Such visual \u2018excitement\u2019 produces little visual information.<\/p>\n<p style=\"text-align: justify\">In maps you do not need strong colours to delineate what is obvious, such as a sea area. You can simply outline the shape of the sea without added colour. A sea shape is already familiar to most viewers of maps, and if the important information is the land (inside area) then the sea (outer areas) should be given less emphasis.<\/p>\n<div class=\"et_pb_text et_pb_module et_pb_bg_layout_light et_pb_text_align_left  et_pb_text_1\">\n<p style=\"text-align: right\"><span style=\"color: #808080\">\u00a9 Gil Dekel. 21 July 2016.<br \/>\nFirst published on <a href=\"http:\/\/www.poeticmind.co.uk\/research\/organising-information-colours-design-tips\/\" target=\"_blank\" >http:\/\/www.poeticmind.co.uk\/research\/organising-information-colours-design-tips\/<\/a><br \/>\n<\/span><\/p>\n<p style=\"text-align: right\"><a href=\"http:\/\/creativecommons.org\/licenses\/by-nc-nd\/4.0\/\" rel=\"license\" ><img decoding=\"async\" class=\"alignright\" style=\"border-width: 0px\" src=\"https:\/\/i.creativecommons.org\/l\/by-nc-nd\/4.0\/80x15.png\" alt=\"Creative Commons Licence\" \/><\/a><br \/>\n<span style=\"color: #808080\">Organising information through colours: design tips by <a href=\"http:\/\/www.poeticmind.co.uk\/research\/organising-information-colours-design-tips\/\"style=\"color: #808080\"  rel=\"cc:attributionURL\" >Dr. Gil Dekel<\/a> is licensed under a <a href=\"http:\/\/creativecommons.org\/licenses\/by-nc-nd\/4.0\/\"style=\"color: #808080\"  rel=\"license\" >Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License<\/a>.<\/span><\/p>\n<p style=\"text-align: justify\"><span style=\"color: #808080\"><em><strong>Footnotes:<\/strong><\/em><\/span><\/p>\n<p style=\"text-align: justify;padding-left: 30px\">[1] Edward R. Tufte. (1990) Envisioning Information. Cheshire, Connecticut, USA: Graphic Press. 3rd printing 1992.<\/p>\n<p style=\"text-align: justify;padding-left: 30px\">[2] See: <a href=\"http:\/\/www.poeticmind.co.uk\/research\/\" target=\"_blank\" >http:\/\/www.poeticmind.co.uk\/research\/<\/a><\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>By Dr. Gil Dekel How can colours support you in organising and designing information in your print or online projects? \u00a0Here is a summary of the chapter \u2018Colour\u2019 from Tufte\u2019s book \u2018Envisioning Information\u2019[1], with further suggestions I came across during my work as a design researcher[2]: Colours are a powerful visual tool to represent information. [&hellip;]<\/p>\n","protected":false},"author":21,"featured_media":99,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[17,16,15,19,18,20],"class_list":["post-97","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-education","tag-colour","tag-design","tag-gil-dekel","tag-process","tag-thought","tag-tips"],"_links":{"self":[{"href":"https:\/\/www.open.ac.uk\/blogs\/design\/wp-json\/wp\/v2\/posts\/97","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.open.ac.uk\/blogs\/design\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.open.ac.uk\/blogs\/design\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.open.ac.uk\/blogs\/design\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/www.open.ac.uk\/blogs\/design\/wp-json\/wp\/v2\/comments?post=97"}],"version-history":[{"count":5,"href":"https:\/\/www.open.ac.uk\/blogs\/design\/wp-json\/wp\/v2\/posts\/97\/revisions"}],"predecessor-version":[{"id":105,"href":"https:\/\/www.open.ac.uk\/blogs\/design\/wp-json\/wp\/v2\/posts\/97\/revisions\/105"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.open.ac.uk\/blogs\/design\/wp-json\/wp\/v2\/media\/99"}],"wp:attachment":[{"href":"https:\/\/www.open.ac.uk\/blogs\/design\/wp-json\/wp\/v2\/media?parent=97"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.open.ac.uk\/blogs\/design\/wp-json\/wp\/v2\/categories?post=97"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.open.ac.uk\/blogs\/design\/wp-json\/wp\/v2\/tags?post=97"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}