1. Chapter 4 – Website Development Planning Process
Publishing on the World Wide Web

2. Introduction
Before you begin to create your first Web page, you must develop a solid, detailed plan for the Web site, called a site plan or design plan, that determines the purpose, audience, content, structure, visual design and navigation system.
There are six major steps in creating detailed site plan:
STEP 1: Define the site’s purpose
STEP 2: Identify the site’s target audience
STEP 3: Determine the site’s general content
STEP 4: Select the site’s structure
STEP 5: Design the look and feel of the site
STEP 6: Specify the site’s navigation system

3. STEP 1: Define the site’s Purpose
The first step when developing a solid Web site design plan is to define the site’s goals and objectives and then formulate a written purpose statement for site.
Goals are the results you want your web site to accomplish within a specific time frame, which can be weeks, months or years.
Objectives are those methods you will choose to accomplish the site’s goals.
Written purpose statement summarizes your site’s goals and objectives.

4. STEP 1: Define the site’s Purpose
1.1 Web Site Goals
Combination of primary goal with multiple secondary goals.
For example in this scenario, your Web site’s primary goal is to sell products or services. You could have a combination of secondary goals that support your site’s primary goal.

5. STEP 1: Define the site’s Purpose
Example:
Primary goal – Increase sales of reusable and recycled good.
Secondary goals:
Promote awareness of the company and its products and mission to customers and potential customers.
Establish the company’s credibility in the field of environmentally sound businesses.
Educate site visitors about tips and developments in the environment and environmentally friendly products.
Encourage visitors to return to the site by providing updated information in the form of a video blog and articles by industry experts.

6. STEP 1: Define the site’s Purpose
1.2 Web Site Objective
After identifying the Web site’s goals, your next step is to determine the site’s objective, which are the methods the site developers use to accomplish the goals.
For example, if the primary goal is to sell a product or service, the objectives to accomplish that goal might include posting testimonials from the customers, or offering a 20% discount for customers.

7. STEP 1: Define the site’s Purpose
Example:
Develop an attractive, informative, and easy-to-use Web site to promote an online awareness of the company.
Provide authoritative information and advice at the site to establish credibility.
Include links to articles and quick tips to educate site visitors about the importance of using reusable and recycled products.
Offer online tools to encourage site visitors to make changes to reduce their carbon footprint.

8. STEP 1: Define the site’s Purpose
1.3 Web Site Purpose Statement
After determining your Web site’s goals and objectives, you should create a formal written summary reasons the site will be published, called a purpose statement.
A purpose statement explains a site’s overall goals and the specific objectives that will be used to achieve those goals.

9. STEP 1: Define the site’s Purpose
Example

10. STEP 2: Identify the Site’s Target Audience
2.1 Target Audience Profile
A target audience profile is a research based overview that includes information about potential site visitors demographic and psychographic characteristics.
Demographic characteristics include gender, age group, education level, income, location and other characteristics that define who your site visitors are.
Psychographic characteristic include social group affiliations, lifestyle choices, purchasing preferences, political affiliations, and other characteristics that explain why visitors might want to access your site.

11. STEP 2: Identify the Site’s Target Audience
You can ask and answer question similar to the following to develop a formal target audience profile for your site:
What is the age range for your likely audience members?
What are audience members gender, educational background, and marital status?
What are the typical careers and income levels of audience members?
Where do audience members live?
What are audience members social group affiliations, lifestyle choices, interests, and purchasing preferences?

12. STEP 2: Identify the Site’s Target Audience
Example

13. STEP 2: Identify the Site’s Target Audience
2.2 Target Audience Wants, Needs, and Expectations
Successful Web sites fulfill their audience’s wants, needs, and expectations in both general and specific ways.
In general, all audiences expect an attractive, interesting, and well-organized site that conveys useful information and it easy to use.
An audience’s specific expectations for a site will vary based on the site’s purpose.

14. STEP 2: Identify the Site’s Target Audience
After identifying your site’s target audience, conduct a need assessment by answering questions such as the following to determine you target audiences wants, needs, and expectations:
What do audience members expect to gain from a visit to your Web site?
What usability or accessibility issues are important to audience members?
Are Audience members generally experienced or inexperienced Web users?
Will audience members have any cultural biases, norm, or customs that must be accommodated in the site’s design and organization?

15. STEP 2: Identify the Site’s Target Audience
Example

16. STEP 3: Determine the site’s general content
A web site’s general content likely will include multiple web pages with multimedia elements
This section provides an overview of 3 types of web pages : the home page, underlying pages, and a splash or entry page

17. STEP 3: Determine the site’s general content
Home, Underlying and a splash pages
Home pages
The elements normally needed in designing home pages are
Who : Company name in text format, graphic logo, tagline, copyright notation and element that clearly indentify who owns and publishes the site
What : Summary text and images that show visitor what content is available at the site
Where : Easily identifiable navigational links to other pages at the site to indicate where specific information or features are found.

18. STEP 3: Determine the site’s general content

19. STEP 3: Determine the site’s general content

20. STEP 3: Determine the site’s general content
Home, Underlying and a splash pages
Underlying Pages
A website generally include underlying pages that provide details to the summary information shown on the site’s home page
Link connect the home page with an underlying page and where necessary connect one underlying page to another underlying page
(continue)

21. STEP 3: Determine the site’s general content
Home, Underlying and a splash pages
Underlying Pages
Example of typical underlying page (which normally found in e-commerce web pages)
Product catalogs
Checkout information
Customer account information
Customer service information
Contact information
Privacy policy and security nformation
A business blog
(continue)

22. STEP 3: Determine the site’s general content
Home, Underlying and a splash pages
Underlying Pages
Each underlying page should include the same elements – name, logo, typeface, colour scheme- as its homepage provide unity and promote visual identity

23. STEP 3: Determine the site’s general content
Home, Underlying and a splash pages
Splash and Entry pages
A splash pages uses images, animation and sound to capture visitor’s attention and draw them into site for further exploration
Visitor can click a link to move on to the homepage
However some sites uses splash page to help visitor make choices about how to view the site such as language or flash version
Warning : many visitors strongly dislike the splash page
Decide whether to include an entry or splash page in context with your site’s purpose and need’s of target audience

24. STEP 3: Determine the site’s general content

25. STEP 3: Determine the site’s general content
Value-Added Content (VAC)
VAC is information that is relative, informative and timely ; accurate and of high quality; and usable
In general, you should create original content elements prepared specifically for the web instead of choosing existing content elements designed for print.
If you must use an existing content element from another medium, you should repurpose or modify the element for web
Repurposing content frequently involves abbreviating and rewriting text, adding hyperlinks to background or additional information, rescanning or altering photos and editing or segmenting video and audio.
(continue)

26. STEP 3: Determine the site’s general content
Value-Added Content (VAC)
The following questions help you determine if the content you plan to add is truly worthwhile, Does the content element :
Add value to the site?
Further the site’s purpose?
Enhance visitor’s experiences at the site?
If the answer is no to any of the questions, do not include in the content element
(continue)

27. STEP 3: Determine the site’s general content
Value-Added Content (VAC)
Different VAC content can be used in the website such as :
TEXT
Visitor typically scan web page text for information rather that read the text
The following guidelines might help to repurpose print publication
Chunk text for scannability
Place explanatory or detailed information on linked, underlying pages
Use active voice and a friendly tone
Remove transitional word and phrases like as stated previously, as a result and similarly
(continue)

28. STEP 3: Determine the site’s general content
Value-Added Content (VAC)
Different VAC content can be used in the website such as :
IMAGE
Most commonly used content element are images with files including clip art, illustrations, diagrams and photograph
Photograph can aid in decision making and familiarise the unknown
You can deliver message and prompt an action
Draw your own illustration and diagrams using related software
Shoot own photograph using a digital camera

29. STEP 3: Determine the site’s general content

30. STEP 3: Determine the site’s general content

31. STEP 3: Determine the site’s general content
Value-Added Content (VAC)
Different VAC content can be used in the website such as :
AUDIO AND VIDEO
Audio
Frequently used as an extremely effective, low-bandwidth alternative to video
Audio can persuade, inspire, personalise, motivate or soothe
Audio also enhance recall
Audio also can evoke emotion, prompting action and triggering memory can benefit your website
(continue)

32. STEP 3: Determine the site’s general content
Value-Added Content (VAC)
Different VAC content can be used in the website such as :
AUDIO AND VIDEO
Video clip
Incorporate the powerful components of movement and sound to express and communicate ideas
The primary problems is the large video file size
When presenting the video, web designers must decide whether to limit the size of downloadable video or to generate streaming video.

33. STEP 3: Determine the site’s general content
Value-Added Content (VAC)
Different VAC content can be used in the website such as :
ANIMATION AND MULTIMEDIA
Animated images
Often used by the web sites to attract attention and enliven web pages
The popular format is animated gif (add movement to static images) and flash animation (animated movie using Adobe Flash – visitor need to download plug-in to play this)

34. STEP 3: Determine the site’s general content
Value-Added Content (VAC)
Different VAC content can be used in the website such as :
ANIMATION AND MULTIMEDIA
Multimedia
Typically regarded as any combination of text, images, animation audio or video)
It is popular because it can add action, excitement, and interactivity to the website.
Although the website is intriguing and entertaining, to develop this kind of web need to have expertise, time and money

35. STEP 3: Determine the site’s general content

36. STEP 3: Determine the site’s general content
Dynamically Generated content
Unlike static information it will updates periodically and can appear on a site’s pages when triggered by a specific event such as the time of the day or visitor request
This web page will require database (A file store that stores data)
Sites that use databases to generate dynamic content are called database-driven web sites

37. STEP 3: Determine the site’s general content

38. STEP 3: Determine the site’s general content

39. STEP 3: Determine the site’s general content
Organising a web site files
Organising the HTML, image, animation and multimedia files will make developer easier to maintain and ultimately publish website
If the website is small (less than 5 or 5-10 files ): consider to to create a single folder
If the website is large : consider to create separate logical sub-folder which include HTML code, image, audio, video , animation and multimedia files
To protect the files, regular back-up is needed and put in separate hard disk.

40. STEP 4 : Select the site’s structure
The web site’s structure should support the site’s purpose and make it easy for visitors to find what they want at the site in as few click as possible
The benefits of planning the site’s structure are the ability to do as follow :
Visualise the organisation of the site’s page and linking relationship
Organise the pages by level of detail
Follow the links between pages to make certain visitors can quickly click through the site to find useful information
Detect dead-end pages (pages that does not fit linking arrangement)
Rearrange pages and revise linking relationship and visualise the changes before entering website

41. STEP 4 : Select the site’s structure
An outline of the website structure can illustrate how can visitors follow the links from page to page.
Some designer use text outline while some use storyboard to create visual representation of the site’s structure
Storyboard
A series of pages originally developed to graphically present scenes
To create a simple storyboard, arrange sticky notes or index card (each card representing a web page) on wall to visualise a site’s proposed structure

42. STEP 4 : Select the site’s structure

43. STEP 4 : Select the site’s structure
Flowchart
Diagram that shows steps or processes
TO create flowchart, draw an arrangement of shapes and lines which each shape indicate a page and each line indicate a link
Regardless the tools used , the site’s structure, will likely follow one of the following structural theme : linear/tutorial, random or hierarchical

44. STEP 4 : Select the site’s structure
Three structural theme :
Linear/tutorial
Organise and presents the web page in a specific order
A training web site could use this kind of structure to ensure step will not be missed or perform out of sequence
It controls the navigation of user by pogressing them from one page to the next
It is also appropriate for information that need to be viewed in a historical or chronological order

45. STEP 4 : Select the site’s structure

46. STEP 4 : Select the site’s structure
Three structural theme :
Random
Also called a webbed structure
Does not arrange in specific order
Visitors could choose any other web page according to their interest or inclinations
It is appropriate for a simple web site with few pages

47. STEP 4 : Select the site’s structure

48. STEP 4 : Select the site’s structure
Three structural theme :
Hierarchical
Organise web pages into categories and sub-categories by an increasing level of detail
Organisation and topical web sites are suitable to this structure
Web site with many pages and multiple objectives such as an e-commerce might use a combination of the three structure rather than using a single structure

49. STEP 4 : Select the site’s structure

50. STEP 4 : Select the site’s structure

51. STEP 5 : Design the look and feel of the site
Overall look (Aesthetic Value)
Match the purpose of the web site and its appropriate information to the target audience.
Maintain consistency, clarity and simplicity – uniform color scheme
Use colors, images, hyperlinks and web technology effectively
Organize the design elements logically and predictably

52. STEP 5 : Design the look and feel of the site
CONTENT
Match the purpose of the web site and its appropriate information to the target audience.
Organize information logically and predictably (text and other media types).
Ensure information is accurate, current, relevant , useful complete, interesting, unique.
Employ a concise, easy to read writing style.

53. STEP 5 : Design the look and feel of the site
NAVIGATIONAL TOOLS
Can be selected from text links, icons, buttons, bars and other graphical elements.
Organize them logically and predictably.
Provide a clear, quick and consistent method to move within the site.
Make it easy to use and find links.
Employ intuitive and descriptive pointers.
Help create a web site identity.

54. STEP 5 : Design the look and feel of the site
GRAPHICS
Appropriate, essential, and relevant to the content of the page.
Functional - serve a purpose and/or provide information
Of size, quality and file format appropriate for the page content.
Used to add value to the overall design.

55. STEP 6 : Specify the site’s navigation system
A web site navigation consists of different types of links:
Text links
Image links
Breadcrumb trails
Site maps

56. STEP 6 : Specify the site’s navigation system
To create a well-designed, user-controlled navigation system for your website, you must consider combining different types of links.
You should also consider adding a search capability to your site.

57. STEP 6 : Specify the site’s navigation system
TEXT LINKS
Hyperlinks based on a word or words in an HTML.

58. STEP 6 : Specify the site’s navigation system
IMAGE LINKS
Image link can be created by assigning a link to an image, including clip art, illustration or photograph.

59. STEP 6 : Specify the site’s navigation system
BREADCRUMB TRAIL
Hierarchical outline or horizontal list that shows a visitor the path has been taken from the home page to the current page viewed.

60. STEP 6 : Specify the site’s navigation system
SITE MAP
Also call site index, which is a summary page of links to major pages at the site.

61. STEP 6 : Specify the site’s navigation system
SEARCH CAPABILITY
Adding a keyword into a search box, it allow the visitor to quickly locate the specific words on the site without browsing.

62. Q & A