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

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

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.

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.

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.

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.

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.

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.

STEP 1: Define the site’s Purpose Example

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.

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?

STEP 2: Identify the Site’s Target Audience Example

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.

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?

STEP 2: Identify the Site’s Target Audience Example

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

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.

STEP 3: Determine the site’s general content

STEP 3: Determine the site’s general content

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)

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)

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

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

STEP 3: Determine the site’s general content

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)

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)

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)

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

STEP 3: Determine the site’s general content

STEP 3: Determine the site’s general content

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)

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.

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)

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

STEP 3: Determine the site’s general content

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

STEP 3: Determine the site’s general content

STEP 3: Determine the site’s general content

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.

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

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

STEP 4 : Select the site’s structure

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

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

STEP 4 : Select the site’s structure

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

STEP 4 : Select the site’s structure

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

STEP 4 : Select the site’s structure

STEP 4 : Select the site’s structure

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

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.

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.

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.

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

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.

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

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.

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.

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.

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.

Q & A