WDD 131: Dynamic Web Fundamentals

W05 Project: Website Planning Document

Overview

Planning is a critical step in the success of any project. The website plan serves as a blueprint for designing and developing your project. The purpose of this assignment is for you to organize your plans for your proposed project.

The site plan is a living document that will change as the project progresses. It is used to communicate with the client and the development team – which in this case, is just you.

Instructions

The assignment is to build a basic website plan in HTML. This will be a single document and the required content is outlined below.

Setup

1. Refer to the project description, which provides overall site specifications.
2. Create a new directory named "project" and start a new HTML file name "siteplan.html".

Content

Include the following content and use appropriate HTML elements to outline these sections with descriptions in the site plan document:

1. Site Name: The site or domain name (along with a logo) is the primary identifier and is critical for branding, visibility, and recognition. Securing a domain name that is available to purchase is normally important but not required in this class. You will need to provide a valid site name relevant to your project, along with a short description of why you chose it.

   Example: Bay Area eBiking Club
   • This name represents a club that is focused on electric biking in the San Francisco Bay Area.
   Optional domain availability: bay-ebike.org

2. Site Purpose: The site purpose describes your site's scope as well as the services and information that will be provided.

   Example: for the Bay Area eBiking Club
   • The site provides a hub for regional e-biking by providing trail and e-bike recommendation information along with a membership information form.

3. Scenarios: Scenarios are questions asked by a site visitor who represents the organization's target audience. The questions will help you drive the content of the website as it provides answers to the questions. Again, much of the content specifications will actually be provided but start thinking about the target audience of the site. Include at least two scenarios.

   Example: for the Bay Area eBiking Club
   • What is the best e-bike to get for mountainous areas?
   • Where can I find contact information for the club's directors?

4. Color Schema: The color schema refers to the carefully selected site colors. Define at least two colors and show where each color selected will be used, such as headings, paragraphs, background colors, accents, and so on.
   ! Use your selected color schema on this document.

   How to Choose Good Website Color Schemes – websitebuilderexpert.com

5. Typography: The typography section of the planning document provides examples of the fonts to be used and where they are to be applied. You should select no less than one font and no more than three fonts. Indicate where each font will be used (such as headings, body, and so on). Other fonts can be used for special circumstances or sections as needed.

   Choosing Web Fonts Beginners Guide – Google Design

6. Wireframe: Design a wireframe of your project's home page layout. Wireframe diagrams can be simple and do not need to have actual content, just representations of content and their layout relationship. Provide a sketch of the home page for the mobile view and for a larger view (wide desktop).
   
   What is a Wireframe? – evolve
   Remember that earlier in the course you worked with a given wireframe. Country/Place Page

CSS

1. Add supporting CSS files as needed. The styling can be basic.
2. Be sure to use your selected color schema and typography listed in this plan on your site plan document.

Testing

1. Self check and evaluate your own work on this page through the common tools used throughout the class for validation, accessibility, best practices, color contrast, SEO, and performance.

Submission

1. Commit and push your work up to your course repository.
2. Return to Canvas and submit the URL.