Moodboard

Moodboard // Week 3 Studio Task:

Storyboard images

These are the story board images for week 3 studio task:

Frame 1:

Frame 2:

Frame 3:

Frame 4:

Flowchart

A simple flowchart on how to cook toast:

Step-by-step text description

This is my step-by-step text description on how to cook toast:

1. Place toaster on to a stable platform.
2. Plug the toaster into the nearest power outlet.
   
3. Turn the power outlet switch on.
4. Take one or two bread and place it into the toaster slots.
5. Locate the toaster dial and make appropriate changes according to your liking. (Medium toast recommended; set between 4-6)
   
6. Once dial is set, pull the toaster lever down.
7. Wait for the toaster lever to move up.
8. Once the toaster is out, take the bread(s) out with care.
9. Prepare and serve.
   

Information/Instructional Design - Examples

Information Design - Examples
Examples of information design can be any design that has the ability to convey information such as posters, tables graphs and diagrams. Below are some examples of information design:

Charles Joseph Minard's information graph of Napoleon's march
This graph is an example of information design because it able to present various information about Napoleon's march in detail such as the location, date and time, head count, distance travelled etc.

Another example is this map showing the location of hotels in the Sydney CBD

This poster below informs the audience about the National Poetry Month that occurred last April 2008

Instructional Design - Examples
Instructional Design similarly can be any design which has the ability to convey information which provide users directions or certain instructions in order to achieve a specific goal or task. Information design and instructional design can go hand in hand to provide instructions and directions for users to be able to learn and apply. For example, maps can be combined with directions in order to informing the user about the location of a particular place and whilst directions can instruct them how to get their destination. Below are examples of instructional design

This sign designed to be placed at a certain area of a building demonstrates a perfect example of instructional design combined with information design for a more effective building sign.

Another example of an instructional design combined with information design is seen through this train map. This is a London train map presented in a minimalistic manner in order for people to read and understand the information presented on it. Whilst it shows information about the railway system and how to read it correctly, it also instructs its reader how to get to a certain station through colour coded lines.

Information/Instructional Design - Definition

Information Design
Information Design is a particular area or field which focuses on clear communication design. Its careful approach to structure, context, and presentation of data and information enables the overall design to be as clear and understandable so that ideas, concepts and information can be effectively communicated to its audience. The principles behind information design relates to all communications products and experiences, regardless of medium (print, broadcast, digital, online, etc.). Hence, the field of information design is primarily concerned with clarity (instead of simplicity) and understanding.

Instructional design
Instructional Design is an area concerned about developing ways to effectively aids users in the process of learning. This may involve creating instructional tools and content to improve learning and address learning objectives. Basically instructional design aims to present instructions that are effective, efficient, appealing and cost effective.

Reference:
Nathan Shedroff. Online, http://www.nathan.com/thoughts/unified/index.html, 1994, last accessed 16 March 2009

Nathan Shedroff. Online, http://www.nathan.com/ed/glossary/#ID, 1994, last accessed 15 March 2009.

Instructional Design Australia. Online, http://instructionaldesign.com.au/, 2009, last accessed 16 March 2009.

Other great web design examples

There are many examples of interactive design especially in everyday life. However, there are also many great examples of interactive web designs. Below are some sites which perfectly demonstrates an interactive web design.

_KARBON
_karbon is a site built on flash which responds to the user's mouse pointer. Where ever the mouse goes, the screen follows and what ever the mouse clicks, the screen zooms and focuses on it - revealing more content and information. The idea is you click on a karbon logo and it will bring you to a particular section of the site whether to the homepage, the showreel, their portfolio etc. It also provides a simple menu at the left side which the users can use in case they find it hard to navigate through the site with the animated menu design.

CREAKTIF!
This particular website is similar to _karbon where it provides interactive buttons which serve as options for users to choose and navigate through the site content. CREAKTIF! is another website which provides information about this particular design company by presenting their portfolio and contact details through an interactive flash menu. Hence, this website is another great example of an interactive design.

Armin Morbach
This website serves to showcase the hair and make-up design of Armin Morbach. It demonstrates an interactive design through its flash menu. The homepage contains the word "Morbach" where each letter represents a category - i.e M for Mood and H for Hair. The user is encouraged to click on each letter to find out more about that particular category. After clicking it, a new window will appear showing pictures of designs done by Morbach.

Bernhard Wolf / Leslie / Photographer
This website is another example which allows users to easily browse through the artist's porfolio. Its interactive design allows users to click and zoom on a particular image in order to show extra information about it. It also allows users to click left and right to see new sets of images that they can browse.