際際滷

際際滷Share a Scribd company logo
Good vs bad web design


Why is this a bad
website?
Bad web design reasons
BackgroundsColor combinations of text and background that make the text hard
to read
GraphicsLarge graphic files that take forever to load
Meaningless or useless graphics
Thumbnail images that are nearly as large as the full-sized images
they link to
Blinking and animationsAnything that blinks, especially text
Multiple things that blink
Rainbow rules (lines)
Rainbow rules that blink or animate
"Under construction" signs, especially of little men working
Animated "under construction" signs
Animated pictures for email
Animations that never stop
Multiple animations that never stop
LinksDefault blue links
Blue link borders around graphics
Links that are not clear about where they will take you
Links in body copy that distract readers and lead them off to remote,
useless pages
Text links that are not underlined so you don't know they are links
Dead links (links that don't work anymore)
TextText that is too small to read
Text crowding against the left edge
Text that stretches all the way across the page
Centered type over flush left body copy
Paragraphs of type in all caps
Paragraphs of type in bold
Paragraphs of type in italic
Paragraphs of type in all caps, bold, and italic all at once
Underlined text that is not a link
Good web design
TextBackground does not interrupt the text
Text is big enough to read, but not too big
The hierarchy of information is perfectly clear
Columns of text are narrower than in a book to make reading easier on the screen

NavigationNavigation buttons and bars are easy to understand and use
Navigation is consistent throughout web site
Navigation buttons and bars provide the visitor with a clue as to where they are, what
page of the site they are currently on
Frames, if used, are not obtrusive
A large site has an index or site map
LinksLink colors coordinate with page colors
Links are underlined so they are instantly clear to the visitor

Graphics
Buttons are not big and dorky
Every graphic has an alt label
Every graphic link has a matching text link
Graphics and backgrounds use browser-safe colors
Animated graphics turn off by themselves
Internal linking


This is when the main
program and the
linked webpages are
all contained in one
large program.
External linking


External linking is where there is one main
program and other programs/links are
seperate. This is usually when you make
several webpages and put them all in the same
folder.
Web Design project






Building a website about tourism in bangkok. If
you have your textbooks go to page 104.
You should try to design the website with using
the good web design reasons to make it look
good.
You should include 8 hyperlinks- About
bangkok, what to see in bangkok,
hotels,museums, gardens in bangkok, temples.

More Related Content

Similar to Untitled 2 (20)

Web Site Design Principles
Web Site Design PrinciplesWeb Site Design Principles
Web Site Design Principles
Mukesh Tekwani
Task 1 - Conventions of a portfolio website
Task 1 - Conventions of a portfolio websiteTask 1 - Conventions of a portfolio website
Task 1 - Conventions of a portfolio website
L15338
Website usability ideas for business growth
Website usability ideas for business growthWebsite usability ideas for business growth
Website usability ideas for business growth
James Smith
Presentation1
Presentation1Presentation1
Presentation1
gregbear
Writing for the Web
Writing for the WebWriting for the Web
Writing for the Web
Nguy畛n Th動畛ng an
Notes on the Rhetorical Nature of Web Design
Notes on the Rhetorical Nature of Web DesignNotes on the Rhetorical Nature of Web Design
Notes on the Rhetorical Nature of Web Design
Amy Goodloe
Presentation2
Presentation2Presentation2
Presentation2
gregbear
4 Interface Design
4 Interface Design4 Interface Design
4 Interface Design
Program in Interdisciplinary Computing
Web Usability Page Design
Web Usability   Page DesignWeb Usability   Page Design
Web Usability Page Design
Ovidiu Von M
The good, the bad, the ugly - Best Practices for Design in SharePoint
The good, the bad, the ugly - Best Practices for Design in SharePointThe good, the bad, the ugly - Best Practices for Design in SharePoint
The good, the bad, the ugly - Best Practices for Design in SharePoint
D'arce Hess
Weboic website design
Weboic website designWeboic website design
Weboic website design
Nisha Mehra
Design and User Interface
Design and User InterfaceDesign and User Interface
Design and User Interface
Beth Case
Task 1 Portfolio Website Analysis
Task 1 Portfolio Website AnalysisTask 1 Portfolio Website Analysis
Task 1 Portfolio Website Analysis
aimsyayj
Webpages
WebpagesWebpages
Webpages
guest789f13
Jamal Qaiyyim Ch3
Jamal Qaiyyim Ch3Jamal Qaiyyim Ch3
Jamal Qaiyyim Ch3
Texas Tech University
Web site design
Web site designWeb site design
Web site design
Kingsport City SChools
Web Design
Web DesignWeb Design
Web Design
Mr_Casey
Illusion Insights Into Visual Design Elements
Illusion Insights Into Visual Design ElementsIllusion Insights Into Visual Design Elements
Illusion Insights Into Visual Design Elements
robin fay
Website design
Website designWebsite design
Website design
jagan asan
Webdesign New
Webdesign NewWebdesign New
Webdesign New
lyngdoh
Web Site Design Principles
Web Site Design PrinciplesWeb Site Design Principles
Web Site Design Principles
Mukesh Tekwani
Task 1 - Conventions of a portfolio website
Task 1 - Conventions of a portfolio websiteTask 1 - Conventions of a portfolio website
Task 1 - Conventions of a portfolio website
L15338
Website usability ideas for business growth
Website usability ideas for business growthWebsite usability ideas for business growth
Website usability ideas for business growth
James Smith
Presentation1
Presentation1Presentation1
Presentation1
gregbear
Notes on the Rhetorical Nature of Web Design
Notes on the Rhetorical Nature of Web DesignNotes on the Rhetorical Nature of Web Design
Notes on the Rhetorical Nature of Web Design
Amy Goodloe
Presentation2
Presentation2Presentation2
Presentation2
gregbear
Web Usability Page Design
Web Usability   Page DesignWeb Usability   Page Design
Web Usability Page Design
Ovidiu Von M
The good, the bad, the ugly - Best Practices for Design in SharePoint
The good, the bad, the ugly - Best Practices for Design in SharePointThe good, the bad, the ugly - Best Practices for Design in SharePoint
The good, the bad, the ugly - Best Practices for Design in SharePoint
D'arce Hess
Weboic website design
Weboic website designWeboic website design
Weboic website design
Nisha Mehra
Design and User Interface
Design and User InterfaceDesign and User Interface
Design and User Interface
Beth Case
Task 1 Portfolio Website Analysis
Task 1 Portfolio Website AnalysisTask 1 Portfolio Website Analysis
Task 1 Portfolio Website Analysis
aimsyayj
Web Design
Web DesignWeb Design
Web Design
Mr_Casey
Illusion Insights Into Visual Design Elements
Illusion Insights Into Visual Design ElementsIllusion Insights Into Visual Design Elements
Illusion Insights Into Visual Design Elements
robin fay
Website design
Website designWebsite design
Website design
jagan asan
Webdesign New
Webdesign NewWebdesign New
Webdesign New
lyngdoh

More from Max Friel (20)

Assum 4
Assum 4Assum 4
Assum 4
Max Friel
Assum 3
Assum 3Assum 3
Assum 3
Max Friel
Tourism
TourismTourism
Tourism
Max Friel
Practice programs
Practice programsPractice programs
Practice programs
Max Friel
Project 1
Project 1Project 1
Project 1
Max Friel
Practice and debugging
Practice and debuggingPractice and debugging
Practice and debugging
Max Friel
Debugging
DebuggingDebugging
Debugging
Max Friel
Strings
StringsStrings
Strings
Max Friel
Loops
LoopsLoops
Loops
Max Friel
Loops
LoopsLoops
Loops
Max Friel
If conditions
If conditionsIf conditions
If conditions
Max Friel
Keywords used in javascript
Keywords used in javascriptKeywords used in javascript
Keywords used in javascript
Max Friel
Variables
VariablesVariables
Variables
Max Friel
Basics
BasicsBasics
Basics
Max Friel
Developing html skills 1
Developing html skills 1Developing html skills 1
Developing html skills 1
Max Friel
Matching game
Matching gameMatching game
Matching game
Max Friel
activity flowcharts
activity flowchartsactivity flowcharts
activity flowcharts
Max Friel
Lesson one
Lesson oneLesson one
Lesson one
Max Friel
Summer course
Summer courseSummer course
Summer course
Max Friel
Law
LawLaw
Law
Max Friel
Practice programs
Practice programsPractice programs
Practice programs
Max Friel
Project 1
Project 1Project 1
Project 1
Max Friel
Practice and debugging
Practice and debuggingPractice and debugging
Practice and debugging
Max Friel
Debugging
DebuggingDebugging
Debugging
Max Friel
If conditions
If conditionsIf conditions
If conditions
Max Friel
Keywords used in javascript
Keywords used in javascriptKeywords used in javascript
Keywords used in javascript
Max Friel
Variables
VariablesVariables
Variables
Max Friel
Developing html skills 1
Developing html skills 1Developing html skills 1
Developing html skills 1
Max Friel
Matching game
Matching gameMatching game
Matching game
Max Friel
activity flowcharts
activity flowchartsactivity flowcharts
activity flowcharts
Max Friel
Lesson one
Lesson oneLesson one
Lesson one
Max Friel
Summer course
Summer courseSummer course
Summer course
Max Friel

Recently uploaded (20)

"Building Trust: Strengthening Your Software Supply Chain Security", Serhii V...
"Building Trust: Strengthening Your Software Supply Chain Security", Serhii V..."Building Trust: Strengthening Your Software Supply Chain Security", Serhii V...
"Building Trust: Strengthening Your Software Supply Chain Security", Serhii V...
Fwdays
Big Data Analytics Quick Research Guide by Arthur Morgan (PREVIEW)
Big Data Analytics Quick Research Guide by Arthur Morgan (PREVIEW)Big Data Analytics Quick Research Guide by Arthur Morgan (PREVIEW)
Big Data Analytics Quick Research Guide by Arthur Morgan (PREVIEW)
Arthur Morgan
What is Blockchain and How Can Blockchain Consulting Help Businesses.pdf
What is Blockchain and How Can Blockchain Consulting Help Businesses.pdfWhat is Blockchain and How Can Blockchain Consulting Help Businesses.pdf
What is Blockchain and How Can Blockchain Consulting Help Businesses.pdf
Yodaplus Technologies Private Limited
Artificial Intelligence Quick Research Guide by Arthur Morgan
Artificial Intelligence Quick Research Guide by Arthur MorganArtificial Intelligence Quick Research Guide by Arthur Morgan
Artificial Intelligence Quick Research Guide by Arthur Morgan
Arthur Morgan
"Zero-sales lost Incident Management", Igor Drozd
"Zero-sales lost  Incident Management", Igor Drozd"Zero-sales lost  Incident Management", Igor Drozd
"Zero-sales lost Incident Management", Igor Drozd
Fwdays
Getting Started with AWS - Enterprise Landing Zone for Terraform Learning & D...
Getting Started with AWS - Enterprise Landing Zone for Terraform Learning & D...Getting Started with AWS - Enterprise Landing Zone for Terraform Learning & D...
Getting Started with AWS - Enterprise Landing Zone for Terraform Learning & D...
Chris Wahl
Mastering ChatGPT & LLMs for Practical Applications: Tips, Tricks, and Use Cases
Mastering ChatGPT & LLMs for Practical Applications: Tips, Tricks, and Use CasesMastering ChatGPT & LLMs for Practical Applications: Tips, Tricks, and Use Cases
Mastering ChatGPT & LLMs for Practical Applications: Tips, Tricks, and Use Cases
Sanjay Willie
"10 Pitfalls of a Platform Team", Yura Rochniak
"10 Pitfalls of a Platform Team", Yura Rochniak"10 Pitfalls of a Platform Team", Yura Rochniak
"10 Pitfalls of a Platform Team", Yura Rochniak
Fwdays
SB7 Mobile Ltd: Simplified & Secure Services
SB7 Mobile Ltd: Simplified & Secure ServicesSB7 Mobile Ltd: Simplified & Secure Services
SB7 Mobile Ltd: Simplified & Secure Services
Reuben Jasper
Cryptography Overview Presentation circa 2005
Cryptography Overview Presentation circa 2005Cryptography Overview Presentation circa 2005
Cryptography Overview Presentation circa 2005
Dan Houser
What is FinTech A Complete Guide to Financial Technology.pdf
What is FinTech A Complete Guide to Financial Technology.pdfWhat is FinTech A Complete Guide to Financial Technology.pdf
What is FinTech A Complete Guide to Financial Technology.pdf
Yodaplus Technologies Private Limited
GDG Cloud Southlake #40: Brandon Stokes: How to Build a Great Product
GDG Cloud Southlake #40: Brandon Stokes: How to Build a Great ProductGDG Cloud Southlake #40: Brandon Stokes: How to Build a Great Product
GDG Cloud Southlake #40: Brandon Stokes: How to Build a Great Product
James Anderson
Understanding & Utilizing SharePoint Advanced Management
Understanding & Utilizing SharePoint Advanced ManagementUnderstanding & Utilizing SharePoint Advanced Management
Understanding & Utilizing SharePoint Advanced Management
Drew Madelung
Build with AI on Google Cloud Session #3
Build with AI on Google Cloud Session #3Build with AI on Google Cloud Session #3
Build with AI on Google Cloud Session #3
Margaret Maynard-Reid
Transcript: AI in publishing: Your questions answered - Tech Forum 2025
Transcript: AI in publishing: Your questions answered - Tech Forum 2025Transcript: AI in publishing: Your questions answered - Tech Forum 2025
Transcript: AI in publishing: Your questions answered - Tech Forum 2025
BookNet Canada
The Constructor's Digital Transformation Playbook: Reducing Risk With Technology
The Constructor's Digital Transformation Playbook: Reducing Risk With TechnologyThe Constructor's Digital Transformation Playbook: Reducing Risk With Technology
The Constructor's Digital Transformation Playbook: Reducing Risk With Technology
Aggregage
THE BIG TEN BIOPHARMACEUTICAL MNCs: GLOBAL CAPABILITY CENTERS IN INDIA
THE BIG TEN BIOPHARMACEUTICAL MNCs: GLOBAL CAPABILITY CENTERS IN INDIATHE BIG TEN BIOPHARMACEUTICAL MNCs: GLOBAL CAPABILITY CENTERS IN INDIA
THE BIG TEN BIOPHARMACEUTICAL MNCs: GLOBAL CAPABILITY CENTERS IN INDIA
Srivaanchi Nathan
"Kubernetes operators. How we migrated Release Management to controllers", De...
"Kubernetes operators. How we migrated Release Management to controllers", De..."Kubernetes operators. How we migrated Release Management to controllers", De...
"Kubernetes operators. How we migrated Release Management to controllers", De...
Fwdays
Caching for Performance Masterclass: Caching at Scale
Caching for Performance Masterclass: Caching at ScaleCaching for Performance Masterclass: Caching at Scale
Caching for Performance Masterclass: Caching at Scale
ScyllaDB
"DevOps culture and digital transformation process of Temabit Fozzy Group", O...
"DevOps culture and digital transformation process of Temabit Fozzy Group", O..."DevOps culture and digital transformation process of Temabit Fozzy Group", O...
"DevOps culture and digital transformation process of Temabit Fozzy Group", O...
Fwdays
"Building Trust: Strengthening Your Software Supply Chain Security", Serhii V...
"Building Trust: Strengthening Your Software Supply Chain Security", Serhii V..."Building Trust: Strengthening Your Software Supply Chain Security", Serhii V...
"Building Trust: Strengthening Your Software Supply Chain Security", Serhii V...
Fwdays
Big Data Analytics Quick Research Guide by Arthur Morgan (PREVIEW)
Big Data Analytics Quick Research Guide by Arthur Morgan (PREVIEW)Big Data Analytics Quick Research Guide by Arthur Morgan (PREVIEW)
Big Data Analytics Quick Research Guide by Arthur Morgan (PREVIEW)
Arthur Morgan
What is Blockchain and How Can Blockchain Consulting Help Businesses.pdf
What is Blockchain and How Can Blockchain Consulting Help Businesses.pdfWhat is Blockchain and How Can Blockchain Consulting Help Businesses.pdf
What is Blockchain and How Can Blockchain Consulting Help Businesses.pdf
Yodaplus Technologies Private Limited
Artificial Intelligence Quick Research Guide by Arthur Morgan
Artificial Intelligence Quick Research Guide by Arthur MorganArtificial Intelligence Quick Research Guide by Arthur Morgan
Artificial Intelligence Quick Research Guide by Arthur Morgan
Arthur Morgan
"Zero-sales lost Incident Management", Igor Drozd
"Zero-sales lost  Incident Management", Igor Drozd"Zero-sales lost  Incident Management", Igor Drozd
"Zero-sales lost Incident Management", Igor Drozd
Fwdays
Getting Started with AWS - Enterprise Landing Zone for Terraform Learning & D...
Getting Started with AWS - Enterprise Landing Zone for Terraform Learning & D...Getting Started with AWS - Enterprise Landing Zone for Terraform Learning & D...
Getting Started with AWS - Enterprise Landing Zone for Terraform Learning & D...
Chris Wahl
Mastering ChatGPT & LLMs for Practical Applications: Tips, Tricks, and Use Cases
Mastering ChatGPT & LLMs for Practical Applications: Tips, Tricks, and Use CasesMastering ChatGPT & LLMs for Practical Applications: Tips, Tricks, and Use Cases
Mastering ChatGPT & LLMs for Practical Applications: Tips, Tricks, and Use Cases
Sanjay Willie
"10 Pitfalls of a Platform Team", Yura Rochniak
"10 Pitfalls of a Platform Team", Yura Rochniak"10 Pitfalls of a Platform Team", Yura Rochniak
"10 Pitfalls of a Platform Team", Yura Rochniak
Fwdays
SB7 Mobile Ltd: Simplified & Secure Services
SB7 Mobile Ltd: Simplified & Secure ServicesSB7 Mobile Ltd: Simplified & Secure Services
SB7 Mobile Ltd: Simplified & Secure Services
Reuben Jasper
Cryptography Overview Presentation circa 2005
Cryptography Overview Presentation circa 2005Cryptography Overview Presentation circa 2005
Cryptography Overview Presentation circa 2005
Dan Houser
GDG Cloud Southlake #40: Brandon Stokes: How to Build a Great Product
GDG Cloud Southlake #40: Brandon Stokes: How to Build a Great ProductGDG Cloud Southlake #40: Brandon Stokes: How to Build a Great Product
GDG Cloud Southlake #40: Brandon Stokes: How to Build a Great Product
James Anderson
Understanding & Utilizing SharePoint Advanced Management
Understanding & Utilizing SharePoint Advanced ManagementUnderstanding & Utilizing SharePoint Advanced Management
Understanding & Utilizing SharePoint Advanced Management
Drew Madelung
Build with AI on Google Cloud Session #3
Build with AI on Google Cloud Session #3Build with AI on Google Cloud Session #3
Build with AI on Google Cloud Session #3
Margaret Maynard-Reid
Transcript: AI in publishing: Your questions answered - Tech Forum 2025
Transcript: AI in publishing: Your questions answered - Tech Forum 2025Transcript: AI in publishing: Your questions answered - Tech Forum 2025
Transcript: AI in publishing: Your questions answered - Tech Forum 2025
BookNet Canada
The Constructor's Digital Transformation Playbook: Reducing Risk With Technology
The Constructor's Digital Transformation Playbook: Reducing Risk With TechnologyThe Constructor's Digital Transformation Playbook: Reducing Risk With Technology
The Constructor's Digital Transformation Playbook: Reducing Risk With Technology
Aggregage
THE BIG TEN BIOPHARMACEUTICAL MNCs: GLOBAL CAPABILITY CENTERS IN INDIA
THE BIG TEN BIOPHARMACEUTICAL MNCs: GLOBAL CAPABILITY CENTERS IN INDIATHE BIG TEN BIOPHARMACEUTICAL MNCs: GLOBAL CAPABILITY CENTERS IN INDIA
THE BIG TEN BIOPHARMACEUTICAL MNCs: GLOBAL CAPABILITY CENTERS IN INDIA
Srivaanchi Nathan
"Kubernetes operators. How we migrated Release Management to controllers", De...
"Kubernetes operators. How we migrated Release Management to controllers", De..."Kubernetes operators. How we migrated Release Management to controllers", De...
"Kubernetes operators. How we migrated Release Management to controllers", De...
Fwdays
Caching for Performance Masterclass: Caching at Scale
Caching for Performance Masterclass: Caching at ScaleCaching for Performance Masterclass: Caching at Scale
Caching for Performance Masterclass: Caching at Scale
ScyllaDB
"DevOps culture and digital transformation process of Temabit Fozzy Group", O...
"DevOps culture and digital transformation process of Temabit Fozzy Group", O..."DevOps culture and digital transformation process of Temabit Fozzy Group", O...
"DevOps culture and digital transformation process of Temabit Fozzy Group", O...
Fwdays

Untitled 2

  • 1. Good vs bad web design Why is this a bad website?
  • 2. Bad web design reasons BackgroundsColor combinations of text and background that make the text hard to read GraphicsLarge graphic files that take forever to load Meaningless or useless graphics Thumbnail images that are nearly as large as the full-sized images they link to
  • 3. Blinking and animationsAnything that blinks, especially text Multiple things that blink Rainbow rules (lines) Rainbow rules that blink or animate "Under construction" signs, especially of little men working Animated "under construction" signs Animated pictures for email Animations that never stop Multiple animations that never stop
  • 4. LinksDefault blue links Blue link borders around graphics Links that are not clear about where they will take you Links in body copy that distract readers and lead them off to remote, useless pages Text links that are not underlined so you don't know they are links Dead links (links that don't work anymore)
  • 5. TextText that is too small to read Text crowding against the left edge Text that stretches all the way across the page Centered type over flush left body copy Paragraphs of type in all caps Paragraphs of type in bold Paragraphs of type in italic Paragraphs of type in all caps, bold, and italic all at once Underlined text that is not a link
  • 6. Good web design TextBackground does not interrupt the text Text is big enough to read, but not too big The hierarchy of information is perfectly clear Columns of text are narrower than in a book to make reading easier on the screen NavigationNavigation buttons and bars are easy to understand and use Navigation is consistent throughout web site Navigation buttons and bars provide the visitor with a clue as to where they are, what page of the site they are currently on Frames, if used, are not obtrusive A large site has an index or site map
  • 7. LinksLink colors coordinate with page colors Links are underlined so they are instantly clear to the visitor Graphics Buttons are not big and dorky Every graphic has an alt label Every graphic link has a matching text link Graphics and backgrounds use browser-safe colors Animated graphics turn off by themselves
  • 8. Internal linking This is when the main program and the linked webpages are all contained in one large program.
  • 9. External linking External linking is where there is one main program and other programs/links are seperate. This is usually when you make several webpages and put them all in the same folder.
  • 10. Web Design project Building a website about tourism in bangkok. If you have your textbooks go to page 104. You should try to design the website with using the good web design reasons to make it look good. You should include 8 hyperlinks- About bangkok, what to see in bangkok, hotels,museums, gardens in bangkok, temples.