{"id":260,"date":"2020-07-24T21:39:37","date_gmt":"2020-07-24T21:39:37","guid":{"rendered":"https:\/\/courses.lumenlearning.com\/suny-esc-technicalwriting\/?post_type=chapter&#038;p=260"},"modified":"2020-11-12T17:51:11","modified_gmt":"2020-11-12T17:51:11","slug":"document-design-general-considerations","status":"publish","type":"chapter","link":"https:\/\/courses.lumenlearning.com\/suny-esc-technicalwriting\/chapter\/document-design-general-considerations\/","title":{"raw":"Document Design: General Considerations","rendered":"Document Design: General Considerations"},"content":{"raw":"<img class=\"size-medium wp-image-799 alignleft\" src=\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/5366\/2020\/07\/14200610\/588-300x200.jpg\" alt=\"\" width=\"300\" height=\"200\" \/>You build your communications out of\u00a0visual\u00a0elements: the ink marks of your words, sentences, and paragraphs against the background of the page, as well as your drawings and graphs and tables. Your readers\u00a0see\u00a0the visual design of these elements before they read and understand your message. And what they see has a powerful effect on the success of your communications, on its usability and persuasiveness. Effective design results in users being able to locate, understand, and use information easily.\r\n\r\n&nbsp;\r\n\r\nGood design enhances usability; it helps readers:\r\n<ul>\r\n \t<li>locate information quickly<\/li>\r\n \t<li>notice highly important content<\/li>\r\n \t<li>understand information so that they can use it<\/li>\r\n<\/ul>\r\nGood design affects readers\u2019 attitudes, thereby increasing a communication\u2019s effectiveness; it helps readers:\r\n<ul>\r\n \t<li>feel that they can successfully engage with the content, and therefore read and keep reading<\/li>\r\n \t<li>feel a sense of accomplishment about understanding the content.<\/li>\r\n<\/ul>\r\nBecause document design can have such a significant impact on your communication\u2019s usability and effectiveness, you should approach design in the same reader-centered manner that you use when drafting text and graphics. Think continuously about your readers: who they are, what they want from your communication, the context in which they will be reading.\r\n\r\nThe following video clearly discusses and illustrates the importance of design in technical writing, including its physical, cognitive, and affective aspects as well as basic principles of design (contrast, alignment, proximity, white space, and repetition).\r\n\r\nhttps:\/\/www.youtube.com\/watch?v=wU5NhoINdRs\r\n<h2><span id=\"Design_Elements_of_a_Communication\" class=\"mw-headline\">Elements of Design\r\n<\/span><\/h2>\r\nConsider the following elements of design when you create a technical document of any sort - description, instructions, report, web page. Although each specific type of technical document will have its own conventions and ways in which design elements are applied, it's helpful to be mindful of these building blocks of design, as professional graphic designers are.\r\n\r\n<img class=\"size-medium wp-image-890 alignright\" src=\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/5366\/2020\/07\/18182601\/593-300x214.jpg\" alt=\"\" width=\"300\" height=\"214\" \/>\r\n<ul>\r\n \t<li><b>Text.<\/b>\u00a0Paragraphs and sentences\u2014avoid big blocks of dense text. Maintain clear and clean margins.<\/li>\r\n \t<li><b>Headings and titles.<\/b>\u00a0Label sections of your communication for user ease of finding information and understanding how information is organized in the document, and therefore what to expect.<\/li>\r\n \t<li><b>Graphics.<\/b> Include titles or labels for all tables and figures. Place all graphics as near as possible to the accompanying text that refers to and explains the graphics.<\/li>\r\n \t<li><b>White space.<\/b> Maintain enough blank space in a document to avoid big blocks of text and a clutter from too many visuals or background images.<\/li>\r\n \t<li><b>Repetition. <\/b>Maintain the same format for similar items throughout, e.g., repeat heading formats, place similar information similarly in the layout, etc.<\/li>\r\n \t<li><b>Contrast.<\/b> Ensure that all items are easy to read. High contrast, such as black type on a white background, is easiest to discern.<\/li>\r\n \t<li><strong>Alignment.<\/strong> Put all headings and subheadings at the left-hand margin. It's generally easier to read single-spaced text that is left-justified (no indentations), with spaces between paragraphs. Keeping everything left-justified accomplishes two things: it makes the headings easier to find, and it shortens the main text\u2019s\u00a0line length.<\/li>\r\n<\/ul>\r\n<h2><span id=\"CREATING_GRAPHICS\" class=\"mw-headline\">Additional Elements: Color, Font, Highlighting\r\n<\/span><\/h2>\r\n<h3><img class=\"size-medium wp-image-895 alignright\" src=\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/5366\/2020\/07\/18184127\/596-200x300.jpg\" alt=\"\" width=\"200\" height=\"300\" \/><\/h3>\r\n<h3>Color<\/h3>\r\n<ul>\r\n \t<li>Use colors to support your message; select colors with appropriate associations.<\/li>\r\n \t<li>Use color for emphasis, not decoration.<\/li>\r\n \t<li>Provide high contrast between text and background.<\/li>\r\n \t<li>Limit the number of colors.<\/li>\r\n \t<li>Choose a color scheme, not just individual colors, so that color unifies the communication.<\/li>\r\n<\/ul>\r\n<h3>Font<\/h3>\r\n<ul>\r\n \t<li>Limit the number of fonts to no more than two-three. If you use different fonts, apply them consistently throughout the document, e.g., one for headings and one for main text.\u00a0 It's also fine to use one font throughout.<\/li>\r\n \t<li>Choose an easy-to-read sans serif font (Calibri, Arial).<\/li>\r\n \t<li>Italics draw attention to text because they make it harder to read. Use italic font sparingly to draw attention. Do not over-use italics.<\/li>\r\n<\/ul>\r\n<h3>Highlighting in Software Documentation<\/h3>\r\nSoftware documentation typically uses a lot of highlighting. Highlighting here refers to bold text, italics, alternate fonts, capital letters, quotation marks, and other typographical tricks used to call attention to text.\r\n\r\nHere are some standard guidelines for highlighting.\r\n<ul>\r\n \t<li>Establish a plan for using highlighting, and apply it consistently.<\/li>\r\n \t<li>Use highlighting for specific, functional reasons. Avoid too much highlighting, and avoid complicated highlighting schemes.<\/li>\r\n \t<li>Consider using this fairly standard highlighting scheme:\r\n<ul>\r\n \t<li>For simple emphasis, use italics.<\/li>\r\n \t<li>Use bold for commands, on-screen buttons and menu options.<\/li>\r\n \t<li>Use italics for variables for which users must supply their own words.<\/li>\r\n \t<li>Use an alternate font for text displayed on screen or text that users must type in.<\/li>\r\n \t<li>For screen and field names, use the capitalization style shown on the screen but no other highlighting.<\/li>\r\n \t<li>Use an initial cap for key names but no other highlighting.<\/li>\r\n \t<li>For extended emphasis, use the notice format.<\/li>\r\n<\/ul>\r\n<\/li>\r\n<\/ul>\r\n<div id=\"post-200\" class=\"standard post-200 chapter type-chapter status-publish hentry\"><\/div>","rendered":"<p><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-799 alignleft\" src=\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/5366\/2020\/07\/14200610\/588-300x200.jpg\" alt=\"\" width=\"300\" height=\"200\" \/>You build your communications out of\u00a0visual\u00a0elements: the ink marks of your words, sentences, and paragraphs against the background of the page, as well as your drawings and graphs and tables. Your readers\u00a0see\u00a0the visual design of these elements before they read and understand your message. And what they see has a powerful effect on the success of your communications, on its usability and persuasiveness. Effective design results in users being able to locate, understand, and use information easily.<\/p>\n<p>&nbsp;<\/p>\n<p>Good design enhances usability; it helps readers:<\/p>\n<ul>\n<li>locate information quickly<\/li>\n<li>notice highly important content<\/li>\n<li>understand information so that they can use it<\/li>\n<\/ul>\n<p>Good design affects readers\u2019 attitudes, thereby increasing a communication\u2019s effectiveness; it helps readers:<\/p>\n<ul>\n<li>feel that they can successfully engage with the content, and therefore read and keep reading<\/li>\n<li>feel a sense of accomplishment about understanding the content.<\/li>\n<\/ul>\n<p>Because document design can have such a significant impact on your communication\u2019s usability and effectiveness, you should approach design in the same reader-centered manner that you use when drafting text and graphics. Think continuously about your readers: who they are, what they want from your communication, the context in which they will be reading.<\/p>\n<p>The following video clearly discusses and illustrates the importance of design in technical writing, including its physical, cognitive, and affective aspects as well as basic principles of design (contrast, alignment, proximity, white space, and repetition).<\/p>\n<p><iframe loading=\"lazy\" id=\"oembed-1\" title=\"Information Design for Technical Communicators: Principles to Guide Document Design\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/wU5NhoINdRs?feature=oembed&#38;rel=0\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<h2><span id=\"Design_Elements_of_a_Communication\" class=\"mw-headline\">Elements of Design<br \/>\n<\/span><\/h2>\n<p>Consider the following elements of design when you create a technical document of any sort &#8211; description, instructions, report, web page. Although each specific type of technical document will have its own conventions and ways in which design elements are applied, it&#8217;s helpful to be mindful of these building blocks of design, as professional graphic designers are.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-890 alignright\" src=\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/5366\/2020\/07\/18182601\/593-300x214.jpg\" alt=\"\" width=\"300\" height=\"214\" \/><\/p>\n<ul>\n<li><b>Text.<\/b>\u00a0Paragraphs and sentences\u2014avoid big blocks of dense text. Maintain clear and clean margins.<\/li>\n<li><b>Headings and titles.<\/b>\u00a0Label sections of your communication for user ease of finding information and understanding how information is organized in the document, and therefore what to expect.<\/li>\n<li><b>Graphics.<\/b> Include titles or labels for all tables and figures. Place all graphics as near as possible to the accompanying text that refers to and explains the graphics.<\/li>\n<li><b>White space.<\/b> Maintain enough blank space in a document to avoid big blocks of text and a clutter from too many visuals or background images.<\/li>\n<li><b>Repetition. <\/b>Maintain the same format for similar items throughout, e.g., repeat heading formats, place similar information similarly in the layout, etc.<\/li>\n<li><b>Contrast.<\/b> Ensure that all items are easy to read. High contrast, such as black type on a white background, is easiest to discern.<\/li>\n<li><strong>Alignment.<\/strong> Put all headings and subheadings at the left-hand margin. It&#8217;s generally easier to read single-spaced text that is left-justified (no indentations), with spaces between paragraphs. Keeping everything left-justified accomplishes two things: it makes the headings easier to find, and it shortens the main text\u2019s\u00a0line length.<\/li>\n<\/ul>\n<h2><span id=\"CREATING_GRAPHICS\" class=\"mw-headline\">Additional Elements: Color, Font, Highlighting<br \/>\n<\/span><\/h2>\n<h3><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-895 alignright\" src=\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/5366\/2020\/07\/18184127\/596-200x300.jpg\" alt=\"\" width=\"200\" height=\"300\" \/><\/h3>\n<h3>Color<\/h3>\n<ul>\n<li>Use colors to support your message; select colors with appropriate associations.<\/li>\n<li>Use color for emphasis, not decoration.<\/li>\n<li>Provide high contrast between text and background.<\/li>\n<li>Limit the number of colors.<\/li>\n<li>Choose a color scheme, not just individual colors, so that color unifies the communication.<\/li>\n<\/ul>\n<h3>Font<\/h3>\n<ul>\n<li>Limit the number of fonts to no more than two-three. If you use different fonts, apply them consistently throughout the document, e.g., one for headings and one for main text.\u00a0 It&#8217;s also fine to use one font throughout.<\/li>\n<li>Choose an easy-to-read sans serif font (Calibri, Arial).<\/li>\n<li>Italics draw attention to text because they make it harder to read. Use italic font sparingly to draw attention. Do not over-use italics.<\/li>\n<\/ul>\n<h3>Highlighting in Software Documentation<\/h3>\n<p>Software documentation typically uses a lot of highlighting. Highlighting here refers to bold text, italics, alternate fonts, capital letters, quotation marks, and other typographical tricks used to call attention to text.<\/p>\n<p>Here are some standard guidelines for highlighting.<\/p>\n<ul>\n<li>Establish a plan for using highlighting, and apply it consistently.<\/li>\n<li>Use highlighting for specific, functional reasons. Avoid too much highlighting, and avoid complicated highlighting schemes.<\/li>\n<li>Consider using this fairly standard highlighting scheme:\n<ul>\n<li>For simple emphasis, use italics.<\/li>\n<li>Use bold for commands, on-screen buttons and menu options.<\/li>\n<li>Use italics for variables for which users must supply their own words.<\/li>\n<li>Use an alternate font for text displayed on screen or text that users must type in.<\/li>\n<li>For screen and field names, use the capitalization style shown on the screen but no other highlighting.<\/li>\n<li>Use an initial cap for key names but no other highlighting.<\/li>\n<li>For extended emphasis, use the notice format.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<div id=\"post-200\" class=\"standard post-200 chapter type-chapter status-publish hentry\"><\/div>\n\n\t\t\t <section class=\"citations-section\" role=\"contentinfo\">\n\t\t\t <h3>Candela Citations<\/h3>\n\t\t\t\t\t <div>\n\t\t\t\t\t\t <div id=\"citation-list-260\">\n\t\t\t\t\t\t\t <div class=\"licensing\"><div class=\"license-attribution-dropdown-subheading\">CC licensed content, Original<\/div><ul class=\"citation-list\"><li>Document Design: General Considerations, adapted from Technical Writing and Open Technical Communication; attributions below. <strong>Authored by<\/strong>: Susan Oaks. <strong>Provided by<\/strong>: Empire State College, SUNY. <strong>Project<\/strong>: Technical Writing. <strong>License<\/strong>: <em><a target=\"_blank\" rel=\"license\" href=\"https:\/\/creativecommons.org\/licenses\/by-nc\/4.0\/\">CC BY-NC: Attribution-NonCommercial<\/a><\/em><\/li><\/ul><div class=\"license-attribution-dropdown-subheading\">CC licensed content, Shared previously<\/div><ul class=\"citation-list\"><li>General Design Concepts. <strong>Authored by<\/strong>: WikiBooks. <strong>Provided by<\/strong>: Lumen Learning. <strong>Located at<\/strong>: <a target=\"_blank\" href=\"https:\/\/courses.lumenlearning.com\/technicalwriting\/chapter\/general-design-concepts\/\">https:\/\/courses.lumenlearning.com\/technicalwriting\/chapter\/general-design-concepts\/<\/a>. <strong>Project<\/strong>: Technical Writing. <strong>License<\/strong>: <em><a target=\"_blank\" rel=\"license\" href=\"https:\/\/creativecommons.org\/licenses\/by-sa\/4.0\/\">CC BY-SA: Attribution-ShareAlike<\/a><\/em><\/li><li>Page Design (pages 5-6 of 6). <strong>Authored by<\/strong>: David McMurrey and Jonathan Arnett. <strong>Provided by<\/strong>: Kennesaw State University. <strong>Located at<\/strong>: <a target=\"_blank\" href=\"https:\/\/softchalkcloud.com\/lesson\/serve\/GZgMx1yw3kRhzL\/html\">https:\/\/softchalkcloud.com\/lesson\/serve\/GZgMx1yw3kRhzL\/html<\/a>. <strong>Project<\/strong>: Open Technical Communication. <strong>License<\/strong>: <em><a target=\"_blank\" rel=\"license\" href=\"https:\/\/creativecommons.org\/licenses\/by\/4.0\/\">CC BY: Attribution<\/a><\/em><\/li><li>image of two engineers consulting a technical document. <strong>Authored by<\/strong>: RAEng_Publications. <strong>Provided by<\/strong>: Pixabay. <strong>Located at<\/strong>: <a target=\"_blank\" href=\"https:\/\/pixabay.com\/photos\/engineer-engineering-teamwork-4941160\/\">https:\/\/pixabay.com\/photos\/engineer-engineering-teamwork-4941160\/<\/a>. <strong>License<\/strong>: <em><a target=\"_blank\" rel=\"license\" href=\"https:\/\/creativecommons.org\/about\/cc0\">CC0: No Rights Reserved<\/a><\/em><\/li><li>image of woman working at computer screens. <strong>Authored by<\/strong>: StartupStockPhotos. <strong>Provided by<\/strong>: Pixabay. <strong>Located at<\/strong>: <a target=\"_blank\" href=\"https:\/\/pixabay.com\/photos\/startup-business-people-students-849804\/\">https:\/\/pixabay.com\/photos\/startup-business-people-students-849804\/<\/a>. <strong>License<\/strong>: <em><a target=\"_blank\" rel=\"license\" href=\"https:\/\/creativecommons.org\/about\/cc0\">CC0: No Rights Reserved<\/a><\/em><\/li><li>image of people highlighting document information with a colored line. <strong>Authored by<\/strong>: RAEng_Publications. <strong>Provided by<\/strong>: Pixabay. <strong>Located at<\/strong>: <a target=\"_blank\" href=\"https:\/\/pixabay.com\/photos\/engineer-engineering-teamwork-4941144\/\">https:\/\/pixabay.com\/photos\/engineer-engineering-teamwork-4941144\/<\/a>. <strong>License<\/strong>: <em><a target=\"_blank\" rel=\"license\" href=\"https:\/\/creativecommons.org\/about\/cc0\">CC0: No Rights Reserved<\/a><\/em><\/li><li>video Information Design for Technical Communicators. <strong>Authored by<\/strong>: Sarah Holdgrafer. <strong>Located at<\/strong>: <a target=\"_blank\" href=\"https:\/\/www.youtube.com\/watch?v=wU5NhoINdRs\">https:\/\/www.youtube.com\/watch?v=wU5NhoINdRs<\/a>. <strong>License<\/strong>: <em>Other<\/em>. <strong>License Terms<\/strong>: YouTube video<\/li><\/ul><\/div>\n\t\t\t\t\t\t <\/div>\n\t\t\t\t\t <\/div>\n\t\t\t <\/section>","protected":false},"author":81366,"menu_order":1,"template":"","meta":{"_candela_citation":"[{\"type\":\"original\",\"description\":\"Document Design: General Considerations, adapted from Technical Writing and Open Technical Communication; attributions below\",\"author\":\"Susan Oaks\",\"organization\":\"Empire State College, SUNY\",\"url\":\"\",\"project\":\"Technical Writing\",\"license\":\"cc-by-nc\",\"license_terms\":\"\"},{\"type\":\"cc\",\"description\":\"General Design Concepts\",\"author\":\"WikiBooks\",\"organization\":\"Lumen Learning\",\"url\":\"https:\/\/courses.lumenlearning.com\/technicalwriting\/chapter\/general-design-concepts\/\",\"project\":\"Technical Writing\",\"license\":\"cc-by-sa\",\"license_terms\":\"\"},{\"type\":\"cc\",\"description\":\"Page Design (pages 5-6 of 6)\",\"author\":\"David McMurrey and Jonathan Arnett\",\"organization\":\"Kennesaw State University\",\"url\":\"https:\/\/softchalkcloud.com\/lesson\/serve\/GZgMx1yw3kRhzL\/html\",\"project\":\"Open Technical Communication\",\"license\":\"cc-by\",\"license_terms\":\"\"},{\"type\":\"cc\",\"description\":\"image of two engineers consulting a technical document\",\"author\":\"RAEng_Publications\",\"organization\":\"Pixabay\",\"url\":\"https:\/\/pixabay.com\/photos\/engineer-engineering-teamwork-4941160\/\",\"project\":\"\",\"license\":\"cc0\",\"license_terms\":\"\"},{\"type\":\"cc\",\"description\":\"image of woman working at computer screens\",\"author\":\"StartupStockPhotos\",\"organization\":\"Pixabay\",\"url\":\" https:\/\/pixabay.com\/photos\/startup-business-people-students-849804\/\",\"project\":\"\",\"license\":\"cc0\",\"license_terms\":\"\"},{\"type\":\"cc\",\"description\":\"image of people highlighting document information with a colored line\",\"author\":\"RAEng_Publications\",\"organization\":\"Pixabay\",\"url\":\"https:\/\/pixabay.com\/photos\/engineer-engineering-teamwork-4941144\/\",\"project\":\"\",\"license\":\"cc0\",\"license_terms\":\"\"},{\"type\":\"cc\",\"description\":\"video Information Design for Technical Communicators\",\"author\":\"Sarah Holdgrafer\",\"organization\":\"\",\"url\":\"https:\/\/www.youtube.com\/watch?v=wU5NhoINdRs\",\"project\":\"\",\"license\":\"other\",\"license_terms\":\"YouTube video\"}]","CANDELA_OUTCOMES_GUID":"","pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-260","chapter","type-chapter","status-publish","hentry"],"part":193,"_links":{"self":[{"href":"https:\/\/courses.lumenlearning.com\/suny-esc-technicalwriting\/wp-json\/pressbooks\/v2\/chapters\/260","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/courses.lumenlearning.com\/suny-esc-technicalwriting\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/courses.lumenlearning.com\/suny-esc-technicalwriting\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/courses.lumenlearning.com\/suny-esc-technicalwriting\/wp-json\/wp\/v2\/users\/81366"}],"version-history":[{"count":18,"href":"https:\/\/courses.lumenlearning.com\/suny-esc-technicalwriting\/wp-json\/pressbooks\/v2\/chapters\/260\/revisions"}],"predecessor-version":[{"id":1624,"href":"https:\/\/courses.lumenlearning.com\/suny-esc-technicalwriting\/wp-json\/pressbooks\/v2\/chapters\/260\/revisions\/1624"}],"part":[{"href":"https:\/\/courses.lumenlearning.com\/suny-esc-technicalwriting\/wp-json\/pressbooks\/v2\/parts\/193"}],"metadata":[{"href":"https:\/\/courses.lumenlearning.com\/suny-esc-technicalwriting\/wp-json\/pressbooks\/v2\/chapters\/260\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/courses.lumenlearning.com\/suny-esc-technicalwriting\/wp-json\/wp\/v2\/media?parent=260"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/courses.lumenlearning.com\/suny-esc-technicalwriting\/wp-json\/pressbooks\/v2\/chapter-type?post=260"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/courses.lumenlearning.com\/suny-esc-technicalwriting\/wp-json\/wp\/v2\/contributor?post=260"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/courses.lumenlearning.com\/suny-esc-technicalwriting\/wp-json\/wp\/v2\/license?post=260"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}