SlideShare a Scribd company logo
Web Design Principles
5th
Edition
Chapter Three
Planning the Site
Objectives
When you complete this chapter, you will be able to:
• Understand the Web site development process
• Create a site specification
• Identify the content goal
• Analyze your audience
• Build a Web site development team
2Web Design Principles 5th
Ed.
Understanding the Web Site
Development Process
Understanding the Web Site
Development
• You need a good project plan
• Larger projects need a project manager
• Adopt a development framework
• The project life cycle encompasses the entire
project from start to finish
4Web Design Principles 5th
Ed.
5Web Design Principles 5th
Ed.
• The client presents the requirements for the site
• Requirements are the list of customer needs
• The project team breaks the requirements down to
tasks
• The team prepares a project specification that
contains:
– Page layout sketches
– Audience definition
– Technical requirements
Requirements and Specification
6Web Design Principles 5th
Ed.
• User analysis guides the design of site content
• Goal is to create meaningful content navigation
• Taxonomy is a classification and naming of
contents in a hierarchy
• The taxonomy of the site structures the topic
hierarchy and navigation
Information Design and Taxonomy
Creation
7Web Design Principles 5th
Ed.
• Designers prepare sketches and page mockups to
represent page layouts
• All page layouts start with a mockup
• Mockups can be easily edited based on feedback
• Wireframes document a more stable page design
• Wireframes offer a more complete view of what the
final design will look like
Graphic Design and Page Template
Creation
8Web Design Principles 5th
Ed.
9Web Design Principles 5th
Ed.
10Web Design Principles 5th
Ed.
• Construction begins when the design stage is
mostly complete
• This stage includes technical development of the
site
• Some testing will occur during this stage
Construction and Content
Development
11Web Design Principles 5th
Ed.
• Quality assurance validates the technology of the
site
• User testing validates the design
• Cross-platform testing and usability testing ensure
users can access content easily
Quality Assurance and User Testing
12Web Design Principles 5th
Ed.
• The site is published to the Web
• Promotion of the site begins
Publishing and Promotion
13Web Design Principles 5th
Ed.
• Starts when the site goes live and continues
throughout the life of the project
Ongoing Maintenance
14Web Design Principles 5th
Ed.
Creating a Site Specification
• Who is the client for the site?
• Can you write a two- or three-paragraph
mission statement that briefly states the site’s
goals?
• What do you envision as the goal of the site?
• What do you (or your company or
organization) hope to gain from creating and
maintaining a Web site?
• What are the requirements for the Web site?
Creating a Site Specification
16Web Design Principles 5th
Ed.
• Are the requirements feasible?
• How will you judge the success of the site?
• Who is the target audience?
• What are the limiting technical factors?
• What is the budget?
• Is this a new site or an upgrade?
Creating a Site Specification
17Web Design Principles 5th
Ed.
Identifying the Content Goal
• Examine closely what type of site you are
building
• Your objectives and your users’ objectives may
be quite different
• Adopt your users’ perspective
• Think about the type of content you’re
presenting and look to the Web for examples
of how best to present it
Identifying the Content Goal
19Web Design Principles 5th
Ed.
• Types of Web sites:
– Billboard
– Publishing
– Portal
– Special interest
– Blog
– Social networking
Identifying the Content Goal
20Web Design Principles 5th
Ed.
– Wikis
– RSS
– Virtual gallery
– E-commerce, catalog, online shopping
– Product support
– Intranet/Extranet
Identifying the Content Goal
21Web Design Principles 5th
Ed.
Analyzing Your Audience
• Produce an audience definition:
– What is it that users want when they come to
your site?
– How can you attract them and entice them to
return for repeat visits?
– What type of computer and connection speed
do your typical visitors have?
Analyzing Your Audience
23Web Design Principles 5th
Ed.
• Who are the typical members of your
audience?
– Are they male or female?
– What level of education do they have?
– What is their reading and vocabulary level?
– What level of technical aptitude do they have?
• Why do people come to your site?
– Do they want information?
– Do they want to download files?
– Are they looking for links to other Web sites?
Analyzing Your Audience
24Web Design Principles 5th
Ed.
• Web analytics are statistics gathered by Web
servers
• Reporting tools can analyze the statistics
• You can track user activity on your Web site
• You can see where your visitors come from and
which pages they like the best
Using Web Analytics
25Web Design Principles 5th
Ed.
• Think about where users are located and what their
technology level might be
• Test in different environments and with different
technologies
• Consider the physical capabilities of your users
Identifying Technology Issues and
Accessibility Constraints
26Web Design Principles 5th
Ed.
You can identify accessibility constraints
• Review the WCAG 2.0 and section 508 guidelines
• In new sites, plan for accessibility
• In existing sites, assess the current accessibility
• Look to other real-life accessibility implementations
Identifying Technology Issues and
Accessibility Constraints
27Web Design Principles 5th
Ed.
• Try to use software that matches the complexity
needs of your site
• Move up to more advanced tools as your skills
grow
• Learn to use graphics tools as well
• Look to shareware and freeware options
Identifying Software Tools
28Web Design Principles 5th
Ed.
Building a Website Development
Team
• Project managers
• HTML developers
• Designers
• Writers and information designers
• Application developers
• Database administrators
• Server administrators
Building a Web Site Development
Team
30Web Design Principles 5th
Ed.
• Plan the filename conventions for your site
• Find out which operating system your server uses
• Make sure file structures are transferable from
development machines to the Web server
Creating Conventions for Filenames
and URLs
31Web Design Principles 5th
Ed.
• File naming conventions vary across operating
systems
• The ISO 9660 standard works across all operating
systems
• Leave out special characters
• Use the correct file extensions
• Use underscores instead of spaces
• Use all lowercase letters
Naming Files
32Web Design Principles 5th
Ed.
33Web Design Principles 5th
Ed.
• Complete URLs are the unique address of a file on
the Web
Using Complete or Partial URLs
34Web Design Principles 5th
Ed.
• Partial URLs locate a file that resides on your own
computer or server
<a href="laptop.htm">link text</a>
Using Complete or Partial URLs
35Web Design Principles 5th
Ed.
• You build a site on a development computer but
host it on a different computer
• The files for your Web site must be transferred from
the development computer to the hosting computer
• Your file structure must be transferable
• Use relative paths to indicate file locations
Setting a Directory Structure
36Web Design Principles 5th
Ed.
• All files are contained in the same folder
Single Folder Structure
37Web Design Principles 5th
Ed.
• Content is separated into different folders
Hierarchical Folder Structure
38Web Design Principles 5th
Ed.
• Plan your site by creating a storyboard flowchart
• The flowchart shows structure logic and taxonomy
• This is an important planning step
• You can visualize and refine your site design
Creating a Site Storyboard
39Web Design Principles 5th
Ed.
• Think about your users’ information needs
• How should your information design map look?
• Review the following sample structures and adapt
them to information needs
Organizing Information Structure
40Web Design Principles 5th
Ed.
Linear Structure
41Web Design Principles 5th
Ed.
Tutorial Structure
42Web Design Principles 5th
Ed.
Web Structure
43Web Design Principles 5th
Ed.
Hierarchical Structure
44Web Design Principles 5th
Ed.
Cluster Structure
45Web Design Principles 5th
Ed.
Catalog Structure
46Web Design Principles 5th
Ed.
Publishing Your Web Site
• The Web hosting service hosts your Web site
• Select a Web hosting service appropriate to the
size of your Web site
• Check for the following features
– DSL and cable access
– Accessible technical support
– E-mail addresses
– SQL database support
– Secure socket layer support
Choosing a Web Hosting Service
Provider
48Web Design Principles 5th
Ed.
Registering a Domain Name
49Web Design Principles 5th
Ed.
• Is the Web host local or national?
• What are the details of the different hosting
packages?
• Are there bandwidth limits for the number of visitors
your site receives per month?
• Does the Web host offer technical support?
• How many e-mail addresses do you get?
• Does the Web host provide software and offer
support for the latest connection technologies?
• Does the Web host offer enhanced services?
Web Hosting Service Comparison
Checklist
50Web Design Principles 5th
Ed.
• To publish pages on the Web, you must send your
HTML code, images, and other files to the Web
server
• FTP software let you transfer the files
• Some HTML-editing software has built-in FTP
• There are many shareware and freeware FTP
programs to choose from
Uploading Your Files with FTP
51Web Design Principles 5th
Ed.
• Multiple browsers
• Multiple operating systems
• Connection speeds
• Display types
• Link testing
Testing Your Web Site
52Web Design Principles 5th
Ed.
• Vary your subjects
• Formalize your testing
• Develop a feedback form
Usability Testing
53Web Design Principles 5th
Ed.
• A successful Web site is the result of careful
planning
• Become familiar with the Web development
lifecycle
• Start with pencil and paper
• Write a site specification document
• Identify the content goal
• Analyze your audience
• An effective site is a team effort
Summary
54Web Design Principles 5th
Ed.
• Create portable filename conventions
• Create an information structure for your site
• Shop carefully when seeking a Web host
• Learn to use FTP software
• Test, test, test!
Summary
55Web Design Principles 5th
Ed.

More Related Content

PPT
Ppt ch07
PPT
Ppt ch05
PPT
Ppt ch08
PPT
Ppt ch04
PPT
Ppt ch02
PPT
Ppt ch09
PDF
Ppt ch06
PPT
Ppt ch11
Ppt ch07
Ppt ch05
Ppt ch08
Ppt ch04
Ppt ch02
Ppt ch09
Ppt ch06
Ppt ch11

What's hot (18)

PPT
Ppt ch02
PPT
Ppt ch10
PPT
Ppt ch01
PPT
Ppt ch03
PPT
Joomla! theming
PPT
Web design-workflow
PPTX
Module 4 - Dreamweaver Templates (Static vs. Dynamic Content)
PPT
PPTX
Ui devopler
PPTX
#SPSLondon - Session 2 JSLink for IT Pros
PPTX
JSLink for ITPros - SharePoint Saturday Jersey
PDF
Web designing syllabus
PPTX
Share point 2013 WCM for Developers
PPT
Green Hectares Rural Tech Workshop - Adding Content
PDF
Simply Accessible - Kevin Callahan - ebookcraft 2018
KEY
Open Source CMS Playroom
PPTX
Web Design Norms
Ppt ch02
Ppt ch10
Ppt ch01
Ppt ch03
Joomla! theming
Web design-workflow
Module 4 - Dreamweaver Templates (Static vs. Dynamic Content)
Ui devopler
#SPSLondon - Session 2 JSLink for IT Pros
JSLink for ITPros - SharePoint Saturday Jersey
Web designing syllabus
Share point 2013 WCM for Developers
Green Hectares Rural Tech Workshop - Adding Content
Simply Accessible - Kevin Callahan - ebookcraft 2018
Open Source CMS Playroom
Web Design Norms
Ad

Similar to Ppt ch03 (20)

PPT
9781111528705_PPT_ch03.ppt
PPT
Ppt ch02
PPTX
Creating a Documentation Portal
PPTX
INFO 2105 PPTs Fall 2024 ---------------
DOCX
WEB240 Version 1 1 Course Syllabus College o.docx
PDF
Web Design
PPTX
05 RD PoSD Tutorial_xhtml_to_html5_2016
PPTX
Font-End Development Tools
PDF
Lifecycle Management with SharePoint Apps and Solutions
PPTX
Business 2.0 with WordPress
PPTX
Web Concepts_Introduction to Website Planning
PDF
UNC CAUSE 2010: Drupal BOF Presentation
PPT
Concrete5 workshop
PDF
How Not to Be Conned by Your Drupal Vendor!
PPTX
Fundamentals of Web Design | Chandan Chakraborty
PPT
webdesign.ppt
PDF
The more information Website Design_New.pdf
PPTX
7 phases of web development.
PDF
Website Designing Proposal Template PowerPoint Presentation Slides
9781111528705_PPT_ch03.ppt
Ppt ch02
Creating a Documentation Portal
INFO 2105 PPTs Fall 2024 ---------------
WEB240 Version 1 1 Course Syllabus College o.docx
Web Design
05 RD PoSD Tutorial_xhtml_to_html5_2016
Font-End Development Tools
Lifecycle Management with SharePoint Apps and Solutions
Business 2.0 with WordPress
Web Concepts_Introduction to Website Planning
UNC CAUSE 2010: Drupal BOF Presentation
Concrete5 workshop
How Not to Be Conned by Your Drupal Vendor!
Fundamentals of Web Design | Chandan Chakraborty
webdesign.ppt
The more information Website Design_New.pdf
7 phases of web development.
Website Designing Proposal Template PowerPoint Presentation Slides
Ad

Recently uploaded (20)

PDF
Empathic Computing: Creating Shared Understanding
PDF
Electronic commerce courselecture one. Pdf
PPTX
A Presentation on Artificial Intelligence
PDF
Dropbox Q2 2025 Financial Results & Investor Presentation
PPTX
Understanding_Digital_Forensics_Presentation.pptx
PDF
Approach and Philosophy of On baking technology
PPTX
MYSQL Presentation for SQL database connectivity
PDF
Network Security Unit 5.pdf for BCA BBA.
PDF
Unlocking AI with Model Context Protocol (MCP)
DOCX
The AUB Centre for AI in Media Proposal.docx
PPT
“AI and Expert System Decision Support & Business Intelligence Systems”
PDF
Encapsulation_ Review paper, used for researhc scholars
PDF
Encapsulation theory and applications.pdf
PDF
NewMind AI Weekly Chronicles - August'25 Week I
PPTX
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
PDF
Per capita expenditure prediction using model stacking based on satellite ima...
PPT
Teaching material agriculture food technology
PDF
KodekX | Application Modernization Development
PDF
Modernizing your data center with Dell and AMD
PDF
Mobile App Security Testing_ A Comprehensive Guide.pdf
Empathic Computing: Creating Shared Understanding
Electronic commerce courselecture one. Pdf
A Presentation on Artificial Intelligence
Dropbox Q2 2025 Financial Results & Investor Presentation
Understanding_Digital_Forensics_Presentation.pptx
Approach and Philosophy of On baking technology
MYSQL Presentation for SQL database connectivity
Network Security Unit 5.pdf for BCA BBA.
Unlocking AI with Model Context Protocol (MCP)
The AUB Centre for AI in Media Proposal.docx
“AI and Expert System Decision Support & Business Intelligence Systems”
Encapsulation_ Review paper, used for researhc scholars
Encapsulation theory and applications.pdf
NewMind AI Weekly Chronicles - August'25 Week I
VMware vSphere Foundation How to Sell Presentation-Ver1.4-2-14-2024.pptx
Per capita expenditure prediction using model stacking based on satellite ima...
Teaching material agriculture food technology
KodekX | Application Modernization Development
Modernizing your data center with Dell and AMD
Mobile App Security Testing_ A Comprehensive Guide.pdf

Ppt ch03

  • 2. Objectives When you complete this chapter, you will be able to: • Understand the Web site development process • Create a site specification • Identify the content goal • Analyze your audience • Build a Web site development team 2Web Design Principles 5th Ed.
  • 3. Understanding the Web Site Development Process
  • 4. Understanding the Web Site Development • You need a good project plan • Larger projects need a project manager • Adopt a development framework • The project life cycle encompasses the entire project from start to finish 4Web Design Principles 5th Ed.
  • 6. • The client presents the requirements for the site • Requirements are the list of customer needs • The project team breaks the requirements down to tasks • The team prepares a project specification that contains: – Page layout sketches – Audience definition – Technical requirements Requirements and Specification 6Web Design Principles 5th Ed.
  • 7. • User analysis guides the design of site content • Goal is to create meaningful content navigation • Taxonomy is a classification and naming of contents in a hierarchy • The taxonomy of the site structures the topic hierarchy and navigation Information Design and Taxonomy Creation 7Web Design Principles 5th Ed.
  • 8. • Designers prepare sketches and page mockups to represent page layouts • All page layouts start with a mockup • Mockups can be easily edited based on feedback • Wireframes document a more stable page design • Wireframes offer a more complete view of what the final design will look like Graphic Design and Page Template Creation 8Web Design Principles 5th Ed.
  • 11. • Construction begins when the design stage is mostly complete • This stage includes technical development of the site • Some testing will occur during this stage Construction and Content Development 11Web Design Principles 5th Ed.
  • 12. • Quality assurance validates the technology of the site • User testing validates the design • Cross-platform testing and usability testing ensure users can access content easily Quality Assurance and User Testing 12Web Design Principles 5th Ed.
  • 13. • The site is published to the Web • Promotion of the site begins Publishing and Promotion 13Web Design Principles 5th Ed.
  • 14. • Starts when the site goes live and continues throughout the life of the project Ongoing Maintenance 14Web Design Principles 5th Ed.
  • 15. Creating a Site Specification
  • 16. • Who is the client for the site? • Can you write a two- or three-paragraph mission statement that briefly states the site’s goals? • What do you envision as the goal of the site? • What do you (or your company or organization) hope to gain from creating and maintaining a Web site? • What are the requirements for the Web site? Creating a Site Specification 16Web Design Principles 5th Ed.
  • 17. • Are the requirements feasible? • How will you judge the success of the site? • Who is the target audience? • What are the limiting technical factors? • What is the budget? • Is this a new site or an upgrade? Creating a Site Specification 17Web Design Principles 5th Ed.
  • 19. • Examine closely what type of site you are building • Your objectives and your users’ objectives may be quite different • Adopt your users’ perspective • Think about the type of content you’re presenting and look to the Web for examples of how best to present it Identifying the Content Goal 19Web Design Principles 5th Ed.
  • 20. • Types of Web sites: – Billboard – Publishing – Portal – Special interest – Blog – Social networking Identifying the Content Goal 20Web Design Principles 5th Ed.
  • 21. – Wikis – RSS – Virtual gallery – E-commerce, catalog, online shopping – Product support – Intranet/Extranet Identifying the Content Goal 21Web Design Principles 5th Ed.
  • 23. • Produce an audience definition: – What is it that users want when they come to your site? – How can you attract them and entice them to return for repeat visits? – What type of computer and connection speed do your typical visitors have? Analyzing Your Audience 23Web Design Principles 5th Ed.
  • 24. • Who are the typical members of your audience? – Are they male or female? – What level of education do they have? – What is their reading and vocabulary level? – What level of technical aptitude do they have? • Why do people come to your site? – Do they want information? – Do they want to download files? – Are they looking for links to other Web sites? Analyzing Your Audience 24Web Design Principles 5th Ed.
  • 25. • Web analytics are statistics gathered by Web servers • Reporting tools can analyze the statistics • You can track user activity on your Web site • You can see where your visitors come from and which pages they like the best Using Web Analytics 25Web Design Principles 5th Ed.
  • 26. • Think about where users are located and what their technology level might be • Test in different environments and with different technologies • Consider the physical capabilities of your users Identifying Technology Issues and Accessibility Constraints 26Web Design Principles 5th Ed.
  • 27. You can identify accessibility constraints • Review the WCAG 2.0 and section 508 guidelines • In new sites, plan for accessibility • In existing sites, assess the current accessibility • Look to other real-life accessibility implementations Identifying Technology Issues and Accessibility Constraints 27Web Design Principles 5th Ed.
  • 28. • Try to use software that matches the complexity needs of your site • Move up to more advanced tools as your skills grow • Learn to use graphics tools as well • Look to shareware and freeware options Identifying Software Tools 28Web Design Principles 5th Ed.
  • 29. Building a Website Development Team
  • 30. • Project managers • HTML developers • Designers • Writers and information designers • Application developers • Database administrators • Server administrators Building a Web Site Development Team 30Web Design Principles 5th Ed.
  • 31. • Plan the filename conventions for your site • Find out which operating system your server uses • Make sure file structures are transferable from development machines to the Web server Creating Conventions for Filenames and URLs 31Web Design Principles 5th Ed.
  • 32. • File naming conventions vary across operating systems • The ISO 9660 standard works across all operating systems • Leave out special characters • Use the correct file extensions • Use underscores instead of spaces • Use all lowercase letters Naming Files 32Web Design Principles 5th Ed.
  • 34. • Complete URLs are the unique address of a file on the Web Using Complete or Partial URLs 34Web Design Principles 5th Ed.
  • 35. • Partial URLs locate a file that resides on your own computer or server <a href="laptop.htm">link text</a> Using Complete or Partial URLs 35Web Design Principles 5th Ed.
  • 36. • You build a site on a development computer but host it on a different computer • The files for your Web site must be transferred from the development computer to the hosting computer • Your file structure must be transferable • Use relative paths to indicate file locations Setting a Directory Structure 36Web Design Principles 5th Ed.
  • 37. • All files are contained in the same folder Single Folder Structure 37Web Design Principles 5th Ed.
  • 38. • Content is separated into different folders Hierarchical Folder Structure 38Web Design Principles 5th Ed.
  • 39. • Plan your site by creating a storyboard flowchart • The flowchart shows structure logic and taxonomy • This is an important planning step • You can visualize and refine your site design Creating a Site Storyboard 39Web Design Principles 5th Ed.
  • 40. • Think about your users’ information needs • How should your information design map look? • Review the following sample structures and adapt them to information needs Organizing Information Structure 40Web Design Principles 5th Ed.
  • 41. Linear Structure 41Web Design Principles 5th Ed.
  • 42. Tutorial Structure 42Web Design Principles 5th Ed.
  • 43. Web Structure 43Web Design Principles 5th Ed.
  • 45. Cluster Structure 45Web Design Principles 5th Ed.
  • 46. Catalog Structure 46Web Design Principles 5th Ed.
  • 48. • The Web hosting service hosts your Web site • Select a Web hosting service appropriate to the size of your Web site • Check for the following features – DSL and cable access – Accessible technical support – E-mail addresses – SQL database support – Secure socket layer support Choosing a Web Hosting Service Provider 48Web Design Principles 5th Ed.
  • 49. Registering a Domain Name 49Web Design Principles 5th Ed.
  • 50. • Is the Web host local or national? • What are the details of the different hosting packages? • Are there bandwidth limits for the number of visitors your site receives per month? • Does the Web host offer technical support? • How many e-mail addresses do you get? • Does the Web host provide software and offer support for the latest connection technologies? • Does the Web host offer enhanced services? Web Hosting Service Comparison Checklist 50Web Design Principles 5th Ed.
  • 51. • To publish pages on the Web, you must send your HTML code, images, and other files to the Web server • FTP software let you transfer the files • Some HTML-editing software has built-in FTP • There are many shareware and freeware FTP programs to choose from Uploading Your Files with FTP 51Web Design Principles 5th Ed.
  • 52. • Multiple browsers • Multiple operating systems • Connection speeds • Display types • Link testing Testing Your Web Site 52Web Design Principles 5th Ed.
  • 53. • Vary your subjects • Formalize your testing • Develop a feedback form Usability Testing 53Web Design Principles 5th Ed.
  • 54. • A successful Web site is the result of careful planning • Become familiar with the Web development lifecycle • Start with pencil and paper • Write a site specification document • Identify the content goal • Analyze your audience • An effective site is a team effort Summary 54Web Design Principles 5th Ed.
  • 55. • Create portable filename conventions • Create an information structure for your site • Shop carefully when seeking a Web host • Learn to use FTP software • Test, test, test! Summary 55Web Design Principles 5th Ed.