{"id":109,"date":"2022-12-30T16:52:50","date_gmt":"2022-12-30T21:52:50","guid":{"rendered":"https:\/\/pressbooks.bccampus.ca\/cncplainlanguageanddesign\/?post_type=chapter&#038;p=109"},"modified":"2023-05-24T17:44:21","modified_gmt":"2023-05-24T21:44:21","slug":"document-design-strategies","status":"publish","type":"chapter","link":"https:\/\/pressbooks.bccampus.ca\/cncplainlanguageanddesign\/chapter\/document-design-strategies\/","title":{"raw":"Document design strategies","rendered":"Document design strategies"},"content":{"raw":"<h3><span style=\"color: #244866\"><strong>Visual hierarchy<\/strong><\/span><\/h3>\r\nVisual hierarchy is the art of placing elements on the page to emphasize what is important and in what order they should be read.\r\n\r\n<strong><span style=\"color: #244866\">DO<\/span><\/strong>\r\n<ul>\r\n \t<li>Do make sure everything on the page is placed deliberately.<\/li>\r\n \t<li>Do use contrast to establish visual hierarchy: for example, different colours, sizes, weights of text.<\/li>\r\n<\/ul>\r\n<strong><span style=\"color: #ff6600\">DO NOT<\/span><\/strong>\r\n<ul>\r\n \t<li>Do not place elements randomly on the page.<\/li>\r\n \t<li>Do not crowd the page with clutter (too much text or too many images).<\/li>\r\n \t<li>Do not all text the same size, because your reader will not know where to look first.<\/li>\r\n<\/ul>\r\n<h3><span style=\"color: #244866\"><strong>Proximity and alignment<\/strong><\/span><\/h3>\r\nProximity is the amount of distance between elements in a design. Alignment is the way that elements are lined up with each other.\r\n\r\n<strong><span style=\"color: #244866\">DO<\/span><\/strong>\r\n<ul>\r\n \t<li>Do group related items together.<\/li>\r\n \t<li>Do use bullets when listing elements.<\/li>\r\n \t<li>Do use a strong alignment, like left or right alignment.<\/li>\r\n<\/ul>\r\n<strong><span style=\"color: #ff6600\">DO NOT<\/span><\/strong>\r\n<ul>\r\n \t<li>Do not put too much white space between related items.<\/li>\r\n \t<li>Do not use centre alignment unless there is a specific design reason.<\/li>\r\n \t<li><strong>Accessibility tip:<\/strong> Do not justify your text.\r\n<ul>\r\n \t<li><strong>Why?<\/strong> When you choose to justify, each line of text is spread out evenly between your left and right margin, and each side has a clean edge. As a result, you will have large gaps between words in some lines. This makes the text more difficult for the eye to scan.<\/li>\r\n<\/ul>\r\n<\/li>\r\n<\/ul>\r\n<h3><span style=\"color: #244866\"><strong>Typography<\/strong><\/span><\/h3>\r\nTypography refers to how letters, text, and symbols are placed on the page. The goal of plain design is to make the text readable and the message clear. Use typography that supports this goal.\r\n\r\n<strong><span style=\"color: #244866\">DO<\/span><\/strong>\r\n<ul>\r\n \t<li>Do use a clear, legible font for body text.<\/li>\r\n \t<li>Do use contrasting colour, size, and weight to draw the reader's eye to what you want them to see first.<\/li>\r\n \t<li>Do make sure headings are sufficiently different from body text: use a different font, weight, size, or colour.<\/li>\r\n<\/ul>\r\n<strong><span style=\"color: #ff6600\">DO NOT<\/span><\/strong>\r\n<ul>\r\n \t<li><strong>Accessibility tip:<\/strong> Do not use all captials for body text -- it is more difficult to read than sentence case.\r\n<ul>\r\n \t<li><strong>Why?<\/strong> Our brains read quickly by recognizing the individual shapes of letters and words. Because capitals are all the same shape (rectangles), it is harder to tell the words apart at a glance. This makes things especially difficult for people with dyslexia or other reading difficulties. It may be OK to use capitals sparingly, in headings.<\/li>\r\n<\/ul>\r\n<\/li>\r\n<\/ul>\r\n<h3><span style=\"color: #244866\"><strong>Colour<\/strong><\/span><\/h3>\r\nMake sure there is enough contrast between text colour and background colour. Choose colours that have appropriate connotations (this can be culturally dependent). For example, in some cultures, red is associated with danger, and in some it is associated with good luck.\r\n<h3><span style=\"color: #244866\"><strong>Images<\/strong><\/span><\/h3>\r\nImages include things like photos, illustrations, graphs, and charts. <em>Relevant<\/em> images can\u2026\r\n<ul>\r\n \t<li>encourage interest and make documents more pleasant to read<\/li>\r\n \t<li>make text look less overwhelming<\/li>\r\n \t<li>reinforce a message<\/li>\r\n \t<li>provide support for readers with barriers (literacy attention span)<\/li>\r\n<\/ul>\r\n<h3><strong><span style=\"color: #244866\">Accessibility<\/span><\/strong><\/h3>\r\nBe aware of accessibility issues when you are designing your document. Your audience will possibly include people with colour blindness, low vision, and reading disabilities such as dyslexia. It will almost certainly include neurodiverse people. Paying careful attention to design can help make your document more accessible for everyone.\r\n\r\nThe <a href=\"https:\/\/www.w3.org\/WAI\/standards-guidelines\/wcag\/\">Web Content Accessibility Guidelines<\/a> [new tab] (WCAG) are a valuable resource for anyone working to make their web documents accessible.\r\n<h3><span style=\"color: #244866\"><strong>Summary<\/strong><\/span><\/h3>\r\nYou do not need to be a trained graphic designer to make better documents! Just be aware of these basic principles and take time to think about why and how you are placing elements on the page.\r\n\r\nSee<em><a href=\"https:\/\/pressbooks.bccampus.ca\/cncplainlanguageanddesign\/back-matter\/appendix-d-proper\/\"> Appendix D: Design Checklist<\/a> in the back matter of this textbook for more design tips.<\/em>\r\n\r\n&nbsp;\r\n\r\nIn the interactivity below, drag the definition to the correct document design strategy.\r\n\r\n[h5p id=\"11\"]","rendered":"<h3><span style=\"color: #244866\"><strong>Visual hierarchy<\/strong><\/span><\/h3>\n<p>Visual hierarchy is the art of placing elements on the page to emphasize what is important and in what order they should be read.<\/p>\n<p><strong><span style=\"color: #244866\">DO<\/span><\/strong><\/p>\n<ul>\n<li>Do make sure everything on the page is placed deliberately.<\/li>\n<li>Do use contrast to establish visual hierarchy: for example, different colours, sizes, weights of text.<\/li>\n<\/ul>\n<p><strong><span style=\"color: #ff6600\">DO NOT<\/span><\/strong><\/p>\n<ul>\n<li>Do not place elements randomly on the page.<\/li>\n<li>Do not crowd the page with clutter (too much text or too many images).<\/li>\n<li>Do not all text the same size, because your reader will not know where to look first.<\/li>\n<\/ul>\n<h3><span style=\"color: #244866\"><strong>Proximity and alignment<\/strong><\/span><\/h3>\n<p>Proximity is the amount of distance between elements in a design. Alignment is the way that elements are lined up with each other.<\/p>\n<p><strong><span style=\"color: #244866\">DO<\/span><\/strong><\/p>\n<ul>\n<li>Do group related items together.<\/li>\n<li>Do use bullets when listing elements.<\/li>\n<li>Do use a strong alignment, like left or right alignment.<\/li>\n<\/ul>\n<p><strong><span style=\"color: #ff6600\">DO NOT<\/span><\/strong><\/p>\n<ul>\n<li>Do not put too much white space between related items.<\/li>\n<li>Do not use centre alignment unless there is a specific design reason.<\/li>\n<li><strong>Accessibility tip:<\/strong> Do not justify your text.\n<ul>\n<li><strong>Why?<\/strong> When you choose to justify, each line of text is spread out evenly between your left and right margin, and each side has a clean edge. As a result, you will have large gaps between words in some lines. This makes the text more difficult for the eye to scan.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h3><span style=\"color: #244866\"><strong>Typography<\/strong><\/span><\/h3>\n<p>Typography refers to how letters, text, and symbols are placed on the page. The goal of plain design is to make the text readable and the message clear. Use typography that supports this goal.<\/p>\n<p><strong><span style=\"color: #244866\">DO<\/span><\/strong><\/p>\n<ul>\n<li>Do use a clear, legible font for body text.<\/li>\n<li>Do use contrasting colour, size, and weight to draw the reader&#8217;s eye to what you want them to see first.<\/li>\n<li>Do make sure headings are sufficiently different from body text: use a different font, weight, size, or colour.<\/li>\n<\/ul>\n<p><strong><span style=\"color: #ff6600\">DO NOT<\/span><\/strong><\/p>\n<ul>\n<li><strong>Accessibility tip:<\/strong> Do not use all captials for body text &#8212; it is more difficult to read than sentence case.\n<ul>\n<li><strong>Why?<\/strong> Our brains read quickly by recognizing the individual shapes of letters and words. Because capitals are all the same shape (rectangles), it is harder to tell the words apart at a glance. This makes things especially difficult for people with dyslexia or other reading difficulties. It may be OK to use capitals sparingly, in headings.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h3><span style=\"color: #244866\"><strong>Colour<\/strong><\/span><\/h3>\n<p>Make sure there is enough contrast between text colour and background colour. Choose colours that have appropriate connotations (this can be culturally dependent). For example, in some cultures, red is associated with danger, and in some it is associated with good luck.<\/p>\n<h3><span style=\"color: #244866\"><strong>Images<\/strong><\/span><\/h3>\n<p>Images include things like photos, illustrations, graphs, and charts. <em>Relevant<\/em> images can\u2026<\/p>\n<ul>\n<li>encourage interest and make documents more pleasant to read<\/li>\n<li>make text look less overwhelming<\/li>\n<li>reinforce a message<\/li>\n<li>provide support for readers with barriers (literacy attention span)<\/li>\n<\/ul>\n<h3><strong><span style=\"color: #244866\">Accessibility<\/span><\/strong><\/h3>\n<p>Be aware of accessibility issues when you are designing your document. Your audience will possibly include people with colour blindness, low vision, and reading disabilities such as dyslexia. It will almost certainly include neurodiverse people. Paying careful attention to design can help make your document more accessible for everyone.<\/p>\n<p>The <a href=\"https:\/\/www.w3.org\/WAI\/standards-guidelines\/wcag\/\">Web Content Accessibility Guidelines<\/a> [new tab] (WCAG) are a valuable resource for anyone working to make their web documents accessible.<\/p>\n<h3><span style=\"color: #244866\"><strong>Summary<\/strong><\/span><\/h3>\n<p>You do not need to be a trained graphic designer to make better documents! Just be aware of these basic principles and take time to think about why and how you are placing elements on the page.<\/p>\n<p>See<em><a href=\"https:\/\/pressbooks.bccampus.ca\/cncplainlanguageanddesign\/back-matter\/appendix-d-proper\/\"> Appendix D: Design Checklist<\/a> in the back matter of this textbook for more design tips.<\/em><\/p>\n<p>&nbsp;<\/p>\n<p>In the interactivity below, drag the definition to the correct document design strategy.<\/p>\n<div id=\"h5p-11\">\n<div class=\"h5p-iframe-wrapper\"><iframe id=\"h5p-iframe-11\" class=\"h5p-iframe\" data-content-id=\"11\" style=\"height:1px\" src=\"about:blank\" frameBorder=\"0\" scrolling=\"no\" title=\"Match the plain design concept with its definition\"><\/iframe><\/div>\n<\/div>\n","protected":false},"author":473,"menu_order":1,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-109","chapter","type-chapter","status-publish","hentry"],"part":105,"_links":{"self":[{"href":"https:\/\/pressbooks.bccampus.ca\/cncplainlanguageanddesign\/wp-json\/pressbooks\/v2\/chapters\/109","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pressbooks.bccampus.ca\/cncplainlanguageanddesign\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/pressbooks.bccampus.ca\/cncplainlanguageanddesign\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/pressbooks.bccampus.ca\/cncplainlanguageanddesign\/wp-json\/wp\/v2\/users\/473"}],"version-history":[{"count":7,"href":"https:\/\/pressbooks.bccampus.ca\/cncplainlanguageanddesign\/wp-json\/pressbooks\/v2\/chapters\/109\/revisions"}],"predecessor-version":[{"id":273,"href":"https:\/\/pressbooks.bccampus.ca\/cncplainlanguageanddesign\/wp-json\/pressbooks\/v2\/chapters\/109\/revisions\/273"}],"part":[{"href":"https:\/\/pressbooks.bccampus.ca\/cncplainlanguageanddesign\/wp-json\/pressbooks\/v2\/parts\/105"}],"metadata":[{"href":"https:\/\/pressbooks.bccampus.ca\/cncplainlanguageanddesign\/wp-json\/pressbooks\/v2\/chapters\/109\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.bccampus.ca\/cncplainlanguageanddesign\/wp-json\/wp\/v2\/media?parent=109"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.bccampus.ca\/cncplainlanguageanddesign\/wp-json\/pressbooks\/v2\/chapter-type?post=109"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.bccampus.ca\/cncplainlanguageanddesign\/wp-json\/wp\/v2\/contributor?post=109"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.bccampus.ca\/cncplainlanguageanddesign\/wp-json\/wp\/v2\/license?post=109"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}