Saint Ursulas College Kingsgrove

Weaving the Web

Design, Produce, Evaluate- Internet and Website Design
By: Fiona Skleparis

12

The Project Development Cycle The project development cycle can be used to ensure the participants produce quality products and systems. The diagram below demonstrates the interrelationship of each stage of project development.

(Wilson, 2007)
Define the problem: A problem definition is a clear statement about what the information system, (what the website) aims to achieve when it is implemented. Record a problem definition for the situation described The problem is to create a promotional website advertising the Thrills and Chills movie night that the Saint Ursulas College community will be hosting. The website must include at least two personally created graphics using the program Photoshop and must look appealing to get more audience members to come to the night. Describe whether your site will be an internet or intranet site? Discuss reasons for your choice. The website will be an internet site as an intranet site needs a password to enter the domain and if you have the incorrect password you will not be allowed access to go onto the website whereas an internet site does not require a password.

Record 3 internet sites which may be of value in understanding what makes a good website. What have you learnt from reading the tips and describe how you will implement these in your site. Three internet sites that would be of value of understanding what makes a good website are the 9 main website principles website http://psd.tutsplus.com/tutorials/designing-tutorials/9-essentialprinciples-for-good-web-design/ , atomic learning and YouTube. Reading and watching them has given me a different perspective of what a website should look like to stand out and give the viewer its direct attention. I have learnt that clearer fonts that are big let the viewer able to focus better. KWHL Chart K What skills do I know in Photoshop and Dreamweaver? I know how to create a basic html page How to create a simple text GIF in Photoshop Creating a basic background in Photoshop Editing images in Photoshop W What skills do I need for the project? I need an animated gif in Photoshop How to create a banner in Photoshop How to create a website in Dreamweaver Saving a gif H How am I going to learn the skills? Use Atomic learning for video tutorials YouTube for more tutorial videos Ms Lemon for more information Talk to classmates to learn new skills and share some of my skills with them Use the Dreamweaver tutorial PDF files L What have I learnt throughout the project How to embed a Goggle Map into Dreamweaver How to create an animated GIF in Photoshop Creating a background using YouTube as a guide Saving a GIF

Linking images

Changing font size and colour

Creating a detailed background in Photoshop using YouTube videos as a guide Editing Images

Saving different images in different formats such JPEG

Books

How to make a website using Dreamweaver

Analysing the Problem In order to understand the problem, each component must be analysed and questioned. It can be quite expensive to implement a system if the parts are not properly understood or considered. For Example: The College could be considering implementing a system for electronic roll marking. Some of the constraints may be: Constraints Technical Description Does the hardware/software exist to solve the problem Example Some schools have already implemented a swipe card system for attendance 2

Operational

Does the media/project fit the needs of the organisation Is their money available to achieve the solution refer to the cost of software Does the project/media infringe anyones rights

Economical

The school would benefit from a more efficient roll marking system The school may not have the money to purchase the system Some students may feel their privacy is being invaded.

Ethical

Think of some of the constraints which may affect the production of the multimedia product Constraints Technical Description Will the programs used stop working or not save properly? Example Dreamweaver or Photoshop may malfunction and not save a file properly which would make the website creation process hard. Does the website have the Mr Morris (the client) may not appropriate content wanted like the content and may want from the client? it to be changed Is there enough money to buy The school may not be able to all the appropriate content and afford the different programs programs? such as Dreamweaver and Photoshop Does the website infringe Some students may not like anyones personal privacy? their images being used to advertise the Thrills and Chills night

Operational

Financial/ Economical

Ethical

Designing the Solution Production of the storyboard The major stage in project development is the design phase; a time where you come up with a variety of solutions to solve the problem. The design stage can save you many hours prior to implementation as it maps out where elements can fit on the page. A storyboard is a design tool used digital media production. It demonstrates how a multimedia item navigates or progresses. Below are some examples of Storyboards. You will be expected to construct a Hierarchical Storyboard.

Designing the Solution Example of the storyboard and navigation structure.

L Home ||

Image
Attractions

T
I m

Text

Log o Home || Attractions

Image

||

Text
Ima ge

Text

Designing the Solution- Storyboard

Animated GIF with an internal link

Personalised Background created on Photoshop Index/ Landing Page

Animated GIF

Text

Image Navigation Bar Horizontal Rule Home Page

Personalised background created on Photoshop

Animated GIF

Text

Navigation Bar Personalised background created on Photoshop

Horizontal Rule About 6

Animated GIF

Text Embedded Google Map

Navigation Bar

Horizontal Rule Personalised background created on Photoshop Getting There

Animated GIF

Text

Navigation Bar

Horizontal Rule Gallery

Personalised background created on Photoshop Gallery Table

Animated GIF

Text

Navigation Bar

Horizontal Rule

Personalised background created on Photoshop Text Images with Sponsors external links 7

Animated GIF

Text with links

Horizontal Rule Navigation Bar Personalised background created on Photoshop Contact

Peer and Self Evaluation Finally youve finished your multimedia produce; however, it is really important to obtain constructive feedback as to whether its met the objectives stated in the Problem Definition (Defining the Problem) Use the following table below to evaluate your final product (self-evaluation) and someone elses product Criterion Functionality Quality Questions To Ask Did the multimedia product work as expected? How well had the multimedia creator done their job? E.g. is the multimedia item creative? Was the project straightforward- did it solve the problem? Was the content satisfactory? Did the multimedia author complete the task required? Was the project tidy and delivered in suitable form? Did the project meet all the specification set? Was the project delivered on time? Is all the content original? Are sources documented? Problems to be considered Did you test the produce on a number of computers? Maybe get a peer to look over your final project prior to submission Did my animation become unwieldy and time consuming? Too little or too much detail Carefully choose the best tool for the job Does it meet the requirements for displaying to a young person? Ensure you read the assessment sheet carefully Remember: this is not a night before job!! Dont copy someone elses work Reproduction from (Wilson, 2007)

Simplicity

Output Tools Display

Completeness Schedule Acknowledgment

Criterion Functionality

Assessment of My Product All of my pages work and it is easy to be accessed and to navigate around My website has high quality images that have a good resolution I believe I have completed the problem accurately for this task My website has an easy navigation bar to help the viewer look at all the different pages The content in my website I believe is accurate it could have a bit more detail and information but it suits the clients problems I completed all the tasks required from the client (Mr Morris) in order for it to be a fully functional website The website was tidy and delivered in a suitable form My task was completed in time of the due date and everything was completed I used all my class time and home time completing the task for it to be completed All of my content was not copied off any sources I used my own ideas and information in order for this task to be completed.

Quality

Simplicity

Output

Assessment of anothers Produce (Elena Trajkovski) All of Elenas pages are able to be accessed quickly and efficiently Elena has a high quality and efficient website that she completed accurately from the task problem. All of Elenas images are in high quality Elenas website is straight forward as it easy to navigate around and is not confusing to use Elenas content was great she could have included a bit more detailed content in her website

Tools

Display Completeness

Schedule

Elena completed all the tasks required from the client (Mr Morris) in order for it to be a fully functional website. Elenas website was tidy and delivered to a suitable form Elenas entire task was complete she did not leave any parts out. Elena used her class time accurately All of Elenas content was not copied off any sources she used her own ideas and information

Acknowledgement

Guidelines for marking

Range 82-96 (Very high level) A student in this range:
Demonstrates a comprehensive understanding of Project Development through a concise problem definition, project constraint analysis and the management of the project throughout its duration. The portfolio thoroughly documents the project development cycle. Articulates the need to ethically use multimedia that complies with copyright legislation. Demonstrates an excellent competency in using hardware to solve the problem. Demonstrates an excellent competency in manipulating data/information in an ethical manner Incorporates effective planning and justification for the given situation demonstrating an effective use of a storyboard. Incorporates a professional stop motion animation which was produced in collaboration with another student/s Produces a professional multimedia item which incorporates all the required aspects including, flash animation, flash video, stop motion animation all presented in a webpage demonstrating excellent creativity.

Outcomes 5.2.1, 5.2.2, 5.5.2 5.3.1 5.1.2 5.3.2 5.2.2 5.5.1 5.2.1, 5.2.2 5.2.1, 5.2.2, 5.5.2 5.3.1 5.1.2 5.3.2 5.2.2 5.5.1 5.2.1, 5.2.2

68-81 (High Level)

Demonstrates a high level of understanding of Project Development through a straight forward problem definition, project constraint analysis and the management of the project throughout its duration. The portfolio documents the project development cycle to a high standard.. Articulates the need to use multimedia that complies with copyright legislation. Demonstrates a high level of competency in using hardware to solve the problem. Demonstrates an high level of competency in manipulating data/information in an ethical manner Incorporates effective planning, demonstrating an effective use of a storyboard.
Incorporates an effective stop motion animation which was produced in collaboration with another student/s

Produces a quality multimedia item which incorporates all the required aspects including, flash animation, flash video, stop motion animation all presented in a webpage demonstrating a high level of creativity.

53-67 (Satisfactory Level)

Demonstrates a satisfactory understanding of Project Development through a problem definition, project constraint analysis. Management of the project is at a satisfactory level, demonstrated through a satisfactory portfolio. Understands that you should use multimedia that complies with copyright legislation, but is not sure why. Demonstrates a satisfactory level of competency in using hardware to solve the problem. Usually requires some assistance. Demonstrates a satisfactory level of competency in manipulating data/information often without recognition of ethical standards. Incorporates some planning, demonstrating some effective aspects in the use of a storyboard. May/May not present a navigational structure or page layout.
Incorporates a satisfactory stop motion animation which was produced in collaboration with another student/s.

5.2.1, 5.2.2, 5.5.2 5.3.1 5.1.2 5.3.2 5.2.2 5.5.1 5.2.1, 5.2.2 5.2.1, 5.2.2, 5.5.2 5.3.1

Produces a satisfactory multimedia item which incorporates all the required aspects including, flash animation, flash video, stop motion animation all/some presented in a webpage demonstrating a satisfactory level of creativity.

30-52 (Progressing Level)

Demonstrates a basic understanding of Project Development through a problem definition, project constraint analysis. Management of the project is at a fundamental level, demonstrated through the submission of a limited portfolio. Little recognition of the need to include multimedia in an ethical way. Demonstrates a basic level of competency in using hardware to solve the

10

problem. Frequently requires assistance. Demonstrates a basic level of competency in manipulating data/information without recognition of ethical standards. Incorporates limited planning, demonstrating some effective aspects in the use of a storyboard. The storyboard demonstrates limited evidence of thought/planning.
Incorporates a satisfactory stop motion animation which was to be produced in collaboration with other students; limited involvement here.

5.1.2 5.3.2 5.2.2 5.5.1 5.2.1, 5.2.2

Produces a limited multimedia item which incorporates some/few of the required aspects including, flash animation, flash video, stop motion animation all presented in a webpage demonstrating a minimal level of creativity

11

Bibliography Xeliberg33x (2011). ((Photoshop CS5 Tutorial)): HOW TO MAKE A GIF. [online]. Available from: http://www.youtube.com/watch?v=SeINQf2SP8s Diamondeye5 (2011). How to make cool Wallpaper with Photoshop Cs5. [online]. Available from: http://www.youtube.com/watch?v=qvbn4CHkkfU Atomic Learning. (2012). Photoshop CS5. Available: http://www.atomiclearning.com/. Last accessed 31/8/2012

Collis. (2007). 9 Essential Principles for Good Web Design. Available:

http://psd.tutsplus.com/tutorials/designing-tutorials/9-essential-principles-for-good-web-design/ Last accessed 31/8/2012

12