Story Boards

Below is a set of story boards on how to make toast. They feature the instructions needed in each step, and also a small navigational icon. A mouse over action on the icon will show the arrows being highlighted. This action will be constant throughout the whole board in the same, bottom right hand corner.

Toast - Steps of making

Below is a brainstorm of the steps included in making toast. This is the basis to our flow chart.

Turn Tap on

Wash Hands

Turn Tap off

Dry Hands

Ensure powerpoint is switched off.

Plug power cord into power point.

Switch power on

Look at toaster setting.

Choose desired toaster setting. Is it on the medium setting?

Place bread into toaster.

Pull down lever to start toasting process

Wait Patiently

Ensure toast does not burn

Wait until the toaster pops, and is finished toasting.

Check to see if toast is cool enough to handle. Is it?

Remove toast and place on plate.

Toast - Flow Chart

Below is a published flow chart of the process of making toast. Flow charts are fundamental tools in a designers arsenal when he begins planning a project.

Interactive Design - Examples

Google

A great web example of Interactive design is one with simplicity and functionality that still appeals to the audience. Quite possibly the best example of this is Google.

www.google.com

Google has a straight forward layout, which is almost impossible to misinterpret. It's plain but elegant iconic text catches the eye on the white background, whilst the navigation is clear. This user-friendliness is a large reason for Google's popularity amongst internet surfers.

Oaks Hotels and Resorts

In terms of navigational strength, this web page for a popular hotel chain is also designed well. You can see easily the night by night rates, and all that is required is to check the box. If the night is fully booked out, there is no box available. Its simple yet effective and mouse over features allows descriptions to be seen as well.

www.theoaksgroup.com.au

Navigational bars at the top of the screen, also allow users to choose the specific date, location, resort, and number of people. This minimises the search results and allows you to simple choose the best option.

Informational/Instructional Design - Examples

Below are two examples of Information/Instructional Design Graphics:

City Rail Map: This map is of the Sydney Metropolitan Rail System. This size map gives an overview of the track systems, and the major locations that they travel through.

It has a simple yet informative nature, and clearly shows the data needed to be shown. On the interactive map at the link below, there is also the availability to zoom in further. Once zoomed in, the image shows all smaller stations along the line, still without over cluttering the available space.

http://www.cityrail.info/networkmaps/index.jsp

Informational/Instructional Design - Definition

"The process by which instruction is improved through the analysis of learning needs and systematic development of learning materials. Instructional designers often use technology and multimedia as tools to enhance instruction." (1)

Informational and instructional design is the reworking of data to provide an even and simple display. The information being displayed should be easily interpreted and compared.

The art of designing instructional and informational symbols allows graphic artists to experiment with the varieties of styles in which the data can be represented.

(1) "Instructional Design", Cullata, Richard. Website

www.instructionaldesign.org

January 2009

Last accessed 17 March 2009

Web 2.0 - Examples

Examples of the Web 2.0 technology are popular websites such as Facebook, MySpace, and YouTube. All of these sites allow every day people to submit and alter their own media to the internet.