2
Most read
3
Most read
7
Most read
BASIC WEB DESIGN PRINCIPLES
& ELEMENTS
WEB DESIGN
 WEB DESIGN is a concept of planning, creating,
updating and maintaining websites.
 A good web design allows the user to understand the
message, contents, and ideas in the most convenient
way.
 In order to come up with a technically and visually good
appealing and effective web design, elements must be
arranged in a way that is pleasing to the eye, well
coordinated, and maintaining good balance among
the elements.
WEB DESIGN ELEMENTS
 1. TEXT – font family and type must be chosen well, clear and in readable
size.
 2. GRAPHICS/ILLUSTRATIONS – must be with good quality and well
arranged with the text and other elements. Infographics may be used.
 3. SHAPES – can be used to denote an enclosed boundary in the overall
design. Any kind of shapes like geometric or abstract shape that will fit the
user’s design can be placed.
 4. BACKGROUND – or texture can help provide your website with a
feeling of a surface underneath. This element must be used to bring out
the content given on the website to make it look more appealing.
WEB DESIGN ELEMENTS
 5. COLOR – must blend well and complement the elements
on the page. Use vibrant and bold colors that will attract but
not too distracting.
 6. VIDEO/AUDIO – will help viewers easily understand what
you are teaching or selling.
 7. LINKS – will allow users to connect another site or page
that is related to the content of your page or site.
WEB DESIGN PRINCIPLES
A good web design must contain elements that
are not only appealing but should be
functional, responsive, and useful.
To create a usable and effective website, follow
the basic principles of an effective web design.
WEB DESIGN PRINCIPLES
 1. PORTABLE DESIGN
 - must be portable and accessible by users who have different
browsers, operating systems, and computer platforms; test
compatibility
 2. DESIGN FOR LOW BANDWIDTH
 - website design must be accessible at a variety of speeds. Avoid
large graphics or animations as the users may leave the site if
downloading is slow.
WEB DESIGN PRINCIPLES
 3. DIRECTION
 - identify the order of 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.
 4. ACCESSIBILITY
 - when a visitor enters the website, he must be able to easily
access the information. This means that the text must be
legible/readable, the colors must create visual harmony and
balance, and images should be of high quality.
WEB DESIGN PRINCIPLES
 5. WHITE SPACES
 - use white space deliberately in your design as a breathing
space. May also be used to show division of contents
 6. 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. Remove distracting options and clutter.
WEB DESIGN PRINCIPLES 7. CONVENIENCE
 - to allow a visitor to make an action, click buttons should be
conveniently located and accessible. The larger the Share or
Order buttons, the more easily and quickly for the customer
to click them
 8. REGULAR TESTING
 - the website should be regularly upgraded, updated, and tested
so that problems will be quickly resolved. This includes the links
and the loading of images and other elements in the page. Visitors
will not hold on or proceed if they encounter problems in loading
or viewing.
WEB PAGE DESIGN USING TEMPLATES AND ONLINE WYSIWYG
PLATFORMS
 WYSIWYG
 - is an acronym for “what you see is what you get”
 - is an editor system in which content (texts and
graphics) can be edited in a form closely resembling
its appearance when printed or displayed as a
finished product
EXAMPLES OF WYSIWYG PLATFORMS HTML EDITOR
WIX WEEBLY WORDPRESS JIMDO
Web design principles
Web design principles
Web design principles
Web design principles
Web design principles
Web design principles
Web design principles
Web design principles
Web design principles
Web design principles
Web design principles
ACTIVITY FOR YOUR BLOG POST
 Create individually an essay entitled “My Advocacy for
Social Change”
 Guide contents:
● The issue that matters to me is ____________ [CAUSE or
ADVOCACY]
● I could use my talent ____________________ [GIFT]
● To make a difference by _________________ [ACTION]
THANK YOU
SOMEONE@EXAMPLE.COM

More Related Content

PPTX
Basic Web Design Principles and Elements
PPT
Lecture 1 intro to web designing
PPTX
Web Design Principle and Elements
PDF
Website Development Process
PPT
Website Introduction
KEY
Web Design 101
PPS
Web Site Design Principles
Basic Web Design Principles and Elements
Lecture 1 intro to web designing
Web Design Principle and Elements
Website Development Process
Website Introduction
Web Design 101
Web Site Design Principles

What's hot (20)

PDF
Principles of web design
PPTX
WWW, Website & Webpage
PPTX
Webpage Design Using Templates and Online WYSIWYG Platforms
PPTX
Group 3 basic web page creation
PPTX
Web Page Creation
PPTX
Module 4 EMPOWERMENT TECHNOLOGY
PPTX
Different types of websites
PDF
Web Navigation Presentation
PPTX
Web publishing
PPTX
Empowerment Technology - Basic Web Design Principles and Elements
PPTX
PPT
Web browser
PPTX
Wix tutorial
PPT
Desktop Publishing
PPTX
uniform resource locator
PPTX
Introduction to Web Development
PPT
Web 1.0, Web 2.0 & Web 3.0
PPTX
Web Design Principles and Elements
PPTX
Empowerment Technologies - Imaging and Design for the Online Environment
PPTX
Online File Formats.pptx
Principles of web design
WWW, Website & Webpage
Webpage Design Using Templates and Online WYSIWYG Platforms
Group 3 basic web page creation
Web Page Creation
Module 4 EMPOWERMENT TECHNOLOGY
Different types of websites
Web Navigation Presentation
Web publishing
Empowerment Technology - Basic Web Design Principles and Elements
Web browser
Wix tutorial
Desktop Publishing
uniform resource locator
Introduction to Web Development
Web 1.0, Web 2.0 & Web 3.0
Web Design Principles and Elements
Empowerment Technologies - Imaging and Design for the Online Environment
Online File Formats.pptx
Ad

Similar to Web design principles (20)

PPTX
BASIC WEB DESIGN PRINCIPLES.pptx
PPTX
Webpage and ict
PPTX
PRINCIPLES-OF-WFSSSSSSSFFFEB-DESIGN.pptx
PDF
presentation-web-designing.pdf
PPTX
Presentation of web designing
DOC
PPT3958.doc
PPTX
DAY1-INTRODUCTION TO WEB DESGN BY AMBROSE.pptx
PPTX
NATURE AND PURPOSE OF ONLINE PLATFORM AND APPLICATION (HOPE IV)
PPTX
Web Design Principles and Elements
PPTX
WEB DESIGNING.pptx
PPTX
COMPILATION COMPUTER 9 PPT LESSONS first quarter.pptx
PPT
Websites Unlimited - Pay Monthly Websites
PPTX
Webdesign Principles and process of Making an web design template
PPT
Website design principles
PPT
webdesignforseminartopicincomputerrr.ppt
PPT
webdesignwebdesignwebdesignwebdesignwebdesignwebdesignwebdesign
PDF
Web designing course in chandigarh
PPT
PPT
Software and Website Development Company
PPT
Mobuz Solutions | Things to remember when designing your website
BASIC WEB DESIGN PRINCIPLES.pptx
Webpage and ict
PRINCIPLES-OF-WFSSSSSSSFFFEB-DESIGN.pptx
presentation-web-designing.pdf
Presentation of web designing
PPT3958.doc
DAY1-INTRODUCTION TO WEB DESGN BY AMBROSE.pptx
NATURE AND PURPOSE OF ONLINE PLATFORM AND APPLICATION (HOPE IV)
Web Design Principles and Elements
WEB DESIGNING.pptx
COMPILATION COMPUTER 9 PPT LESSONS first quarter.pptx
Websites Unlimited - Pay Monthly Websites
Webdesign Principles and process of Making an web design template
Website design principles
webdesignforseminartopicincomputerrr.ppt
webdesignwebdesignwebdesignwebdesignwebdesignwebdesignwebdesign
Web designing course in chandigarh
Software and Website Development Company
Mobuz Solutions | Things to remember when designing your website
Ad

Recently uploaded (20)

PDF
Journal of Dental Science - UDMY (2020).pdf
PDF
Nurlina - Urban Planner Portfolio (english ver)
PDF
Myanmar Dental Journal, The Journal of the Myanmar Dental Association (2015).pdf
PDF
1.Salivary gland disease.pdf 3.Bleeding and Clotting Disorders.pdf important
PDF
Journal of Dental Science - UDMY (2022).pdf
PPTX
PLASMA AND ITS CONSTITUENTS 123.pptx
PDF
THE CHILD AND ADOLESCENT LEARNERS & LEARNING PRINCIPLES
DOCX
Cambridge-Practice-Tests-for-IELTS-12.docx
PPTX
Reproductive system-Human anatomy and physiology
PPTX
BSCE 2 NIGHT (CHAPTER 2) just cases.pptx
PDF
Controlled Drug Delivery System-NDDS UNIT-1 B.Pharm 7th sem
PDF
0520_Scheme_of_Work_(for_examination_from_2021).pdf
PDF
Fun with Grammar (Communicative Activities for the Azar Grammar Series)
PDF
Everyday Spelling and Grammar by Kathi Wyldeck
PPTX
2025 High Blood Pressure Guideline Slide Set.pptx
PPTX
UNIT_2-__LIPIDS[1].pptx.................
PPT
REGULATION OF RESPIRATION lecture note 200L [Autosaved]-1-1.ppt
PPTX
What’s under the hood: Parsing standardized learning content for AI
PDF
LIFE & LIVING TRILOGY - PART (3) REALITY & MYSTERY.pdf
DOCX
Ibrahim Suliman Mukhtar CV5AUG2025.docx
Journal of Dental Science - UDMY (2020).pdf
Nurlina - Urban Planner Portfolio (english ver)
Myanmar Dental Journal, The Journal of the Myanmar Dental Association (2015).pdf
1.Salivary gland disease.pdf 3.Bleeding and Clotting Disorders.pdf important
Journal of Dental Science - UDMY (2022).pdf
PLASMA AND ITS CONSTITUENTS 123.pptx
THE CHILD AND ADOLESCENT LEARNERS & LEARNING PRINCIPLES
Cambridge-Practice-Tests-for-IELTS-12.docx
Reproductive system-Human anatomy and physiology
BSCE 2 NIGHT (CHAPTER 2) just cases.pptx
Controlled Drug Delivery System-NDDS UNIT-1 B.Pharm 7th sem
0520_Scheme_of_Work_(for_examination_from_2021).pdf
Fun with Grammar (Communicative Activities for the Azar Grammar Series)
Everyday Spelling and Grammar by Kathi Wyldeck
2025 High Blood Pressure Guideline Slide Set.pptx
UNIT_2-__LIPIDS[1].pptx.................
REGULATION OF RESPIRATION lecture note 200L [Autosaved]-1-1.ppt
What’s under the hood: Parsing standardized learning content for AI
LIFE & LIVING TRILOGY - PART (3) REALITY & MYSTERY.pdf
Ibrahim Suliman Mukhtar CV5AUG2025.docx

Web design principles

  • 1. BASIC WEB DESIGN PRINCIPLES & ELEMENTS
  • 2. WEB DESIGN  WEB DESIGN is a concept of planning, creating, updating and maintaining websites.  A good web design allows the user to understand the message, contents, and ideas in the most convenient way.  In order to come up with a technically and visually good appealing and effective web design, elements must be arranged in a way that is pleasing to the eye, well coordinated, and maintaining good balance among the elements.
  • 3. WEB DESIGN ELEMENTS  1. TEXT – font family and type must be chosen well, clear and in readable size.  2. GRAPHICS/ILLUSTRATIONS – must be with good quality and well arranged with the text and other elements. Infographics may be used.  3. SHAPES – can be used to denote an enclosed boundary in the overall design. Any kind of shapes like geometric or abstract shape that will fit the user’s design can be placed.  4. BACKGROUND – or texture can help provide your website with a feeling of a surface underneath. This element must be used to bring out the content given on the website to make it look more appealing.
  • 4. WEB DESIGN ELEMENTS  5. COLOR – must blend well and complement the elements on the page. Use vibrant and bold colors that will attract but not too distracting.  6. VIDEO/AUDIO – will help viewers easily understand what you are teaching or selling.  7. LINKS – will allow users to connect another site or page that is related to the content of your page or site.
  • 5. WEB DESIGN PRINCIPLES A good web design must contain elements that are not only appealing but should be functional, responsive, and useful. To create a usable and effective website, follow the basic principles of an effective web design.
  • 6. WEB DESIGN PRINCIPLES  1. PORTABLE DESIGN  - must be portable and accessible by users who have different browsers, operating systems, and computer platforms; test compatibility  2. DESIGN FOR LOW BANDWIDTH  - website design must be accessible at a variety of speeds. Avoid large graphics or animations as the users may leave the site if downloading is slow.
  • 7. WEB DESIGN PRINCIPLES  3. DIRECTION  - identify the order of 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.  4. ACCESSIBILITY  - when a visitor enters the website, he must be able to easily access the information. This means that the text must be legible/readable, the colors must create visual harmony and balance, and images should be of high quality.
  • 8. WEB DESIGN PRINCIPLES  5. WHITE SPACES  - use white space deliberately in your design as a breathing space. May also be used to show division of contents  6. 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. Remove distracting options and clutter.
  • 9. WEB DESIGN PRINCIPLES 7. CONVENIENCE  - to allow a visitor to make an action, click buttons should be conveniently located and accessible. The larger the Share or Order buttons, the more easily and quickly for the customer to click them  8. REGULAR TESTING  - the website should be regularly upgraded, updated, and tested so that problems will be quickly resolved. This includes the links and the loading of images and other elements in the page. Visitors will not hold on or proceed if they encounter problems in loading or viewing.
  • 10. WEB PAGE DESIGN USING TEMPLATES AND ONLINE WYSIWYG PLATFORMS  WYSIWYG  - is an acronym for “what you see is what you get”  - is an editor system in which content (texts and graphics) can be edited in a form closely resembling its appearance when printed or displayed as a finished product
  • 11. EXAMPLES OF WYSIWYG PLATFORMS HTML EDITOR WIX WEEBLY WORDPRESS JIMDO
  • 23. ACTIVITY FOR YOUR BLOG POST  Create individually an essay entitled “My Advocacy for Social Change”  Guide contents: ● The issue that matters to me is ____________ [CAUSE or ADVOCACY] ● I could use my talent ____________________ [GIFT] ● To make a difference by _________________ [ACTION]