SlideShare a Scribd company logo
Web Design
Computer Science
National 4
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
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
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.
The Software Development
Process/Cycle
Maintenance
Design may change if
application does not
work as expected
Analysis
Design
Implementation
Testing
Documentation
Evaluation
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
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
Example Storyboard
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.
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
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
Web
• Allows the user to create their own information flow,
which may change from user to user
Design Stage – Navigational
Diagram Example
Implementation Stage
• Make it:
– Create and combine all the media elements
using the pre-decided authoring software.
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.
Documentation Stage
• Write the documentation:
– The user guide
• Advice on how to use the software and
provide users with any other help.
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?
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?

More Related Content

PPTX
Blog feedback
PPTX
Web Designing Services
PPTX
How to Make a Better Presentation_KLee
PPTX
Translating visual information into tactile information
PDF
Introduction to Webdev2
PPTX
Software evaluation - Skype vs. Google Hangouts
PDF
UX for beginners
PPTX
Information literacy tutorial design & development
Blog feedback
Web Designing Services
How to Make a Better Presentation_KLee
Translating visual information into tactile information
Introduction to Webdev2
Software evaluation - Skype vs. Google Hangouts
UX for beginners
Information literacy tutorial design & development

Similar to Web design content (20)

PPTX
web essentials - Working principle of a Website.pptx
PPTX
Get real results from your website
PPTX
Web Accessibility Top 10 - LCC (1/2 day workshop, August 2013)
PPT
Designing for Everybody Workshop
PPTX
Targeted documentation STC Houston, Mar 20, 2012
PPT
Chapter4_interaction design process_uidppt.ppt
PPT
Chapter4_protyping and construction_uidppt.ppt
PPT
Effective course design
PPTX
planning-and-costing2.pptx
PPTX
Week 8 & 10
PPT
Module-2-The UID process- Obstacles, Usability.ppt
PPT
Module-2-The UID process- Obstacles, Usability.ppt
PPTX
Why You Should Use a Mobile-First Strategy
PDF
University of Portsmouth Library: A practical approach to Responsive Design
PDF
Agile Software Development
PPT
How to do b tech be projects or any academic projects
PPT
E-Content Development - R.D.Sivakumar
PPTX
Week 8 - Interactive News Editing and Producing
PPT
Prototyping - the what, why and how at the University of Edinburgh
PDF
ch10-Designing and producing multimedia .pdf
web essentials - Working principle of a Website.pptx
Get real results from your website
Web Accessibility Top 10 - LCC (1/2 day workshop, August 2013)
Designing for Everybody Workshop
Targeted documentation STC Houston, Mar 20, 2012
Chapter4_interaction design process_uidppt.ppt
Chapter4_protyping and construction_uidppt.ppt
Effective course design
planning-and-costing2.pptx
Week 8 & 10
Module-2-The UID process- Obstacles, Usability.ppt
Module-2-The UID process- Obstacles, Usability.ppt
Why You Should Use a Mobile-First Strategy
University of Portsmouth Library: A practical approach to Responsive Design
Agile Software Development
How to do b tech be projects or any academic projects
E-Content Development - R.D.Sivakumar
Week 8 - Interactive News Editing and Producing
Prototyping - the what, why and how at the University of Edinburgh
ch10-Designing and producing multimedia .pdf
Ad

Recently uploaded (20)

PPTX
A Presentation on Artificial Intelligence
PDF
Unlocking AI with Model Context Protocol (MCP)
PDF
Video forgery: An extensive analysis of inter-and intra-frame manipulation al...
PDF
A novel scalable deep ensemble learning framework for big data classification...
PDF
Approach and Philosophy of On baking technology
PPTX
Chapter 5: Probability Theory and Statistics
PPTX
cloud_computing_Infrastucture_as_cloud_p
PDF
Enhancing emotion recognition model for a student engagement use case through...
PDF
Profit Center Accounting in SAP S/4HANA, S4F28 Col11
PPTX
1. Introduction to Computer Programming.pptx
PDF
Transform Your ITIL® 4 & ITSM Strategy with AI in 2025.pdf
PDF
1 - Historical Antecedents, Social Consideration.pdf
PPTX
OMC Textile Division Presentation 2021.pptx
PDF
Hindi spoken digit analysis for native and non-native speakers
PDF
Encapsulation theory and applications.pdf
PDF
Web App vs Mobile App What Should You Build First.pdf
PDF
Encapsulation_ Review paper, used for researhc scholars
PDF
Zenith AI: Advanced Artificial Intelligence
PPTX
Tartificialntelligence_presentation.pptx
PPTX
A Presentation on Touch Screen Technology
A Presentation on Artificial Intelligence
Unlocking AI with Model Context Protocol (MCP)
Video forgery: An extensive analysis of inter-and intra-frame manipulation al...
A novel scalable deep ensemble learning framework for big data classification...
Approach and Philosophy of On baking technology
Chapter 5: Probability Theory and Statistics
cloud_computing_Infrastucture_as_cloud_p
Enhancing emotion recognition model for a student engagement use case through...
Profit Center Accounting in SAP S/4HANA, S4F28 Col11
1. Introduction to Computer Programming.pptx
Transform Your ITIL® 4 & ITSM Strategy with AI in 2025.pdf
1 - Historical Antecedents, Social Consideration.pdf
OMC Textile Division Presentation 2021.pptx
Hindi spoken digit analysis for native and non-native speakers
Encapsulation theory and applications.pdf
Web App vs Mobile App What Should You Build First.pdf
Encapsulation_ Review paper, used for researhc scholars
Zenith AI: Advanced Artificial Intelligence
Tartificialntelligence_presentation.pptx
A Presentation on Touch Screen Technology
Ad

Web design content

  • 2. 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
  • 3. 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
  • 4. 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.
  • 5. The Software Development Process/Cycle Maintenance Design may change if application does not work as expected Analysis Design Implementation Testing Documentation Evaluation
  • 6. 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
  • 7. 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
  • 9. 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.
  • 10. 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
  • 11. 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
  • 12. Web • Allows the user to create their own information flow, which may change from user to user
  • 13. Design Stage – Navigational Diagram Example
  • 14. Implementation Stage • Make it: – Create and combine all the media elements using the pre-decided authoring software.
  • 15. 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.
  • 16. Documentation Stage • Write the documentation: – The user guide • Advice on how to use the software and provide users with any other help.
  • 17. 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?
  • 18. 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?