BASIC WEB DESIGN

PRINCIPLES & ELEMENTS

PREPARED BY: JEAN CYRUS P. NAPILA
 www. BASIC WEB DESIGN PRINCIPLES & ELEMENTS
PRINCIPLES
Web Design Principles are things that
make the webpage attractive to its users
<PRINCIPLES>
without including you own personal
Web Design Principles are things that
likes
make the and dislikes.
webpage attractive to its users Visual language
1.
f
without including you own personal likes 2. Balance
3. Paradox of choice
and dislikes. 4. Focus on content
5. Simplify
 www. BASIC WEB DESIGN PRINCIPLES & ELEMENTS
PRINCIPLES
Web Design Principles are things that
make the webpage attractive to its users
<PRINCIPLES>
without including you own personal
1. Visual language
likes and dislikes.
2. Balance
3. Paradox of choice
4. Focus on content
5. Simplify
 www. BASIC WEB DESIGN PRINCIPLES & ELEMENTS
PRINCIPLES
Web Design Principles are things that
make the webpage attractive to its users
Visual Language
without including you own personal
Use consistent
likes template on each
and dislikes.
page with a uniform color
scheme.
 www. BASIC WEB DESIGN PRINCIPLES & ELEMENTS
PRINCIPLES
Web Design Principles are things that
make the webpage attractive to its users
Visual Language
without including you own personal
Use contrasting colors between text and
likes and
background dislikes.
(dark over light or vice
versa).
Create more contrast to things you want
to emphasize more
 www. BASIC WEB DESIGN PRINCIPLES & ELEMENTS
PRINCIPLES
Web Design Principles are things that
make the webpage attractive to its users
Visual Language
without including you own personal
Avoid:
•
likes and dislikes.
Too large or too small font size
• Too many typefaces
• Low-quality images
 www. BASIC WEB DESIGN PRINCIPLES & ELEMENTS
PRINCIPLES
Web Design Principles are things that
make the webpage attractive to its users
Visual Language
without including you own personal
Images should follow the rule of thirds
likes and dislikes.
 www.google.com
PRINCIPLES
Google Rule of Thirds
Web Design Principles are things that
make the webpage attractive
The rule to its
of thirds involves users
mentally dividing up
your image using 2 horizontal lines and 2 vertical
without including
lines,you own
as shown personal
below. You then position the subject
likes and dislikes.
or important elements in your scene along those
lines, or at the points where they meet.
 www. BASIC WEB DESIGN PRINCIPLES & ELEMENTS
PRINCIPLES
Web Design Principles are things that
make the webpage attractive to its users
Balance
without including you own personal
There should be a balance of heavy and
likes and dislikes.
light elements on the page
 www. BASIC WEB DESIGN PRINCIPLES & ELEMENTS
PRINCIPLES
Web Design Principles are things that
make the webpage attractive to its users
Balance
without including you own personal
Proper alignment of text and images
likes and dislikes.
helps maintain consistency in design
 www. BASIC WEB DESIGN PRINCIPLES & ELEMENTS
PRINCIPLES
Web Design Principles are things that
make the webpage attractive to its users
Balance
without including you own personal
The size of buttons should be proportion
likes and dislikes.
to its frequency of use

LOG-IN SIGN UP
 www. BASIC WEB DESIGN PRINCIPLES & ELEMENTS
PRINCIPLES
Web Design Principles are things that
make the webpage attractive to its users
Balance
without including you own personal
Group similar things together in terms of
likes and dislikes.
shape, color or shading.
 www. BASIC WEB DESIGN PRINCIPLES & ELEMENTS
PRINCIPLES
Web Design Principles are things that
make the webpage attractive to its users
Paradox of Choice
without including you own personal
Eliminate unimportant or distracting
likes and dislikes.
menus or options
.

Focus on user needs

 www. BASIC WEB DESIGN PRINCIPLES & ELEMENTS
PRINCIPLES
Web Design Principles are things that
make the webpageFocusattractive ontoContent
its users
without including Know
you own personal
the purpose of your web page so
likes and dislikes. you could match the content with purpose
and its design, just like this presentation.
 www. BASIC WEB DESIGN PRINCIPLES & ELEMENTS
PRINCIPLES
Web Design Principles are things that
make the webpageFocusattractiveontoContent
its users
without including •you own personal
Content should be spellchecked
likes and dislikes. • Content should be organized
• Content should be clear and direct to
the point.
• Content should be updated
 www. BASIC WEB DESIGN PRINCIPLES & ELEMENTS
PRINCIPLES
Web Design Principles are things that
make the webpageSimplify attractive to its users
without
•
including you own personal
Keep content simple
likes• and dislikes.
Use minimal animated graphics
• Maintain a look and feel across all the web pages
 www. BASIC WEB DESIGN PRINCIPLES & ELEMENTS
PRINCIPLES
Web Design Principles are things that
make the webpage attractive to its users
<ELEMENTS>
without including you own personal
Web Design Elements are building blocks
oflikes and dislikes.
a webpages Illustrations and Styles
1.
2. Links
3. Buttons and Menus
4. Images
 www. BASIC WEB DESIGN PRINCIPLES & ELEMENTS
PRINCIPLES
Web Design Principles are things that
make the webpage attractive to its users
<PRINCIPLES>
without including you own personal
Illustrations
1.likes and Styles
and dislikes.
2. Links
3. Buttons and Menus
4. Images
 www. BASIC WEB DESIGN PRINCIPLES & ELEMENTS
PRINCIPLES
Web Design Principles are things that
Illustrations
make the webpage attractive&toStyles
its users
without including you own personal
Illustrations include lines, shapes,
likes and dislikes.
texture, and color which are fundamental
elements that should not be overlooked.
 www. BASIC WEB DESIGN PRINCIPLES & ELEMENTS
PRINCIPLES
Web Design Principles are things that
Illustrations
make the webpage attractive&toStyles
its users
without including you own personal
Lines are used to organize, connect, and
likes and dislikes.
separate information and design
elements
 www. BASIC WEB DESIGN PRINCIPLES & ELEMENTS
PRINCIPLES
Web Design Principles are things that
Linksattractive to its users
make the webpage
without including you own personal
Links are the most basic interface, it
likes and dislikes.
should be distinctive in color from other
types of text in a webpage. Make sure
your links are working.
 www. BASIC WEB DESIGN PRINCIPLES & ELEMENTS
PRINCIPLES
Web Design Principles are things that
Buttons
make the webpage & Menus
attractive to its users
without including you own personal
Buttons and Menus are also essential, it
likes and dislikes.
should be well organized, clear, and easy
to understand
 www. BASIC WEB DESIGN PRINCIPLES & ELEMENTS
PRINCIPLES
Web Design Principles are things that
Images
make the webpage attractive to its users
without including you own personal
Images aid in communicating your
likes and dislikes.
message to the viewers, it can also be
fillers. Make sure your images are
related to the content.
 www. BASIC WEB DESIGN PRINCIPLES & ELEMENTS
PRINCIPLES

Thank You!
PPT AND ANIMATIONS BY:
JEAN CYRUS P. NAPILA