Tutorial 2
Download
1 / 53

Chapter 2 - PowerPoint PPT Presentation


  • 301 Views
  • Updated On :

Tutorial 2 Planning and Designing a Successful Web Site. Planning and Designing a Successful Web Site. In this tutorial, you will: Determine the site goals Identify the target audience Conduct market research Create end-user scenarios. Planning and Designing a Successful Web Site.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Chapter 2' - ryanadan


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Slide1 l.jpg

Tutorial 2

Planning and Designing a Successful Web Site

Dreamweaver MX 2004

Tutorial 2


Planning and designing a successful web site l.jpg
Planning and Designing a Successful Web Site

  • In this tutorial, you will:

    • Determine the site goals

    • Identify the target audience

    • Conduct market research

    • Create end-user scenarios

Dreamweaver MX 2004

Tutorial 2


Planning and designing a successful web site3 l.jpg
Planning and Designing a Successful Web Site

  • In this tutorial, you will (cont’d):

    • Design the information architecture

    • Create a flowchart and site structure

    • Create a site concept and metaphor

    • Design the site navigation structure

    • Develop the aesthetic concept for the site

Dreamweaver MX 2004

Tutorial 2


Planning and designing a successful web site4 l.jpg
Planning and Designing a Successful Web Site

  • In this tutorial, you will (cont):

    • Create a site definition for a new site

    • Add pages to a site

    • Review basic HTML tags

    • Set page properties

    • Preview the site in a browser

    • Upload the site to a remote server, and preview it on the Web

Dreamweaver MX 2004

Tutorial 2


Creating a plan for a new web site l.jpg
Creating a Plan for a New Web Site

  • First you must determine the goals, audience and expectations for the site.

  • Determining the site goals:

    • Brainstorm to determine what the goals might be – for instance to sell a product, provide information about the product or give help.

    • Sort the goals into order of importance.

    • Review and refine the list, combining goals if possible.

    • Focus on the first four or five in the site design.

Dreamweaver MX 2004

Tutorial 2


Creating a plan for a new web site6 l.jpg
Creating a Plan for a New Web Site

Sample goals for the Catalyst Web site

  • Enhance label identity.

  • Increase band recognition.

  • Promote band image.

  • Boost sales of CDs and promotional products.

  • Provide tour date information.

  • Provide information about individual band members.

  • Provide press information.

  • Create cross interest between bands of similar sounds.

  • Link to fan sites.

  • Produce a sound library (long-term, not immediate).

  • Construct and link to individual band sites (long-term, not immediate).

  • Create a photo library for each band (long-term, not immediate).

  • Create other materials (such as Flash animations) to increase interest (long-term, not immediate).

Dreamweaver MX 2004

Tutorial 2


Creating a plan for a new web site7 l.jpg
Creating a Plan for a New Web Site

  • Identifying the target audience:

    • Set up a list of questions to allow you to profile the characteristics of the site users (user profile).

    • Use data gathered from any previous Web sites.

    • Use the determined profile to make content decisions for the site.

    • Focus the design to match the needs of the user profile audience.

Dreamweaver MX 2004

Tutorial 2


Creating a plan for a new web site8 l.jpg
Creating a Plan for a New Web Site

General user profile questions

  • What is the age range of the user?

  • What is the gender of the user?

  • What is the economic situation of the user?

  • What is the geographic location of the user?

  • What is the primary language of the user?

  • What is the ethnic background of the user?

  • Are there other unifying characteristics that are relevant to the user?

Dreamweaver MX 2004

Tutorial 2


Creating a plan for a new web site9 l.jpg
Creating a Plan for a New Web Site

Sample user profile for the Catalyst site

  • Age: 18 to 29

  • Gender: male and female

  • Education level: late high school to college

  • Economic situation: students with expendable income from parental support/financial aid; recent college graduates entering the workplace

  • Geographic location: United States and Canada; the label has concentrated on signing bands from the Denton, Texas area but wants to target a larger area with its Web site

  • Primary language: target user will speak/read English

  • Ethnic background: the Catalyst Web site will not target a specific ethnic background

  • Other unifying characteristics: participation in the “indie” (independent) college music scene

Dreamweaver MX 2004

Tutorial 2


Creating a plan for a new web site10 l.jpg
Creating a Plan for a New Web Site

  • Conducting Market Research:

    • Look at the target audiences preferences for your product or service.

    • Evaluate similar products and their Web sites.

    • Use a search engine like Altavista or Google to locate data about the target audience.

    • Review the information to get an understanding of the target audiences habits, etc.

    • Explore sample sites that the target audience frequents, looking at graphics, colors, design, etc.

Dreamweaver MX 2004

Tutorial 2


Creating a plan for a new web site11 l.jpg
Creating a Plan for a New Web Site

Sample target audience information

  • 78% of college students own computers.

  • Student shoppers tend to go off-campus or online to find the most competitive pricing.

  • 72% of students use online services on a daily basis. 52% use search engines to locate stores online. (Yahoo and Google are among the most frequently used.)

  • College students spend an average of $480 online annually. Among the most commonly purchased items are music (46% of students buy their music online), books (37%), tickets for air travel (32%), concert and other event tickets (22%), and computer software (14%).

  • 58% of college students downloaded music from the Internet in the last year.

  • 65% of college students have and use credit cards.

Dreamweaver MX 2004

Tutorial 2


Creating a plan for a new web site12 l.jpg
Creating a Plan for a New Web Site

  • Creating End-User Scenarios:

    • An end-user scenario is an imagined situation in which the target audience might access a Web site.

    • Scenarios help evaluate in what situations someone might access the Web site and to help them get the information they need.

    • Scenarios help hone the design information and create a more user-friendly site.

  • A few hours of planning can save hours of redesign.

Dreamweaver MX 2004

Tutorial 2


Creating information architecture l.jpg
Creating Information Architecture

  • Information Architecture – determining what the site should do and creating a framework to accomplish it.

  • It should:

    • Provide a blueprint for page arrangement

    • Set up site navigation

    • Provide page content organization

Dreamweaver MX 2004

Tutorial 2


Creating information architecture14 l.jpg
Creating Information Architecture

  • The Web site should be organized into categories that will provide the main navigation paths.

  • The main navigation system is the interface that visitors use to move through a Web site.

  • The navigation system will appear on every page of the site to facilitate movement through the site.

  • You should have no more than 5 main categories.

  • The categories should be based on the site goals and information gathered during planning.

Dreamweaver MX 2004

Tutorial 2


Creating information architecture15 l.jpg
Creating Information Architecture

Catalyst Web site categories

Catalyst Web Site Category Outline

  • Home Page

  • a. Label

  • i. News

  • ii. Mission statement

  • iii. Company history

  • iv. Employee biographies

  • b. Bands

  • i. Dizzied connections

  • ii. Sloth Child

  • iii. Life in Minor Chords

c. Catalogue

i. CDs

ii. Vinyl

d. Tour Dates

i. Tour schedules

ii. Venues and ticket information

e. Contact

i. Company contact information

ii. Directions

iii. E-mail form

Dreamweaver MX 2004

Tutorial 2


Creating information architecture16 l.jpg
Creating Information Architecture

  • The next step is to create a flowchart from the category outline.

  • A flowchart represents the outline in picture form using geometric shapes and connector lines.

  • In a flowchart, the shapes represent steps, decision points, and dead ends.

  • The lines represent the connection of steps.

Dreamweaver MX 2004

Tutorial 2


Creating information architecture17 l.jpg
Creating Information Architecture

A sample flow chart with a shape key

Dreamweaver MX 2004

Tutorial 2


Creating information architecture18 l.jpg
Creating Information Architecture

  • Now you need to gather and organize the content for each page of the Web site.

  • There are many sources to use when gathering information, such as:

    • Company and management team interviews

    • Promotional materials

    • Company documentation including logos and graphics

    • Outside research sources

Dreamweaver MX 2004

Tutorial 2


Designing a web site l.jpg
Designing a Web Site

  • You will need to set up a site concept (unifying theme) for the Web site.

    • Review the artwork and Web sites that appeal to your target audience.

    • Make a list of words that reinforce the site goals and say what you want the site to convey.

    • Write the concept out on paper.

  • Then create a metaphor to use to represent your site concept – such as representing fluidity with lines and colors to represent a river.

Dreamweaver MX 2004

Tutorial 2


Designing a web site20 l.jpg
Designing a Web Site

  • In designing the site, you will need to consider accessibility issues so that people with disabilities or assistive devices can also use the site.

  • One way you might enhance the accessibility is to provide alternate text descriptions that can be read by audio assistive devices for any graphics.

  • There are also many Web sites with information, such as the Macromedia or World Wide Web Consortium sites.

Dreamweaver MX 2004

Tutorial 2


Designing a web site21 l.jpg
Designing a Web Site

  • You will also need to select colors for the site:

    • Colors set the tone of the site and create an emotional response from the user.

    • How colors interact can be shown by the RGB (red, green, blue) system.

    • Color can be used for emphasis or to differentiate different categories of information, for instance

    • You should keep your color selection simple and pleasing, using no more that 3 to 6 colors per site.

    • Use your color choices to enhance the mood you desire.

Dreamweaver MX 2004

Tutorial 2


Designing a web site22 l.jpg
Designing a Web Site

The RGB Color System

Dreamweaver MX 2004

Tutorial 2


Designing a web site23 l.jpg
Designing a Web Site

A Sample Color Palette (Catalyst site)

Dreamweaver MX 2004

Tutorial 2


Designing a web site24 l.jpg
Designing a Web Site

  • You will also need to select colors for the site (cont):

    • Colors should be defined by name and by their hexadecimal color codes.

    • The Web Safe Color Palette of 216 colors was created to add Web site designers.

    • The hexadecimal color code is broken down into #RRGGBB where RR is the amount of red, GG is the amount of green and BB is the amount of blue in the color.

Dreamweaver MX 2004

Tutorial 2


Designing a web site25 l.jpg
Designing a Web Site

  • You must also select the fonts or typefaces to be used in the site.

  • There are three main categories or typefaces of fonts to choose from:

  • Serif – for example - Times New Roman

  • Sans-serif - for example – Helvetica

  • Mono (monospaced)– for example – Courier New

Dreamweaver MX 2004

Tutorial 2


Designing a web site26 l.jpg
Designing a Web Site

  • Selecting a font also means selecting a size, color and style (such as underlined, bold, or italic).

  • When selecting a font, keep in mind:

    • Less is more – normally two is good, one for the body and another for headings.

    • Convert heading to images – If you create an image from your text, the look will not change on any of the users computers, whether or not they have the correct font on their computer.

Dreamweaver MX 2004

Tutorial 2


Designing a web site27 l.jpg
Designing a Web Site

  • When selecting a font, keep in mind (cont):

    • Consider what you are trying to convey - Fonts elicit responses and should be consistent with the site concept and metaphor.

    • Consider accessibility – some users may have trouble reading some fonts or sizes of text.

  • Links are often done in different colors to show status such as unused, active or visited.

Dreamweaver MX 2004

Tutorial 2


Designing a web site28 l.jpg
Designing a Web Site

Sample Font choices (Catalyst site)

Arial, sans-serif

Times New Roman, serif

Courier New, mono

Georgia, Times New Roman, serif

Veranda, Arial, sans-serif

Dreamweaver MX 2004

Tutorial 2


Designing a web site29 l.jpg
Designing a Web Site

  • Graphics add interest and personality. Graphics include images, photos, buttons, logos, etc.

  • To create a cohesive site, the graphics should all follow the same style:

    • Be consistent

    • Design with purpose

    • Consider size

    • Consider the target audience

    • Support your concept and metaphor

Dreamweaver MX 2004

Tutorial 2


Designing a web site30 l.jpg
Designing a Web Site

  • With all of your elements (color, font, graphics, etc) selected, sketch out the layout of each page.

    • Remember the site goals and metaphor.

    • Consider ease and appeal.

    • Do a layout sketch and then a comp (comprehensive drawing)

  • When the comps are complete, you need to check your site design, ensuring all of the goals are met, the site is consistent and navigation is easy.

Dreamweaver MX 2004

Tutorial 2


Designing a web site31 l.jpg
Designing a Web Site

Sample layout sketches (Catalyst site)

Dreamweaver MX 2004

Tutorial 2


Creating a new site l.jpg
Creating a New Site

  • With the site design finished, the next step is to create a local site definition.

  • You will need a site name and a local root folder.

  • You will use the Dreamweaver New Site option under Site on the main menu bar.

  • Fill in the information in the dialog box – such as site name, location of local root folder, etc.

Dreamweaver MX 2004

Tutorial 2


Creating a new site33 l.jpg
Creating a New Site

Creating the local site definition (Catalyst site)

Dreamweaver MX 2004

Tutorial 2


Creating a new site34 l.jpg
Creating a New Site

  • You will also want to create the remote site definition defining where the Web site will be located and how to connect to it.

  • Creating a remote site definition enables the Web site to be seen on the Web.

  • The process to set the remote site definition is basically the same as setting the local.

  • Normally remote access will be through FTP access.

Dreamweaver MX 2004

Tutorial 2


Creating a new site35 l.jpg
Creating a New Site

  • There are several FTP options that you will need to set:

    • The full name of the FTP host (available from the host provider)

    • Host directory – location of files on the Web server (available from the host provider)

    • Login name

    • Password

    • Use Passive FTP – a server parameter (from host)

Dreamweaver MX 2004

Tutorial 2


Creating a new site36 l.jpg
Creating a New Site

  • There are several FTP options that you will need to set (cont.):

    • Use Firewall – security option

    • Use Secure FTP (SFTP)

    • Automatically Upload Files

    • Check In/Out – enables multiple users

Dreamweaver MX 2004

Tutorial 2


Creating a new site37 l.jpg
Creating a New Site

Remote Site Definition for FTP Access

Dreamweaver MX 2004

Tutorial 2


Creating and saving pages in a defined site l.jpg
Creating and Saving Pages in a Defined Site

  • To add pages to your defined site, use the New File command on the File menu in the Site panel.

  • This will automatically associate the page with the site.

  • Each page will need a unique filename.

  • The home page should have the filename index.htm.

Dreamweaver MX 2004

Tutorial 2


Creating and saving pages in a defined site39 l.jpg
Creating and Saving Pages in a Defined Site

New Page in the Document Window

Dreamweaver MX 2004

Tutorial 2


Creating and saving pages in a defined site40 l.jpg
Creating and Saving Pages in a Defined Site

  • Saving your pages frequently as you work prevents losing data.

  • If you try to exit Dreamweaver or close a page, you will be prompted to save it.

  • When you save a page, you give the page a filename.

  • All files, including graphics should be saved to the root folder to prevent later complications.

Dreamweaver MX 2004

Tutorial 2


Reviewing the html tags l.jpg
Reviewing the HTML Tags

  • The most common language of the Web is Hypertext Markup Language (HTML)

  • HTML:

    • Can be transferred across different computers and operating systems.

    • Uses a series of tags to tell the browser how to display the Web page.

    • Tags usually appear in sets of two (opening and closing tags) and are enclosed within <>.

Dreamweaver MX 2004

Tutorial 2


Reviewing the html tags42 l.jpg
Reviewing the HTML Tags

  • HTML (Cont):

    • The closing tag starts with a /.

    • Some tags are required – HTML, head, title, and body.

    • Other tags in the body format the content.

    • Should be reviewed after it is created by Dreamweaver.

Dreamweaver MX 2004

Tutorial 2


Reviewing the html tags43 l.jpg
Reviewing the HTML Tags

Basic HTML Tags

Dreamweaver MX 2004

Tutorial 2


Setting page properties l.jpg
Setting Page Properties

  • Once a page has been created, you will need to set its page properties, which are broken into five categories:

    • Appearance – includes general page properties

    • Links – includes the page properties for hyperlinked text

    • Headings – enables you to set font, font size, and font color attributes for the headings in your page

    • Title/Encoding – enables you to set the page title and document encoding type

    • Tracing Image – enables you to select an image as a guide for re-creating a design

Dreamweaver MX 2004

Tutorial 2


Setting page properties45 l.jpg
Setting Page Properties

Page properties Dialog Box with the Color Picker Open

Dreamweaver MX 2004

Tutorial 2


Setting page properties46 l.jpg
Setting Page Properties

Home Page set page properties

Dreamweaver MX 2004

Tutorial 2


Previewing a site in a browser l.jpg
Previewing a Site in a Browser

  • Different browsers will often display a Web site differently.

  • To see how a Web site will look to all of your users, you should preview it in several browsers.

  • Dreamweaver will allow you to assign both a primary and secondary browser.

  • You can preview a page using the Preview in Browser option of File on the menu bar.

Dreamweaver MX 2004

Tutorial 2


Previewing a site in a browser48 l.jpg
Previewing a Site in a Browser

Preferences Dialog Box

Dreamweaver MX 2004

Tutorial 2


Previewing a site in a browser49 l.jpg
Previewing a Site in a Browser

Catalyst Home page Previewed in Internet Explorer

Dreamweaver MX 2004

Tutorial 2


Uploading a web site to a remote location l.jpg
Uploading a Web Site to a Remote Location

  • Once pages are completed, they should be uploaded to your remote site so you can view them .

  • To upload:

    • Connect to the remote server using the Connects to Remote Host button on the Files panel toolbar

    • Select all files to be uploaded from the local root folder

    • All dependent files must also be uploaded

    • Use the Put Files button on the Files panel toolbar

    • Disconnect using the Disconnects from Remote Host button on the Files panel toolbar

Dreamweaver MX 2004

Tutorial 2


Uploading a web site to a remote location51 l.jpg
Uploading a Web Site to a Remote Location

Files panel Expanded with Remote and Local Views

Dreamweaver MX 2004

Tutorial 2


Uploading a web site to a remote location52 l.jpg
Uploading a Web Site to a Remote Location

Catalyst Home Page Viewed Over the Internet

Dreamweaver MX 2004

Tutorial 2


Tutorial summary l.jpg
Tutorial Summary

  • You should now be able to:

    • Understand the basic steps in designing a Web site

    • Design the information architecture

    • Create a flow chart and site structure

    • Write a site concept and metaphor

    • Develop the aesthetics for the site

    • Create a new site

    • Upload the Web site to a remote location

    • View the site using a browser

Dreamweaver MX 2004

Tutorial 2


ad