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.

Interactive Design - Examples

There are many great examples for interactive design. Since interactive design can be incorporated objects, programs or systems, you will discover that interactive design is something which you encounter everyday. Some examples include:

Mobile Phones - such as an iPhone
iPhones require its users to interact with the device through the 'multi-touch' feature. To make a call its users need to touch the screen to enter the number they want to call. Moreover there are games such as 'Tap Tap Revenge' which require its user to listen to the music and tap the screen with the beat.

Another example would be mp3/movie players such as iPods
iPods are great examples of interactive design. The users can choose whatever songs/movies they want to be played at any time. The buttons also allows them to navigate easily through the files in the device.

Laptop devices also demonstrate the concept of interactive design.
From the keyboard to the screen, users can see and view programs/websites/softwares on the screen and respond or react using the keyboard or the trackpad/mouse. Hence, laptops demonstrate the basic concept of interactive design; user-interaction (observe/watch and respond/react).

Similarly, ATM machines also demonstrate an interactive design where options and questions are presented on screen and users are required to press the appropriate buttons to make a transaction.

Other examples of interactive design can be seen through social networking sites such as:
- Facebook
- Myspace

Interactive Design - Definition

Interactive design is the design of spaces for human communication and reaction. It is the discipline of defining the behaviour of products and systems that a user can interact with. The development of interactive design basically revolves around the complex technology systems including softwares, mobile devices and other electronic devices. Having said that, interactive design is simply not limited to these technologies. It can apply to almost any design that involves and requires user interaction. Interactive design is the outcome of careful planning and the process of formulating the correct behaviour (the 'interaction) of an artifact or system in response to its users.

Certain principles of cognitive psychology (such as problem solving) provide grounding for interactive design. These include mental models (a representation of external reality or how something works in the real world), mapping, interface metaphors and affordances.

Reference:
Wikipedia. Online, http://en.wikipedia.org/wiki/Interaction_design, 2009, last accessed 15 March 2009.

Web 2.0 - Examples

Since the emegence of user-generated contents on the web and the increase in interaction between the online community, Web 2.0 has come a long way as a concept/principle which continues to define and shape a modern perspective of the world wide web. The Web 2.0 Conference, which took place in 2004 demonstrated an array of new possibilities which can and has emerged out of the principles which formed the concept of Web 2.0.

O'Reilly and MediaLive International has formed a list of applications and sites which demonstrate and follow the Web 2.0 concept. Their purpose in gathering Web 2.0 examples was an attempt to define and differentiate Web 2.0 from the previous Web 1.0. A brief list which emerged out of this conference became something which illustrates the transition of applications and sites from Web 1.0 to Web 2.0 based principles. This list of examples included:

Web 1.0 ---> Web 2.0
DoubleClick ---> Google AdSense
Ofoto ---> Flickr
Akamai ---> BitTorrent
mp3.com ---> Napster
Britannica Online ---> Wikipedia
Personal websites ---> Blogging i.e. blogger.com
Evite ---> upcoming.org and EVDB
Domain name speculation ---> Search engine optimization
Page views ---> Cost per click
Screen scraping ---> Web services
Publishing ---> Participation
Content management systems ---> Wikis
Directories (taxonomy) ---> Tagging ("folksonomy")
Stickiness ---> Syndication

Reference:
O'Reilly website. Online, http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html, 2008 last accessed 15 March 2009.

Web 2.0 - Definition

Web 2.0 is a term coined by O'Reilly Media in 2004 to describe the paradigm shift in the way the internet is used. In broader terms, it describes the concept of user-generated contents and the interaction between the online community of the World Wide Web.

According to boutiquewebdesigns.com Web 2.0- is a term which refers to the “second generation” of services that are available on the World Wide Web. Blogs, podcasts, ppc marketing, wikis, tagging and RSS syndication are some applications which can be classified as Web 2.0. Generally, it is a large category of services which share some basic themes:

• Web pages are “user friendly” and collaborative – rather than being only accessible by the webmaster
• Users can own the data on the site and modify it at their convenience
• The use of “social networking”