Download - Web design content
![Page 1: Web design content](https://reader036.vdocuments.us/reader036/viewer/2022070303/54959521b479591e788b46b4/html5/thumbnails/1.jpg)
Web Design
Computer Science
National 4
![Page 2: Web design content](https://reader036.vdocuments.us/reader036/viewer/2022070303/54959521b479591e788b46b4/html5/thumbnails/2.jpg)
What is a Website
• A website is a collection of web pages all related to the same topic.
• It contains combination of media such as:– Text– Graphics– Animation– Sound– Video
![Page 3: Web design content](https://reader036.vdocuments.us/reader036/viewer/2022070303/54959521b479591e788b46b4/html5/thumbnails/3.jpg)
Good or Bad Website• What makes a good website
– Easy to use– Common themes (font, back ground, text)– Colour schemes readable– Navigation in a common place– Not to cluttered
• What makes a bad website– Hard to read– Hard to find links– Colour to bright– Text to small– Themes changing on every page
![Page 4: Web design content](https://reader036.vdocuments.us/reader036/viewer/2022070303/54959521b479591e788b46b4/html5/thumbnails/4.jpg)
Class Discussion Point• Is this website good or bad?
• Why?
• http://www.paperrad.org/newindex.html
• http://ribbonsofred.com/
Activity
• Collect the website comparison sheet from your teacher and compare and evaluate the supplied websites.
![Page 5: Web design content](https://reader036.vdocuments.us/reader036/viewer/2022070303/54959521b479591e788b46b4/html5/thumbnails/5.jpg)
The Software Development Process/Cycle
Maintenance
Design may change if application does not work as expected
Analysis
Design
Implementation
Testing
Documentation
Evaluation
![Page 6: Web design content](https://reader036.vdocuments.us/reader036/viewer/2022070303/54959521b479591e788b46b4/html5/thumbnails/6.jpg)
Analysis Stage• This stage is make it absolutely clear what the project is
supposed to do.– The aims of the application - Purpose– Who will be using it? - Audience– What will be in it? - Content– How much money can be spent? - Budget– How long have you got? - Timescales
• At the end of the stage a requirements specification will be produced.
Activity• Collect the project brief sheet from your teacher and
read the paragraph and complete the table
![Page 7: Web design content](https://reader036.vdocuments.us/reader036/viewer/2022070303/54959521b479591e788b46b4/html5/thumbnails/7.jpg)
It is worthwhile spending time working out important details. • content of the project• the number and type of graphics required• the need for sound files and video clips.
•Most importantly you need to consider how it all links together. The best way to do all of this is to make out a storyboard.
A storyboard is a detailed plan that defines what the different parts of the project are and how they are linked together
At the design stage you should also plan out your pages and decide on a suitable layout.
Design Stage
![Page 8: Web design content](https://reader036.vdocuments.us/reader036/viewer/2022070303/54959521b479591e788b46b4/html5/thumbnails/8.jpg)
Example Storyboard
![Page 9: Web design content](https://reader036.vdocuments.us/reader036/viewer/2022070303/54959521b479591e788b46b4/html5/thumbnails/9.jpg)
Navigation
• In any multimedia application, screens will have to be linked together in a logical manner.
• This can either be in a hierarchical, linear or web structure.
![Page 10: Web design content](https://reader036.vdocuments.us/reader036/viewer/2022070303/54959521b479591e788b46b4/html5/thumbnails/10.jpg)
Linear
• This structure consists of a number or slides or pages that follow each other, normally used in a business presentation
Slide 1 Slide 2 Slide 3
![Page 11: Web design content](https://reader036.vdocuments.us/reader036/viewer/2022070303/54959521b479591e788b46b4/html5/thumbnails/11.jpg)
Hierarchical• This structure organises things into to topics, with sub
topics and headings.
• This is less restrictive than linear format and the user can link to any main area from the home page
Home
Main Topic 1 Main Topic 2 Main Topic 3
Sub Topic 1 Sub Topic 2 Sub Topic 3
![Page 12: Web design content](https://reader036.vdocuments.us/reader036/viewer/2022070303/54959521b479591e788b46b4/html5/thumbnails/12.jpg)
Web• Allows the user to create their own information flow,
which may change from user to user
![Page 13: Web design content](https://reader036.vdocuments.us/reader036/viewer/2022070303/54959521b479591e788b46b4/html5/thumbnails/13.jpg)
Design Stage – Navigational Diagram Example
![Page 14: Web design content](https://reader036.vdocuments.us/reader036/viewer/2022070303/54959521b479591e788b46b4/html5/thumbnails/14.jpg)
Implementation Stage• Make it:
– Create and combine all the media elements using the pre-decided authoring software.
![Page 15: Web design content](https://reader036.vdocuments.us/reader036/viewer/2022070303/54959521b479591e788b46b4/html5/thumbnails/15.jpg)
Testing Stage
• Does each screen and link work as expected?– If not can it be fixed or does it have to have
the design altered.
![Page 16: Web design content](https://reader036.vdocuments.us/reader036/viewer/2022070303/54959521b479591e788b46b4/html5/thumbnails/16.jpg)
Documentation Stage
• Write the documentation:
– The user guide• Advice on how to use the software and
provide users with any other help.
![Page 17: Web design content](https://reader036.vdocuments.us/reader036/viewer/2022070303/54959521b479591e788b46b4/html5/thumbnails/17.jpg)
Evaluation Stage• Is it Fit for Purpose?
Does it do what you said it would at the analysis stage
• Is it suitable for your planned Audience?
How do you know? What design features make it suitable?
• Does the Navigation work as planned?
![Page 18: Web design content](https://reader036.vdocuments.us/reader036/viewer/2022070303/54959521b479591e788b46b4/html5/thumbnails/18.jpg)
Evaluation Stage• Does your final site match your storyboard?
What's good about your design? if no then why not, what did you change and why?
• What would you do differently next time?
Reflect on your learning. What did you find difficult? Is there an easier way to do it? What did you do well? Why?