Web Design

Objectives
 Explain the importance of Web Design and
development
 Explain the importance of planning in building a
Web site
 Identify the factors to be considered in planning a
Web site
 Identify the different core disciplines in making a
Web site.
 Explain the significance of having core disciplines
in building a Web site
Concept Map
Web Sites

Planning Core
Process Disciplines

Target Graphic Information

Objectives Content
Audience Design Design

Interface Scripting and

Design Programming

Multimedia
Planning a Web Site
Web Design and Web Development
WEB DESIGN deals primarily with
the overall look and feel of a Web
site.
It is the visual appeal of the site
and how the information should
be presented.
Web Design and Web Development
WEB DESIGNER is the main
person that is responsible in
whether the site design reflects
the image of the company or
the theme that the individual
has envisioned for that
particular Web site.
Web Design and Web Development
WEB DEVELOPMENT – is mainly
concerned with the
functionality of a Web site.
WEB DEVELOPERS deal more
with the links within the Web site
work, rather than whether they
look great.
Web Design and Web Development
WEB DEVELOPERS focus
more on source code and
scripting of the Web pages
and links.
The Planning Process
Factors to consider before designing a
Web site
1. Target Audience
2. Objectives
3. Content
The Planning Process
Factors to consider before designing a
Web site
1. Target Audience- for the site is
determined.
“Who needs the information I have?”
The Planning Process
Factors to consider before designing a
Web site
2. Objectives –the purpose of the site.

“Why the site is structured?”

The Planning Process
Factors to consider before designing a
Web site
3. Content –knowing the target audience
implies knowing what content is
included. Knowing the objectives
means limiting the content.

“How can the information be conveyed

effectively?”
Sample Web Site Outline
My Web Site Title
(In this part, provide a catchy and
informative title or heading for your
Web site)
LOGO

Background information
(Tell the audience about yourself or the organization
you work for.)

LINKS (Type in the main contents of your Web

site here, that is, the information you
Provide a list of related Web sites that your audience
(
want to present to your target
can access from your own Web sites.)
audience)

(You can insert links to multimedia files here)

Core Disciplines in Web Design
 GRAPHIC DESIGN deals with the visual components of the
Web site, that is illustrations, images, or the like, which are
included within the Web site or specific Web pages.

 It intends to support the main content of a Web site.

 It serves to illustrate concepts or processes, show examples,

or demonstrate actions.

 Graphic designers help make sure that the user does not
only learn but also keep interested.
Core Disciplines in Web Design
 Content alone may bore the user.

 Some software are primarily used in creating illustrations and

images to aid graphic design.
Core Disciplines in Web Design
 Some popular software are:
 Adobe Photoshop
 CorelDRAW

 These software are used mainly on image editing.

Core Disciplines in Web Design
 INFORMATION DESIGN deals with the organization of
the information that can be found in the Web site.
 Itdeals with with the order in which information can be
viewed.

 INFORMATION DESIGNER use three kinds of structures:

Sequences
Hierarchies
webs
Core Disciplines in Web Design
 1. Sequences
 Information may be arranged to follow a sequential order.
Core Disciplines in Web Design
 1. Sequences
Information may be arranged to follow a
sequential order.

Instructional Websites are excellent examples

of sites that present information in sequence.
Core Disciplines in Web Design
 2. Hierarchies
General ideas are presented and the specific
ideas are linked to these general ideas.
The general ideas are priority, so the user can
view one and , eventually , see the specific
ideas related to it.
- The arrangement of information is
called hierarchy.
Core Disciplines in Web Design
 2. Hierarchies
General ideas are presented and the specific
ideas are linked to these general ideas
Web Sites

Planning Core
Process Disciplines

Target Graphic Information

Objectives Content
Audience Design Design

Interface Scripting and

Design Programming

Multimedia
Core Disciplines in Web Design
3. Webs
 Information may be presented as a web.

 Each bit of information is interrelated and ideas

are linked with or related to each other.
Core Disciplines in Web Design
3. Webs
 This means that accessing information for one
topic may lead a user to another topic that is
related, but not directly relevant, to what he/she
is looking for.
Do you think our
school needs a
Web site? Why or
why not? Explain.
Core Disciplines in Web Design
 4. INTERFACE DESIGN
- is concerned with the overall functionality of
the components of a Web Site.

 Every part of a Web page or a Web site must

function according to its intended use.
 Users must be able to easily recognize what function
each component serves.
Core Disciplines in Web Design
 5. SCRIPTING AND PROGRAMMING
- involves the actual creation of the Web site
using programming languages and other components
to form the visual interface of the Web site.

 concerned with the creation of the actual source

code of the site.
Core Disciplines in Web Design
 There are certain types of software that allow you
to create scripts

Ex: Adobe Dreamweaver

NetBeans IDE
MS Frontpage
Notepad
Notepad ++
Sublime
Core Disciplines in Web Design
 6. MULTIMEDIA
- deals with the addition of components such as
sounds, animations or videos that enhance the Website.
Core Disciplines in Web Design
 This
CORE DISCPLINE is meant to enhance the
Web site browsing experience.
EX:
Rather than to merely have an illustration of a process,
it is more interesting to watch a video of the process
happening in real time.
Do as an indicated or answer each
question.
1. Name the five fundamental disciplines involved in
Web design. Describe each one.
2. Give the three structures that are used in organizing
Web site.