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
