Design
In ICT
Designing in ICT involves making decisions about:
• the appearance of an information product
• how to produce an information product.
Design in ICT
Information products
Design elements
Conventions checklist
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.
Information products
Websites
Letters and envelopes
Charts and graphs
Business graphs
Résumés
Reports
Questionnaires
Emails
Slideshows
Newsletters
Brochures
Invitations
Posters
Tables
Websites
Design in ICT - Websites
Sample format
Website for Boost Juice
Design in ICT - Websites
Design features
Splash page gives user
feedback on load time
Domain name
(www.boostjuice.com) is
concise and easy to
remember
Clear and concise
navigation elements and
consistent placement of
navigation bar
A heading hierarchy is
used and text is leftaligned
Design in ICT - Websites
Design features
Back button
(not the best navigation
location as it is difficult
to see)
Images complement the
website’s content
Consistent fonts
Design in ICT - Websites
Design features
White background
Colour combination is
effective and visually
pleasing
Website design is
appropriate for the
intended audience
All relevant contact
details included
Sound can be switched
on or off to suit user
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.
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.
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
JPEG with low compression
(70% quality, larger file size 16 KB) (64 colours, larger file size 16 KB)
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.
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
Letters and
envelopes
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
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
Design in ICT - Letters
Design features
Date in full
Two spaces and no
punctuation in address
Formal closing
Personal letterhead in a
sans-serif font with
minimal punctuation.
This aids readability
Correct title used
One space after a full
stop
Enclosure indicated
Design in ICT - Letters
Sample format
Two spaces and no
punctuation in bottom
line
Bottom line all in capitals
Postcode squares not
used for machine printed
envelopes or labels. Use
only for hand-written
postcodes
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.
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.
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.
Charts and
graphs
Design in ICT - Charts and graphs
Sample format
Sample format of a line graph
Design in ICT - Charts and graphs
Design features
Title describes what the
chart shows
A scale is provided on
the vertical (y) axis
Colours are used to
differentiate the lines
A legend is included if
more than one set of
data has been plotted
Design in ICT - Charts and graphs
Design features
The horizontal (x) axis is
labelled
Source statement is
included
Time is always shown on
the x axis and quantity
on the y axis
Design in ICT - Charts and graphs
Sample format
Sample format of a pie chart
Design in ICT - Charts and graphs
Design features
Absolute values as well
as percentages can be
shown on the segments
The number of segments
is six, the maximum
recommended
Different colours are
used to differentiate the
segments
Design in ICT - Charts and graphs
Design features
The title describes what
the chart shows
Long category labels are
placed in a legend. Short
category labels can be
placed beside the
segments
The ‘Other’ category is
placed last
Design in ICT - Charts and graphs
Design features
The segments are
arranged from largest to
smallest, starting at the
12 o’clock position
Design in ICT - Charts and graphs
Sample format
Sample format of a column chart
Design in ICT - Charts and graphs
Design features
Title describes what the
chart shows
A scale is provided on
the vertical (y) axis
Each column starts at
zero
Colours are used to
differentiate two sets of
data
Design in ICT - Charts and graphs
Design features
A legend is included
A sans-serif font is used
to assist readability
The horizontal (x) axis is
labelled
Source statement is
included
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, Children’s
Participation in Cultural and
Leisure Activities, Australia,
April 2003
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 display
differently depending on the
software version used.
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.
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.
Business
cards
Design in ICT - Business cards
Sample format
Design in ICT - Business cards
Design features
Standard size for a
business card is
95 mm x 55 mm
Harmonious colour
combinations are used
Services offered are
listed
Landscape orientation
used to complement
imagery
Design in ICT - Business cards
Design features
Most important
information is placed
most prominently (the
name of the company or
business)
Contact name is
prominent
Black text enhances
legibility
All relevant contact
details are included
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.
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.
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
person’s 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.
Résumés
Design in ICT - Résumés
Sample format
Design in ICT - Résumés
Design features
This résumé is
formatted on one page.
They can be longer in
length
The bold headings
divide the text into short
segments
Design in ICT - Résumés
Design features
Indented text helps to
distinguish the sections,
making them easier to
locate
The entries are in
chronological order,
starting with the most
current date
The size and placement
of the name and contact
details helps to draw the
reader onto the page
Design in ICT - Résumés
Design features
White (empty) space
gives the eyes space to
rest on the page
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.
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 display
differently
depending on the
software version
used.
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.
Reports
Design in ICT - Reports
Sample format
Extracts from a
multiple page report
Design in ICT - Reports
Design features
A heading
hierarchy is used
The headings are in
a sans-serif font
that aids readability
Design in ICT - Reports
Design features
A header and a footer
are included
The vertical line
frames the text and
leads the reader
down the page
The captions are in a
small sans-serif font
The short text line
length is easy to read
The images are
informative and enhance
the report
Design in ICT - Reports
Design features
White (empty) space
gives the eye space to
rest on the page
A bibliography is
included
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.
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.
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.
Questionnaires
Design in ICT - Questionnaires
Sample format
Design in ICT - Questionnaires
Design features
The heading defines the
purpose
The instruction area is
shaded to distinguish it
from the question and
response area
The questions are in
plain text and the
instructions are in italics
The tick boxes are close
to the corresponding
answer options
Sufficient space is
provided for answering
open questions
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.
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.
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.
Emails
Design in ICT - Emails
Sample format
Sample format of a formal email
Design in ICT - Emails
Design features
A meaningful description
of the subject
A formal greeting
Use of paragraph text
A formal closing
Signature including
confidentiality statement
and disclaimer
Design in ICT - Emails
Sample format
Sample format of an informal email
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
Informal subject
Informal greeting
Informal presentation
Informal closing
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.
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.
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.
Slideshows
Design in ICT - Slideshows
Sample format
Design in ICT - Slideshows
Design features
Each slide has a title,
with ideas presented in
point form
Design in ICT - Slideshows
Design features
Main heading is set at
40-48 points
Body text is set at 24-30
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
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
A hierarchy for bullets
has been used
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.
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.
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.
Design in ICT - Slideshows
Task advice
Speaker’s 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.
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.
Newsletters
Design in ICT - Newsletters
Sample format
The purpose of this
newsletter is to provide
information to the
organisation’s members
Design in ICT - Newsletters
Design features
The title is prominent
The logo identifies the
organisation and gives a
professional look
A full or abbreviated
contents list is provided
There is an appropriate
balance of empty space,
graphics, text, contrast
and shading
Meaningful graphics
enhance the visual
appeal of the newsletter
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
Consistent margin and
gutter widths, fonts, font
sizes, bullets and line
spacing are used
Issue number and date
of publication are
included
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 twocolumn format
for the inside
pages
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.
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.
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
newsletter’s 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.
Brochures
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).
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
A heading hierarchy is
used
Only two or three fonts
are used and most
text is set in sans-serif
fonts
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
White (empty) space
around the text
enhances its legibility
and provides
additional contrast
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
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.
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.
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.
Invitations
Design in ICT - Invitations
Sample format
Design in ICT - Invitations
Design features
Portrait orientation
suits the content
The image complements
the content
Most text is in a
sans-serif font
Original size is 10 cm x
20 cm
Design in ICT - Invitations
Design features
The design is based
on a visual hierarchy
1
2
3
Design in ICT - Invitations
Design features
Red text attracts
attention
The text is legible and
contrasts with the
background
Bold is used for
emphasis
Minimal punctuation is
used
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.
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.
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.
Posters
Design in ICT - Posters
Sample format
Sample format of a portrait poster
Design in ICT - Posters
Design features
Prominent heading
White (empty) space
aids readability
Contrast created by
using strong (red) and
soft (green) colours
Size and placement of
text and images
indicates relative
importance of each
element
Design in ICT - Posters
Sample format
Sample format of a landscape poster
Design in ICT - Posters
Design features
Harmonious colours
are used (blue and
green)
Sans-serif font aids
readability
Design in ICT - Posters
Design features
Lines lead the reader
to the focal point
Shapes are aligned,
creating a sense of
order and consistency
White (empty) space
‘rests’ the eyes
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.
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.
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
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.
Tables
Design in ICT - Tables
Sample format
Sample format of a text table
Design in ICT - Tables
Design features
The heading and text
columns are left-aligned
The first letter of each
item in each column is
capitalised
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
Design in ICT - Tables
Design features
Line weights are heavier
for the top and bottom
lines
Different column widths
are used to suit the text
Design in ICT - Tables
Sample format
Sample format of numeric table
Design in ICT - Tables
Design features
A sans-serif font is used
to aid readability
The stub (first column)
has a heading and is
left-aligned
Even spacing between
columns
The headings are
centred above the
columns
Design in ICT - Tables
Design features
Money values are
appropriately labelled,
right-aligned and have
two decimal places
Contrasting colours are
used to differentiate
rows
Design in ICT - Tables
Design tools
Draw a sketch of the table and label it with the formatting you
would like to apply.
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.
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.
Design
Elements
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
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
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 changes
when selected
ALT tag elaborates an
abbreviation. This increases
the button’s usability
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 used
to focus the eye on content
Equal spacing between
headings, text lines and images
Spacing used between
columns creates an equal
sense of proportion
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.
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.
Conventions
checklist
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.
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?
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?
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?
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?
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?
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?
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)?
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.
Design in ICT - Conventions checklist
Electronic
Reading on-screen
Familiar and prominent position
Intuitive to the reader
Prominent position
Viewer needs to pay special attention
Familiar position
Usually contains detailed information
often used for maps/policies
Usually contains details
Viewer needs to pay special attention
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?
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?
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)?
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)?
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?
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 o’clock position?
• Are sources of data indicated on graphs and charts?