MOODBOARD

DEFINITON

Mood boards are a very basic but highly effective tool. In essence they work as an extension of personas, creating an immediate, understandable, visual reference for each.
Mood boards are instrumental in turning a paper-thin persona into a well rounded character with greater depth and texture that words alone cannot produce.

Moodboard for the persona of:
Johnny Smith

STEP-BY-STEP TEXT DESCRIPTION

HOW TO MAKE TOAST

1. Place toaster on a steady and flat surface.
2. Plug the toaster into the power point.
3. Switch the power 'ON'
4. Insert the slices of bread into the toaster.
5. Set the toasters heat to your desired setting.
6. Push down the lever to begin to toasting of the bread.
7. Whilst the bread is toasting get the butter knife and spread of your choice ready.
8. Wait for bread to turn golden brown.
9. When the toasted bread pops up from the toaster leave it to cool down for a few moments before handling it.
10. Once the toast has cooled down carefully remove the toast out of the toaster.
11. Apply the spread of your choice.
12. Serve and eat.

STORYBOARD

DEFINITION

Storyboards are a series of illustrations displayed in a sequence to foretell animated or live-action sequences. They are beneficial tools in helping designers visualise screen-based interaction and motion graphics as a layout of events seen through the camera lens or on screen.
Storyboards are essential for designers of interaction as they are a large comic strip of the proposed interactive or animated piece used to help designers visualise scenes, interaction, the treatment of time and detection of any errors.
Generally when constructing a storyboard the technical details involved with an interactive can be clearly described either in picture, notation or instruction symbols.
Often storyboards include arrows (→) or instructions that indicate:
- Movement,
- Key points of interest
- Visual changes in navigation and interaction
- Overlay graphics
- Shot sizes/ratios.

The visual thinking and planning that goes into a storyboard allows designers to develop their ideas clearly.
Typically, there is no exact set of rules in creating a storyboard , however, it is important to remember that you are aiming to develop a professional planning document, where presentation standards are important.

Examples of a story board: Steps 1-4 in making toast

FLOWCHARTS

DEFINITION

A flow chart is a graphic illustration outlining a procedure needed in order to arrive at a solution for a problem. A flow chart comprises of a set of various standard shaped boxes that are interconnected by flow lines with arrows indicating the direction of the flow and text describing the description of the activity inside these boxes.

INFORMATION / INSTRUCTIONAL DESIGN

DEFINITION

Information / Instructional design is the process of using knowledge of how people learn to develop effective instructional strategies that meet the needs of the learners and the desired learning outcomes.
Instruction is then improved through this analysis of learning needs and systematic development of learning materials.
Information Design is form of design that addresses the organization and presentation of data into valuable and meaningful information.
The aim of Information/ Instructional design is to make given data and instructions effective, logical, appealing and cost-effective.
Information and Instructional Design is the intersection of the disciplines of Information design, Interactive Design and Sensorial Design and combines texts with graphics together to communication information to us efficiently.

(http://instructionaldesign.com.au/)
(http://www.nathan.com/thoughts/unified/index.html )

Design examples of Information / Instructional Design:
(http://sixminutes.dlugan.com/2008/03/28/free-ebook-visualizing-information-design/)
The information graph above is a great example of information design. It communicates clearly it's message through the effective use of contrast. The data is represented the the imagery of the flags and these flags are located according to the countries views of an immediate cease fire in the middle east.

INTERACTIVE DESIGN

DEFINITION

Interactive design is the discipline in defining the behaviour of products and systems along with how a user operates it: focusing on the users experience.
Through interactive design a user is able to navigate through the internet in a new and engaging way. This process typically centers around complex technology systems such as software, electronic and mobile devices. The interactive design of these complex technology systems specifically focus on their use by the interactive user.
In essence it is creating a story and telling it with a strong emphasis on creating an experience for the user.

(http://www.interaction-design.org/)
(http://en.wikipedia.org/wiki/Main_Page)

Some examples of Interactive websites include:


The Nike website www.nike.com.au/thearmoury

The Nike website is a great example of an interactive website. It allows its users to navigate through the website with their creative use of flash. Through the use of sounds and interactive buttons an experience is created between the website and its users as they navigate through Nike’s product ranges and create there own style of shoe.

The Fendi website www.fendi.com

The Fendi Website is a great example of an interactive website. it communicates a large quantity of information in a fun and exciting way.
Using flash this website allows the user to navigate there way around allowing the audience to interact with images and the website as a whole. This fun and edgy website is symbolic of the fashion Labels style.

WEB 2.0

DEFINITION

The term "Web 2.0" refers to a perceived second generation of web development and design. It has often been described as “ the Web as a platform”, a platform for interacting with content.
Unlike its predecessor Web 1.0 that comprised of just simply receiving information in the form of web pages for a large number of readers with limited interaction.
Web 2.0 aims at assisting communication, secure information sharing, interoperability, and collaboration on the World Wide Web. Web 2.0 concepts have led to the development and evolution of web-based communities, hosted services, and applications; such as social-networking sites e.g Facebook & Myspace, video-sharing sites for eg. Youtube, Wikipedia, folksonomies and blogs such as this.

The evolution of web applications from eg.

WEB 1.0 --> WEB 2.0

DoubleClick --> Google AdSense
Ofoto -> Flickr
Akamai -> BitTorrent
Mp3.com -> Napster
Britannica Online -> Wikipedia
Personal Websites -> Blogging
Evite -> upcoming.org
Domain name speculation -> Search engine optimization
Page views -> Cost per click
Screen scraping -> Web services
Publishing -> Participation
Content management systems -> Wikis
Directories -> Tagging (folksonomy)


Examples of Web 2.0 :





Wikipedia is a free online multilingual encylopedia that has come as a result of the emergence of Web 2.0. As mentioned previously Web 1.0 allowed limited interaction between the user and the information. With Web 2.0 came wikipidia which has been written collaboratively by volunteers around the world. Similarly these articles can be edited by anyone who can access the website creating a more interactive experience for the user and allowing information to be shared more freely. However due to the fact that the articles in wikipedia are easily edited and by anyone make its reliability and accuracy an issue.
(http://en.wikipedia.org/wiki/Wikipedia)



Facebook is an example of an online web community exclusive to Web 2.0 users. It has over 175 million active users today and these users are able to stay connected and interact with people from all over the world. Facebook users can also choose from a variety of applications and games, they can add friends, send messages, update their personal details and notify friends about themselves through the web.

(http://en.wikipedia.org/wiki/Facebook)