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

PDF
JavaScript1 Notes for beginners Notes.pdf
PPT
Using macros in microsoft excel part 1
PPT
ASP.NET Tutorial - Presentation 1
PDF
JavaScript - Chapter 13 - Browser Object Model(BOM)
PPTX
Libre Office Impress Lesson 1
PPT
javascript-basics.ppt
PPTX
Web application presentation
PPTX
Web ,app and db server presentation
JavaScript1 Notes for beginners Notes.pdf
Using macros in microsoft excel part 1
ASP.NET Tutorial - Presentation 1
JavaScript - Chapter 13 - Browser Object Model(BOM)
Libre Office Impress Lesson 1
javascript-basics.ppt
Web application presentation
Web ,app and db server presentation

What's hot (20)

PPTX
PHP slides
DOCX
simple exercises in Macromedia flash 8
PPTX
www presentation.pptx
PPTX
Front-End Web Development
PPT
Word processing
PPTX
Wordpress ppt
PPTX
Choice of programming language for web developing.
PPT
Gmail account step
PPT
Create a PowerPoint Presentation - Repurpose It to Slideshare
PPTX
Word 2016 module 1 ppt presentation
PPTX
Java Programming Fundamentals
PPTX
Ms access
PPTX
WEB DEVELOPMENT
PPTX
Mainframe Modernization with AWS – Driven by Precisely
PPTX
What Is PowerPoint?
PPTX
04 - Pengenalan dan Dasar MS Office Excel VBA.pptx
PDF
SPA Editor - Adobe Experience Manager Sites
PPTX
Microsoft Office 365
PPTX
Introduction To WordPress
PPT
MAIL MERGE.ppt
PHP slides
simple exercises in Macromedia flash 8
www presentation.pptx
Front-End Web Development
Word processing
Wordpress ppt
Choice of programming language for web developing.
Gmail account step
Create a PowerPoint Presentation - Repurpose It to Slideshare
Word 2016 module 1 ppt presentation
Java Programming Fundamentals
Ms access
WEB DEVELOPMENT
Mainframe Modernization with AWS – Driven by Precisely
What Is PowerPoint?
04 - Pengenalan dan Dasar MS Office Excel VBA.pptx
SPA Editor - Adobe Experience Manager Sites
Microsoft Office 365
Introduction To WordPress
MAIL MERGE.ppt
Ad

Viewers also liked (6)

PPTX
APMP Foundation: Storyboard Development
DOC
Papan cerita video atas talian 1
DOCX
Papan cerita
PPTX
CIS1203 Web Design Principles - Part 1
PPTX
PENGENALAN KEPADA PAPAN CERITA
PPTX
E learning Project
APMP Foundation: Storyboard Development
Papan cerita video atas talian 1
Papan cerita
CIS1203 Web Design Principles - Part 1
PENGENALAN KEPADA PAPAN CERITA
E learning Project
Ad

Similar to Web design content (20)

PDF
The more information Website Design_New.pdf
PPT
Designing Special Feature Pages
PPTX
Designing and producing-Design structure -user interface
PPT
Web basics southern
PDF
Multimedia Development Lifecycle
PDF
Web Design
PDF
Basics of Web Design: A primer of what you need to know to design for the web
PPT
Introduction to web sites design
PPTX
COMPILATION COMPUTER 9 PPT LESSONS first quarter.pptx
PPTX
Designing | Multimedia Systems
PDF
J105 Web Design
PPTX
web essentials - Working principle of a Website.pptx
PPT
Promote Education Web Design Things To Consider When Designing A Website
PPT
Avind web
DOC
web design course description.doc
PPT
Web Design Phase
PPT
Web Live! Developing a Web Information Service
PPT
Lecture 1 intro to web designing
PPT
Chapter5
PPTX
Web Designing Services
The more information Website Design_New.pdf
Designing Special Feature Pages
Designing and producing-Design structure -user interface
Web basics southern
Multimedia Development Lifecycle
Web Design
Basics of Web Design: A primer of what you need to know to design for the web
Introduction to web sites design
COMPILATION COMPUTER 9 PPT LESSONS first quarter.pptx
Designing | Multimedia Systems
J105 Web Design
web essentials - Working principle of a Website.pptx
Promote Education Web Design Things To Consider When Designing A Website
Avind web
web design course description.doc
Web Design Phase
Web Live! Developing a Web Information Service
Lecture 1 intro to web designing
Chapter5
Web Designing Services

Recently uploaded (20)

PPTX
MMW-CHAPTER-1-final.pptx major Elementary Education
PPTX
Diploma pharmaceutics notes..helps diploma students
PDF
IS1343_2012...........................pdf
PPTX
operating_systems_presentations_delhi_nc
PPTX
Cite It Right: A Compact Illustration of APA 7th Edition.pptx
PDF
WHAT NURSES SAY_ COMMUNICATION BEHAVIORS ASSOCIATED WITH THE COMP.pdf
PDF
GSA-Past-Papers-2010-2024-2.pdf CSS examination
PPTX
Neurological complocations of systemic disease
PPTX
PAIN PATHWAY & MANAGEMENT OF ACUTE AND CHRONIC PAIN SPEAKER: Dr. Rajasekhar ...
PDF
Health aspects of bilberry: A review on its general benefits
PPTX
Math 2 Quarter 2 Week 1 Matatag Curriculum
PPSX
namma_kalvi_12th_botany_chapter_9_ppt.ppsx
PDF
African Communication Research: A review
PDF
CHALLENGES FACED BY TEACHERS WHEN TEACHING LEARNERS WITH DEVELOPMENTAL DISABI...
PDF
GIÁO ÁN TIẾNG ANH 7 GLOBAL SUCCESS (CẢ NĂM) THEO CÔNG VĂN 5512 (2 CỘT) NĂM HỌ...
PDF
Laparoscopic Imaging Systems at World Laparoscopy Hospital
PDF
BSc-Zoology-02Sem-DrVijay-Comparative anatomy of vertebrates.pdf
PPTX
pharmaceutics-1unit-1-221214121936-550b56aa.pptx
PPTX
Power Point PR B.Inggris 12 Ed. 2019.pptx
PDF
FAMILY PLANNING (preventative and social medicine pdf)
MMW-CHAPTER-1-final.pptx major Elementary Education
Diploma pharmaceutics notes..helps diploma students
IS1343_2012...........................pdf
operating_systems_presentations_delhi_nc
Cite It Right: A Compact Illustration of APA 7th Edition.pptx
WHAT NURSES SAY_ COMMUNICATION BEHAVIORS ASSOCIATED WITH THE COMP.pdf
GSA-Past-Papers-2010-2024-2.pdf CSS examination
Neurological complocations of systemic disease
PAIN PATHWAY & MANAGEMENT OF ACUTE AND CHRONIC PAIN SPEAKER: Dr. Rajasekhar ...
Health aspects of bilberry: A review on its general benefits
Math 2 Quarter 2 Week 1 Matatag Curriculum
namma_kalvi_12th_botany_chapter_9_ppt.ppsx
African Communication Research: A review
CHALLENGES FACED BY TEACHERS WHEN TEACHING LEARNERS WITH DEVELOPMENTAL DISABI...
GIÁO ÁN TIẾNG ANH 7 GLOBAL SUCCESS (CẢ NĂM) THEO CÔNG VĂN 5512 (2 CỘT) NĂM HỌ...
Laparoscopic Imaging Systems at World Laparoscopy Hospital
BSc-Zoology-02Sem-DrVijay-Comparative anatomy of vertebrates.pdf
pharmaceutics-1unit-1-221214121936-550b56aa.pptx
Power Point PR B.Inggris 12 Ed. 2019.pptx
FAMILY PLANNING (preventative and social medicine pdf)

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?