L03: Project Milestone - The Chamber of Commerce Site Plan
Overview
Site and application planning is a critical step in successful design and development projects. The website plan provides a blueprint from which to design and develop the project for a chamber site for a local town of your choice.
Review prior coursework involving website planning and development. Ask yourself, and others, about what planning section seemed to help the most with the build of the site. What items changed after addition information was given? What kind of questions should be asked of the client in order to get a clearer purpose of the intent and goal of the website or web application?
Instructions
The project is to build a chamber of commerce site. In this activity, you will build a web site plan plan document in HTML. Use some basic styling but be sure to demonstrate your planned color schema and typography by using your choices in this site plan document.
The site plan may change over these first few weeks of course which is OK.
- Become familiar with the chamber project description, which provides overall site specifications.
- Select a town, city, municipality, or region to be the location subject
for
the chamber of commerce project site.
It is recommended that the location be somewhere with which you are familiar. - In the VS Code editor, add a new file to the "
lesson03" directory named "chamber-site-plan.html". - Add supporting CSS files as needed. The styling can be basic. Start using the selected color schema and typography in this site plan.
- Include the following content and use appropriate HTML elements to outline these sections
with
descriptions in of the site plan document:
- Site Name: This is the name of the site normally based upon the
locale
and purpose. A representative domain that is available to purchase would be normally
important but not required in this class. Provide a valid site name that is relevant to
the
locale. Include the word "Chamber" in the site name and a short reason why the the site
name
was selected.
Example: Carlsbad Chamber of Commerce. This name represents a city in which the chamber operates.
- Site Purpose: The site purpose should attempt to provide scope to the
website content in describing what services and information will be provided. The client
typically drives this content by stating functional specifications. It is OK to be less
formal than this given example. Provide at least two purposes for having the website
developed and running.
Example: "The Carlsbad Chamber of Commerce acts as a regional economic catalyst, leadership convener and community champion. We promote business through member services, economic and community development, and public policy that balances economic prosperity" - carlsbad.org site description
- Scenarios: Scenarios are questions that are asked by a site visitor
who represents the target audience of the organization or company. The questions will
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 a chamber of commerce site. Visit real chamber of commerce sites. Include at
least three scenarios.
Examples
• What events will the chamber be holding this month that promote business-to-business networking?
• Where can I find contact information for the chamber's board of directors?
• What has been the population growth in the area? - Color Schema: The color schema refers to the carefully selected site
colors that reflect the organization's purpose and trademark. The planning document
defines
the color scheme through a color palette that labels color style definitions and
swatches
for site elements. Define at least two colors and show where each color selected will be
used, such as headings, paragraphs, background colors, accents, and so on.
How to Choose Good Website Color Schemes - websitebuilderexpert.com
- Typography: The typography section of the planning document provides
examples of the fonts to be used and where they are to be applied. No less than one font
and no more than three fonts selections need to be selected. Indicate where each
selected font will be used (such as headings, body, and so on). Other fonts can be used
for special circumstances or sections as needed. When choosing web fonts, consider
factors such as readability, compatibility, and the overall
aesthetic of your website. Additionally, always check the licensing terms of the fonts
you plan to
use to ensure they align with your project's requirements.
A Step-by-Step Guide to Choosing the Right Font for Your Website - careerfoundry.com
- Wireframe: Provide a rough sketch of the design of the chamber 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 for the mobile view and for an larger, such as desktop, view for the home page.
- Site Name: This is the name of the site normally based upon the
locale
and purpose. A representative domain that is available to purchase would be normally
important but not required in this class. Provide a valid site name that is relevant to
the
locale. Include the word "Chamber" in the site name and a short reason why the the site
name
was selected.
- Test for basic HTML components and page content by running your page through the audit tool.
- Update your home portal page (index.html on the wdd230 root) with a link to this HTML file.
- Commit and push your work up to your GitHub Pages repository.
- Return to I-Learn and submit your GitHub Pages home URL.