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.
Editor's Notes
Most important items toward the top.
Font, colors, graphics size, and location, alignment, and bacgrounds
Header identify site and may contain “signature” graphics.
Footers should contain basic data about the origin and age of the page. Footers can offer a set of links to other pages.
4. Consider the readers need to scan the information.
#FFFFFF-white
#0000FF-blue
#000000-black
1. All caps are difficult to read
Don’t over use- it will lose the effect of adding emphasis
Titles are viewable on the browser title bar
Titles are use by search engines to identify pages and are listed on the result page