Tutorial 2: Planning and Designing a

Successful Web Site

Tutorial 2: Planning and Designing a Successful Web Site 2

ObjectivesSession 2.1• Determine the site

goals• Identify the target

audience• Conduct market

research• Create end-user

scenarios

Session 2.2• Design the information

architecture• Create a flowchart and

site structure• Create a site concept

and metaphor• Design the site

navigation system• Develop the aesthetic

concept

Tutorial 2: Planning and Designing a Successful Web Site 3

Objectives (cont’d)Session 2.3• Create a site definition for a new site• Add pages to a site • Review basic HTML tags• Set page properties• Preview a site in a Web browser• Upload a site to a remote server and preview it on

the Web

Tutorial 2: Planning and Designing a Successful Web Site 4

Managing Web Site Projects• Project manager

– Oversees the project and coordinates team efforts– Creates a project plan

• Project plan outlines– Project scope– Phases (planning and analysis, design, building,

testing, implementation) and their deliverables– Tasks– Due dates– Resource allocations

Tutorial 2: Planning and Designing a Successful Web Site 5

Creating a Plan for a New Web Site• Determine specific goals, purpose, target audience,

and expectations for the site• Ensure a successful project and satisfied client

– Make sure client is aware of what to expect– Communicate effectively and frequently with client

throughout the process

Tutorial 2: Planning and Designing a Successful Web Site 6

Determining the Site Goals and Purpose• Identify the primary goals for the Web site

– Use active voice and action verbs– Prioritize the goals– Collaborate with the client

• Based on the goals, develop a one-sentence statement of the purpose, which defines your vision and aspirations for the site

Tutorial 2: Planning and Designing a Successful Web Site 7

Determining the Site Goals and Purpose • Sample site goals and purpose

Tutorial 2: Planning and Designing a Successful Web Site 8

Identifying the Target Audience• Create a user profile to help determine

characteristics of the group of people you are trying to reach– Age– Gender– Education level– Economic situation

• Note: A broad target audience can be more restrictive than a narrow one

– Geographic location

– Primary language

– Ethnic background

– Unifying characteristics

Tutorial 2: Planning and Designing a Successful Web Site 9

Conducting Market Research• Involves careful investigation and study of data

(often by using a search engine) about target audience’s preferences– Technical information: limitations of effective site– Spending habits: potential profitability– Culture and customs: colors, symbols, fashions,

styles for effective communication• Includes evaluating products or services of

competitors

Tutorial 2: Planning and Designing a Successful Web Site 10

Creating End-User Scenarios• Help you envision actual conditions that end users

may experience while visiting the Web site• Enable you to anticipate end users’ needs and build

a Web site that incorporates these factors into its design

Tutorial 2: Planning and Designing a Successful Web Site 11

Creating Information Architecture• Process of determining what you need a site to do,

then constructing a framework to accomplish your goals

• Applies principles of architectural design and library science to Web site design; provides blueprint for Web page arrangement, Web site navigation, and page content organization

• Basic process– Construct information categories– Draw a flowchart– Organize available information

Tutorial 2: Planning and Designing a Successful Web Site 12

Creating Categories for Information• Provide structure for the information in the Web site• Should be based on site goals and information

gathered during preliminary planning stages• Are used to create main navigation system

– Interface that visitors use to move through the site– Appears in the same place on every page

Tutorial 2: Planning and Designing a Successful Web Site 13

Creating a Flowchart• Visual representation of hierarchical structure of

pages within the site• Shapes represent pages; lines represent their

connection• Main information categories become the major

branches of the flowchart; subcategories become sub-branches

Tutorial 2: Planning and Designing a Successful Web Site 14

Creating a Flowchart• Sample Web site flowchart

Tutorial 2: Planning and Designing a Successful Web Site 15

Gathering and Organizing Information• Err on the side of excess when gathering information• Organize page content logically

Tutorial 2: Planning and Designing a Successful Web Site 16

Designing a Web Site• Create a site concept and metaphor• Consider accessibility issues• Select colors, fonts, graphic style, and graphics• Sketch the layout• Check the design for logic• Use styles to keep aesthetic design of pages and

page elements separate from content

Tutorial 2: Planning and Designing a Successful Web Site 17

Creating a Site Concept• General underlying theme that unifies the elements

of a site and contributes to the look and feel• Look for common underlying themes in artwork and

Web sites that appeal to the target audience• Make a list of words that:

– Describe what you would like the site to convey– Reinforce site goals– Communicate something to the target audience

Tutorial 2: Planning and Designing a Successful Web Site 18

Creating a Metaphor• Visual extension of site concept that helps create a

unified site design• Does not have to be concretely represented• Helps shape site design by providing foundation for

color choice, font choice, graphics choice, and layout

Tutorial 2: Planning and Designing a Successful Web Site 19

Considering Accessibility Issues• Quality and ease of use of a Web site by people who

use assistive devices or people with disabilities• Accessibility resources

– www.section508.gov– www.adobe.com (search for keyword

“accessibility”)– www.w3.org/WAI – Activate accessibility dialog boxes within

Dreamweaver

Tutorial 2: Planning and Designing a Successful Web Site 20

Selecting Colors• Use RGB color system when creating or saving

graphics for the Web because monitors work with light

• Dreamweaver displays the hexadecimal code for colors

• RGB color system

Tutorial 2: Planning and Designing a Successful Web Site 21

Selecting a Color Palette• Keep it simple• Include three to six colors per site• Consider the mood you want to create• Keep the target audience in mind• Choose a palette that complements your site

metaphor• Remember accessibility

Tutorial 2: Planning and Designing a Successful Web Site 22

Selecting Fonts• Generic font families (categories of typefaces): serif,

sans serif, mono• Font color, size, and style• Basic strategies

– Less is more– Convert headings to images– Consider what you are trying to convey– Consider accessibility

Tutorial 2: Planning and Designing a Successful Web Site 23

Selecting Fonts (cont’d)• Dreamweaver arranges fonts into groups, which

provide designers with the best chance for achieving the desired look for the page

• Default font groups in Dreamweaver

Tutorial 2: Planning and Designing a Successful Web Site 24

Choosing a Graphic Style and Graphics• Be consistent• Design with purpose• Consider size• Consider the target audience• Support your concept and metaphor

Tutorial 2: Planning and Designing a Successful Web Site 25

Determining the Layout• Size of page structure and content: fixed or flexible• Placement of navigation system, text, logo, artwork• Goals

– Support site goals and metaphor– Easy to follow and appeal to target audience– Consistent– Conform to basic tenants of sound artistic design

• Balance• Unity• Rhythm

Tutorial 2: Planning and Designing a Successful Web Site 26

Determining the Layout (cont’d)• Balance

– Symmetrical vs. asymmetrical– Use of white space– The rule of thirds

• Unity– Relationship of individual objects as they relate to

the composition of the whole page• Rhythm

– Achieved by repetition or alternation of objects or elements in the page

Tutorial 2: Planning and Designing a Successful Web Site 27

Determining the Layout (cont’d)• Wireframes• Storyboards (or comps)• Sample layout sketches

for a Web site

Tutorial 2: Planning and Designing a Successful Web Site 28

Checking the Design for Logic• Is the navigation system easy to follow?• Does the graphic style support the site metaphor?• Do the individual elements flow together to create a

consistent look for the site?

Tutorial 2: Planning and Designing a Successful Web Site 29

Creating a New Site• Set up the site definition

– Local information– Remote information

Tutorial 2: Planning and Designing a Successful Web Site 30

Creating a Local Site Definition• Requirements

– Site name– Local root folder

• Recommendations for folder names and file names– Do not use spaces and symbols (except hyphens

and underscores)– Use all lowercase letters

• Keep local root folder organized by setting up additional folders before beginning work on a site

Tutorial 2: Planning and Designing a Successful Web Site 31

Creating a Local Site Definition• Sample local site definition

Tutorial 2: Planning and Designing a Successful Web Site 32

Creating a Remote Site Definition• Enables you to put the Web site on a Web server so

that it can be seen on the Web • Set FTP options• Sample remote site definition

Tutorial 2: Planning and Designing a Successful Web Site 33

Adding a New Page• Select a page category• Select type of page to create• Options:

– Create a page from scratch– Use pre-built Dreamweaver page design

• New Document dialog box

Tutorial 2: Planning and Designing a Successful Web Site 34

Saving New Pages• Important to save all pages in the local root folder for

the Web site• Saved page in the Document window

Tutorial 2: Planning and Designing a Successful Web Site 35

Setting Page Titles• Use the name of the Web site and a descriptive word

or phrase for each page so that users can quickly determine the overall page content

• Page title set for the home page

Tutorial 2: Planning and Designing a Successful Web Site 36

Resaving Pages• Dreamweaver has several built-in measures to help

keep your work safe– Prompts you to save changes – Saves a copy of elements in a page that are not

yet part of the site• Save frequently—at least every ten minutes—and

whenever you have finished modifying a page

Tutorial 2: Planning and Designing a Successful Web Site 37

Reviewing HTML Tags• Hypertext Markup Language (HTML) uses a series

of tags to tell a browser what to do with the information on a Web page and how to display it

• Basic HTML tags

Tutorial 2: Planning and Designing a Successful Web Site 38

Reviewing HTML Tags• Sample HTML code for a home page

Tutorial 2: Planning and Designing a Successful Web Site 39

Setting Page Properties• Apply to an entire page rather than to only an

element in the page• Six categories

– Appearance (CSS)– Appearance (HTML)– Links (CSS) – Headings (CSS)– Title/Encoding– Tracing Image

• Recommendation: Separate the look from the content

Tutorial 2: Planning and Designing a Successful Web Site 40

Setting Page Properties• Completed Appearance (CSS) category in the Page

Properties dialog box

Tutorial 2: Planning and Designing a Successful Web Site 41

Setting Page Properties• Completed Links (CSS) category in the Page

Properties dialog box

Tutorial 2: Planning and Designing a Successful Web Site 42

Setting Page Properties• Completed Headings (CSS) category in the Page

Properties dialog box

Tutorial 2: Planning and Designing a Successful Web Site 43

Setting Page Properties • Home page with the page properties set

Tutorial 2: Planning and Designing a Successful Web Site 44

Previewing a Site in a Browser• Preview the Web site in all browsers you plan to

support• May need to add a browser to Dreamweaver

Preview list

Tutorial 2: Planning and Designing a Successful Web Site 45

Previewing a Site in a Browser• Preferences dialog box

Tutorial 2: Planning and Designing a Successful Web Site 46

Previewing a Site in a Browser• Add Browser dialog box

Tutorial 2: Planning and Designing a Successful Web Site 47

Uploading a Web Site to a Remote Location• View the site over the Web as the end users will see

it and make sure it displays correctly• All files that the remote version of a Web site will use

must be located on the Web server• Be sure to use the Put File(s) button on the Files

panel toolbar, not the Get File(s) button, which may overwrite current files with older ones

• Files panel expanded with Remote view and Local view

Tutorial 2: Planning and Designing a Successful Web Site 48

Previewing a Remote Site on the Web• Explore the remote site using a browser to check if

the page looks the same on the Web as in Dreamweaver– Only difference should be the site address