Tutorial 2: Planning and Designing a Successful Web Site

2 Objectives Session 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 Site3 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 Site4 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 Site5 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 Site6 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 Site7 Determining the Site Goals and Purpose Sample site goals and purpose

Tutorial 2: Planning and Designing a Successful Web Site8 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 Site9 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 Site10 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 Site11 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 Site12 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 Site13 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 Site14 Creating a Flowchart Sample Web site flowchart

Tutorial 2: Planning and Designing a Successful Web Site15 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 Site16 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 Site17 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 Site18 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 Site19 Considering Accessibility Issues Quality and ease of use of a Web site by people who use assistive devices or people with disabilities Accessibility resources – – (search for keyword “accessibility”) – –Activate accessibility dialog boxes within Dreamweaver

Tutorial 2: Planning and Designing a Successful Web Site20 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 Site21 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 Site22 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 Site23 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 Site24 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 Site25 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 Site26 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 Site27 Determining the Layout (cont’d) Wireframes Storyboards (or comps) Sample layout sketches for a Web site

Tutorial 2: Planning and Designing a Successful Web Site28 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 Site29 Creating a New Site Set up the site definition –Local information –Remote information

Tutorial 2: Planning and Designing a Successful Web Site30 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 Site31 Creating a Local Site Definition Sample local site definition

Tutorial 2: Planning and Designing a Successful Web Site32 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 Site33 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 Site34 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 Site35 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 Site36 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 Site37 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 Site38 Reviewing HTML Tags Sample HTML code for a home page

Tutorial 2: Planning and Designing a Successful Web Site39 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 Site40 Setting Page Properties Completed Appearance (CSS) category in the Page Properties dialog box

Tutorial 2: Planning and Designing a Successful Web Site41 Setting Page Properties Completed Links (CSS) category in the Page Properties dialog box

Tutorial 2: Planning and Designing a Successful Web Site42 Setting Page Properties Completed Headings (CSS) category in the Page Properties dialog box

Tutorial 2: Planning and Designing a Successful Web Site43 Setting Page Properties Home page with the page properties set

Tutorial 2: Planning and Designing a Successful Web Site44 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 Site45 Previewing a Site in a Browser Preferences dialog box

Tutorial 2: Planning and Designing a Successful Web Site46 Previewing a Site in a Browser Add Browser dialog box

Tutorial 2: Planning and Designing a Successful Web Site47 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 Site48 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