›What main things do you think should be considered when planning a website?

›Planning is critical in designing a good website. ›Six primary Web design planning steps: –1. Assessing needs –2. Determining content structure –3. Determining site structure –4. Determining navigation structure –5. Creating a wireframe –6. Selecting the appropriate development tools

During the initial stage of the planning process, designers must assess the needs of the Web site by: ›defining its purpose ›identifying its main goals ›Identifying its target audience

Selling and telling – What are some examples of each?

What is the point of this website? And how is it going to fulfill that purpose better than any other site on the Web?

Knowing the purpose of the Web site helps the designer: ›Determine the scope of the Web site ›Determine site content ›Establish the site structure needed to meet the needs of the client and site visitors. Examples of purposes: ›To provide a service ›To sell a product or service (generate income) ›To present information on a product, service, topic, organization or person ›To develop name recognition and establish an online presence

Once you determine the primary and secondary purposes of the Web site, you can assess its goals. ›Goals are the results expected in a given time frame. ›Goals are measurable, such as to increase sales by 10 percent by the end of the year.

›SMART goals are goals that are SMART goals – S pecific – M easurable – A chievable – R ealistic – T ime-bound.

›A successful Web site meets the needs, wants and expectations of its audience. ›Knowing the characteristics of the site's audience helps the designer develop a Web site that is focused, attractive and usable.

Physical demographics (age, gender, health) to determine usability and accessibility requirements for the site Cultural demographics (education level, nationality, social group) to establish the writing level and style that should be used Computer experienceto determine functionality and navigation requirements for the site Expectationsto create a site that does not disappoint visitors

›a designer can define the needs and expectations of the audience –What tasks do visitors need to complete – purchase an item, sign up for a service, research a topic? –What information would a visitor want to find – product/service specifications, information resources, how-to videos? –What style and tone will visitors expect – professional or casual?

›Identify and explain the six steps for planning a website.

1. edit=web_id %20http:// edit=web_id % Do they do a good job of fulfilling those purposes?

List two ways each Web site is designed to meet the needs and expectations of its target audience.

›What pages are needed? –Primary page – generally indicates who owns the Web site, what is available on the site, and where the information is located within the site (navigation). –Secondary pages – should include the same visual identity as the primary page (including name, logo, colors, fonts). ›What content (text, images, multimedia) is needed to satisfy both the purpose of the site and the expectations of the target audience? ›What existing content is available? What new content is required? ›What content (logo, name, color scheme) is needed to establish the site’s visual identity consistently on all pages?

›When considering an element for a site, designers need to ask themselves: –Does it add value to the Web site? – –Does it further the Web site’s purpose or goals? –Does it enhance visitor experience? If the answer is no…

›Graphic organizer ›Card method With a partner, create a mind map of a web site for a department store – draw your pages on drawing paper. Choose a new shape or color for each level of organization.

›Contain at least one heading to identify its contents. ›Be appropriately titled (for search engine optimization and bookmarking). ›Contain a header that includes the organizational logo and name in the upper-left corner of the page. Logos are usually linked back to the home page. ›Include contact information or a link to the Contact page. ›Contain a footer that provides copyright information as well as text links that match the main navigation structure. ›Include page titles and content section headers that are consistent with the Web site purpose and goals.

Three main types of site structure: ›Linear ›Hierarchical ›Random (webbed)

›Presents Web pages in a specific order. ›This structure controls the navigation of visitors by progressing them from one page to the next. ›Best suited for tutorial or chronological information that needs to be presented in a certain order.

›Organize Web pages into categories and subcategories by increasing level of detail. ›This structure is the most commonly used structure on Web sites. ›It contains a home page that links to the major sections of the site. ›Under each major section, there are subsections. ›An example is what we just did with your store maps.

›Do not contain a primary path. ›They allow visitors to choose any of its pages according to their needs and interests. ›This type of structure can be confusing for visitors and is best suited for simple Web sites that contain only a few pages.

It is important to develop a navigation structure that is easy to use. The navigation structure of a Web site helps visitors find their way around the site and encourages them to dive deeper into its contents. A poorly designed navigation structure can confuse and frustrate site visitors.

The goal of designing a navigation structure is to allow visitors to answer the following questions positively: ›Can I determine where I am now? ›Can I easily determine the proper route to take me where I want to go? ›Can I see where I have been and where to go next?

›Navigation structures can contain text or graphics. ›Navigation options include tabs, menus, and bars with drop- down menus. ›Navigation structures can be presented horizontally or vertically. ›Place navigation structures where visitors expect to find them; usually at the top and/or down the left side of the page. ›Place the same navigation structure in the same place on every page. ›Include a link back to the home page on every page. ›If you are using images or graphics as links, make sure you include alternative text and equivalent text links in the page footer. ›Link labels should clearly indicate the target page purpose. ›Consider using breadcrumb trails to help orient visitors.

Wireframes are skeletal layout representations only. They do not include colors, graphics or any other design elements.

The available tools include text or Web editors, online or offline site builders, and content management systems (CMSs). Text editors or Web editors allow you to create Web pages by typing in tags and other related text into a document. You then save the document as a Web page and transfer the file to a computer on the Internet run by a company called a Web host. ›A Web host is a company that has computers that are permanently connected to the Internet. When you put your Web pages on their computers, anybody on the Internet can view them.

The available tools include text or Web editors, online or offline site builders, and content management systems (CMSs). Text editors or Web editors allow you to create Web pages by typing in tags and other related text into a document. You then save the document as a Web page and transfer the file to a computer on the Internet run by a company called a Web host. ›A Web host is a company that has computers that are permanently connected to the Internet. When you put your Web pages on their computers, anybody on the Internet can view them.

›Two types of text editors: –Plain text – Notepad is an example –HTML editor with enhanced features to easily insert markup language text - NotePad++ and BBEdit are examples

›also called WYSIWYG or Graphical User Interface (GUI) applications, are HTML editors that allow designers a more visual approach to creating Web pages –examples, Adobe Dreamweaver and Kompozer –many provide templates to use

›Web and text editors are installed and run on your computer. The Web files created must be transferred to your Web host for Internet viewing.

›Some Web hosts provide a site builder service. Customers log in to the Web host's site and design a Web site through the site builder using just a browser. ›Online site builders, such as Weebly and Wix, do not require any special software. The pages are created directly on the Web host's computer and are automatically placed on your site for Internet viewing, without the need to upload files. ›Most have templates and graphics ready for you to use.

›The template and graphics used by online site builders are copyrighted. They are licensed for use only by sites that are using that Web host. If you want to move your site to another host, you will have to create a new Web site.

›Some Web hosts provide stand-alone offline versions of their site builder. These offline site builders require you to download and install the software on your computer. Once you have designed your Web site, you transfer the files to the Web host. ›Offline site builders are still tied to the specific Web host. Transferring to a new host may require a complete redesign or, at minimum, the removal of all elements belonging to the Web host (including designs and graphics).

›Using a Content Management System (CMS), such as Drupal or WordPress, has some similarities to using a Web host's site builder. Many offer pre- designed templates and allow you to connect to your site with your browser for modifications. ›Many CMSs are not tied to a Web host. You can choose where to host your site. Some CMSs offer a variety of social media and interactive options, such as member pages and blogging. ›CMSs are harder to use than site builders. CMSs require you to upload files, set up a database and configure the CMS on your system. However, CMSs offer a large amount widgets and plug-ins that allow you to add interactivity and dynamically generated content.