Moodboard

Moodboards are basic design tools, created to communicate a persona’s interests, lifestyles and media consumption visually. It is developed through magazine cut outs to help illustrate the persona’s characteristics. This design creates an immediate and understandable reaction about the persona, without having to read through their details. Mood boards are effective design tools in providing great depth than words alone can provide.

“BBC Redesign – The glass wall.” Liam Delahunty. 2002. 16 Mar 2009 <http://www.liamdelahunty.com/tips/usability_bbc_redesign_the_glass_wall.php>

• Example - Johnny Smith's Moodboard

Making toast for beginners : Part 3 of 3

Storyboard - From steps 3 to 7

Making toast for beginners : Part 2 of 3

Flowchart

Making toast for beginners : Part 1 of 3

Step-by-step text description

1. Plug in toaster
2. Switch power-point on (is it safe?)
3. Put bread in toaster
4. Adjust toaster settings to preferences
5. Push the toaster lever down (does leaver work?)
6. Observe toaster
7. Toaster ready (is it to your liking?)
8. Wait for toast to cool down
9. Remove toast (is it still hot?)
10. Prepare toast
11. Eat toast!

Information and Instructional Design Examples

Visual thesaurus is an online interactive thinking map and diagrammatic system that creates word maps that branch out related words. It is an effective website as it encourages learning through their design technique by presenting word meanings more visually interactive and easily understandable.

• Link - http://www.visualthesaurus.com/

This is an example of Nicholas Felton’s annual report design. The presentation of this design is visually creative as it demonstrates information about the countries distribution period in 2007, with its use of pie charts, it effectively engages the viewer and provides a sense of clearer understanding about the distribution period.

• Link - http://feltron.com/index.php?/content/2006_annual_report_report/

This is an example of the cityrail network map. It is a graphical representation of the rail services in New South Wales. It provides an instructional design helping users of the service travel more efficiently to their destination. This design also contains addition station information, making this design, overall effective in its instructional purposes.

• Link - http://www.cityrail.info/networkmaps/network_map.pdf

What is Information and Instructional Design?

The term Information and Instructional Design is a discipline, as it refers to the skill and practice of creating information and instructional content to help the users learn easily, efficiently and effectively. This form of design is basically a presentation of data transformed into more understandable contexts, and providing valuable meaning through its design structure. Communicating clearly through information and instructional design is most important, as it provides an understanding chain to the consumers of information, stimulating an experience through the design and gaining a sense of knowledge and wisdom within the presentation of data.

Diagram -

“Instructional Design.” Wikipedia. 12 Mar 2009. 15 Mar 2009
<http://en.wikipedia.org/wiki/Instructional_design>

Shedroff, Nathan. “Information Interaction Design: A Unified Field Theory of Design.” Nathan Shedroff’s World. 1994. 15 Mar 2009
<http://www.nathan.com/thoughts/unified/3.html>

Great Web Design Examples

Move Design is about being innovative and interactive through their web navigations, creating movements that are reactive and seem fluid like, creating an immediate interaction. Move Design also showcase their works and provide great interactive web designs.

• Link - http://www.movedesign.com/

Adobe brilliant, is about showcasing the latest of designs from finest artists interactively, and also allowing the audience to discover the applications Adobe has to offer.

• Link - http://www.adobe.com/brilliant/

In2media is about a digital agency that specializes in creating experiences through digital communication and developing relations between clients and users, which is clearly shown through their website.

• Link - http://in2media.com/