Introduction to

Web Development
and Design
Principles
JOHN ED AUGUSTUS ESCORIAL
WMSU INSTITUTE OF COMPUTER STUDIES

1
Learning Outcomes
• Differentiate the web design principles
• Describe the characteristic of Dynamic Web
Pages
• Identify the functionality of web applications
• Evaluate the advantages and disadvantages of
the different client-server scripting languages.
Basic Terminology
Network – defined as several computers connected together
with purpose of sharing resources including data, information
and hardware.

Internet – a worldwide collection of computers

interconnected to one another.

World Wide Web – collection of information and resources

interconnected via internet

Web page – is a formatted page within a website that may

contain text, graphics, video and multimedia.
Basic Terminology
Home page – Usually the first page of the web site.

Splash page – usually contains multimedia which

design to be attractive and intriguing.

Web browser – application used to view and explore

web pages on the internet.
Accessing the web
• Dial-Up Connection
• DSL (digital subscriber line)
• Cable Internet
• Wireless internet
• Dedicated Line
Web browsers and elements
Some Web browsers
• Internet Explorer
• Mozilla Firefox
• Safari
• Google chrome
• Opera
• Netscape
• Flock
• Microsoft Edge
Essential Elements of Web content
• Accuracy – ensuring the reliability of information
published on the website

• Readability – compose accessible and readable content

• Understandable – content that is easy to comprehend

• Concise – using a least words to convey a message to

the internet.

• Ethical and Legal – publishing website that will not lead

to any trouble.
Tools for creating website
• HTML – defines a webpage through tags and markup

• JavaScript, VBScript, Perl(practical extraction and reporting Language)

– Scripting languages, sets of instructions.
• Applets, Servlets, and ActiveX control
• Adds multimedia, graphics animation
• XML (Extensible Markup Language)
» Lets you create self-defined tags to customized pages.

• Web Authoring Packages

– It automatically create or generate HTML code
• Ex. MS Frontpage
Type of Websites
Type of website differs from purpose of the
site.
1. Personal – allows to advertise personal
information depending to purpose.
2. Organizational/Topical – promote
organizational goals.
3. Commercial – promote and sell products or
services.
Web Design Roles
• Writer/editor
– Responsible in creating and revising the text
that the visitors read when they visit a website

• Multimedia Developer
- responsible in designing and producing
animation, digital video and audio, 2d and 3d
models, and other media elements.
Web Design Roles
Artist or Graphic Designer
– Create original art such as logos, banner,
enhanced photos and the overall visual
design concept.

Web Page designer

- primary role is to convert text into HTML
documents. Graphic design and website setup
and maintenance. It requires understanding on
how web pages and browsers interact.
Web Design Roles
Web Programmer
• Focuses on web programming using scripting
languages or any programming languages
that creates dynamic and interactive pages
and know how to integrate databases
successfully to the internets and intranets

Webmaster
• assumes all the rules. Webmaster may oversee the
web development team.
- Therefore, must have a broad range of knowledge
may include all the skills.
Major Phases of Wed Design Process

14
15
VISUAL ELEMENTS

16
VISUAL ELEMENTS

17
VISUAL ELEMENTS

18
VISUAL ELEMENTS

19
VISUAL ELEMENTS

20
ACCESSIBILITY ELEMENTS

21
ACCESSIBILITY ELEMENTS

22
ACCESSIBILITY ELEMENTS

23
ACCESSIBILITY ELEMENTS

24
WEB DESIGN TRENDS

25
WEB DESIGN TRENDS

26
WEB DESIGN TRENDS

27
WEB DESIGN TRENDS

28
WEB DESIGN TRENDS

29
WEB DESIGN TRENDS

30
BASIC WEB DESIGN PRINCIPLES

Balance
– Refers to the arrangements of the text and
object of the web pages

Symmetrical design
• > traditional, conservative, professional yet
simple mood or atmosphere. Ex.
Wikipedia.com
Asymmetrical design
> Unbalance and modern style
Basic Web Design Principles
• Proximity
– Is the placement of elements with logical
relationship close to each other

• White Space
• Are literacy blank spaces place on the page
which allow reliability of important texts and
emphasize important topics
Basic Web Design Principles
• Contrast
– Varying the size, character and color of
elements.

• Focus
• It is the focus of attention you want to remember
by the audience.
• Alignment
– Proper arrangement and positioning of the
elements of the website. Use columns and rows
to choose certain alignment(left, right or center)
Assignment:
1. Choose one Organizational Website and one
Commercialized Website. (Include website
screenshots)

2. In each website, do the following:

A. Examine and evaluate if it follows or violate the
Web Design Principles. Explain why or how?
B. Assess if it uses two or more of the Web Design
Trends discussed in the class. Discuss how it
helps to the users?
C. Assess the website in terms of each Visual
Elements. Elaborate your answer.

34