Design Guide

Typography

on typographical elements of technical writings

• Align related elements with one another
  Imagine a grid on the page where you align paragraphs or images on vertical lines across the page This makes the page clean and tidy, which readers will find it comfortable to read. Explore and exploit the alignment functions on your word processing software.
  
  
• Group related items visually
  For example, when writing instructions with illustration, put text on the right and graphics on the left. In simple typing, make use of white space between lines to group items.
  
  
• Use contrast to establish hierarchy and focus
  Text size, boldness, using italic, colour and text type (serif*, sans serif**) can be used to produce contrast.
  * serif: font type with decorative tails (e.g. Times New Roman)
  **sans serif: font type without decorative tails (e.g. Arial)
  
  
• Use repetition to unify your communication visually
  Not to repeat the sentences, but the designs and page layout. Not only is visual unity aesthetically pleasing, readers will also find neat and tidy text easy to use.
  
  
• Select type that is easy to read
  Fancy fonts like Palace Script MT can be very special. But reading texts for practical purpose in this kind of visually unclear text can be tricky, if not difficult. Think in your reader’s shoes. Always pick the font that is easy to read.
• Design your overall document for ease of use and attractiveness
  The size, the shape, the binding and the choice of paper of your published material (either hard or soft copy) matter. For example, a traveller’s guide should be printed in pocket size, rectangular shape, soft binding and light but reasonably durable paper for easy carrying. On the other hand a poster should be printed on fine paper in large size so that your readers can read the content from a distance.
  
  Source: Anderson, P. V. 2007. Technical Communication: A Reader-Centered Approach. (6^th ed.). Boston: Thomson Wadsworth

Colour

Color in print publication and webpage design can be inspired by soft or bold hues juxtaposed with muted environments, deep shadows, and bright highlights.

Following websites offer you useful tips on how to use colours based on principles of design and colour tools used by professional designers:

Design principles https://www.sitepoint.com/principles-of-design-colour/

Colour tools https://material.io/color/#!/?view.left=0&view.right=0

Table and charts

Different types of tables and charts and their functions:

Some general reminders for making tables and charts:

• Number the table or chart
• Give the table or chart a title
• Label clearly the x and y axes of the graph
• Use tick marks to indicate units on the axis
• Quote the source of the data
• Any other things that the reader needs to know to understand the table or chart

Sources:
Anderson, P. V. 2007. Technical Communication: A Reader-Centered Approach. (6th ed.). Boston: Thomson Wadsworth.
Reep, D. C. 2009. Technical Writing: Principles, strategies, and readings. (7th ed.). New York: Longman. 

Image and Text

Image and text work together to create core contents of technical writing. They work best to supplement messages which cannot possibly be presented alone by image or text.

In webpage design, pay attentions to tips below used by designers to layer text onto images: 
https://css-tricks.com/design-considerations-text-images/

Software like Photoshop, provides easy ways to edit text and images: 
https://helpx.adobe.com/photoshop-elements/using/add-text.html

Want to find out good examples of image and text used for technical writing? Try dribble, google and pinterest them:
https://dribbble.com/
https://www.pinterest.com/