web design, 5 th edition 4 planning a successful website: part 2
TRANSCRIPT
![Page 1: Web Design, 5 th Edition 4 Planning a Successful Website: Part 2](https://reader034.vdocuments.site/reader034/viewer/2022051401/56649ddf5503460f94ad97b4/html5/thumbnails/1.jpg)
Web Design,5th Edition
4Planning a SuccessfulWebsite: Part 2
![Page 2: Web Design, 5 th Edition 4 Planning a Successful Website: Part 2](https://reader034.vdocuments.site/reader034/viewer/2022051401/56649ddf5503460f94ad97b4/html5/thumbnails/2.jpg)
Chapter 4: Planning a Successful Website: Part 2 2
Chapter Objectives
Discuss the relationship between page length, content placement, and usability
Complete Step 4: Specify the website’s navigation system
Complete Step 5: Design the look and feel of the website
Complete Step 6: Test, publish, and maintain the website
Use a checklist to review your web design plan
![Page 3: Web Design, 5 th Edition 4 Planning a Successful Website: Part 2](https://reader034.vdocuments.site/reader034/viewer/2022051401/56649ddf5503460f94ad97b4/html5/thumbnails/3.jpg)
Chapter 4: Planning a Successful Website: Part 2 3
Page Length, Content Placement, and Usability The initial, visible screen
area is extremely valuable space
Place the most critical information above and to the left of the potential scroll zones– Avoid a cluttered
appearance
![Page 4: Web Design, 5 th Edition 4 Planning a Successful Website: Part 2](https://reader034.vdocuments.site/reader034/viewer/2022051401/56649ddf5503460f94ad97b4/html5/thumbnails/4.jpg)
Chapter 4: Planning a Successful Website: Part 2 4
Page Length, Content Placement, and Usability Eye-tracking studies use various technologies to
produce heat maps that represent data using color Eye-tracking heat maps are created by analyzing the
movement of a visitor’s eyes as he or she views a webpage
Over the past several years, eye-tracking studies suggest that a site’s visitors typically first look at the top and left areas of a page, and then look down and to the right
![Page 5: Web Design, 5 th Edition 4 Planning a Successful Website: Part 2](https://reader034.vdocuments.site/reader034/viewer/2022051401/56649ddf5503460f94ad97b4/html5/thumbnails/5.jpg)
Chapter 4: Planning a Successful Website: Part 2 5
Page Length, Content Placement, and Usability
When designing a webpage, you need to decide how to manage page width– Fixed-width page– Liquid or flexible page layout– Hybrid page layout
![Page 6: Web Design, 5 th Edition 4 Planning a Successful Website: Part 2](https://reader034.vdocuments.site/reader034/viewer/2022051401/56649ddf5503460f94ad97b4/html5/thumbnails/6.jpg)
Chapter 4: Planning a Successful Website: Part 2 6
Step 4: Specify the Website’s Navigation System
A navigation system that is easy for visitors to understand and follow will draw them deeper into your website to view detail pages with content that can satisfy their needs and expectations– User-based navigation system– User-controlled navigation system
![Page 7: Web Design, 5 th Edition 4 Planning a Successful Website: Part 2](https://reader034.vdocuments.site/reader034/viewer/2022051401/56649ddf5503460f94ad97b4/html5/thumbnails/7.jpg)
Chapter 4: Planning a Successful Website: Part 2 7
Link Types
Text linksImage linksNavigation areasBreadcrumb trailWebsite mapSearch capability
![Page 8: Web Design, 5 th Edition 4 Planning a Successful Website: Part 2](https://reader034.vdocuments.site/reader034/viewer/2022051401/56649ddf5503460f94ad97b4/html5/thumbnails/8.jpg)
Chapter 4: Planning a Successful Website: Part 2 8
Link Types
Text links are hyperlinks based on a word or words in an HTML document
An image link assigns a link to a visual element, such as an illustration or a photograph– Image map– Hot spots
![Page 9: Web Design, 5 th Edition 4 Planning a Successful Website: Part 2](https://reader034.vdocuments.site/reader034/viewer/2022051401/56649ddf5503460f94ad97b4/html5/thumbnails/9.jpg)
Chapter 4: Planning a Successful Website: Part 2 9
Link Types
You should group related links into a navigation area to create an eye-catching design element– Navigation menu– Navigation bar
• Drop-down menus
– Navigation tabs
![Page 10: Web Design, 5 th Edition 4 Planning a Successful Website: Part 2](https://reader034.vdocuments.site/reader034/viewer/2022051401/56649ddf5503460f94ad97b4/html5/thumbnails/10.jpg)
Chapter 4: Planning a Successful Website: Part 2 10
Link Types
![Page 11: Web Design, 5 th Edition 4 Planning a Successful Website: Part 2](https://reader034.vdocuments.site/reader034/viewer/2022051401/56649ddf5503460f94ad97b4/html5/thumbnails/11.jpg)
Chapter 4: Planning a Successful Website: Part 2 11
Link Types
A breadcrumb trail is a hierarchical outline or horizontal list that shows a visitor the path he or she has taken from the home page to the currently viewed page
![Page 12: Web Design, 5 th Edition 4 Planning a Successful Website: Part 2](https://reader034.vdocuments.site/reader034/viewer/2022051401/56649ddf5503460f94ad97b4/html5/thumbnails/12.jpg)
Chapter 4: Planning a Successful Website: Part 2 12
Link Types
A website with a large number of pages and a complex structure often provides a website map, also called a website index
![Page 13: Web Design, 5 th Edition 4 Planning a Successful Website: Part 2](https://reader034.vdocuments.site/reader034/viewer/2022051401/56649ddf5503460f94ad97b4/html5/thumbnails/13.jpg)
Chapter 4: Planning a Successful Website: Part 2 13
Link Types
A website search feature is another popular navigation tool for websites with a large number of pages
A hosted website search provider is a third-party company that uses spiders or other tools to build a searchable index of your website’s pages and then hosts the index on their servers
![Page 14: Web Design, 5 th Edition 4 Planning a Successful Website: Part 2](https://reader034.vdocuments.site/reader034/viewer/2022051401/56649ddf5503460f94ad97b4/html5/thumbnails/14.jpg)
Chapter 4: Planning a Successful Website: Part 2 14
Link Types
![Page 15: Web Design, 5 th Edition 4 Planning a Successful Website: Part 2](https://reader034.vdocuments.site/reader034/viewer/2022051401/56649ddf5503460f94ad97b4/html5/thumbnails/15.jpg)
Chapter 4: Planning a Successful Website: Part 2 15
Step 5: Design the Look and Feel of the Website
You can create visual consistency by repeating design features — typeface, content position, color scheme — company or website name, logo, and major links — across all pages at a site
Inconsistent appearances confuse visitors
![Page 16: Web Design, 5 th Edition 4 Planning a Successful Website: Part 2](https://reader034.vdocuments.site/reader034/viewer/2022051401/56649ddf5503460f94ad97b4/html5/thumbnails/16.jpg)
Chapter 4: Planning a Successful Website: Part 2 16
Color and Visual Consistency
Color schemes create unityApply color scheme to the background,
graphic art and illustrations, and text across all pages
Choose background and text colors to provide sufficient contrast
Choose graphics that match your color scheme
![Page 17: Web Design, 5 th Edition 4 Planning a Successful Website: Part 2](https://reader034.vdocuments.site/reader034/viewer/2022051401/56649ddf5503460f94ad97b4/html5/thumbnails/17.jpg)
Chapter 4: Planning a Successful Website: Part 2 17
Color and Visual Contrast
![Page 18: Web Design, 5 th Edition 4 Planning a Successful Website: Part 2](https://reader034.vdocuments.site/reader034/viewer/2022051401/56649ddf5503460f94ad97b4/html5/thumbnails/18.jpg)
Chapter 4: Planning a Successful Website: Part 2 18
CSS and Formatting
The CSS specification allows web designers to use a text document, called a style sheet, to control the appearance of one or more pages at a website
Styles can create visual consistency
![Page 19: Web Design, 5 th Edition 4 Planning a Successful Website: Part 2](https://reader034.vdocuments.site/reader034/viewer/2022051401/56649ddf5503460f94ad97b4/html5/thumbnails/19.jpg)
Chapter 4: Planning a Successful Website: Part 2 19
CSS and Formatting
Inline Style– Inserted within a tag
Internal Style Sheet– Inserted within a page’s heading tags
External Style Sheet– Saved in a folder with the website’s pages and linked to
them with HTML tag
![Page 20: Web Design, 5 th Edition 4 Planning a Successful Website: Part 2](https://reader034.vdocuments.site/reader034/viewer/2022051401/56649ddf5503460f94ad97b4/html5/thumbnails/20.jpg)
Chapter 4: Planning a Successful Website: Part 2 20
CSS and Formatting
![Page 21: Web Design, 5 th Edition 4 Planning a Successful Website: Part 2](https://reader034.vdocuments.site/reader034/viewer/2022051401/56649ddf5503460f94ad97b4/html5/thumbnails/21.jpg)
Chapter 4: Planning a Successful Website: Part 2 21
Page Layout
Can ensure visual consistency across a website’s pages
A well-designed layout creates a sense of balance
Display certain items consistently (in the same place) on all pages– Logo and name– Search feature– Links– Content area
![Page 22: Web Design, 5 th Edition 4 Planning a Successful Website: Part 2](https://reader034.vdocuments.site/reader034/viewer/2022051401/56649ddf5503460f94ad97b4/html5/thumbnails/22.jpg)
Chapter 4: Planning a Successful Website: Part 2 22
Page Layout
![Page 23: Web Design, 5 th Edition 4 Planning a Successful Website: Part 2](https://reader034.vdocuments.site/reader034/viewer/2022051401/56649ddf5503460f94ad97b4/html5/thumbnails/23.jpg)
Chapter 4: Planning a Successful Website: Part 2 23
Page Layout
Underlying structure of rows and columns, called a layout grid
Allows you to precisely position and align page content
![Page 24: Web Design, 5 th Edition 4 Planning a Successful Website: Part 2](https://reader034.vdocuments.site/reader034/viewer/2022051401/56649ddf5503460f94ad97b4/html5/thumbnails/24.jpg)
Chapter 4: Planning a Successful Website: Part 2 24
Page Layout
CSS and page layout– Style sheets can also
be used to control page layout by dividing a page into sections, such as a header section or a navigation section• <div> tag
![Page 25: Web Design, 5 th Edition 4 Planning a Successful Website: Part 2](https://reader034.vdocuments.site/reader034/viewer/2022051401/56649ddf5503460f94ad97b4/html5/thumbnails/25.jpg)
Chapter 4: Planning a Successful Website: Part 2 25
Page Layout
Tables– Arrangement of cells in columns and rows– Two common uses
• Create rows and columns of data• Create webpage layout
![Page 26: Web Design, 5 th Edition 4 Planning a Successful Website: Part 2](https://reader034.vdocuments.site/reader034/viewer/2022051401/56649ddf5503460f94ad97b4/html5/thumbnails/26.jpg)
Chapter 4: Planning a Successful Website: Part 2 26
Step 6: Test, Publish, and Maintain the Website A formal website usability test is an evaluation that
generally takes place in a structured environment, such as a testing laboratory
Create a website that meets the needs of your hosting service– Internal or external hosting vendor– Size limits– Update frequency– Person in charge of updating– Budget restrictions
![Page 27: Web Design, 5 th Edition 4 Planning a Successful Website: Part 2](https://reader034.vdocuments.site/reader034/viewer/2022051401/56649ddf5503460f94ad97b4/html5/thumbnails/27.jpg)
Chapter 4: Planning a Successful Website: Part 2 27
Site Plan Checklist
Identify the website’s purpose and target audience
Determine the website’s general contentSelect the website’s structureSpecify the website’s navigation systemDesign the look and feel of the websiteTest, publish, and maintain the website
![Page 28: Web Design, 5 th Edition 4 Planning a Successful Website: Part 2](https://reader034.vdocuments.site/reader034/viewer/2022051401/56649ddf5503460f94ad97b4/html5/thumbnails/28.jpg)
Chapter 4: Planning a Successful Website: Part 2 28
Chapter Summary
Discuss the relationship between page length, content placement, and usability
Complete Step 4: Specify the website’s navigation system
Complete Step 5: Design the look and feel of the website
Complete Step 6: Test, publish, and maintain the website
Use a checklist to review your web design plan
![Page 29: Web Design, 5 th Edition 4 Planning a Successful Website: Part 2](https://reader034.vdocuments.site/reader034/viewer/2022051401/56649ddf5503460f94ad97b4/html5/thumbnails/29.jpg)
Web Design,5th Edition
4Planning a SuccessfulWebsite: Part 2