This document discusses principles of good web page design. It divides the class into groups to discuss and evaluate elements of web page design. These include using a text or web editor, designing for the web vs print, using layout, color, fonts, headings, graphics, writing for the web, and evaluating web pages. The goal is to understand how to design effective and well-organized web pages.

1. EMPOWERMENT TECHNOLOGY
Online Platform for ICT Content
Development

2. OBJECTIVES:
1. Compare and contrast between webpage
design and print document design
2. Identify the different principles of good
web page design.
3. Evaluate the different elements in a good
web page.

3. Group Activity: Class will be divided into four groups.
The secretary in each group will write your feelings if
(“share na yan” or exit na yan”) as voted by the
majority and write also your opinion why you said so.
Web Pages Created by GAS_STEM 11
Activity

4. Text Editor
• Create a simple text
document
• Used to create web pages
using HTML
• Each Page created
individually
Web Editor
• User defines and manages
a web site, and create
pages using toolbars and
menus via a GUI
• User can enter HTML
code, use templates, and
troubleshoot links and
other error codes
Text Editor vs. Web Editor

5. Web Page Design vs. Print Document Design
•Many design principles apply to both
web pages and print documents.

6. •Create a visual hierarchy of information.
•Be consistent in all design element used
on all pages.
•Use header/footer
•Use moderate white spaces
Overall Page Layout

7. • Creates positive first impression of site
• Communicates purpose of the web site
• Include:
• Masthead with tagline
• Category links
• Site maps
• Search capabilities
The Home/Index Page

8. • Limit to one screen of information
• Limit amount of prose text on home page
• Show all major options on home page
• Enable access to home page from any other page
on the web site
• Announces changes to the web site on home page
The Home/Index Page

9. • Color Schemes
• Use contrasting colors for background and text.
• Light text on dark background OR Dark text on light
background
• Web safe colors
• Every browser can display
• 216 web safe colors available
• Use Hexadecimal system(6 characters)
Using Color

10. •Use fonts designed for on screen
viewing:
• Georgia
• Verdana
•Small serif font for body text
•Sans serif for headlines
Text Issues

11. • Use indents or a blank line to indicate a new
paragraph.
• Use initial caps for headlines and headings.
• Use sentence case for body text
• Use italics to stress foreign words or phrases or to
list book and periodical titles
Text Issues

12. •Use bold to emphasize headings
•Do not use underlining
• It implies a hyperlink
Text Issues

13. •Use headings that are unique from one
another, descriptive and relate to the
content they introduce.
•Use a descriptive, unique, concise and
meaningful title on each we page.
Headings and Titles

14. • Use video animation and audio only when they help convey or
support the web site content.
• Place the organization’s logo in a consistent place on every page
• Use images that add value and increase the clarity of the
information on the site.
Graphics on the Web

15. •Ensure that images do not slow the
download process.
•Use simple background images
Graphics on the Web

16. • Define acronyms and abbreviations
• Avoid jargon
• Use familiar words
• Make first sentences descriptive
• Use active voice
• Minimize the number of words in sentences and number of
sentences in paragraphs
• Sentence: 20 words
• Paragraph: 6 sentences
Writing Web Content

17. •Ensure that images do not slow the
download process.
•Use simple background images
Graphics on the Web

18. “How much did you know?”
•After the discussion, present again the
different webpages presented earlier and
give their feelings at the back of the
manila paper.
Evaluation

19. Assignment:
1. Visit one blogging website and store in an external
drive or you could take picture of this site.
2. Identify the platform or software used in maintaining
this site.
3. What are the different free web hosting sites use for
creating and maintaining a blog site.