Company

LOGO

Web Design and ICT

www.company.com
Company
LOGO

What is a Webpage?

www.company.com
Company
LOGO
Webpage

• A document which is designed for the

World Wide Web and is accessible
using a web browser such as Firefox,
Google Chrome, Microsoft Internet
Explorer or Apple Safari.

• Contain text, graphics,

sound, video and animation.

www.company.com
Company
LOGO
Web Design

- is concept of
planning , creating,
updating and
maintaining
websites.
www.company.com
Company
LOGO
Creating Webpage

1. HTML codes to create

webpages
2. CSS codes to design webpages
Your text
here

www.company.com
 Company
LOGO
Elements of Web Design
1. Text
2. Graphics/
Text - font family
Illustrations
and type must be
3. Shapes chosen well, clear
4. Background and in readable
5. Color size.
6. Video/audio
7. Links
www.company.com
 Company
LOGO
Elements of Web Design
1. Text
2. Graphics/
Graphics - must
Illustrations
be in good quality
3. Shapes and well arrange
4. Background with the text and
5. Color other elements.
6. Video/audio
7. Links
www.company.com
 Company
LOGO
Elements of Web Design
1. Text
2. Graphics/ Shapes-

Illustrations any kind of shapes, like

3. Shapes regular geometric or
abstract shape, that will fit
4. Background user’s design, can
5. Color experiment with any shape
you find suitable.
6. Video/audio
7. Links
www.company.com
 Company
LOGO
Elements of Web Design
1. Text
2. Graphics/ Background
Illustrations
This element must be
3. Shapes used to bring out the
4. Background content give on the
website to make it look
5. Color more appealing.
6. Video/audio
7. Links
www.company.com
 Company
LOGO
Elements of Web Design
1. Text
2. Graphics/ Color

Illustrations Must blend well and

3. Shapes complement the elements
on the page. Use vibrant
4. Background and bold colors that will
5. Color attract but not too
distracting.
6. Video/audio
7. Links
www.company.com
 Company
LOGO
Elements of Web Design
1. Text
2. Graphics/
Illustrations Video/ Audio
3. Shapes Will help viewers easily
4. Background understand what you are
teaching or selling.
5. Color
6. Video/audio
7. Links
www.company.com
 Company
LOGO
Elements of Web Design
1. Text
2. Graphics/
Illustrations Links
Will allow users to
3. Shapes connect to another site
4. Background or page that is related to
the content of your page.
5. Color
6. Video/audio
7. Links
www.company.com
Company
LOGO
Web Design Principle
1. Portable Design
2. Design for Low Bandwidth
3. Direction
4. Accessibility
5. White spaces
6. Simplify
7. Convenience
8. Regular testing
www.company.com
Company
LOGO
Portable Design

Web design must be portable

and accessible by users who
have different browsers,
operating systems and
computer platforms.

www.company.com
Company
LOGO
Design for Low Bandwidth
Website design must be
accessible with the variety of
speeds.
Avoid large graphics and
animations as the users may
leave the site if downloading is
slow
www.company.com
Company
LOGO
Direction
Identify the importance of the
various elements and place them
in a sequence where the eye
moves and perceives the things it
sees. There should be a
consistent layout and structure.

www.company.com
Company
LOGO
White Spaces
Use white space
deliberately in your design
as a breathing space.
White spaces may also be
used to show division of
contents.
www.company.com
Company
LOGO
Simplify
The more options you
place in your site, the
more difficult it is for a
visitor to make a decision
and more time is required
to browse through them.
www.company.com
Company
LOGO
Regular Testing
The website should be regularly
upgraded, updated so that
problems will quickly resolved.
This includes the links and the
loading of images and other
element in the page.

www.company.com
Company
LOGO

Web Page Design use

Templates and Online
WYSIWYG Platforms.

www.company.com
Company
LOGO

WSYSIWYG
- is an acronym meaning “
What You See Is What You
Get”

www.company.com
Company
LOGO

WSYSIWYG which content editor

is a system can be edited in a
form closely resembling its
appearance when printed or
displayed as finished product,
such as printed document, web
page or slide presentation.
www.company.com
Company
LOGO

Website Builders:
6. Xprs
1. Adobe 7. Strikingly
Dreamweaver 8. Wordpress
2. MS Publisher 9. Zoho cities
3. Squarespace 10. Godaddy
4. Weebly 11. Google Sites
5. Wix,

www.company.com
Company
LOGO

Creating a Webpage

www.company.com
Company
LOGO

www.company.com
Company
LOGO Weebly

www.company.com
Company
LOGO

www.company.com
Company
LOGO

www.company.com