For this project, you and your team will design and create a business website using Dreamweaver. You will do one of the following: 1. Make a site based on your own idea 2. Make over one of the following sites: Lake Loon - a Dartmouth driving range and restaurant. The site has information and photos that could be reused. http://www.lakeloon.com/lakeloon/lake_loon.html Darrell's Restaurant (by Fenwick Towers). This local restaurant has really good burgers. The site is made but the design and navigation can be improved. http://www.darrellsrestaurants.com/. The Coast (a local newspaper) has a good description: http://www.thecoast.ca/halifax/darrell_s_restaurant/location?oid=979716 Emma's eatery. The site is mainly one page with a link to their menu (pdf). The menu is quite extensive and there is a description of who Emma is. You most likely will require some "creative" add ons. http://www.emmaseatery.ca/ Here is the description from the Coast: http://www.thecoast.ca/halifax/emma_s_eatery/location?oid=980327 Abenaki Paddling Club in Dartmouth. There is a lot of information on this site but it is very badly designed. http://www.abenakiclub.com/ If you choose Option 1, you need to research the type of business that you want to develop a website for and gather the information that will be included on the site. If you choose Option 2, you can use the existing site for the content for the new site design. You may still need to research more about the particular industry of the site to better understand who the users will be. In addition to designing and creating a website, you will write a report describing the company/business that you used for you site. You will also describe and justify your choices for design and structure of your site. You need to explain how the site works (e.g., how do users navigate the site, how do they find information on the site), how you tested it, and what improvements you would make if you had more time. For the website you first need to decide how you will design the site before using Dreamweaver. The questions in Part I will help you think about your design before you start to work with Dreamweaver. The questions will help you organize the information so you can design the site hierarchy. Before you start to create your website with Dreamweaver, you need to consider other practical design elements (e.g., navigational elements and how you will keep the look consistent between pages on your website) and how you will implement these with Dreamweaver. The checklist in Part II will help you with this (this is similar to the checklist that you used in Tutorial 4). Part I and Part II will help you design and create your website and will also help you write your report for your project. 1
When your team has finished the site, you need to come up with two questions that will require a user to search and navigate your site to answer. One question should be easier to find the information (e.g., on the home page or within one level of the hierarchy) and one should be more difficult to find the answer (e.g., more than two levels in the hierarchy and may require scrolling). These questions should be included in your report and will be used by your instructors as a means to test your site for navigational ease and structural flow. Your sites will be loaded onto your respective bluenose account which will be finished when the project reports are due for evaluation. Make sure you reference any sites (content and images), books or other sources that may have influenced or inspired your design on a page on your website. Deliverables As mentioned, in addition to the web site, teams will write a report that will include the design decisions for the site. The report should include the information about the site type and users, the site hierarchy, and the design sketches with a description of the design represented in the sketches. In addition, you will explain how your site/s met the design criteria from the given design checklist and will justify all design decisions. You should also include your navigation questions. Your web site must be finished when you submit your report. Part I Design the Site (before using Dreamweaver) Use the following questions to help you design you site before you start to work with Dreamweaver. Type of Site and Users Using the provided content in the word document, you need to identify the type of site you are designing and the type of users that may visit the site. 1. What is the web site for? 2. What type of site is it? 3. Who do you think the users of the site will be? 4. What type of things will the users want to do on the site? 5. What information you want to include in your site/s (including text and images/photos)? Web Site Structure Using the content for the site, create and draw a hierarchy for your site. Remember to group similar information. Note: Your site needs to be at least three levels deep and five levels wide. You should be able to explain your hierarchy, your decision for the structure and organization of the website, and how users will navigate your site. 2
Web Page Design Sketches Sketch out your design ideas for the home page and one interior page of the site while considering the questions about the type of site and users, and the points in the checklist. In particular, consider how you will maintain a consistent look and feel that begins with your home page and continues with the interior pages. As well, consider the types of navigation mechanisms that will work best (look at the check list for options). You can think of possible colour combinations (e.g., green, blue and grey ). 3
Part II The Design Checklist Creating your Web Site (considerations for designing your site using Dreamweaver) Using your information about the site and users, site structure, design sketches and the design checklist you will create the web site. In addition, once you have finished your site you should decide on two questions that will allow users to test the navigation of your site. One question should be an easier question where the answer is on the home page or within one level of the hierarchy. The other question should be more difficult that would require the user to navigate through more than two levels in the hierarchy with scrolling to find the answer. Remember to test your site to ensure that you can navigate through your site, your links work, that your images are displayed, and that you can reach all the web pages as outlined in your site hierarchy. Below is a checklist of design elements with some questions that you can use while and after creating the web site to help you consider the design suggestions. Web Site Related Design Considerations Created a Hierarchy How many levels deep? (minimum 3 levels) How many layers wide? (minimum 5 layers) Content is grouped in a meaningful and sensible way How? Pages in the site are clearly labelled (e.g., a logo, name) There is a consistent look and feel to the site Same logo/banner in same place in all the pages Same navigation aide (e.g., menu) locations on the pages Same colour usage in all the pages Same font type and style in all the pages Others (list below) 4
Navigation aides are present to help users move through the site (e.g., link navigation, menu navigation and drop-down list menu navigation). List the types used: Home Page and Interior Pages Design Considerations Your home page clearly tells the user where they are (i.e., that it is a home page and not an interior page). How? Your home page clearly tells the users what the site does. How? Your home page contains the following: Name or logo of the organization Name of the website (appears in the tab bar) Has at least one navigation aide WHAT? Has a search facility (note: for this site you do not need to include) Others (list below) 5
There is no or minimal vertical scrolling on the home page Interior pages are no longer than two scrollable pages long There is no horizontal scrolling in your site (use word wrap) You can easily reach your home page from all pages in your web site Font size is large enough to read The colours used in the site have high contrast (use site http://snook.ca/technical/colour_contrast/colour.html to test contrast colours) Your pages are not cluttered There is no noise or distracting animations or images The writing is succinct Information can easily be scanned Hypertext (links in the page) were used Why or why not? Testing Consideration of your Web Site All navigation aides work (e.g., menu items) All links work All images show up You can reach all the web pages that you included in your web site hierarchy Two Navigation Questions for your Site: 6
7