Difference between revisions of "Graphics"

From CompSciWiki
Jump to: navigation, search
(Terms)
 
(14 intermediate revisions by 5 users not shown)
Line 1: Line 1:
{{3040Topic|Introduction=Graphics are used in every medium today.  Readers expect graphics to accompany text, and so it's important to know how to design and place graphics within your document.  This section will discuss how to utilize graphics effectively.
+
{{3040TopicNoBar|Introduction=Graphics are used in every medium today.  Readers expect graphics to accompany text, and so it's important to know how to design and place graphics within your document.  This section will discuss how to utilize graphics effectively.
  
}}
+
|Chapter_TOC=[[Common_Components|Common Components]]}}
  
  
==Why Do You Want to Use Special Fonts, Colour, and Graphics?==
+
==Special fonts, colour, and graphics:==
===Special fonts, colour, and graphics:===
+
 
 +
===Why Do You Want to Use Special Fonts, Colour, and Graphics?===
 +
The use of special fonts, colour, and graphics should catch the audience's attention.  Special care should be used when making fonts, colour, and graphics stand out from the rest of the document.  Here are a few reasons why you should use them:
 +
 
 
1) ''Simplify Ideas''<br>
 
1) ''Simplify Ideas''<br>
 
Ideas are simplified by cutting down the amount of words used.<br>
 
Ideas are simplified by cutting down the amount of words used.<br>
Line 17: Line 20:
 
4) ''Are Universal''<br>
 
4) ''Are Universal''<br>
 
A graphical representation of an object is a universal language that can be understood no matter what country you are from or what language you speak.  Graphics have been used since the beginning of time with the use of cave drawings.<br><br>
 
A graphical representation of an object is a universal language that can be understood no matter what country you are from or what language you speak.  Graphics have been used since the beginning of time with the use of cave drawings.<br><br>
 +
 +
Using special fonts, colour, and graphics in your document can make it more interesting.  They can also help simplify ideas, reinforce ideas, create interest, and help you get your message across to everyone.
  
 
==Using Fonts==
 
==Using Fonts==
 +
 +
The use of fonts should help with your document's tone and also should reflect the meaning of your message.  Here are some guidelines when using different types of fonts.
  
 
===Font Guidelines:===
 
===Font Guidelines:===
 
''1) Remember the Reader’s or Company’s Preferences''<br>
 
''1) Remember the Reader’s or Company’s Preferences''<br>
Considering how you will write a message is just as important as what you should write in your message.  If you know your audience has a clear preference, stick with those preferences.<br>
+
How you write your message is just as important as the message you are trying to convey.  If you know your audience has a clear preference, stick with that preference.<br>
 
<br>
 
<br>
 
''2) Consider the Reason Why You’re Changing Fonts''<br>
 
''2) Consider the Reason Why You’re Changing Fonts''<br>
Line 31: Line 38:
 
Please note there are two main types of fonts:<br>
 
Please note there are two main types of fonts:<br>
 
*Sans serif font styles: "without feet or tails"<br>
 
*Sans serif font styles: "without feet or tails"<br>
*Serif font styles:     letters have little "feet or tails" on the ends<br>
+
*Serif font styles:       letters have little "feet or tails" on the ends<br>
  
  
Here is an example of different Sans Serif and Serif font styles:
+
For an example of different Sans Serif and Serif font styles, refer to Figure 1.
  
 
[[Image:sansSerif.jpg]]
 
[[Image:sansSerif.jpg]]
 +
<br>
 +
'''Figure 1 - Font Styles Example'''
 
<br>
 
<br>
 
<br>
 
<br>
Line 50: Line 59:
 
Font styles can set the tone of your document.  Choose your font style carefully.<br>
 
Font styles can set the tone of your document.  Choose your font style carefully.<br>
 
<br>
 
<br>
For example, this font type does not match the meaning of the message:<br>
+
For an example of inappropriate font type, refer to Figure 2.  The example reflects on how the font type does not match the meaning of the message.
 +
 
 +
 
 
[[Image:houseBurnt.jpg]]
 
[[Image:houseBurnt.jpg]]
 +
 +
'''Figure 2 - Use of Inappropriate Font Type'''
 +
 +
 +
Choosing a font type is very important in how you display your message.  The choice of font and the choices of changing the font within the document should be carefully considered.  In making this choice, remember to consider your audience's preferences, the reason behind changing fonts, the document's layout and purpose, and also the document's tone.
  
 
==Using Colour==
 
==Using Colour==
 +
 +
Using color is a great way to keep your document interesting and also catching the audience's attention.  However, adding colour is only useful if you can use it effectively.  Here are some basic guidelines when adding colour to your document.
  
 
===Cost and Time of Using Colour===
 
===Cost and Time of Using Colour===
Line 94: Line 112:
 
''4) Use Colours According to Your Medium''<br>
 
''4) Use Colours According to Your Medium''<br>
 
Beware the paper you print on may make the colours look different from what you see on the computer screen.  Print test drafts.
 
Beware the paper you print on may make the colours look different from what you see on the computer screen.  Print test drafts.
 +
 +
 +
 +
Colours can help documents look interesting and help the audience focus on important parts of the document.  When using colour in your document, remember to consider the cost and time of using colour, to keep to a colour style sheet, and to use the basic colour guidelines.
  
 
==Using Graphics==
 
==Using Graphics==
 +
 +
Graphics help simplify explaining complex concepts in a visually appealing manner.  When adding graphics to your document, remember to keep these guidelines in mind.
  
 
===Graphic Guidelines===
 
===Graphic Guidelines===
Line 134: Line 158:
 
* Use a legend or key if many labels are needed.
 
* Use a legend or key if many labels are needed.
 
* Cite graphics in the description.  For example, "Source: National Geographic" or "Adapted from National Geographic".
 
* Cite graphics in the description.  For example, "Source: National Geographic" or "Adapted from National Geographic".
 +
 +
 +
 +
Graphics can help or complicate your document.  By using the above guidelines, you can assure your document is a success.  That is, remember to refer to your graphic, place your graphic strategically within the document, avoid bombarding your audience with too many graphics, and also remember to label your graphic.
  
 
==Specific Guidelines for Four Graphics==
 
==Specific Guidelines for Four Graphics==
  
In technical writing, the graphics most often used are: pie charts, bar charts, line charts, schedule charts, flow charts, organization charts, technical drawings, and tables.  Here are some basic guidelines when using these types of graphics in your document.
+
In technical writing, the graphics most often used are: pie charts, bar charts, line charts, and technical drawings.  Choosing the right type of graphic to display your information effectively is important.  Here are some basic guidelines when using these types of graphics in your document.
  
 
===Using Pie Charts===
 
===Using Pie Charts===
 +
[[Image:market_share_pie_chart.gif|thumb|Sample pie chart. ]]
 
Pie charts are simple graphs that show individual pieces and how much each piece is worth relative to other pieces.  When using pie charts, keep these guidelines in mind:
 
Pie charts are simple graphs that show individual pieces and how much each piece is worth relative to other pieces.  When using pie charts, keep these guidelines in mind:
 
* Don't use more than 10 divisions.  People don't like clutter.
 
* Don't use more than 10 divisions.  People don't like clutter.
Line 179: Line 208:
  
  
 +
 +
When using pie charts, bar charts, line charts, or technical drawings remember to choose the right type of graphic to convey your message successfully.  Following the above guidelines will help you have successful charts and drawings in your document.
  
 
==Terms==
 
==Terms==
 +
 +
Here are some basic terms about graphics used throughout this article:
 +
 +
 
* ''Graphics'': This is a generic term describing any portion of a document or oral presentation that is not text.<br><br>
 
* ''Graphics'': This is a generic term describing any portion of a document or oral presentation that is not text.<br><br>
 
* ''Illustrations, Visual Aids'': A synonym to the word graphics - it is any part of a document that is not text.<br><br>
 
* ''Illustrations, Visual Aids'': A synonym to the word graphics - it is any part of a document that is not text.<br><br>
Line 186: Line 221:
 
* ''Charts/graphs'': A type of graphical figure displaying text in visual form.  For example, bar, pie charts, and lines on graphs.<br><br>
 
* ''Charts/graphs'': A type of graphical figure displaying text in visual form.  For example, bar, pie charts, and lines on graphs.<br><br>
 
* ''Technical drawing'': A type of graphical figure displaying a visual representation of a physical object.<br><br>
 
* ''Technical drawing'': A type of graphical figure displaying a visual representation of a physical object.<br><br>
 +
 +
==Further Readings==
 +
Boogerd, Jan, Pfeiffer, William Sanborn, Technical Communication - A Practical Approach, Pearson Education Canada, Toronto, 2007.
 +
 +
http://www.efuse.com/Design/web_fonts_basics.html  A tutorial on how to use fonts effectively on websites.
 +
 +
http://www.buzzinfosystems.com/website-development/using-graphics.html  A tutorial on how to use graphics effectively on websites.
 +
 +
==References==
 +
Boogerd, Jan, Pfeiffer, William Sanborn, Technical Communication - A Practical Approach, Pearson Education Canada, Toronto, 2007.
 +
 +
http://www.efuse.com/Design/web_fonts_basics.html  A tutorial on how to use fonts effectively on websites.
 +
 +
http://findarticles.com/p/articles/mi_m1563/is_/ai_14756955  How to choose the right chart for your document.

Latest revision as of 17:42, 11 April 2008

COMP3040 > Common Components

Introduction

Graphics are used in every medium today. Readers expect graphics to accompany text, and so it's important to know how to design and place graphics within your document. This section will discuss how to utilize graphics effectively.





Special fonts, colour, and graphics:

Why Do You Want to Use Special Fonts, Colour, and Graphics?

The use of special fonts, colour, and graphics should catch the audience's attention. Special care should be used when making fonts, colour, and graphics stand out from the rest of the document. Here are a few reasons why you should use them:

1) Simplify Ideas
Ideas are simplified by cutting down the amount of words used.

2) Reinforce Ideas
Ideas are emphasized with the use of special fonts, colour, and graphics because they are distinctive from the rest of the document.

3) Create Interest
Because you are using special fonts, colour, and graphics, the audience's attention will be drawn to the area that is unique from the rest of the document.

4) Are Universal
A graphical representation of an object is a universal language that can be understood no matter what country you are from or what language you speak. Graphics have been used since the beginning of time with the use of cave drawings.

Using special fonts, colour, and graphics in your document can make it more interesting. They can also help simplify ideas, reinforce ideas, create interest, and help you get your message across to everyone.

Using Fonts

The use of fonts should help with your document's tone and also should reflect the meaning of your message. Here are some guidelines when using different types of fonts.

Font Guidelines:

1) Remember the Reader’s or Company’s Preferences
How you write your message is just as important as the message you are trying to convey. If you know your audience has a clear preference, stick with that preference.

2) Consider the Reason Why You’re Changing Fonts
You want your message to be clear. Consider the following questions before you change fonts:

  • Will the font change attract or deter the audience's attention?
  • Will the font change be used for a large portion of the document?


Please note there are two main types of fonts:

  • Sans serif font styles: "without feet or tails"
  • Serif font styles: letters have little "feet or tails" on the ends


For an example of different Sans Serif and Serif font styles, refer to Figure 1.

SansSerif.jpg
Figure 1 - Font Styles Example

3) Consider Your Document Layout
Depending on your document layout, you have limited space to write all your information. Using a smaller and clearer font might be a solution to getting your message across effectively without loss of clarity.

You can also change the font leading (space between rows of typed material) or change the kerning (the space between characters).

4) Remember the Document’s Purpose
The document's purpose is to deliver a message. Make sure the font style emphasizes and compliments this purpose.

5) Consider Your Document’s Tone
Font styles can set the tone of your document. Choose your font style carefully.

For an example of inappropriate font type, refer to Figure 2. The example reflects on how the font type does not match the meaning of the message.


HouseBurnt.jpg

Figure 2 - Use of Inappropriate Font Type


Choosing a font type is very important in how you display your message. The choice of font and the choices of changing the font within the document should be carefully considered. In making this choice, remember to consider your audience's preferences, the reason behind changing fonts, the document's layout and purpose, and also the document's tone.

Using Colour

Using color is a great way to keep your document interesting and also catching the audience's attention. However, adding colour is only useful if you can use it effectively. Here are some basic guidelines when adding colour to your document.

Cost and Time of Using Colour

1) Is There a Budget?
Unfortunately our creativity can be limited by the budget we have to adhere to. Colour is costly and takes a longer time to print. When choosing colour graphics, be sure they are able to print clearly even without colour.

2) Who Will Receive the Document?
Your budget may only allow you to print a certain number of colour copies. Ensure the most "important" people, such as executive directors receive these coloured copies.

3) Are There Alternative Options?
If your budget is rigid yet you still want to colour copies, consider the following options:

  • Use colored paper for different sections
  • Consider printing coloured copies for the most important readers
  • Use one color


Create a Colour Style Sheet

1) Help the Audience Read and Retain the Document’s Message
Define levels of headers with the use of different colours. This will provide different levels of importance between major and minor subheadings amongst the different headers.

2) Accentuate Important Data
Consider using one color for repitive emphasis. This will provide continuity throughout the document.

3) Make Colours Noticeable
If your colored document is going to be reproduced in black and white copies, make sure the color contrasts are noticeable in reproduction. Keep in mind that blue images with slight variations in color tone do not photocopy well.

Also, remember who your target audience is. The combination of red and green may affect around 10% of the male population suffering from red/green color blindness.

Colour Guidelines

1) Use Colours That Will Have Your Audience Reacting Positively
Different cultures deem different colours as appropriate or inappropriate for certain things. Keep in mind your audience's preferences.

2) Use Colours That Compliment Your Company’s Logo
Be consistent with your company colors. Ideas may be more readily accepted because it is consistent witht the company colors.

3) Use Dark or Textured Backgrounds Sparingly
People enjoy seeing white space. The use of dark backgrounds tend to clutter the document. If you insist on using a dark background, be sure to have enough noticeable contrast between the message and the background.

4) Use Colours According to Your Medium
Beware the paper you print on may make the colours look different from what you see on the computer screen. Print test drafts.


Colours can help documents look interesting and help the audience focus on important parts of the document. When using colour in your document, remember to consider the cost and time of using colour, to keep to a colour style sheet, and to use the basic colour guidelines.

Using Graphics

Graphics help simplify explaining complex concepts in a visually appealing manner. When adding graphics to your document, remember to keep these guidelines in mind.

Graphic Guidelines

1) Refer to Graphics in the Text

Always refer to graphics within the text. The following is a list of rules when using graphics:

  • Do not use Roman numerals to number your graphics.
  • Graphics should be labeled clearly - include titles or page numbers of necessary.
  • Integrate references to graphics within your text in a fluid fashion. For example, you can refer to a graphic by writing "As shown in Figure 8...."


2) Plan Where to Place Graphics in Your Document Typically it is better to place graphics near the text where it is referred to. Here is a list of possible areas to place graphics:

  • Place graphics on the same page where it was mentioned within the text.
  • Larger graphics such as long tables can be placed on the opposite page of the text. This technique usually only pertains to documents that are printed on a two-page spread.
  • If the same graphic is referred to more than once in the document, place the graphic near the first reference.
  • Place graphics in attachments or appendices. This should only be done if:
    • a) There are too many references to the same graphic.
    • b) Graphics are minor supporting material and would otherwise interrupt the flow of the text.


3) Place Graphics Vertically Typically readers prefer not to turn the document sideways in order to read a graphic. Place them vertically and if this is not possible, consider the following options:

  • Place graphic on a foldout page.
  • If you must place it horizontally, place the top of the graphic in the left margin of the page.

4) Avoid Clutter Readers prefer whitespace and shouldn't feel overwhelmed with numerous graphics. Keep graphics, simple, clean, and to the point.


5) Labeling Graphics Graphics should be labeled clearly and can be referred to easily. When labeling a graphic, keep these rules in mind:

  • Include a short and descriptive title after the graphic number. For example, "Figure 8 - Recent Weather Trends".
    • For tables, the title should be at the top.
    • For figures, the title should be under the graphic either centered or left-aligned.
  • If an explanation is needed for the graphic, place the explanation right below the title or at the bottom of the graphic.
  • Use a legend or key if many labels are needed.
  • Cite graphics in the description. For example, "Source: National Geographic" or "Adapted from National Geographic".


Graphics can help or complicate your document. By using the above guidelines, you can assure your document is a success. That is, remember to refer to your graphic, place your graphic strategically within the document, avoid bombarding your audience with too many graphics, and also remember to label your graphic.

Specific Guidelines for Four Graphics

In technical writing, the graphics most often used are: pie charts, bar charts, line charts, and technical drawings. Choosing the right type of graphic to display your information effectively is important. Here are some basic guidelines when using these types of graphics in your document.

Using Pie Charts

Sample pie chart.

Pie charts are simple graphs that show individual pieces and how much each piece is worth relative to other pieces. When using pie charts, keep these guidelines in mind:

  • Don't use more than 10 divisions. People don't like clutter.
  • Try to order pieces from largest to smallest wedge starting at 12:00 in a clockwise fashion. Only change this rule for a good reason such as keeping similar wedge categories together.
  • Use pie charts for percentages and money because this can be easily divided by 100.
  • Keep your chart simple yet creative. To be creative, you may consider shading a wedge, popping out a wedge, or making the chart 3-dimensional.
  • Draw and label the pie chart carefully. Size your wedge accordingly to its worth. Also, make the pie chart large enough to read the labels without having them being crammed together.


Using Bar Charts

Bar charts can provide a lot of technical detail. When using bar charts, keep these guidelines in mind:

  • Keep a limited number of bars so readers can grab concepts easily.
  • Show comparisons distinctively. The main goal of graphics is to show immediate and accurate visual representations of information.
  • Keep bar widths consistent. The space between bars can vary with:
    • No spacing to show differences easier.
    • Uniform spacing but less than the bar widths.
    • Variable spacing to show gaps in information.
  • Arrange the bars either sequentially or ascending/descending order
  • Be creative


Using Line Charts

Line charts convey complex trends in an easy and simple manner. When using line charts, keep these basic rules in mind:

  • Use line charts for trends. Readers are affected by the direction and angle of the lines.
  • Be clear and accurate with the information you're displaying.
  • Do not use numbers on the chart itself. Line charts should be simple and placing information on the chart only clutters it.
  • Be careful of putting too many lines in the chart. This might confuse the readers.


Using Technical Drawings

Technical drawings are important for companies who produce or use technical products. Company documents such as instructions, reports and proposals can include technical drawings. When using technical drawings, keep these guidelines in mind:

  • Keep the drawing simple with enough details.
  • Label the parts accurately and clearly.
  • There are different views in which you can display your technical drawing. Choose an appropriate one.
    • Exterior view: a surface view
    • Cross-section view: "slice" view of an object
    • Exploded view: zoomed in view of part of an object


When using pie charts, bar charts, line charts, or technical drawings remember to choose the right type of graphic to convey your message successfully. Following the above guidelines will help you have successful charts and drawings in your document.

Terms

Here are some basic terms about graphics used throughout this article:


  • Graphics: This is a generic term describing any portion of a document or oral presentation that is not text.

  • Illustrations, Visual Aids: A synonym to the word graphics - it is any part of a document that is not text.

  • Tables and Figures: Tables and figures are types of graphics. A table consists of text organized in columns and rows. A figure is any graphic that is not a table.

  • Charts/graphs: A type of graphical figure displaying text in visual form. For example, bar, pie charts, and lines on graphs.

  • Technical drawing: A type of graphical figure displaying a visual representation of a physical object.

Further Readings

Boogerd, Jan, Pfeiffer, William Sanborn, Technical Communication - A Practical Approach, Pearson Education Canada, Toronto, 2007.

http://www.efuse.com/Design/web_fonts_basics.html A tutorial on how to use fonts effectively on websites.

http://www.buzzinfosystems.com/website-development/using-graphics.html A tutorial on how to use graphics effectively on websites.

References

Boogerd, Jan, Pfeiffer, William Sanborn, Technical Communication - A Practical Approach, Pearson Education Canada, Toronto, 2007.

http://www.efuse.com/Design/web_fonts_basics.html A tutorial on how to use fonts effectively on websites.

http://findarticles.com/p/articles/mi_m1563/is_/ai_14756955 How to choose the right chart for your document.