TERMINOLOGIES:

WEB BROWSER
It is a software
program that allows
for the display of
web pages.
Examples are
Microsoft Internet
Explorer, Mozilla
Firefox, Netscape
Navigator.
SEARCH ENGINES
It is a software
program that find web
sites and web pages.
Typically, it also
provides directories,
which classify web
pages into such
categories as arts and
entertainment, jobs,
health and fitness,
travel, news and media.
PORTALS
They are websites
that offer not only
search services but
also e-mail, chat
rooms, news and
sports , maps and
more. Examples of
portals include
Excite, Lycos,
AltaVista, and
Yahoo!
IMPACT OF THE INTERNET
Communication
Education
Design your website so it communicates TRUSTWORTHINESS,
CURRENCY and VALUE.
To develop a formal educational website, you must
understand effective approaches to teaching and learning
online and methods to overcome barriers to online
learning, such as attention span and lack of discipline.
You must include elements to successfully convey content,
provide feedback, maintain records, and assess learning.
www.howstuffworks.com
www.friendster.com
IMPACT OF THE INTERNET
Entertainment
Business
To develop an entertainment element on a website,
identify what would appeal to your audience and what type
of multimedia should be included.
To develop an e-commerce website, determine the
features that would make the product or service desirable or
necessary.
www.abs-cbn.com
Gain an understanding of the methods for building e-
commerce capability into webpages, such as forms for
customers to fill out. You also need to understand the role
and support your OSP must supply to make e-commerce
function on your website.
TYPES OF WEBSITES
PERSONAL
TOPICAL/ORGANIZATION
Allows you to advertise your employment credentials,
meet new friends, or share a common interest or hobby
with fellow enthusiasts.
It promotes members accomplishments or to encourage
support and participation.
Do not create webpages that include personal information
that can be misused.
Topical website devotes the entire website in discussing a
particular topic such as black and white photography,
photo galleries and online resources.
TYPES OF WEBSITES
COMMERCIAL
Allows you to promote and sell a product and service.
When designing a webpage to promote and sell
products, make sure you include the benefit
associated with each feature you list.

TYPES OF WEBSITES
Educational Website
The purpose of this type of website is to provide
information about an educational establishment
or to present information in an educational
manner. The Internet address ends in .edu.

Entertainment Website
The purpose of this type of website is to entertain
and provide amusement. The Internet address
often ends with .com.

TYPES OF WEBSITES
Blog
A website that is used to log online readings or to
post online diaries; may include discussion forums
or chat rooms. The Internet address has a variety
of endings.
Hybrid Website
Many websites are a mixture of types. For
example, a business web site may promote the
businesses products, but may also host
informative documents, such as white papers or
provide news for it's visitors.
TYPES OF WEBSITES
Hybrid Website
Many websites are a mixture of types. For
example, a business web site may promote the
businesses products, but may also host
informative documents, such as white papers or
provide news for it's visitors
WEB DESIGN RESEARCH
1. Develop a website that stands out
Explore other websites and identify those
that impress you.
Describe design elements that contributed to
that positive impression.
Identify the means by which information
was presented to you photos, text, video,
sound.
Describe what made the information easy to
find.
List the reasons you would want to return.
WEB DESIGN RESEARCH
2. Identify your audience
Are the visitors to your website members of your
audience?
How did they come to your website surfing, by
means of a search engine, as a result of your website
promotion?
Did they find what they were looking for on your
website?
Was there anything they did not like about your
website?
Will they visit your website again? Why or why
not?
WEB DESIGN RESEARCH
3. Incorporate new web technologies
What specifically can this technology do to further
the purpose of my website?
Will it appeal to my audience?
What will it cost to put it into action?
How soon will I see a return on investing in this
new technology?
What impact will adding this technology have on
security and other website elements?
WEB DESIGN ROLES
WRITER/EDITOR
You create and revise the text that visitor
read when they visit a website. You must
write specifically for the web environment and
a targeted web audience. To fill a web
writer/editor position, an employer frequently
looks for a highly creative applicant with a
liberal arts background and demonstrated
print and Internet writing experience.
WEB DESIGN ROLES
MULTIMEDIA DEVELOPER
You design and produce animation, digital
video and audio, 2D and 3D models, and
other media elements to include in a website.
This role demands knowledge of and
experience with sophisticated hardware and
software, as well as art theory and graphic
design principles.
WEB DESIGN ROLES
ARTIST/GRAPHIC DESIGNER
You create original art such as logos or
stylized type, and frequently the overall
design concept for a website, including the
way it looks and feels. You may also prepare
photographs and other graphic elements and
redesign print publications for the web
environment. This highly creative role
demands experience with high-end illustration
and image editing software.
WEB DESIGN ROLES
WEB PAGE DESIGNER
Your primary role is to convert text into
HTML documents. Your responsibilities may
include graphic design and website setup and
maintenance. You must communicate
effectively, know HTML thoroughly, and have
graphic design talent and some programming
skills beyond HTML. This role requires a solid
understanding of how web pages and
browsers interact.
WEB DESIGN ROLES
WEB PROGRAMMER
Must be highly skilled in advanced
programming languages, such as Practical
Extraction and Report Language(PERL), Java,
JavaScript and Virtual Reality Modeling
Language(VRML).
WEB DESIGN ROLES
WEBMASTER
Staffing and other resources devoted to
developing a website. He assumes all the roles. He
oversees a web development team comprised of a
writer/editor, artist/graphic designer, multimedia
developer, web page designer, and web
programmer. He must have a broad range of skills
and knowledge, including familiarity with databases
and other programming languages, content
development, creative design, marketing, and
growth and maintenance of the hardware
connecting computers and users.
ADVANTAGES OF WEB PUBLISHING
Timeliness
Plan to provide changing, timely
content once your website is up and
running.
Interactivity
Build into your web pages simple and
convenient ways for visitors to interact
with you.
ADVANTAGES OF WEB PUBLISHING
Reduced Production Costs
When you design web pages, do not limit
your creativity to the print environment.
Where appropriate, include color,
photograph, animation, video and sound
clips in your web design.
Economical, Rapid Distribution
Consider using the web when the need
exists for economical and rapid
distribution of information.
BASIC DESIGN PRINCIPLES
Balance and Proximity
Arrange web elements such as
photographs, illustrations and text
symmetrically(centered or balanced), on
a web page to suggest conservative, safe
and peaceful atmosphere.
Mood: boring, uninteresting
Asymmetrical(off balance)
Mood: Intense, energetic
BASIC DESIGN PRINCIPLES
BASIC DESIGN PRINCIPLES
Balance and Proximity
BASIC DESIGN PRINCIPLES
Proximity
Proximity(closeness) will place elements
that have a relationship close to each
other. For example, position a caption
near a photo, a company with its
mission statement, and headlines and
subheads with body copy.
It visually connects elements that have a
logical relationship, making it more
organized.
BASIC DESIGN PRINCIPLES
Proximity
It visually connects elements that have a
logical relationship, making it more
organized.
WHITE SPACE empty space around
text and graphics, also can define
proximity and help organize web page
elements, eliminate clutter, and make
content more readable.
BASIC DESIGN PRINCIPLES
HOW DO WE CREATE A WHITE SPACE?
You can create white space by adding
line breaks, paragraph returns,
paragraph indents, and space around
tables and images.
Utilize proximity and white space to
create effective and organized web pages.
BASIC DESIGN PRINCIPLES
Contrast and Focus
CONTRAST is mix of elements to
stimulate attention.
HOW DO WE ACHIEVE CONTRAST?
Through text styles, color choices, size of
elements.
BASIC DESIGN PRINCIPLES
Focus
BASIC DESIGN PRINCIPLES
Focus
BASIC DESIGN PRINCIPLES
Unity
UNITY sense of oneness or belonging,
to create and maintain a visual identity.
HOW DO I ENSURE UNIFORM?
Grid is an underlying layout structure
that arranges a page into rows and
columns and helps place page elements
consistently.
BASIC DESIGN PRINCIPLES
BASIC DESIGN PRINCIPLES
Unity
HOW DO I ACHIEVE UNITY
By placing unvarying placement of textual
content and navigation controls
throughout a web page.
Use tables and cascading style sheets(CSS).
Use common graphic theme and color
scheme on all web pages.
BASIC DESIGN PRINCIPLES
BASIC DESIGN PRINCIPLES
Unity
Alignment is the arrangement of
objects in fixed or predetermined
positions, rows or columns.

Mixing the alignment of elements causes
web pages to look inconsistent.
BASIC DESIGN PRINCIPLES
WRITING FOR THE WEB
ACCURATE
Establish credibility for your web site
by providing accurate and verifiable
content. Include the last reviewed date
to show timeliness.
Spell check and grammar check the
textual portion of your website. After
completing web pages, set them aside for
a day before proofreading for accuracy
and completeness. Always have another
person proofread your web pages.
WRITING FOR THE WEB
EASILY READ
GUIDELINES:

Use headings, subheads, lists and
highlighted sections frequently.

Begin each paragraph with a topic
sentence that summarizes the general
idea of the whole paragraph.
READABILITY
TO ASSIST READABILITY:

Use type that is big enough to be read
by most people, but not so large that it
conveys an unsophisticated or child-like
impression. Suggestion: 10 14 pt.


Do not set type in all uppercase
because it slows down reading.

READABILITY
TO ASSIST READABILITY:

Use Sans Serif Type geometric,
straightforward looking type


Enhance legibility of the type by
choosing backgrounds that either are
plain or subtle.
WRITING FOR THE WEB
UNDERSTANDABLE
Visitors could easily understand the
general idea behind the content on an
inverted pyramid style.
Conclusion
Details
Background
Information
UNDERSTANDABLE
Do not overuse transitional words/phrases,
such as similarly, as a result, or as stated
previously. These transitions will have no
significance to a visitor who is skimming the
web pages content or who has arrived at your
web page via clicking a link at another web
site.
Use language that is straightforward,
contemporary, and geared toward an
educated audience. Avoid overly promotional,
full-of-fluff language that will divert visitors
quickly.
UNDERSTANDABLE
Use wording in headings that clearly
communicates the content of a web page or
section. Avoid overly cute or clever headings.
Such headings typically confuse or annoy
visitors.
Be cautious regarding the use of humor.
Small doses of humor correctly interpreted can
enliven content and entertain. Remember,
though, that the web audience frequently scans
content, and that humor can be taken out of
context and may be misunderstood or
misinterpreted as sarcasm.
WRITING FOR THE WEB
COMPREHENSIVE AND CONCISE
Consider using the chunked format,
rather than the paragraph format, to
reduce long passages of text.
1. List down name of colors and
what mood do they convey.

2. Enumerate the steps in
developing a design plan for a
web site.