SlideShare una empresa de Scribd logo
1 de 11
To create an effective website, the designer of
the web must instill a number of pointers.
It should be an eye catching.
Visitors in your site should be curious in the
information you presented.
DESIGN PRINCIPLES AND ELEM
1. PURPOSE
 Terms of the goal it aims to fulfill.
 Website can be categorized into different types
and functions depending on the purpose they
serve the user.
 Websites visitors may want to look for the information, be
entertained, play games, socialize or transaction business.
 It should define first the purpose to determine the theme of
the website.
2. COMMUNICATION
 Absorb as much valuable information as possible in short
amount of time.
 It should be concise and direct to the point.
 Organized in a manner that should entice in readers.
 Avoid long fuzzy sentences.
 With headings, subheadings and in bullet form.
3. TYPEFACES
 Most dominant and noticeable in terms of visuals.
 Deals with text format, text style and text.
 Appearance of the text can greatly contribute to the perception of the visitors of
the website.
 Academic websites will use simple typefaces.
4. COLORS
 Appropriate combinations of the
foreground and the background color can
produce a better viewing experience.
 It can introduce a mood.
 It can introduce the perception of a modern or classic
look on the website.
5. IMAGE
 Deliver a complete message.
 Correct images can connect to viewers effectively.
 Proper balance, colour and contrast accompanied by
text, can deliver great impact and information to the
audience.
6. NAVIGATION
 It is the facility that the audience can use to go through the website.
WAYS TO CREATE AN EFFECTIVE AND GOOD NAVIGATION
1. Hierarchical organization of information.
2. Placing the buttons or links.
3. The use of search bars.
7. LAYOUTS
 Arrangement of the content and elements.
POSSIBLE LAY-OUTS.
1. Grid - enables the users to create sections/
groups or related informations.
- the information can be arranged in
columns or group boxes.
2. F-Pattern - placing more information at the top
or left part of the screen.
3. Mobile - portability and convenience brought
about by mobiles.
- should consider the lay-out for mobiles.
8. LOAD TIME
 The time that the website will load or appear
onto the viewers’ display device.
METHODS:
1. Minimize the elements in a web page.
2. Optimize the size and resolution of the
images.
Submitted by:
Alagar, Ruth Ann M.
Barrientos, Danelyn C.
Danque, Airah
Martin, Charmaine P.
GRADE 12 – GAS
EMPOWERMENT technology

Más contenido relacionado

La actualidad más candente

Online platforms for ict content development
Online platforms for ict content developmentOnline platforms for ict content development
Online platforms for ict content development
Sam Agcaoili
 

La actualidad más candente (20)

Imaging and Design for Online Environment
Imaging and Design for Online EnvironmentImaging and Design for Online Environment
Imaging and Design for Online Environment
 
Online Platforms for ICT Content Development - Empowerment Technologies
Online Platforms for ICT Content Development - Empowerment TechnologiesOnline Platforms for ICT Content Development - Empowerment Technologies
Online Platforms for ICT Content Development - Empowerment Technologies
 
Online Platform Tools for ICT Content Development
Online Platform Tools for ICT Content Development Online Platform Tools for ICT Content Development
Online Platform Tools for ICT Content Development
 
Imaging and Design for the Online Environment - Empowerment Technologies
Imaging and Design for the Online Environment - Empowerment TechnologiesImaging and Design for the Online Environment - Empowerment Technologies
Imaging and Design for the Online Environment - Empowerment Technologies
 
Empowerment Technologies - Imaging and Design for the Online Environment
Empowerment Technologies - Imaging and Design for the Online EnvironmentEmpowerment Technologies - Imaging and Design for the Online Environment
Empowerment Technologies - Imaging and Design for the Online Environment
 
Module 4 EMPOWERMENT TECHNOLOGY
Module 4 EMPOWERMENT TECHNOLOGYModule 4 EMPOWERMENT TECHNOLOGY
Module 4 EMPOWERMENT TECHNOLOGY
 
Imaging and Design for Online Environment
Imaging and Design for Online EnvironmentImaging and Design for Online Environment
Imaging and Design for Online Environment
 
Basic Principles Of Graphics and Layout
Basic Principles Of Graphics and LayoutBasic Principles Of Graphics and Layout
Basic Principles Of Graphics and Layout
 
Web design principles
Web design principlesWeb design principles
Web design principles
 
Natures and Purpose of Online Platforms and Applications
Natures and Purpose of Online Platforms and ApplicationsNatures and Purpose of Online Platforms and Applications
Natures and Purpose of Online Platforms and Applications
 
Lesson 2 Rules of Netiquette
Lesson 2   Rules of NetiquetteLesson 2   Rules of Netiquette
Lesson 2 Rules of Netiquette
 
Empowerment Technology Lesson 2
Empowerment Technology Lesson 2Empowerment Technology Lesson 2
Empowerment Technology Lesson 2
 
E-Tech L8 Basic Webpage Creation.pptx
E-Tech L8 Basic Webpage Creation.pptxE-Tech L8 Basic Webpage Creation.pptx
E-Tech L8 Basic Webpage Creation.pptx
 
Online platforms for ict content development
Online platforms for ict content developmentOnline platforms for ict content development
Online platforms for ict content development
 
Imaging and design for the online environment (empowermwnt technologies)
Imaging and design for the online environment (empowermwnt technologies)Imaging and design for the online environment (empowermwnt technologies)
Imaging and design for the online environment (empowermwnt technologies)
 
Empowerment Technologies - Module 3
Empowerment Technologies - Module 3Empowerment Technologies - Module 3
Empowerment Technologies - Module 3
 
Empowerment technologies
Empowerment technologiesEmpowerment technologies
Empowerment technologies
 
[EMPOWERMENT TECHNOLOGIES] - INTERNET THREATS
[EMPOWERMENT TECHNOLOGIES] - INTERNET THREATS[EMPOWERMENT TECHNOLOGIES] - INTERNET THREATS
[EMPOWERMENT TECHNOLOGIES] - INTERNET THREATS
 
Lesson 6: INTEGRATING IMAGES AND EXTERNAL MATERIALS
Lesson 6:  INTEGRATING IMAGES AND EXTERNAL MATERIALSLesson 6:  INTEGRATING IMAGES AND EXTERNAL MATERIALS
Lesson 6: INTEGRATING IMAGES AND EXTERNAL MATERIALS
 
6. Applied Productivity Tools with Advanced Application Techniques PPT.pptx
6. Applied Productivity Tools with Advanced Application Techniques PPT.pptx6. Applied Productivity Tools with Advanced Application Techniques PPT.pptx
6. Applied Productivity Tools with Advanced Application Techniques PPT.pptx
 

Similar a Web Design Principles and Elements

PRINCIPLES-ELEMENTS-OF-GOOD-WEBSITE-DESIGN-USING.pptx
PRINCIPLES-ELEMENTS-OF-GOOD-WEBSITE-DESIGN-USING.pptxPRINCIPLES-ELEMENTS-OF-GOOD-WEBSITE-DESIGN-USING.pptx
PRINCIPLES-ELEMENTS-OF-GOOD-WEBSITE-DESIGN-USING.pptx
APRILROSEVICENTE1
 
434519651-ONLINE-PLATFORMS-AS-TOOLS-FOR-ICT-CONTENT-DEVELOPMENT-pptx.pptx
434519651-ONLINE-PLATFORMS-AS-TOOLS-FOR-ICT-CONTENT-DEVELOPMENT-pptx.pptx434519651-ONLINE-PLATFORMS-AS-TOOLS-FOR-ICT-CONTENT-DEVELOPMENT-pptx.pptx
434519651-ONLINE-PLATFORMS-AS-TOOLS-FOR-ICT-CONTENT-DEVELOPMENT-pptx.pptx
RegineArellano2
 
Generic conventions of a website
Generic conventions of a websiteGeneric conventions of a website
Generic conventions of a website
LaurenHolyoak1
 

Similar a Web Design Principles and Elements (20)

Web design principles
Web design principlesWeb design principles
Web design principles
 
BASIC WEB DESIGN PRINCIPLES.pptx
BASIC WEB DESIGN   PRINCIPLES.pptxBASIC WEB DESIGN   PRINCIPLES.pptx
BASIC WEB DESIGN PRINCIPLES.pptx
 
PRINCIPLES-ELEMENTS-OF-GOOD-WEBSITE-DESIGN-USING.pptx
PRINCIPLES-ELEMENTS-OF-GOOD-WEBSITE-DESIGN-USING.pptxPRINCIPLES-ELEMENTS-OF-GOOD-WEBSITE-DESIGN-USING.pptx
PRINCIPLES-ELEMENTS-OF-GOOD-WEBSITE-DESIGN-USING.pptx
 
Presentation1
Presentation1Presentation1
Presentation1
 
NATURE AND PURPOSE OF ONLINE PLATFORM AND APPLICATION (HOPE IV)
NATURE AND PURPOSE OF ONLINE PLATFORM AND APPLICATION (HOPE IV)NATURE AND PURPOSE OF ONLINE PLATFORM AND APPLICATION (HOPE IV)
NATURE AND PURPOSE OF ONLINE PLATFORM AND APPLICATION (HOPE IV)
 
Web designing chapter 01
Web designing chapter 01Web designing chapter 01
Web designing chapter 01
 
Practical exam-gegremosa-st.john-pptx (2)
Practical exam-gegremosa-st.john-pptx (2)Practical exam-gegremosa-st.john-pptx (2)
Practical exam-gegremosa-st.john-pptx (2)
 
10 Ways to Keep Readers Interested and Improve Content Readability - iSEO AI.pdf
10 Ways to Keep Readers Interested and Improve Content Readability - iSEO AI.pdf10 Ways to Keep Readers Interested and Improve Content Readability - iSEO AI.pdf
10 Ways to Keep Readers Interested and Improve Content Readability - iSEO AI.pdf
 
Distributing Content to the Omnichannel Traveler
Distributing Content to the Omnichannel Traveler Distributing Content to the Omnichannel Traveler
Distributing Content to the Omnichannel Traveler
 
HOW UX IS IMPORTANT FOR SEARCH ENGINE MARKETING
HOW UX IS IMPORTANT FOR SEARCH ENGINE MARKETINGHOW UX IS IMPORTANT FOR SEARCH ENGINE MARKETING
HOW UX IS IMPORTANT FOR SEARCH ENGINE MARKETING
 
434519651-ONLINE-PLATFORMS-AS-TOOLS-FOR-ICT-CONTENT-DEVELOPMENT-pptx.pptx
434519651-ONLINE-PLATFORMS-AS-TOOLS-FOR-ICT-CONTENT-DEVELOPMENT-pptx.pptx434519651-ONLINE-PLATFORMS-AS-TOOLS-FOR-ICT-CONTENT-DEVELOPMENT-pptx.pptx
434519651-ONLINE-PLATFORMS-AS-TOOLS-FOR-ICT-CONTENT-DEVELOPMENT-pptx.pptx
 
ICT 9 LESSON 1.pdf
ICT 9 LESSON 1.pdfICT 9 LESSON 1.pdf
ICT 9 LESSON 1.pdf
 
Infograph Power!
Infograph Power!Infograph Power!
Infograph Power!
 
Generic conventions of a website
Generic conventions of a websiteGeneric conventions of a website
Generic conventions of a website
 
Digital Marketing By krishna.pdf
Digital Marketing By krishna.pdfDigital Marketing By krishna.pdf
Digital Marketing By krishna.pdf
 
What is Web Designing?
What is Web Designing?What is Web Designing?
What is Web Designing?
 
Website designing company in delhi
Website designing company in delhiWebsite designing company in delhi
Website designing company in delhi
 
EmpTech Lesson 9-Web Page Design Using Templates and online WYSIWYG Platforms...
EmpTech Lesson 9-Web Page Design Using Templates and online WYSIWYG Platforms...EmpTech Lesson 9-Web Page Design Using Templates and online WYSIWYG Platforms...
EmpTech Lesson 9-Web Page Design Using Templates and online WYSIWYG Platforms...
 
Top10 Usability Guidelines for Bloggers
Top10 Usability Guidelines for BloggersTop10 Usability Guidelines for Bloggers
Top10 Usability Guidelines for Bloggers
 
Website Design and Development step-by-step.docx
Website Design and Development step-by-step.docxWebsite Design and Development step-by-step.docx
Website Design and Development step-by-step.docx
 

Último

The basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxThe basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptx
heathfieldcps1
 
An Overview of Mutual Funds Bcom Project.pdf
An Overview of Mutual Funds Bcom Project.pdfAn Overview of Mutual Funds Bcom Project.pdf
An Overview of Mutual Funds Bcom Project.pdf
SanaAli374401
 
Gardella_Mateo_IntellectualProperty.pdf.
Gardella_Mateo_IntellectualProperty.pdf.Gardella_Mateo_IntellectualProperty.pdf.
Gardella_Mateo_IntellectualProperty.pdf.
MateoGardella
 

Último (20)

Código Creativo y Arte de Software | Unidad 1
Código Creativo y Arte de Software | Unidad 1Código Creativo y Arte de Software | Unidad 1
Código Creativo y Arte de Software | Unidad 1
 
Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17
 
The basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxThe basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptx
 
Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"
Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"
Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"
 
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptxBasic Civil Engineering first year Notes- Chapter 4 Building.pptx
Basic Civil Engineering first year Notes- Chapter 4 Building.pptx
 
An Overview of Mutual Funds Bcom Project.pdf
An Overview of Mutual Funds Bcom Project.pdfAn Overview of Mutual Funds Bcom Project.pdf
An Overview of Mutual Funds Bcom Project.pdf
 
Gardella_Mateo_IntellectualProperty.pdf.
Gardella_Mateo_IntellectualProperty.pdf.Gardella_Mateo_IntellectualProperty.pdf.
Gardella_Mateo_IntellectualProperty.pdf.
 
Class 11th Physics NEET formula sheet pdf
Class 11th Physics NEET formula sheet pdfClass 11th Physics NEET formula sheet pdf
Class 11th Physics NEET formula sheet pdf
 
Sports & Fitness Value Added Course FY..
Sports & Fitness Value Added Course FY..Sports & Fitness Value Added Course FY..
Sports & Fitness Value Added Course FY..
 
Unit-IV; Professional Sales Representative (PSR).pptx
Unit-IV; Professional Sales Representative (PSR).pptxUnit-IV; Professional Sales Representative (PSR).pptx
Unit-IV; Professional Sales Representative (PSR).pptx
 
fourth grading exam for kindergarten in writing
fourth grading exam for kindergarten in writingfourth grading exam for kindergarten in writing
fourth grading exam for kindergarten in writing
 
Web & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdfWeb & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdf
 
Key note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfKey note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdf
 
Holdier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfHoldier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdf
 
Introduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The BasicsIntroduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The Basics
 
Measures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SDMeasures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SD
 
PROCESS RECORDING FORMAT.docx
PROCESS      RECORDING        FORMAT.docxPROCESS      RECORDING        FORMAT.docx
PROCESS RECORDING FORMAT.docx
 
ICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptxICT Role in 21st Century Education & its Challenges.pptx
ICT Role in 21st Century Education & its Challenges.pptx
 
Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...
Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...
Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...
 
APM Welcome, APM North West Network Conference, Synergies Across Sectors
APM Welcome, APM North West Network Conference, Synergies Across SectorsAPM Welcome, APM North West Network Conference, Synergies Across Sectors
APM Welcome, APM North West Network Conference, Synergies Across Sectors
 

Web Design Principles and Elements

  • 1.
  • 2. To create an effective website, the designer of the web must instill a number of pointers. It should be an eye catching. Visitors in your site should be curious in the information you presented. DESIGN PRINCIPLES AND ELEM
  • 3. 1. PURPOSE  Terms of the goal it aims to fulfill.  Website can be categorized into different types and functions depending on the purpose they serve the user.  Websites visitors may want to look for the information, be entertained, play games, socialize or transaction business.  It should define first the purpose to determine the theme of the website.
  • 4. 2. COMMUNICATION  Absorb as much valuable information as possible in short amount of time.  It should be concise and direct to the point.  Organized in a manner that should entice in readers.  Avoid long fuzzy sentences.  With headings, subheadings and in bullet form.
  • 5. 3. TYPEFACES  Most dominant and noticeable in terms of visuals.  Deals with text format, text style and text.  Appearance of the text can greatly contribute to the perception of the visitors of the website.  Academic websites will use simple typefaces.
  • 6. 4. COLORS  Appropriate combinations of the foreground and the background color can produce a better viewing experience.  It can introduce a mood.  It can introduce the perception of a modern or classic look on the website.
  • 7. 5. IMAGE  Deliver a complete message.  Correct images can connect to viewers effectively.  Proper balance, colour and contrast accompanied by text, can deliver great impact and information to the audience.
  • 8. 6. NAVIGATION  It is the facility that the audience can use to go through the website. WAYS TO CREATE AN EFFECTIVE AND GOOD NAVIGATION 1. Hierarchical organization of information. 2. Placing the buttons or links. 3. The use of search bars.
  • 9. 7. LAYOUTS  Arrangement of the content and elements. POSSIBLE LAY-OUTS. 1. Grid - enables the users to create sections/ groups or related informations. - the information can be arranged in columns or group boxes. 2. F-Pattern - placing more information at the top or left part of the screen. 3. Mobile - portability and convenience brought about by mobiles. - should consider the lay-out for mobiles.
  • 10. 8. LOAD TIME  The time that the website will load or appear onto the viewers’ display device. METHODS: 1. Minimize the elements in a web page. 2. Optimize the size and resolution of the images.
  • 11. Submitted by: Alagar, Ruth Ann M. Barrientos, Danelyn C. Danque, Airah Martin, Charmaine P. GRADE 12 – GAS EMPOWERMENT technology