SlideShare una empresa de Scribd logo
1 de 29
Web Page Design Using
Templates
and online
WYSIWYG Platforms
LESSON 9:
Types of Websites
1. E-Commerce – an online shop
where people can order goods
and make payments from the
comfort of their own homes.
Types of Websites
2. Blogs and Personal - an
ongoing online diary or
commentary written by an
individual, rather than a
corporation or organization.
Types of Websites
3. Informational - websites
that are excellent ways to share
information and resources on
the web.
Types of Websites
4. Online Community - these are
great ways to get in touch and share
ideas with people with the same
interests or from similar backgrounds
through the internet.
Types of Websites
5. Photo Sharing - websites
that allow people to upload
and download photos for free.
Types of Websites
6. E-Resume - an online
document used and created by
a person to their
accomplishments.
Types of Websites
7. E-Portfolio - a website that
showcases a person’s work,
skills and potentials for future
employers.
Types of Websites
8. Catalogue and Brochure - a
website that presents visitors with
photos and descriptions of their
products and/or services.
Types of Websites
9. Business Directory - website
or printed listing of information
which lists businesses within
niche-based categories.
Types of Websites
10. E-Biography - a detailed
online description of a person's
life.
Types of Websites
11. Entertainment - an online
brand or website that focuses on
producing high quality
entertainment content for its
users.
Types of Websites
12. Business -a website that’s
devoted to representing a
specific business.
Types of Websites
13. NGO / Non-Profit - websites
that do not aim to sell products or
services to their visitors, but they still
need to convince people to support
their cause.
Types of Websites
14. Job Searching -a website
that deals specifically with
employment or careers.
Types of Websites
15. Social Media - an online platform
which people use to build social
networks or social relationships with
other people who share similar personal
or career interests, activities,
backgrounds or real-life connections.
Basic Elements of
Web Design
1. Layout
It should be simple, familiar, intuitive, clean, and
accessible.
Give the elements of your site room to breathe
Keep design items organized and orderly
Make sure the images complement each other
2. Colour
Pay attention to your topic, brand, or
industry perspectives, along with your
target audience demographics
It's important to explore beyond what
the eye can see in terms of colors.
3. Navigation
Don’t fall into the trap of overly
animated hover effects and complexity.
Navigational elements in a website's
header, body, and footer help visitors
find desired information quickly.
4. Fonts
Your text should be easily readable
Light color paired with a dark tone.
Avoid the piercing red-font-on-green-
background eyesore
5. Content
Your site visitors and potential customers
want information quickly such as, is your
brand trustworthy? Experienced? Is it
capable of delivering top notch products
and services?
Information should be easy to read and
digest.
Online WYSIWYG
Platforms
WYSIWYG
stands for What You See Is What You Get
drag-and-drop interface
EmpTech Lesson 9-Web Page Design Using Templates and online WYSIWYG Platforms.pptx
EmpTech Lesson 9-Web Page Design Using Templates and online WYSIWYG Platforms.pptx
EmpTech Lesson 9-Web Page Design Using Templates and online WYSIWYG Platforms.pptx
EmpTech Lesson 9-Web Page Design Using Templates and online WYSIWYG Platforms.pptx
EmpTech Lesson 9-Web Page Design Using Templates and online WYSIWYG Platforms.pptx

Más contenido relacionado

La actualidad más candente

Research Content for Social Advocacy in Developing an.pptx
Research Content for Social Advocacy in Developing an.pptxResearch Content for Social Advocacy in Developing an.pptx
Research Content for Social Advocacy in Developing an.pptx
juwe oroc
 
Contextualized online-search-and-research-skills
Contextualized online-search-and-research-skillsContextualized online-search-and-research-skills
Contextualized online-search-and-research-skills
JohnBarsaga
 
Lesson 13 ict project publication and statistics
Lesson 13  ict project publication and statisticsLesson 13  ict project publication and statistics
Lesson 13 ict project publication and statistics
darensotomayor
 

La actualidad más candente (20)

Empowerment Technologies - Module 1.pptx
Empowerment Technologies - Module 1.pptxEmpowerment Technologies - Module 1.pptx
Empowerment Technologies - Module 1.pptx
 
SharePoint Tips and Tricks you cannot live without
SharePoint Tips and Tricks you cannot live withoutSharePoint Tips and Tricks you cannot live without
SharePoint Tips and Tricks you cannot live without
 
Web Page Creation
Web Page CreationWeb Page Creation
Web Page Creation
 
Empowerment Technologies - Online Platforms as Tools for ICT Content Development
Empowerment Technologies - Online Platforms as Tools for ICT Content DevelopmentEmpowerment Technologies - Online Platforms as Tools for ICT Content Development
Empowerment Technologies - Online Platforms as Tools for ICT Content Development
 
Collaboration and team content development
Collaboration and team content developmentCollaboration and team content development
Collaboration and team content development
 
Empowerment Technology Lesson 1
Empowerment Technology Lesson 1Empowerment Technology Lesson 1
Empowerment Technology Lesson 1
 
Research Content for Social Advocacy in Developing an.pptx
Research Content for Social Advocacy in Developing an.pptxResearch Content for Social Advocacy in Developing an.pptx
Research Content for Social Advocacy in Developing an.pptx
 
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
 
E-Tech L9 Collaborative ICT Development.pptx
E-Tech L9 Collaborative ICT Development.pptxE-Tech L9 Collaborative ICT Development.pptx
E-Tech L9 Collaborative ICT Development.pptx
 
Dll empowerment technologies
Dll empowerment technologiesDll empowerment technologies
Dll empowerment technologies
 
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
 
Contextualized online-search-and-research-skills
Contextualized online-search-and-research-skillsContextualized online-search-and-research-skills
Contextualized online-search-and-research-skills
 
Imaging and Design for Online Environment
Imaging and Design for Online EnvironmentImaging and Design for Online Environment
Imaging and Design for Online Environment
 
[EMPOWERMENT TECHNOLOGIES] - INTRODUCTION TO ICT
[EMPOWERMENT TECHNOLOGIES] - INTRODUCTION TO ICT[EMPOWERMENT TECHNOLOGIES] - INTRODUCTION TO ICT
[EMPOWERMENT TECHNOLOGIES] - INTRODUCTION TO ICT
 
REVIEWER-FOR-ETECH (1).docx
REVIEWER-FOR-ETECH (1).docxREVIEWER-FOR-ETECH (1).docx
REVIEWER-FOR-ETECH (1).docx
 
Lesson 13 ict project publication and statistics
Lesson 13  ict project publication and statisticsLesson 13  ict project publication and statistics
Lesson 13 ict project publication and statistics
 
Managing and sustaining ict projects
Managing and sustaining ict projectsManaging and sustaining ict projects
Managing and sustaining ict projects
 
Empowerment Technologies Lecture 6 (Philippines SHS)
Empowerment Technologies Lecture 6 (Philippines SHS)Empowerment Technologies Lecture 6 (Philippines SHS)
Empowerment Technologies Lecture 6 (Philippines SHS)
 
Ict project-publication-and-statistics
Ict project-publication-and-statisticsIct project-publication-and-statistics
Ict project-publication-and-statistics
 
Contextualized online search and research skills
Contextualized online search and research skillsContextualized online search and research skills
Contextualized online search and research skills
 

Similar a EmpTech Lesson 9-Web Page Design Using Templates and online WYSIWYG Platforms.pptx

10 Smart Ideas for Your Economic Development Website
10 Smart Ideas for Your Economic Development Website10 Smart Ideas for Your Economic Development Website
10 Smart Ideas for Your Economic Development Website
Atlas Integrated
 
Career Sites that Sell
Career Sites that SellCareer Sites that Sell
Career Sites that Sell
Chris Bennett
 

Similar a EmpTech Lesson 9-Web Page Design Using Templates and online WYSIWYG Platforms.pptx (20)

The Virtual Assistant
The Virtual AssistantThe Virtual Assistant
The Virtual Assistant
 
Olivia's Responsive Web Design Project
Olivia's Responsive Web Design ProjectOlivia's Responsive Web Design Project
Olivia's Responsive Web Design Project
 
Website designing company in delhi
Website designing company in delhiWebsite designing company in delhi
Website designing company in delhi
 
10 Smart Ideas for Your Economic Development Website
10 Smart Ideas for Your Economic Development Website10 Smart Ideas for Your Economic Development Website
10 Smart Ideas for Your Economic Development Website
 
Notes8
Notes8Notes8
Notes8
 
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
 
Website world
Website worldWebsite world
Website world
 
Notes8
Notes8Notes8
Notes8
 
Jblyncordero
JblyncorderoJblyncordero
Jblyncordero
 
Web site design
Web site designWeb site design
Web site design
 
Website development company in mumbai
Website development company in mumbaiWebsite development company in mumbai
Website development company in mumbai
 
Web Site Design,
Web Site Design,Web Site Design,
Web Site Design,
 
Corporate web sites
Corporate web sitesCorporate web sites
Corporate web sites
 
Desighn and develpment
Desighn and develpmentDesighn and develpment
Desighn and develpment
 
AMA Basics in Website Design
AMA Basics in Website DesignAMA Basics in Website Design
AMA Basics in Website Design
 
Chapter 1 _ Introduction to Web Design.pptx
Chapter 1 _ Introduction to Web Design.pptxChapter 1 _ Introduction to Web Design.pptx
Chapter 1 _ Introduction to Web Design.pptx
 
Importance of Website for your Business
Importance of Website for your BusinessImportance of Website for your Business
Importance of Website for your Business
 
CHAPTER 5 IT- BASED PROJECTS (EDUCATIONAL TECHNOLOGY 2)
CHAPTER 5 IT- BASED PROJECTS (EDUCATIONAL TECHNOLOGY 2)CHAPTER 5 IT- BASED PROJECTS (EDUCATIONAL TECHNOLOGY 2)
CHAPTER 5 IT- BASED PROJECTS (EDUCATIONAL TECHNOLOGY 2)
 
Creating a Website: Design and Layout
Creating a Website: Design and LayoutCreating a Website: Design and Layout
Creating a Website: Design and Layout
 
Career Sites that Sell
Career Sites that SellCareer Sites that Sell
Career Sites that Sell
 

Más de liera silvan (6)

EmpTech Lesson 20 - Reflecting on the ICT Learning Process.pdf
EmpTech Lesson 20 - Reflecting on the ICT Learning Process.pdfEmpTech Lesson 20 - Reflecting on the ICT Learning Process.pdf
EmpTech Lesson 20 - Reflecting on the ICT Learning Process.pdf
 
EmpTech Lesson 19 - Sustaining ICT Project for Social Change.pdf
EmpTech Lesson 19 - Sustaining ICT Project for  Social Change.pdfEmpTech Lesson 19 - Sustaining ICT Project for  Social Change.pdf
EmpTech Lesson 19 - Sustaining ICT Project for Social Change.pdf
 
EmpTech Lesson 17-ICT Projects for Social Change.pdf
EmpTech Lesson 17-ICT Projects for Social Change.pdfEmpTech Lesson 17-ICT Projects for Social Change.pdf
EmpTech Lesson 17-ICT Projects for Social Change.pdf
 
EmpTech Lesson 15 - Reflection Activity (Designing and Developing an ICT Proj...
EmpTech Lesson 15 - Reflection Activity (Designing and Developing an ICT Proj...EmpTech Lesson 15 - Reflection Activity (Designing and Developing an ICT Proj...
EmpTech Lesson 15 - Reflection Activity (Designing and Developing an ICT Proj...
 
Emptech Lesson 14-Research for Content in Social Advocay.pdf
Emptech Lesson 14-Research for Content in Social Advocay.pdfEmptech Lesson 14-Research for Content in Social Advocay.pdf
Emptech Lesson 14-Research for Content in Social Advocay.pdf
 
EmpTech Lesson 13-Planning and Conceptualizing Social Advocacy.pdf
EmpTech Lesson 13-Planning and Conceptualizing Social Advocacy.pdfEmpTech Lesson 13-Planning and Conceptualizing Social Advocacy.pdf
EmpTech Lesson 13-Planning and Conceptualizing Social Advocacy.pdf
 

Último

Neurulation and the formation of the neural tube
Neurulation and the formation of the neural tubeNeurulation and the formation of the neural tube
Neurulation and the formation of the neural tube
SaadHumayun7
 

Último (20)

Operations Management - Book1.p - Dr. Abdulfatah A. Salem
Operations Management - Book1.p  - Dr. Abdulfatah A. SalemOperations Management - Book1.p  - Dr. Abdulfatah A. Salem
Operations Management - Book1.p - Dr. Abdulfatah A. Salem
 
Pragya Champions Chalice 2024 Prelims & Finals Q/A set, General Quiz
Pragya Champions Chalice 2024 Prelims & Finals Q/A set, General QuizPragya Champions Chalice 2024 Prelims & Finals Q/A set, General Quiz
Pragya Champions Chalice 2024 Prelims & Finals Q/A set, General Quiz
 
Morse OER Some Benefits and Challenges.pptx
Morse OER Some Benefits and Challenges.pptxMorse OER Some Benefits and Challenges.pptx
Morse OER Some Benefits and Challenges.pptx
 
An Overview of the Odoo 17 Discuss App.pptx
An Overview of the Odoo 17 Discuss App.pptxAn Overview of the Odoo 17 Discuss App.pptx
An Overview of the Odoo 17 Discuss App.pptx
 
Post Exam Fun(da) Intra UEM General Quiz - Finals.pdf
Post Exam Fun(da) Intra UEM General Quiz - Finals.pdfPost Exam Fun(da) Intra UEM General Quiz - Finals.pdf
Post Exam Fun(da) Intra UEM General Quiz - Finals.pdf
 
Danh sách HSG Bộ môn cấp trường - Cấp THPT.pdf
Danh sách HSG Bộ môn cấp trường - Cấp THPT.pdfDanh sách HSG Bộ môn cấp trường - Cấp THPT.pdf
Danh sách HSG Bộ môn cấp trường - Cấp THPT.pdf
 
Salient features of Environment protection Act 1986.pptx
Salient features of Environment protection Act 1986.pptxSalient features of Environment protection Act 1986.pptx
Salient features of Environment protection Act 1986.pptx
 
Open Educational Resources Primer PowerPoint
Open Educational Resources Primer PowerPointOpen Educational Resources Primer PowerPoint
Open Educational Resources Primer PowerPoint
 
size separation d pharm 1st year pharmaceutics
size separation d pharm 1st year pharmaceuticssize separation d pharm 1st year pharmaceutics
size separation d pharm 1st year pharmaceutics
 
Matatag-Curriculum and the 21st Century Skills Presentation.pptx
Matatag-Curriculum and the 21st Century Skills Presentation.pptxMatatag-Curriculum and the 21st Century Skills Presentation.pptx
Matatag-Curriculum and the 21st Century Skills Presentation.pptx
 
Incoming and Outgoing Shipments in 2 STEPS Using Odoo 17
Incoming and Outgoing Shipments in 2 STEPS Using Odoo 17Incoming and Outgoing Shipments in 2 STEPS Using Odoo 17
Incoming and Outgoing Shipments in 2 STEPS Using Odoo 17
 
Keeping Your Information Safe with Centralized Security Services
Keeping Your Information Safe with Centralized Security ServicesKeeping Your Information Safe with Centralized Security Services
Keeping Your Information Safe with Centralized Security Services
 
2024_Student Session 2_ Set Plan Preparation.pptx
2024_Student Session 2_ Set Plan Preparation.pptx2024_Student Session 2_ Set Plan Preparation.pptx
2024_Student Session 2_ Set Plan Preparation.pptx
 
The Last Leaf, a short story by O. Henry
The Last Leaf, a short story by O. HenryThe Last Leaf, a short story by O. Henry
The Last Leaf, a short story by O. Henry
 
Research Methods in Psychology | Cambridge AS Level | Cambridge Assessment In...
Research Methods in Psychology | Cambridge AS Level | Cambridge Assessment In...Research Methods in Psychology | Cambridge AS Level | Cambridge Assessment In...
Research Methods in Psychology | Cambridge AS Level | Cambridge Assessment In...
 
Telling Your Story_ Simple Steps to Build Your Nonprofit's Brand Webinar.pdf
Telling Your Story_ Simple Steps to Build Your Nonprofit's Brand Webinar.pdfTelling Your Story_ Simple Steps to Build Your Nonprofit's Brand Webinar.pdf
Telling Your Story_ Simple Steps to Build Your Nonprofit's Brand Webinar.pdf
 
Neurulation and the formation of the neural tube
Neurulation and the formation of the neural tubeNeurulation and the formation of the neural tube
Neurulation and the formation of the neural tube
 
How to Manage Notification Preferences in the Odoo 17
How to Manage Notification Preferences in the Odoo 17How to Manage Notification Preferences in the Odoo 17
How to Manage Notification Preferences in the Odoo 17
 
Removal Strategy _ FEFO _ Working with Perishable Products in Odoo 17
Removal Strategy _ FEFO _ Working with Perishable Products in Odoo 17Removal Strategy _ FEFO _ Working with Perishable Products in Odoo 17
Removal Strategy _ FEFO _ Working with Perishable Products in Odoo 17
 
Features of Video Calls in the Discuss Module in Odoo 17
Features of Video Calls in the Discuss Module in Odoo 17Features of Video Calls in the Discuss Module in Odoo 17
Features of Video Calls in the Discuss Module in Odoo 17
 

EmpTech Lesson 9-Web Page Design Using Templates and online WYSIWYG Platforms.pptx

  • 1. Web Page Design Using Templates and online WYSIWYG Platforms LESSON 9:
  • 2. Types of Websites 1. E-Commerce – an online shop where people can order goods and make payments from the comfort of their own homes.
  • 3. Types of Websites 2. Blogs and Personal - an ongoing online diary or commentary written by an individual, rather than a corporation or organization.
  • 4. Types of Websites 3. Informational - websites that are excellent ways to share information and resources on the web.
  • 5. Types of Websites 4. Online Community - these are great ways to get in touch and share ideas with people with the same interests or from similar backgrounds through the internet.
  • 6. Types of Websites 5. Photo Sharing - websites that allow people to upload and download photos for free.
  • 7. Types of Websites 6. E-Resume - an online document used and created by a person to their accomplishments.
  • 8. Types of Websites 7. E-Portfolio - a website that showcases a person’s work, skills and potentials for future employers.
  • 9. Types of Websites 8. Catalogue and Brochure - a website that presents visitors with photos and descriptions of their products and/or services.
  • 10. Types of Websites 9. Business Directory - website or printed listing of information which lists businesses within niche-based categories.
  • 11. Types of Websites 10. E-Biography - a detailed online description of a person's life.
  • 12. Types of Websites 11. Entertainment - an online brand or website that focuses on producing high quality entertainment content for its users.
  • 13. Types of Websites 12. Business -a website that’s devoted to representing a specific business.
  • 14. Types of Websites 13. NGO / Non-Profit - websites that do not aim to sell products or services to their visitors, but they still need to convince people to support their cause.
  • 15. Types of Websites 14. Job Searching -a website that deals specifically with employment or careers.
  • 16. Types of Websites 15. Social Media - an online platform which people use to build social networks or social relationships with other people who share similar personal or career interests, activities, backgrounds or real-life connections.
  • 18. 1. Layout It should be simple, familiar, intuitive, clean, and accessible. Give the elements of your site room to breathe Keep design items organized and orderly Make sure the images complement each other
  • 19. 2. Colour Pay attention to your topic, brand, or industry perspectives, along with your target audience demographics It's important to explore beyond what the eye can see in terms of colors.
  • 20. 3. Navigation Don’t fall into the trap of overly animated hover effects and complexity. Navigational elements in a website's header, body, and footer help visitors find desired information quickly.
  • 21. 4. Fonts Your text should be easily readable Light color paired with a dark tone. Avoid the piercing red-font-on-green- background eyesore
  • 22. 5. Content Your site visitors and potential customers want information quickly such as, is your brand trustworthy? Experienced? Is it capable of delivering top notch products and services? Information should be easy to read and digest.
  • 24. WYSIWYG stands for What You See Is What You Get drag-and-drop interface