Presentation on theme: "Design In ICT. Designing in ICT involves making decisions about: the appearance of an information product how to produce an information product."— Presentation transcript:
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 s Slideshows Newsletters Brochures Invitations Posters Tables
Sample format Design in ICT - Websites Website for Boost Juice
Design features Design in ICT - Websites 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 Design in ICT - Websites Back button (not the best navigation location as it is difficult to see) Images complement the website’s content Consistent fonts
Design features Design in ICT - Websites 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 Design in ICT - Websites 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 Design in ICT - Websites 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 Design in ICT - Websites 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 Design in ICT - Websites 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 words. Limit line length to 60 characters (approximately 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 Design in ICT - Websites 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 Design in ICT - Letters 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 R4-6 R2
Design features Design in ICT - Letters 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 Design in ICT - Letters 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 Design in ICT - Letters 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 Design in ICT - Letters 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 Design in ICT - Letters 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 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 Design in ICT - Charts and graphs 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 Design in ICT - Charts and graphs 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 Design in ICT - Charts and graphs Sample format of a pie chart
Design features Design in ICT - Charts and graphs 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 Design in ICT - Charts and graphs 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 Design in ICT - Charts and graphs The segments are arranged from largest to smallest, starting at the 12 o’clock position
Sample format Design in ICT - Charts and graphs Sample format of a column chart
Design features Design in ICT - Charts and graphs 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 Design in ICT - Charts and graphs 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 Design in ICT - Charts and graphs 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 Design in ICT - Charts and graphs 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.
Checklist Design in ICT - Charts and graphs 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 Design in ICT - Charts and graphs 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.
Sample format Design in ICT - Business cards
Design features Design in ICT - Business cards 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 Design in ICT - Business cards 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 Design in ICT - Business cards 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 Design in ICT - Business cards 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 Design in ICT - Business cards 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.
Sample format Design in ICT - Résumés
Design features Design in ICT - Résumés 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 Design in ICT - Résumés 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 Design in ICT - Résumés White (empty) space gives the eyes space to rest on the page
Design tools Design in ICT - Résumés 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 Design in ICT - Résumés 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.
Checklist Design in ICT - Résumés 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.
Sample format Design in ICT - Reports Extracts from a multiple page report
Design features Design in ICT - Reports A heading hierarchy is used The headings are in a sans-serif font that aids readability
Design features Design in ICT - Reports 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 Design in ICT - Reports White (empty) space gives the eye space to rest on the page A bibliography is included
Design tools Design in ICT - Reports 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 Design in ICT - Reports 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 Design in ICT - Reports Think about these points when designing a report Include a cover page, introduction, conclusion and bibliography. Use a maximum text line length of 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.
Sample format Design in ICT - Questionnaires
Design features Design in ICT - Questionnaires 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 Design in ICT - Questionnaires 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 Design in ICT - Questionnaires 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 Design in ICT - Questionnaires 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.
Sample format Design in ICT - s Sample format of a formal
Design features Design in ICT - s A meaningful description of the subject A formal greeting Use of paragraph text A formal closing Signature including confidentiality statement and disclaimer
Sample format Design in ICT - s Sample format of an informal
Design features Design in ICT - s If the 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 Design in ICT - s Layout sketch Sketch an outline of your next formal to help you: provide a meaningful subject description structure the correctly include all important components.
Task advice Design in ICT - s Signatures Signatures are pre-saved text segments, such as contact details and a confidentiality statement, that you can automatically insert into an . You can create different signatures for different types of . Select the Signatures option or ‘Tools, Options, Mail Format, Signature’ and follow the dialogue box prompts to create a signature.
Checklist Design in ICT - s Think about these points when designing an Choose the format for the 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 . Choose a greeting that suits the . Use paragraphs in the body of a formal if the message is more than a few lines. Send long pieces of text as attachments. Refer to any attachments in the . Finish with a closing that suits the . If appropriate, include a signature.
Sample format Design in ICT - Slideshows
Design features Design in ICT - Slideshows Each slide has a title, with ideas presented in point form
Design features Design in ICT - Slideshows Main heading is set at points Body text is set at 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 Design in ICT - Slideshows 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 Design in ICT - Slideshows 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 Design in ICT - Slideshows 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 Design in ICT - Slideshows 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 Design in ICT - Slideshows 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 Design in ICT - Slideshows Think about these points when designing a slideshow Begin the slide show with an attention-getting opening title set at 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.
Sample format Design in ICT - Newsletters The purpose of this newsletter is to provide information to the organisation’s members
Design features Design in ICT - Newsletters 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 Design in ICT - Newsletters 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 Design in ICT - Newsletters 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 Design in ICT - Newsletters 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 Design in ICT - Newsletters 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 Design in ICT - Newsletters 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.
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 Design in ICT - Brochures 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 Design in ICT - Brochures 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 Design in ICT - Brochures 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 Design in ICT - Brochures 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 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 Design in ICT - Brochures 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 Design in ICT - Newsletters 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.
Sample format Design in ICT - Invitations
Design features Design in ICT - Invitations 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 Design in ICT - Invitations The design is based on a visual hierarchy 1 2 3
Design features Design in ICT - Invitations Red text attracts attention The text is legible and contrasts with the background Bold is used for emphasis Minimal punctuation is used
Design tools Design in ICT - Invitations 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 Design in ICT - Invitations 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 Design in ICT - Invitations 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.
Sample format Design in ICT - Posters Sample format of a portrait poster
Design features Design in ICT - Posters 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 Design in ICT - Posters Sample format of a landscape poster
Design features Design in ICT - Posters Harmonious colours are used (blue and green) Sans-serif font aids readability
Design features Design in ICT - Posters 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 Design in ICT - Posters 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 Design in ICT - Posters 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 Design in ICT - Posters Information sets are floating and this causes confusion. Information sets are aligned, creating a sense of unity and order
Checklist Design in ICT - Posters 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.
Sample format Design in ICT - Tables Sample format of a text table
Design features Design in ICT - Tables The heading and text columns are left-aligned The first letter of each item in each column is capitalised
Design features Design in ICT - Tables 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 Design in ICT - Tables Line weights are heavier for the top and bottom lines Different column widths are used to suit the text
Sample format Design in ICT - Tables Sample format of numeric table
Design features Design in ICT - Tables 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 Design in ICT - Tables Money values are appropriately labelled, right-aligned and have two decimal places Contrasting colours are used to differentiate rows
Design tools Design in ICT - Tables Draw a sketch of the table and label it with the formatting you would like to apply.
Task advice Design in ICT - Tables 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 Design in ICT - Tables 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, Use bold for totals in columns of numbers.
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 used Colours of images and text are consistent
Appropriateness and relevance Design in ICT - Design elements 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 Design in ICT - Design elements 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
Proportion Design in ICT - Design elements 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
Direction Design in ICT - Design elements 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 Design in ICT - Design elements 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.
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 Design in ICT - Conventions checklist 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 in ICT - Conventions checklist 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 Design in ICT - Conventions checklist 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 Design in ICT - Conventions checklist 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 Design in ICT - Conventions checklist 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 Design in ICT - Conventions checklist 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 Design in ICT - Conventions checklist 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 Design in ICT - Conventions checklist 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 Design in ICT - Conventions checklist 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 Reading on-screen
Print Design in ICT - Conventions checklist 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 Design in ICT - Conventions checklist 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 Design in ICT - Conventions checklist Text Line length Is the maximum line length cm? Is the sentence length limited to words? Is the paragraph length limited to 3-5 sentences? Is most text left-aligned (only short units of text centred)?
Print Design in ICT - Conventions checklist 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: ? Is one space or a comma used in paragraphs to separate numbers over 9999, for example: or 15,000 (not 15000)?
Print Design in ICT - Conventions checklist 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 Design in ICT - Conventions checklist 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?