Here are three frames from my storyboard draft for how i would anticipate designing instructions using flash.
Making Toast For Beginners, Part 3 of 3
15 years ago
Wednesday, March 18, 2009
Story Board
Here are three frames from my storyboard draft for how i would anticipate designing instructions using flash.
Saturday, March 14, 2009
Step-by-step text description
This is my step-by-step text description for cooking toast as part of my studio task for week 2:
• Wash you hands
• Place toaster on a stable flat surface
• Plug toaster in to plug socket
• Turn power switch on – is it on, does the toaster light up?
• Select two pieces of bread
• Place bread in toaster – one in each slot
• Select desired setting – is it?
• Push button down and wait to cook
• Toast will pop up when cooked - Is toast cooked to satisfaction?
• Wait for the toast to cool
• When it’s safe to touch remove toast from toaster
• Place on a plate add desired topping
• Wash you hands
• Place toaster on a stable flat surface
• Plug toaster in to plug socket
• Turn power switch on – is it on, does the toaster light up?
• Select two pieces of bread
• Place bread in toaster – one in each slot
• Select desired setting – is it?
• Push button down and wait to cook
• Toast will pop up when cooked - Is toast cooked to satisfaction?
• Wait for the toast to cool
• When it’s safe to touch remove toast from toaster
• Place on a plate add desired topping
Examples of Information/Instructional Design
Here are some examples of some Information/Instructional Design.
London Tube Map
This is a map of London's underground tube stations and has a similar layout to Sydneys Train map, colour is used to identify the different lines and routes, association and decoding by colour enables users to navigate themselves around the map with ease.
Juggling Instructions
Images and text is used to show the instructions of how to juggle the visual instruction is supported and explained in more detail with the text running along side it giving the user a more detailed analysis.
How to Fit a Dust Mask
Images and text is used to show the instructions of how to fit a dust mask correctly the visual instruction is supported and explained in more detail with the text running along side it giving the user a more detailed analysis.
London Tube Map
This is a map of London's underground tube stations and has a similar layout to Sydneys Train map, colour is used to identify the different lines and routes, association and decoding by colour enables users to navigate themselves around the map with ease.
Juggling Instructions
Images and text is used to show the instructions of how to juggle the visual instruction is supported and explained in more detail with the text running along side it giving the user a more detailed analysis.
How to Fit a Dust Mask
Images and text is used to show the instructions of how to fit a dust mask correctly the visual instruction is supported and explained in more detail with the text running along side it giving the user a more detailed analysis.
Definition of Information/Instructional design
Information/Instructional design is the analysis of learning needs and systematic development of instruction. Instructional designers to develop instruction often use instructional technology or educational technology. A method is typically specified by Instructional design models, that if followed will ease the transfer of knowledge, skills and attitude to the recipient of the instruction.
A common error by many instructional designers is to remove important information in hope to simplify the content. However this leaves learners in a state of confusion and lack of understanding questioning, "Why am I learning this?” The solution is to present content in a simpler way, not remove the more relavant complicated information. This is the art of good instructional design. When deciding what to leave out, it is essential to consider what content, when removed, will not harm the backbone of the learning.
A common error by many instructional designers is to remove important information in hope to simplify the content. However this leaves learners in a state of confusion and lack of understanding questioning, "Why am I learning this?” The solution is to present content in a simpler way, not remove the more relavant complicated information. This is the art of good instructional design. When deciding what to leave out, it is essential to consider what content, when removed, will not harm the backbone of the learning.
Examples of Web 2.0
Flickr
www.flickr.com
Flickr is a Web 2.0 photo sharing site that can be used for personal online storage and sharing with specified contacts. Many people also publicly post their photography in Flickr, so the collaborative viewing and tagging habits of the online community raise the best photography to the top.
YouTube
www.youtube.com
Youtube is a Web 2.0 video sharing website where users can upload, view and share video clips. display a wide variety of user-generated video content, including movie clips, TV clips, and music videos, as well as amateur content such as video blogging and short original videos. Most of the content on YouTube has been uploaded by individuals. Unregistered users can watch the videos, while registered users are permitted to upload an unlimited number of videos.
eBay
www.ebay.com
eBay uses Web 2.0 to provide an online auction and shopping website in which people and businesses buy and sell goods and services worldwide.
MySpace
www.myspace.com
MySpace is a Web 2.0 social networking website with an interactive, user-submitted network of friends, personal profiles, blogs, groups, photos, music, and videos for teenagers and adults internationally.
Facebook
www.facebook.com
Facebook is another Web 2.0 free-access social networking that allows users to join networks organized by city, workplace, school, and region to connect and interact with other people. People can also add friends and send them messages, and update their personal profiles to notify friends about themselves.
www.flickr.com
Flickr is a Web 2.0 photo sharing site that can be used for personal online storage and sharing with specified contacts. Many people also publicly post their photography in Flickr, so the collaborative viewing and tagging habits of the online community raise the best photography to the top.
YouTube
www.youtube.com
Youtube is a Web 2.0 video sharing website where users can upload, view and share video clips. display a wide variety of user-generated video content, including movie clips, TV clips, and music videos, as well as amateur content such as video blogging and short original videos. Most of the content on YouTube has been uploaded by individuals. Unregistered users can watch the videos, while registered users are permitted to upload an unlimited number of videos.
eBay
www.ebay.com
eBay uses Web 2.0 to provide an online auction and shopping website in which people and businesses buy and sell goods and services worldwide.
MySpace
www.myspace.com
MySpace is a Web 2.0 social networking website with an interactive, user-submitted network of friends, personal profiles, blogs, groups, photos, music, and videos for teenagers and adults internationally.
www.facebook.com
Facebook is another Web 2.0 free-access social networking that allows users to join networks organized by city, workplace, school, and region to connect and interact with other people. People can also add friends and send them messages, and update their personal profiles to notify friends about themselves.
Compact Definition of Web 2.0
Web 2.0 is the network as a platform, spanning all connected devices; Web 2.0 applications are those that make the most of the essential advantages of that platform: delivering software as a continually-updated service that gets better the more people use it, consuming and remixing data from multiple sources, including individual users, while providing their own data and services in a form that allows remixing by others, creating network effects through an "architecture of participation," and going beyond the page metaphor of Web 1.0 to deliver rich user experiences.
Wednesday, March 11, 2009
Differences between Web 1.0 and Web 2.0
Web1.0 is viewed as something that remains “static” until it is altered or updated by the person who designed it, kind of like a advertising board displaying a poster, despite whether we like it or not it will remain the same until the publisher makes the decision to change it. Applications that use Web2.0 are designed with consideration for their intended audiences making them more “user-generated”. Someone doesn’t publish the displayed information, but rather the people using the site themselves control the content that is published and have full control over how it is edited and marketed.
Web 2.0 is service orientated, where as Web 1.0 acts as a kind of platform with new releases of it, there is no encouragement for participation it’s more about publishing and gave full power to the advertisers to call the shots, very much influenced with the idea size mattered and was dominated by the top websites.On the other end of the spectrum Web 2.0 encouraged the involvement and increased the participation of online users giving them the chance to become published within a website one way or another with the introduction of blogs, e-commerce websites, torrents etc
Web 2.0 is service orientated, where as Web 1.0 acts as a kind of platform with new releases of it, there is no encouragement for participation it’s more about publishing and gave full power to the advertisers to call the shots, very much influenced with the idea size mattered and was dominated by the top websites.On the other end of the spectrum Web 2.0 encouraged the involvement and increased the participation of online users giving them the chance to become published within a website one way or another with the introduction of blogs, e-commerce websites, torrents etc
Tuesday, March 10, 2009
The Web and Internet
The internet and the web are considered and classed as different technologies completely; the web is considered as an interlinked system of documents, whilst the internet is a large network of interconnected computers which enables the web to be accessed via.
The web is dependant on the Internet, and the main attraction of the Internet is the information it has readily available and activities accessible, made available by the World Wide Web. Which has meant for many people the web has become the “face” of the Internet.
The web is dependant on the Internet, and the main attraction of the Internet is the information it has readily available and activities accessible, made available by the World Wide Web. Which has meant for many people the web has become the “face” of the Internet.
Great Web Design Examples
Below are some examples of some interactive websites that are user-generated and are a combination of the fun, the weird, and the educational.
Make a Snowflake
This websites allows you to make snowflakes, you are given a virtual piece of paper and a virtual pair of scissors. Then you can chop up the paper and create your own snow . You can even save the flakes you create so that others can view your handiwork.
http://snowflakes.barkleyus.com/noflash.html
Interactive Radio
This website is called music and allows you to match your every mood and takes the shape of an astounding interactive radio station. You can choose the genre, the mood of the music and the era from which it should come. The website will then give you a very specific selection of the type of song that you have requested.
http://musicovery.com/index.php?ct=us
Autopsy
This website is a step by step guide to what happens during an autopsy procedure. Watch with glee or your heart in your mouth as the first incisions are made and the bodily organs removed. A superb guide to what goes on in the autopsy room.
http://www.deathonline.net/movies/mm/autopsy.cfm
Mr.Picasso Head
This Website gives you the oppertunity to paint like Pablo Picasso, with a huge variety of permutations and combinations that can come together to give you your very own take on his style. Once you are done you can save the Picasso style drawing that you have created it and email it to your friends.
http://www.mrpicassohead.com/create.html?skin=original
Make a Snowflake
This websites allows you to make snowflakes, you are given a virtual piece of paper and a virtual pair of scissors. Then you can chop up the paper and create your own snow . You can even save the flakes you create so that others can view your handiwork.
http://snowflakes.barkleyus.com/noflash.html
Interactive Radio
This website is called music and allows you to match your every mood and takes the shape of an astounding interactive radio station. You can choose the genre, the mood of the music and the era from which it should come. The website will then give you a very specific selection of the type of song that you have requested.
http://musicovery.com/index.php?ct=us
Autopsy
This website is a step by step guide to what happens during an autopsy procedure. Watch with glee or your heart in your mouth as the first incisions are made and the bodily organs removed. A superb guide to what goes on in the autopsy room.
http://www.deathonline.net/movies/mm/autopsy.cfm
Mr.Picasso Head
This Website gives you the oppertunity to paint like Pablo Picasso, with a huge variety of permutations and combinations that can come together to give you your very own take on his style. Once you are done you can save the Picasso style drawing that you have created it and email it to your friends.
http://www.mrpicassohead.com/create.html?skin=original
Interactive Design Dictionary Definition
Interactive Design:
The practice of designing for interactive applications, such as Interactive CD-ROMs, DVDs, Web sites, and on-line training applications.
Design
- verb (used with object)
i. to prepare the preliminary sketch or the plans for (a work to be executed), esp. to plan the form and structure of: to design a new bridge.
ii. to plan and fashion artistically or skillfully.
iii. to intend for a definite purpose: a scholarship designed for foreign students.
iv. to form or conceive in the mind; contrive; plan: The prisoner designed an intricate escape.
v. to assign in thought or intention; purpose: He designed to be a doctor.
vi. Obsolete. to mark out, as by a sign; indicate.
- verb (used without object)
vii. to make drawings, preliminary sketches, or plans.
viii. to plan and fashion the form and structure of an object, work of art, decorative scheme, etc.
- noun
ix. an outline, sketch, or plan, as of the form and structure of a work of art, an edifice, or a machine to be executed or constructed.
x. organization or structure of formal elements in a work of art; composition.
xi. the combination of details or features of a picture, building, etc.; the pattern or motif of artistic work: the design on a bracelet.
xii. the art of designing: a school of design.
xiii. a plan or project: a design for a new process.
xiv. a plot or intrigue, esp. an underhand, deceitful, or treacherous one: His political rivals formulated a design to unseat him.
xv. designs, a hostile or aggressive project or scheme having evil or selfish motives: He had designs on his partner's stock.
xvi. intention; purpose; end.
xvii. adaptation of means to a preconceived end.
Interactive
- adjective
i. acting one upon or with the other.
ii. of or pertaining to a two-way system of electronic communications, as by means of television or computer: interactive communications between families using two-way cable television.
iii. (of a computer program or system) interacting with a human user, often in a conversational way, to obtain data or commands and to give immediate results or updated information: For many years airline reservations have been handled by interactive computer systems
The practice of designing for interactive applications, such as Interactive CD-ROMs, DVDs, Web sites, and on-line training applications.
Design
- verb (used with object)
i. to prepare the preliminary sketch or the plans for (a work to be executed), esp. to plan the form and structure of: to design a new bridge.
ii. to plan and fashion artistically or skillfully.
iii. to intend for a definite purpose: a scholarship designed for foreign students.
iv. to form or conceive in the mind; contrive; plan: The prisoner designed an intricate escape.
v. to assign in thought or intention; purpose: He designed to be a doctor.
vi. Obsolete. to mark out, as by a sign; indicate.
- verb (used without object)
vii. to make drawings, preliminary sketches, or plans.
viii. to plan and fashion the form and structure of an object, work of art, decorative scheme, etc.
- noun
ix. an outline, sketch, or plan, as of the form and structure of a work of art, an edifice, or a machine to be executed or constructed.
x. organization or structure of formal elements in a work of art; composition.
xi. the combination of details or features of a picture, building, etc.; the pattern or motif of artistic work: the design on a bracelet.
xii. the art of designing: a school of design.
xiii. a plan or project: a design for a new process.
xiv. a plot or intrigue, esp. an underhand, deceitful, or treacherous one: His political rivals formulated a design to unseat him.
xv. designs, a hostile or aggressive project or scheme having evil or selfish motives: He had designs on his partner's stock.
xvi. intention; purpose; end.
xvii. adaptation of means to a preconceived end.
Interactive
- adjective
i. acting one upon or with the other.
ii. of or pertaining to a two-way system of electronic communications, as by means of television or computer: interactive communications between families using two-way cable television.
iii. (of a computer program or system) interacting with a human user, often in a conversational way, to obtain data or commands and to give immediate results or updated information: For many years airline reservations have been handled by interactive computer systems
Subscribe to:
Posts (Atom)
