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
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
IMPACT OF THE INTERNET

⇒
Communication
Design your website so it communicates TRUSTWORTHINESS,
CURRENCY and VALUE.

www.friendster.com

⇒ Education
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
IMPACT OF THE INTERNET
⇒ Entertainment
To develop an entertainment element on a
website, identify what would appeal to your
audience and what type of multimedia should be
www.abs-cbn.com

⇒ Business
included.

To develop an e-commerce website, determine

the features that would make the product or
service desirable or necessary.
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
TYPES OF WEBSITES
⇒ PERSONAL
Allows you to advertise your employment
credentials, meet new friends, or share a common
interest or hobby with fellow enthusiasts.
Do not create webpages that include personal
information that can be misused.

⇒ TOPICAL/ORGANIZATION
It promotes member’s accomplishments or to
encourage support and participation.
Topical website devotes the entire website in
discussing a particular topic such as black and
white photography, photo galleries and online
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.
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
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
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
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 page’s 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.
ASSIGNMENT:

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.