Planning a Successful Web Site

Web Design and Multimedia ProductionMrs. Brandt-White

A. PlanB. DesignC. BuildD. Test

Steps in Creating a Website

1. Define the purpose2. Identify the audience3. Plan the content4. Plan the structure5. Plan the Web pages6. Plan the navigation

A. Planning -The Six Step Process

Determine the goals and objectives of your site Goals are the results you want your Web site to

accomplish Determine the objectives

Methods to be utilized to accomplish your goal(s). Ie.Using customer testimonials to help sell your product

Goals and objectives should be put together in a Purpose Statement

1. Define the Purpose

Age? Gender? Educational background? Lifestyle? What kind of computer equipment are they

using?

2. Identify the Audience

Text◦ Chunk information◦ Add hyperlinks to explanatory or detailed info.◦ Remove transitional words such as “as stated on the previous page”

Graphics◦ Make sure they look professional

Photographs◦ Help deliver message without adding more text

Animation◦ Moving pictures/ graphics◦ Don’t overuse

Multimedia◦ Combination of text, graphics, animation, audio, video

Video◦ Be careful of Bandwidth (the capability to download large files)

Audio◦ Lower bandwidth alternative to video

Make sure it is content that is designed for the Web, not just reiterated print content.

3. Plan the Content

Linear/ Tutorial Structure (ex: online photoshop tutorials)

◦ Presents information in a specific order◦ Designer controls user movement

Random Structure (ex: craigslist.com)

◦ User chooses where they want to go Hierarchical Structure (ex: www.glastonburyus.org)

◦ Organizes information into categories and subcategories

◦ Works well on large sites

4. Plan the Structure

Decide what the user will see when first coming to your site◦ Homepage-

Identifies what kind of site they have accessed Draws visitors into your site Gives entry into the major parts of the site through

buttons, image maps, hyperlinks, etc.

◦ Splash page A purely entertainment page meant to capture users

attention. Mixed reviews about splash pages- include skip button

Preparing for Step 5 (Planning the Web pages)

Draw the user further into the site Consistency is key Decide how much freedom you want to

provide the user◦ Hyperlinks◦ Buttons◦ Image maps◦ Menus◦ Site index- used in large sites

6. Plan the Navigation

Consistently place primary navigation in the same location

Underlying pages should have a link back to homepage

Ensure that links on site are functional Use link terminology that clearly tells the

user where they will go Remove link to current page from list of

available link options

Some Final Navigational Guidelines

Sample Flow Chart

Sample Storyboard

ContentContent is the information provided on the site. It is not just text, but music, sound, animation, or video -- anything that communicates a sites body of knowledge. Good content should be engaging, relevant, and appropriate for the audience. You can tell it's been developed for the Web because it's clear and concise and it works in the medium. Good content takes a stand. It has a voice, a point of view. It may be informative, useful, or funny but it always leaves you wanting more.

Structure and NavigationStructure and navigation refers to the framework of a site, the organization of content, the prioritization of information, and the method in which you move through the site. Sites with good structure and navigation are consistent, intuitive and transparent. They allow you to form a mental model of the information provided, where to find things, and what to expect when you click. Good navigation gets you where you want to go quickly and offers easy access to the breadth and depth of the site's content.

Visual DesignVisual design is the appearance of the site. It's more than just a pretty homepage and it doesn't have to be cutting edge or trendy. Good visual design is high quality, appropriate, and relevant for the audience and the message it is supporting. It communicates a visual experience and may even take your breath away.

Good Web Design- Things to Consider

FunctionalityFunctionality is the use of technology on the site. Good functionality means the site works well. It loads quickly, has live links, and any new technology used is functional and relevant for the intended audience. The site should work cross-platform and be browser independent. Highly functional sites anticipate the diversity of user requirements from file size, to file format and download speed. The most functional sites also take into consideration those with special access needs. Good functionality makes the experience center stage and the technology invisible.

InteractivityInteractivity is the way that a site allows you to do something. Good interactivity is more than a rollover or choosing what to click on next; it allows you, as a user, to give and receive. It insists that you participate, not spectate. It's input/output, as in searches, chat rooms, e-commerce and gaming or notification agents, peer-to-peer applications and real-time feedback. It's make your own, distribute your own, or speak your mind so others can see, hear or respond. Interactive elements are what separates the Web from other media. Their inclusion should make it clear that you aren't reading a magazine or watching TV anymore.

Overall ExperienceDemonstrating that sites are frequently more -- or less than the sum of their parts, the overall experience encompasses content, structure and navigation, visual design, functionality, and interactivity, but it also includes the intangibles that make one stay or leave. One has probably had a good overall experience if (s)he comes back regularly, places a bookmark, signs up for a newsletter, participates, emails the site to a friend, or stays for a while, intrigued.

Things to Consider Continued

You need to consider what screen resolutions that your users may have and consider that in your design

Screen Resolution and Display Area

Fast Loading- <8-10 sec. (<20 for all other pages)Purpose- Define your purpose. Purpose drives content. Content drives design.Careful use of images

Pictures, Flash, movies, etc.- must have a reason to be there! Good Flash is transparent- integrated into design not added in K.I.S.S.- Keep it simple st….

Navigation Design 3 Click rule- user finds what they need in 3 clicks or less No more than 7-10 links on homepage (drop downs don’t

count)Proper use of colorNo left to right scrolling- 2 ½ -3 screens vertical okayDo not dictate a necessary browser

Creating a Dramatic Homepage – Final Thoughts

Always use the six step process to create Web sites, even small ones

Always keep in mind your site goals and who will be using your site.

Be sure to consider proper design to make sure your Web site is one that people will enjoy using

Summary