design in ict

DesignIn 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 productsFourteen 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

WebsitesLetters and envelopes

Charts and graphsBusiness graphsRésumésReportsQuestionnairesEmailsSlideshowsNewslettersBrochuresInvitations

PostersTables

Websites

Sample format

Design in ICT - Websites

Website for Boost Juice

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 left-aligned

Design features


Back button (not the best navigation location as it is difficult to see)

Images complement the website’s content

Consistent fonts

Design features


Colour combination is effective and visually pleasing

Website design is appropriate for the intended audience

White background

All relevant contact details included

Sound can be switched on or off to suit user

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.

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.

Task advice examples


Examples of images saved with different compressions

JPEG with high compression(10% quality, small file size 8 KB)

JPEG with low compression(70% quality, larger file size 16 KB)

Gif with high compression(8 colours, small file size 8 KB)

Gif with medium compression(64 colours, larger file size 16 KB)

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.

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

Sample format

Design in ICT - Letters

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 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

R2R2

R2

R2R2

R2R4-6

R2

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

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 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.

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.

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

Sample format

Design in ICT - Charts and graphs

Sample format of a line graph

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 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

Sample format


Sample format of a pie chart

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 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 features


The segments are arranged from largest to smallest, starting at the 12 o’clock position

Sample format


Sample format of a column chart

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 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 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

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.

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.

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.

Businesscards

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 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 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.

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.

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

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 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 features


White (empty) space gives the eyes space to rest on the page

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.

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.

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

Sample format

Design in ICT - Reports

Extracts from a multiple page report

Design features


A heading hierarchy is used

The headings are in a sans-serif font that aids readability

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 features


White (empty) space gives the eye space to rest on the page

A bibliography is included

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.

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.

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

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 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.

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.

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

Sample format

Design in ICT - Emails

Sample format of a formal email

Design features


A meaningful description of the subject

A formal greeting

Use of paragraph text

A formal closing

Signature including confidentiality statement and disclaimer

Sample format


Sample format of an informal email

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 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.

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.

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

Sample format

Design in ICT - Slideshows

Design features


Each slide has a title, with ideas presented in point form

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 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 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.

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.

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.

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.

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

Sample format

Design in ICT - Newsletters

The purpose of this newsletter is to provide information to the organisation’s members

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 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 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

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.

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.

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

Sample format

Design in ICT - Brochures

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 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 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 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:

Page layout divided into half

Once you have mastered this rule, you can bend it, for example:

Page layout divided into thirds

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.

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.

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

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 features


The design is based on a visual hierarchy

1

23

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 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.

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.

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

Sample format

Design in ICT - Posters

Sample format of a portrait poster

Design features


Prominent heading

Contrast created by using strong (red) and soft (green) colours

Size and placement of text and images indicates relative importance of each element

White (empty) space aids readability

Sample format


Sample format of a landscape poster

Design features


Harmonious colours are used (blue and green)

Sans-serif font aids readability

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 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.

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.

Task advice examples


Information sets are floating and this causes confusion.

Information sets are aligned, creating a sense of unity and order

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

Sample format

Design in ICT - Tables

Sample format of a text table

Design features


The heading and text columns are left-aligned

The first letter of each item in each column is capitalised

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 features


Line weights are heavier for the top and bottom lines

Different column widths are used to suit the text

Sample format


Sample format of numeric table

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 features


Money values are appropriately labelled, right-aligned and have two decimal places

Contrasting colours are used to differentiate rows

Design tools


Draw a sketch of the table and label it with the formatting you would like to apply.

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.

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.

DesignElements

Clarity and consistency

Design in ICT - Design elements

• 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 usedColours of images and text are consistent

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

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 button’s usability

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

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.

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.

Conventionschecklist

Conventions checklist

Design in ICT - 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.

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?

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?

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?

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?

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?

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?

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)?

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.

Electronic


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

Reading on-screen

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?

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?

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)?

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)?

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?

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?

design in ict

Documents

ict websiteswebsite

ict websitesexamples

ict lettersthere

ict websitesthis

ict websitesthere

ict websitesthink

ict websitessaving images

small file size