Design Awareness in Schools

1
Design In ICT
2
Designing in ICT involves making decisions
about the appearance of an information
product how to produce an information product.
3
Design in ICT
Information products
Design elements
Conventions checklist
4
Information products
Fourteen different information products are
provided.Each one is explored in terms of key
design features design tools advice for
producing the product a planning checklist.
5
Information products
Websites
Letters and envelopes
Charts and graphs
Business graphs
Résumés
Reports
Questionnaires
Emails
Slideshows
Newsletters
Brochures
Invitations
Posters
Tables
6
Websites
7
Design in ICT - Websites
Sample format
Website for Boost Juice
8
Design in ICT - Websites
Design features
Splash page gives user feedback on load time
9
Design in ICT - Websites
Design features
10
Design in ICT - Websites
Design features
Colour combination is effective and visually
pleasing
Website design is appropriate for the intended
audience
Sound can be switched on or off to suit user
11
Design in ICT - Websites
Design tools
This is a sketch showing all pages in a website
and how they are linked. Colour coding assists in
identifying relationships. You can label each
frame, indicating its purpose.
12
Design in ICT - Websites
Task advice
Saving images for use in a website Image files
used in websites need to be as small as possible,
as large files can take a long time to
download. Images should be no more than 72 dpi
(dots per inch). There are two main file types
for images used in websites - JPEG
(pronounced jay-peg) is used for photos -
GIF (pronounced Giff or Jiff) is used for
most other types of images including
animated images. Both JPEG and GIF files
compress efficiently. Compression causes data
loss in a JPEG but not in a GIF. The user can
choose the amount of compression when saving in
JPEG format.
13
Design in ICT - Websites
Task advice examples
Examples of images saved with different
compressions
JPEG with high compression(10 quality, small
file size 8 KB)
Gif with high compression(8 colours, small file
size 8 KB)
Gif with medium compression(64 colours, larger
file size 16 KB)
JPEG with low compression(70 quality, larger
file size 16 KB)
14
Design in ICT - Websites
Checklist
Think about these points when designing a
website Use a heading hierarchy. Use a larger
font size for headings. Left-align text to aid
readability. Use only one or two fonts for the
text. Text size range 9-12 points, with 12
points for paragraph text. Use sans-serif fonts
to enhance readability. Limit sentence length
to 15-20 words. Limit line length to 60
characters (approximately 10-11 words). Limit
paragraph size to 4-8 lines. Avoid underlining
(except for hyperlinks). Use bold, ALL CAPITALS
and italics sparingly. Avoid red and green
together for colour-blind people. Sound should
complement the content. Limit the size of all
graphics files on a page to 100 KB.
15
Design in ICT - Websites
Notes
There are two categories of fonts serif (e.g.
Times New Roman) san serif (e.g. Arial and
Helvetica).
Serif font
Sans-serif font
16
Letters and envelopes
17
Design in ICT - Letters
Sample format
There are two types of formal letters personal
business letters, which individuals send to
organisations business letters, which
organisations prepare on letterhead
paper. This is a sample format of a personal
business letter
18
Design in ICT - Letters
Design features
R4-R6 and R2, etc.indicate the number of returns
(or Enters) to insert. For example, insert two
returns after a paragraph (R2).
R4-6
R2
R2
R2
R2
R2
R2
R4-6
R2
19
Design in ICT - Letters
Design features
20
Design in ICT - Letters
Sample format
Two spaces and no punctuation in bottom line
21
Design in ICT - Letters
Design tools
Structure outline Using a computer or pen and
paper, list the parts of a letter you plan to
produce on and A4 page. Position these on
the page as they will appear in the finished
letter. Indicate the number or returns (R)
or Enters after each part.
22
Design in ICT - Letters
Task advice
Creating a letter template A template sets out
a standard structure for an information
product, such as a letter, but allows for
variable information to be added in fields.
Prompts are given regarding the variable
information to be inserted in these fields,
for example, (insert name). Templates
ensure consistency in layout and save time
when creating new products.
23
Design in ICT - Letters
Checklist
Think about these points when designing a
letter Begin all text lines at the left
margin. Include your contact details at the top
of the page Use a serif font set at 10-12
points for the body of the letter. Serif
fonts, such as Times New Roman, are easier to
read in continuous lines of text. Key the date
in full in date/month/year format. Do not
include punctuation in the date or address.
Number any consecutive pages, but not the first
page.
24
Charts and graphs
25
Design in ICT - Charts and graphs
Sample format
Sample format of a line graph
26
Design in ICT - Charts and graphs
Design features
27
Design in ICT - Charts and graphs
Design features
The horizontal (x) axis is labelled
Time is always shown on the x axis and quantity
on the y axis
28
Design in ICT - Charts and graphs
Sample format
Sample format of a pie chart
29
Design in ICT - Charts and graphs
Design features
Absolute values as well as percentages can be
shown on the segments
Different colours are used to differentiate the
segments
30
Design in ICT - Charts and graphs
Design features
The title describes what the chart shows
31
Design in ICT - Charts and graphs
Design features
The segments are arranged from largest to
smallest, starting at the 12 oclock position
32
Design in ICT - Charts and graphs
Sample format
Sample format of a column chart
33
Design in ICT - Charts and graphs
Design features
Title describes what the chart shows
34
Design in ICT - Charts and graphs
Design features
A sans-serif font is used to assist readability
35
Design in ICT - Charts and graphs
Design tools
Data input table To create a graph or chart,
first identify the data you need and arrange
it in a table in the order in which it should
appear. Based on the text shown a table has
been created by entering the participation
rates in the sports listed for each category
(boys and girls), from most popular to least
popular. The column chart that can be created
from this data will display the participation
rates for each category in order of popularity.
For boys, the most popular sports are outdoor
soccer (22 or 301,100), swimming (16 or
213,600), Australian Rules football (14 or
184,200), tennis (9 or 128,300), outdoor cricket
(9 or 124,200), and basketball (9 or 116,100).
For girls, the most popular sports are netball
(18 or 233,000), swimming (17 or 225,500),
tennis (8 or 100,100), and basketball (7 or
88,900). Source ABS, Childrens Participation
in Cultural and Leisure Activities, Australia,
April 2003
36
Design in ICT - Charts and graphs
Task advice
Using a spreadsheet A spreadsheet can be used
to create different types of graphs and
charts. A spreadsheet is made up of cells, rows
and columns. Enter the data in separate
cells, as illustrated. Select the data (in
the example, cells A3 to D5). Click on the
Insert Chart option. Select the chart type.
View the sample. Complete the steps by adding a
title, labelling the axes, and adding other
features if required.
Note This dialog box may displaydifferently
depending on thesoftware version used.
37
Design in ICT - Charts and graphs
Checklist
Think about these points when designing a chart
or a graph Choose a graph or chart type that
suits the data to be presented. Use column
and bar charts to compare the value of an item
or items over time or in categories. Use line
graphs to show trends and changes in values over
time. Use pie charts to compare the values
of parts of a whole. Include a clear, concise
title at the top. Differentiate the segments or
lines with colour or patterns.
38
Design in ICT - Charts and graphs
Checklist
Think about these points when designing a chart
or a graph If the number of categories exceeds
the maximum (6), combine the smallest
categories in an Other column, bar or
segment. In line graphs and column or bar
charts include a legend if more than one set
of data is plotted. Use a sans-serif font to
aid readability. Show units of measurement that
apply to values, such as millimetres or
prices. Include a statement about the source of
the data.
39
Businesscards
40
Design in ICT - Business cards
Sample format
41
Design in ICT - Business cards
Design features
Standard size for a business card is 95 mm x 55
mm
Harmonious colour combinations are used
Landscape orientation used to complement imagery
42
Design in ICT - Business cards
Design features
Most important information is placed most
prominently (the name of the company or business)
Black text enhances legibility
43
Design in ICT - Business cards
Design tools
Establish a visual hierarchy for your
business card by listing the data, analysing
it and then ranking the elements in order of
importance. Begin with the most important
information first. This will lead the reader
through the information from one element to
the next.
44
Design in ICT - Business cards
Task advice
The colour wheel and colour harmony Choose
harmonious colour combinations for a reserved,
professional or soothing effect, select
colours that are adjacent on the colour wheel,
such as lime and green. for a dynamic
effect, select colours that are directly
opposite each other, such as orange and
blue.Choose cool or warm colours to convey a
message that reflects the type of business, for
example cool colours, such as green and blue,
convey a clean, reserved image and are more
likely to be used by service businesses such
as a beauty salon or a medical centre. warm
colours, such as yellow and red, convey an
urgent, comforting or active image, and are more
likely to be used by a restaurant or rock
concert promoters.
45
Design in ICT - Business cards
Checklist
Think about these points when designing a
business card Use sans-serif fonts such as
Arial, Comic Sans MS, Helvetica, Futura or
Univers. Use a larger font for the business
name and use bold to highlight important text
such as the contact persons name. A tag
line can be used to describe the product or
services offered. Use minimal punctuation.
Limit the number of fonts to one or two. Use
empty space to increase the legibility and impact
of your design.
46
Résumés
47
Design in ICT - Résumés
Sample format
48
Design in ICT - Résumés
Design features
This résumé is formatted on one page. They can be
longer in length
49
Design in ICT - Résumés
Design features
Indented text helps to distinguish the sections,
making them easier to locate
50
Design in ICT - Résumés
Design features
White (empty) space gives the eyes space to rest
on the page
51
Design in ICT - Résumés
Design tools
Thumbnail sketches A thumbnail sketch is a
small, rough layout drawing. Draw three or
four thumbnail sketches of your design
ideas. Select the preferred sketch, based on
appearance and clarity of message and follow
this plan when using the computer.
52
Design in ICT - Résumés
Task advice
Footers Insert a footer in your résumé by
selecting the Header and Footer option from
the View menu. Click on the footer you want by
selecting from Auto Text. Make any changes to
the footer you have selected.
Note This dialog box may displaydifferently
depending on thesoftware version used.
53
Design in ICT - Résumés
Checklist
Think about these points when designing a
résumé Set the name in a larger point size than
the text to give the reader a clear and
compelling starting point. Format the résumé on
one page, if possible. Set the main text in
either a serif or sans-serif font. Place
employment details in chronological order,
beginning with the most current date. Use a
short line length for the main text.
54
Reports
55
Design in ICT - Reports
Sample format
Extracts from a multiple page report
56
Design in ICT - Reports
Design features
A heading hierarchy is used
The headings are in a sans-serif font that aids
readability
57
Design in ICT - Reports
Design features
A header and a footer are included
58
Design in ICT - Reports
Design features
White (empty) space gives the eye space to rest
on the page
59
Design in ICT - Reports
Design tools
Data structure table In a table, list the
styles that you will use in your next
report. The styles in the table to the
right are those used in the sample report.
60
Design in ICT - Reports
Task advice
Style sheet A style sheet is a group of styles
that have different font and paragraph
attributes. A style sheet saves you time
Instead of repeatedly formatting the same
heading type, you simply click on the required
style. If you want to revise a style, you
only have to do it once. You can produce a
document with a style sheet and reuse it. A
style sheet helps to give your report a
consistent look. Select Format, Styles and
Formatting to create a stylesheet.
The paragraph styles used in the sample report.
The main font and paragraph attributes for
Heading I are Arial Black font, 12 points,
flush left.
61
Design in ICT - Reports
Checklist
Think about these points when designing a
report Include a cover page, introduction,
conclusion and bibliography. Use a maximum
text line length of 12-13 cm. In multi-page
reports, consistently follow the chosen page
design. Use a sans-serif font for the headings
and a serif font for the paragraph text.
Limit the number of fonts to two or three. In
multi-page reports, include page numbers on all
pages except the cover. List references in a
bibliography in alphabetical order.
62
Questionnaires
63
Design in ICT - Questionnaires
Sample format
64
Design in ICT - Questionnaires
Design features
The heading defines the purpose
65
Design in ICT - Questionnaires
Design tools
Visual hierarchy To help you create an effective
design, establish a visual hierarchy for your
questionnaire. Write the questionnaire, and then
rank the sections in order of importance. Rank
the most important information first.
66
Design in ICT - Questionnaires
Task advice
Adding lines and tick boxes When you have a
rough sketch of how you want your
questionnaire to look, you can add lines and
tick boxes to develop it.. You can create
uniform lines by inserting a table, adjusting
the line spacing (for example to 1.5), and
deleting the top horizontal line and the
vertical lines. Select Format, Borders and
Shading to create these lines. You can create
tick boxes by using a picture font containing
a tick box or by drawing a rectangle using
a drawing tool.
Note This dialog box may display differently
depending on the software version used.
67
Design in ICT - Questionnaires
Checklist
Think about these points when designing a
questionnaire Design a clear information
hierarchy based on three sections -
instructions - questions - answers. Use
sans-serif fonts as they are clear and legible,
particularly at small sizes. Number each
question. Place tick boxes close to the answer
options for yes/no, limited-choice and
multiple-choice questions. Numbers, words or
tick boxes used for scaled questions should be
evenly spaced. Provide sufficient space to
answer open questions. Include a thank-you
line. Provide clear instructions on what to do
with the questionnaire. A name and address
section may be included.
68
Emails
69
Design in ICT - Emails
Sample format
Sample format of a formal email
70
Design in ICT - Emails
Design features
A meaningful description of the subject
71
Design in ICT - Emails
Sample format
Sample format of an informal email
72
Design in ICT - Emails
Design features
If the email is formatted in HTML, choose a
sans-serif font and a font size that will be
large enough to read
73
Design in ICT - Emails
Design tools
Layout sketch Sketch an outline of your next
formal email to help you provide a meaningful
subject description structure the email
correctly include all important components.
74
Design in ICT - Emails
Task advice
Signatures Signatures are pre-saved text
segments, such as contact details and a
confidentiality statement, that you can
automatically insert into an email. You can
create different signatures for different types
of email. Select the Signatures option or Tools,
Options, Mail Format, Signature and follow the
dialogue box prompts to create a signature.
75
Design in ICT - Emails
Checklist
Think about these points when designing an
email Choose the format for the email message
HTML or plain text. If HTML is used, you can
apply a variety of formatting, such as
numbering, bullets, bold, italics, a horizontal
line or a background colour. Include a
meaningful description in the subject line to
help the recipient determine the nature of the
email. Choose a greeting that suits the
email. Use paragraphs in the body of a formal
email if the message is more than a few
lines. Send long pieces of text as
attachments. Refer to any attachments in the
email. Finish with a closing that suits the
email. If appropriate, include a signature.
76
Slideshows
77
Design in ICT - Slideshows
Sample format
78
Design in ICT - Slideshows
Design features
Each slide has a title, with ideas presented in
point form
79
Design in ICT - Slideshows
Design features
Main heading is set at 40-48 points
Only one or two fonts are used
A dark background has been used to aid
readability when presented with a data projector
Fonts and colours have been used consistently
80
Design in ICT - Slideshows
Design features
Slides have no more than four to six main points
The design reflects the purpose of the slide
show to inform, persuade, educate and/or
entertain
81
Design in ICT - Slideshows
Design tools
Storyboard Prepare an attention-getting opening
title for slide 1. Prepare an introduction
or overview for slide 2. List the key ideas
for the following three slides. Each slide
should cover a different topic. Include
details of photos, diagrams, clip art, tables,
diagrams, graphs, sound or animation that you
want to use on particular slides. Prepare a
closing slide that summarises your message.
82
Design in ICT - Slideshows
Task advice
Animation In a slide, you can animate text or an
image and add sound to it.To create and animated
slide choose the animation option select the
object you want to animate select the entry
and/or exit effect (such as Crawl-In, Spiral
or Dissolve) and sound effect (such as
Applause, Drum Roll or Whoosh) set the order
of the animation select from the options for
starting the animation, such as On mouse
click Use the preview option to preview the
animation
Note This dialog box may display differently
depending on the software version used.
83
Design in ICT - Slideshows
Task advice
Handouts Select Handouts from the Print
what option. Select Pure black and white
from the print option. This removes the
background effect and improves the readability of
the slides. From the Handouts option, select
3-6 slides per page. Lines for note-taking
during the presentation are only available on the
three slides per page option.
84
Design in ICT - Slideshows
Task advice
Speakers notes Used by the speaker to write
notes or prompts to help when giving a talk.
Usually written in point form. Provide a brief
elaboration of the accompanying slide. Useful
when rehearsing talk.
85
Design in ICT - Slideshows
Checklist
Think about these points when designing a
slideshow Begin the slide show with an
attention-getting opening title set at 44-72
points. Include no more than four to six points
per slide and a maximum of six to 10 words per
point. Use bullet points. Use only one or two
fonts. Use sans-serif fonts as these are easier
to read on-screen than serif fonts. Limit
the use of ALL-CAPITALS and italics. Use
relevant photos and clip art to enhance your
presentation. Restrict the number of colours.
Limit the number of different effects, such as
animation and sound. Use a white background
for presentations from a computer. Conclude the
slide show with a summary slide and, if relevant,
a list of references.
86
Newsletters
87
Design in ICT - Newsletters
Sample format
The purpose of this newsletter is to provide
information to the organisations members
88
Design in ICT - Newsletters
Design features
The title is prominent
There is an appropriate balance of empty space,
graphics, text, contrast and shading
89
Design in ICT - Newsletters
Design features
A heading hierarchy is used. Headings are larger
than the body text size and are set in a
sans-serif font
90
Design in ICT - Newsletters
Design tools
Grids A grid is a useful too for designing a
newsletter. It provides a structure for
placing the text and graphical elements. A
grid assists in keeping the text and graphical
elements aligned. It also allows you to
maintain page-to-page consistency in a
multi-page design. Grids are used to determine
the number and width of columns to be used.
People find shorter line lengths easier to
read than longer ones. Use a three or
five-column grid to design a newsletter.
A five-column grid used to design the front cover
of a newsletter
A five-column grid used to create a two-column
format for the inside pages
91
Design in ICT - Newsletters
Task advice
Templates Create a template for an ongoing
newsletter and use a copy of the template
leaving the original intact. A newsletter
template contains some text and graphics that
remain constant and some that are updated or
replaced using text and graphics
placeholders. A newsletter template has inbuilt
document settings for page dimensions, number
of pages and margins, and contains set columns
and layout grids. It may use master pages
containing different settings and design
elements for different types of pages or
sections. It may also have an inbuilt text
style list specifying how headings and
paragraphs will appear on the page.
92
Design in ICT - Newsletters
Task advice example
Template for Compak newsletter, showing the
layout grid for one of the master pages and the
names of some of the text styles used. The
newsletter document and template were created in
black and white and printed in a single colour.
93
Design in ICT - Newsletters
Checklist
Think about these points when designing a
newsletter The cover text can be set in a serif
font or a sans-serif font. Use a sans-serif
font for the headings. Set the paragraph text
on the inside pages in a serif font to aid
readability. Set the main text at 9-12
points. Include a headline on the front cover
to introduce the newsletters purpose and give
the reader a compelling starting point. Set
the inside text in two or three columns (in
two-column format left-aligned text is easier
to read than justified text). Choose harmonious
colours that suit the content. Include a page
number on each page, except the cover. Include
a header (such as the name of the newsletter and
issue number) on each of the inside pages.
94
Brochures
95
Design in ICT - Brochures
Sample format
Brochures are often used to promote a product,
service or an event. They can take the form of a
single-sided A4 page, a double-sided A4 page or
a range of folded A4 formats, such as A5
(four-panels) or DL (six-panels).
96
Design in ICT - Brochures
Design features
Readers can move through the brochure in a
logical manner, starting from the upper-left
corner
The headings, text and graphics are proportionate
to each other
Only two or three fonts are used and most text is
set in sans-serif fonts
97
Design in ICT - Brochures
Design features
The brochure has an attention-getting headline
and compelling images
The use of bright, contrasting colours (red and
blue) provides a vibrant, dynamic effect
98
Design in ICT - Brochures
Design tools
The rule of thirds When designing a brochure
use the rule of thirds. As a general rule, a
page design is more interesting and appealing if
visually divided into thirds rather than half.
For example
Once you have mastered this rule, you can bend
it, for example
Page layout divided into half
Page layout divided into thirds
99
Design in ICT - Brochures
Task advice
Processing images for use in print documents
Images that are printed need to be
high-resolution graphics saved in a suitable
format. Using a digital camera or scanner,
photos should be captured at a resolution of
240-300 dpi in order to produce high-quality
output needed for print documents. Widely used
file formats for images that are printed
include - TIFF (Tagged Image File Format)
used to save photos - BMP (Bitmap) used to
save illustrations, diagrams and logos -
EPS (Encapsulated Postscript) used to save
illustrations, diagrams and logos - Images
saved in these file formats can be very large.
100
Design in ICT - Brochures
Task advice example
Photo scanned at 300 dpi and saved as a TIFF (1.3
MB)
Photo scanned at 72 dpi and saved as a TIFF (100
KB). Note the reduced quality of this TIFF
compared to the one on the left.
101
Design in ICT - Newsletters
Checklist
Think about these points when designing a
brochure As a general rule, place the headline
near the top of the page, followed by one or
more suitable images and text, and the contact
details at the bottom. The headline should be
prominent and clear. Use a heading hierarchy.
Use larger font sizes for headings than for
paragraph text. Use sans-serif fonts for most
text to provide a crisp look. Choose images
that suit the content and the intended
audience. In order to create a cohesive design,
use consistent - margin and gutter widths -
fonts and font sizes - type styles - bullets
- line spacing.
102
Invitations
103
Design in ICT - Invitations
Sample format
104
Design in ICT - Invitations
Design features
Portrait orientation suits the content
Original size is 10 cm x 20 cm
105
Design in ICT - Invitations
Design features
The design is based on a visual hierarchy
1
2
3
106
Design in ICT - Invitations
Design features
Red text attracts attention
The text is legible and contrasts with the
background
107
Design in ICT - Invitations
Design tools
Layout sketch Draw two or three sketches of
your design ideas. Label the text and graphical
elements with the attributes and effects
you would like to apply to those elements.
Select the preferred sketch based on
appearance and clarity of message and follow
this plan when using the computer.
108
Design in ICT - Invitations
Task advice
Wrapping text around an image To create a visual
impact, you can wrap text around an image in a
document. To do this import and place the
image select the image choose the command for
wrapping text select the wrap option you want
to apply select the text-flow option you want
to apply enter the stand-off values for the
rectangular boundary around the image if the
option is available, you may want to customise
the text wrap and reshape the boundary. Note
Other wrapping options may be available.
Note this dialog box may display differently
depending on the software version used.
109
Design in ICT - Invitations
Checklist
Think about these points when designing an
invitation Decide on a format portrait,
landscape, or even circular. Limit the number
of fonts to two or three. Choose legible fonts
that suit the event. Limit the use of
decorative fonts. Use a sans-serif font for the
main text. Sans-serif fonts are more legible
than serif fonts. Limit the amount of text.
Surround the lines of text with empty space.
Choose a colour for the text that contrasts with
the background colour, for example - a
light text colour on a dark background - a dark
text colour on a light background. All
necessary information (venue, time, date, RSVP,
contact details) should be clear and large
enough to read.
110
Posters
111
Design in ICT - Posters
Sample format
Sample format of a portrait poster
112
Design in ICT - Posters
Design features
Prominent heading
113
Design in ICT - Posters
Sample format
Sample format of a landscape poster
114
Design in ICT - Posters
Design features
Harmonious colours are used (blue and green)
115
Design in ICT - Posters
Design features
Lines lead the reader to the focal point
116
Design in ICT - Posters
Design tools
Grids A grid is a useful tool for designing a
poster. It provides a structure for placing
the text and graphic elements. Use a
three-to-six column grid to design a poster.
117
Design in ICT - Posters
Task advice
Groupings It is important to group similar items
of information in order to improve the clarity of
a poster. Identify all items of text and images
to be included. Group related items
together. Shapes that are aligned create a
sense of unity and order. Place the groups in a
logical order so that the reader is not
confused.
118
Design in ICT - Posters
Task advice examples
Information sets are floating and this causes
confusion.
Information sets are aligned, creating a sense of
unity and order
119
Design in ICT - Posters
Checklist
Think about these points when designing a
poster Establish a visual hierarchy that
clearly identifies the importance of each
element. Use a sans-serif font for headings.
Group similar items of text and elements to
create a sense of order. Use lines or images
to direct the order in which the content
should be read. Use white space (empty space)
to emphasise content. Choose colours that suit
the content.
120
Tables
121
Design in ICT - Tables
Sample format
Sample format of a text table
122
Design in ICT - Tables
Design features
The heading and text columns are left-aligned
123
Design in ICT - Tables
Design features
A heading hierarchy is used and headings are in
bold
A sans-serif font is used to aid readability
Vertical lines are not needed to structure the
table
124
Design in ICT - Tables
Design features
Line weights are heavier for the top and bottom
lines
125
Design in ICT - Tables
Sample format
Sample format of numeric table
126
Design in ICT - Tables
Design features
A sans-serif font is used to aid readability
127
Design in ICT - Tables
Design features
Money values are appropriately labelled,
right-aligned and have two decimal places
128
Design in ICT - Tables
Design tools
Draw a sketch of the table and label it with the
formatting you would like to apply.
129
Design in ICT - Tables
Task advice
Tables Use tables to format data in columns.
To create a table, select the Insert Table or
Table, Insert option and enter the required
number of rows and columns. You can alter the
appearance of the table by - adjusting line
spacing and column widths - adding shading or
colour to particular rows, columns or cells
- deleting lines. You can right-align numbers
in columns and perform calculations on them.
You can sort data in a column by text, number
or date order.
Note this dialog box may display differently
depending on the software version used.
130
Design in ICT - Tables
Checklist
Think about these points when designing a table
Use a hierarchy of headings. Use a sans-serif
font. Format table titles that extend beyond
the length of the table in two lines. Give
all columns a heading. Vary column widths to
suit the information being presented. Avoid
vertical lines in tables that are read
horizontally. Label columns of numbers with the
appropriate symbol or description.
Right-align numbers in columns. Money values
should have two decimal places or none. Use a
space to separate numbers over 999, for example,
2 875. Use bold for totals in columns of
numbers.
131
DesignElements
132
Design in ICT - Design elements
Clarity and consistency
Consistent placement of text and images
increases the ease and speed with which
information products are read or used. Use of
clear, simple language aids clarity. Repeating
colours aids navigation. Use the same style for
headings and lists.
Navigation buttons are aligned and equally spaced
Line spacing is consistent
Upper and lower case are consistently used
Colours of images and text are consistent
133
Design in ICT - Design elements
Appropriateness and relevance
Create an information product that suits the
audience profile. For example, consider the
age, special needs, gender and culture of
the audience. Use symbols that are intuitive
and that clearly indicate their function.
Create an information product that serves its
purpose - to inform - to persuade - to
entertain - to educate.
This poster is designed to educate the audience
134
Design in ICT - Design elements
Usability and accessibility
Effective use of hyperlinks and navigation
buttons increases the control a viewer has
over the product. Compress files where
appropriate, to reduce downloading time. Areas
around links should be of sufficient size to
allow ease of selection of hyperlinks.
Changing the appearance of the button upon
selection lets the user know that the button is
activated. Use the ALT tag to caption images.
This helps the user make navigation and
downloading decisions, if the size of a file is
included.
Navigation button changeswhen selected
ALT tag elaborates anabbreviation. This
increasesthe buttons usability
135
Design in ICT - Design elements
Proportion
Establish a clear heading hierarchy using
appropriate fonts. Use white (empty) space
around text or an image to focus the eye on
the content. Proportions can be altered by
changing elements such as - the margins -
spacing between lines - spacing between
columns - spacing between headings - spacing
around text and images.
White (empty) space usedto focus the eye on
content
Equal spacing between headings, text lines and
images
Spacing used betweencolumns creates an
equalsense of proportion
136
Design in ICT - Design elements
Direction
Align elements so that the eye is easily
lead from one element to another. Vary the
thickness, type and direction of lines to
create different effects, for example
vertical lines stop the eyes movement
horizontal lines rest the eyes. Use lines
and images to indicate the order in which
information should be read.
137
Design in ICT - Design elements
Colour and contrast
Avoid green and red together as colour-blind
people find it difficult to distinguish
between these colours. Visual texture adds
contrast and depth. Darker colours add more
contrast lighter colours seem more distant.
Emphasis of content can be achieved through
contrasting colours, lines, textures, text.
138
Conventionschecklist
139
Design in ICT - Conventions checklist
Conventions checklist
The appearance and functioning of an information
product is enhanced if commonly accepted
conventions are applied. This section provides a
summary of the checklists provided for each of
the information products.These checklists are
organised according to whether the information
product is printed or viewed on-screen. Note
these checklists are guidelines only they are
not rules.
140
Design in ICT - Conventions checklist
On-screen
Content Is the purpose of the site clear?
Does the content suit the purpose? Is the
content appropriate for the audience? Is the
language appropriate (clear and simply stated)?
Are the graphics appropriate to the content and
the intended audience? Does each page/frame
contain a different concept or idea? Is the
text free of typographical, spelling and
grammatical errors? Is the information
accurate and current? Do photographs have
descriptive captions? Is the file size and type
for video files and downloads provided?
141
Design in ICT - Conventions checklist
On-screen
Design and layout Is the design appropriate for
the intended audience? Are the design elements
used consistently? Are the images and fonts
smooth? Have predictable icons been used? Has
a clear hierarchy of headings and consistent
heading styles been used? Have uppercase and
lowercase been used consistently? Have only one
or two fonts been used? Is the most important
information placed first on a page/frame? Is
the text easy to read? Are animations limited
to no more than one per page? Are the
pages/frames well formatted and uncluttered?
142
Design in ICT - Conventions checklist
On-screen
Colours Are the colours appropriate for the
purpose of the design? Are the colours used
consistently throughout the site? Is the number
of colours limited to no more than four? Is
most text set in black? Is there sufficient
contrast between the background colour and the
text colour? Is the main background either
white, grey or pale blue? Have red and green
together been avoided?
143
Design in ICT - Conventions checklist
On-screen
Accessibility Is the text size for the body set
at the browser default? Has the ALT attribute
in image tags been used? Are text equivalents
provide with all non-text elements, including
images and audio and video files? Can moving
text and images be paused? Is the main text at
least 12 points in size? Are the colours bright
and do they contrast well? Are the hyperlinks
and navigation buttons easy to select? Do the
navigation facilities change in some way to
acknowledge selection? Have transcripts of
oral presentations been provided? Can the
website be viewed in different text sizes?
144
Design in ICT - Conventions checklist
On-screen
Navigation Is one main frame used? Is the
content logically arranged? Are the navigation
elements of a good size? Are the navigation
elements positioned in the same place on every
page/frame? Can important information be
accessed in no more than three hops/clicks?
Can users get to 80 of the documents they want
to view in no more than for or five
hops/clicks? Is the search function included if
large amounts of information are provided?
Is the destination of the hyperlink obvious?
Have breadcrumbs been used to trace links
within the site? Have no Click here
instructions been used?
145
Design in ICT - Conventions checklist
On-screen
Usability Does the site work for both Internet
Explorer and Netscape browsers, using either
Macintosh or Windows operating systems? Do all
components of the site work, such as links and
forms? Can sound be turned off? Are special
requirements, such as plug-ins, or special
features, such as interactivity, clearly
explained?
146
Design in ICT - Conventions checklist
Electronic
Writing on-screen Is the most important
information in the first sentence? Does
information appear in chunks or shorter blocks?
Does only one concept/idea appear on a screen?
Are bullets/lists used instead of long
paragraphs? Are sentences and line lengths
short? Is information on the home page
effectively placed? Is the language
straightforward with minimal jargon? Is a
variety of data types used (text, images, sound)?
147
Design in ICT - Conventions checklist
Electronic
Reading on-screen Is information easy to scan
for meaning because people do not read
on-screen word for word? Is a variety of data,
such as text, images, icons and sound used to
convey information? Is text not dense because
reading on-screen can be slower than reading
printed material? Are hyperlinks used to allow
the reader to control the order in which
information is read? Does the placement of
information enhance reading? The following
image shows the order in which most people
typically read on-screen.
148
Design in ICT - Conventions checklist
Electronic
Reading on-screen
Familiar and prominent positionIntuitive to the
reader
Prominent positionViewer needs to pay special
attention
Familiar positionUsually contains detailed
informationoften used for maps/policies
Usually contains detailsViewer needs to pay
special attention
149
Design in ICT - Conventions checklist
Print
Text Spacing Is there one space after a full
stop and all other punctuation marks? Is there
no space before a punctuation mark? Is white
(empty) space used to create a rest space for
readers? Is a blank line Enter inserted
before a paragraph? Have margin widths, fonts,
font sizes, paragraph indenting and column
spacing been used consistently? Lists Are
numbers used for a sequenced list, such as
instructions? Are bullets used for a
non-sequenced list? Are lists used to break up
text and to assist readability?
150
Design in ICT - Conventions checklist
Print
Text Fonts Is a serif typeface used for
paragraphs, for example Times New Roman? Is
9-12 point used for the main text? Is 6-8 point
used for captions and footnotes? Is sans-serif
typeface used for headings, tables and diagram
labels, for example Arial, Helvetica, Comic Sans
MS? Are the number of fonts, type styles and
font sizes limited? Has upper and lower case
been used consistently? Headings Are bold or
italics used for emphasis rather than
underlining? Are only short headings centred?
Are clear heading hierarchy and consistent
heading styles used?
151
Design in ICT - Conventions checklist
Print
Text Line length Is the maximum line length
12-13 cm? Is the sentence length limited to
15-25 words? Is the paragraph length limited to
3-5 sentences? Is most text left-aligned (only
short units of text centred)?
152
Design in ICT - Conventions checklist
Print
Numeric Alignment Are numbers in columns
right-aligned? Do money values have either two
decimal places or none? Are decimal points
aligned? Have single numbers or columns of
numbers been appropriately labelled? Are they
placed at the top of columns in a table or next
to single numbers? Spacing Is one space used
to separate numbers over 999, for example 1
000 1 500? Is one space or a comma used in
paragraphs to separate numbers over 9999, for
example 15 000 or 15,000 (not 15000)?
153
Design in ICT - Conventions checklist
Print
Numeric Lines Is a single line used above
subtotals in columns of numbers? Is a single
line above and a single or double line below
grand totals used in columns of numbers? Are
lines, graphics, symbols, borders and shading
used consistently?
154
Design in ICT - Conventions checklist
Print
Numeric Charts and numeric charts Is a title
provided for a chart or graph? Are the X-axis
and Y-axis labelled? Are scales and units of
measure shown on graphs? Are scales on vertical
axis (y) and units of measure shown on
charts? Has a key or legend been provided if
more than one set of data is plotted on the
same graph or chart? Is each segment of a pie
chart labelled? Are the pie chart segments
arranged from largest to smallest, starting at
the 12 oclock position? Are sources of data
indicated on graphs and charts?