Project Site Plan
Overview
Site and application planning is a critical step in successful design and development of web projects. The website plan provides a blueprint from which to design and develop 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 a document that will be 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. The required content is outlined below.
Remember that this is just a plan and you may adjust some items as you complete your project in the next week.
Setup
- Refer to the project description, which provides overall site specifications.
- 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:
- Site Name: The site or domain name is the primary identifier and is
critical for branding, visibility, and recognition, often coupled with a logo or logo
version. 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 your project
and a short reason why the the site name was selected.
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
- Site Purpose: The site purpose should attempt to provide scope to the
website content in describing what services and information will be provided.
Example: for the Bay Area eBiking Club
• The site provides a hub for regional e-biking by listing providing trail and e-bike recommendation information along with a membership information form. - Scenarios: Scenarios are questions that are asked by a site visitor
who represents the target audience of the organization or company. 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? - 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 - 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.
Choosing Web Fonts Beginners Guide - Google Design
- 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 for the mobile
view and for an larger, such as desktop, view for the home page.
What is a Wireframe? - evolveRemember that earlier in the course we worked with a given wireframe. Country/Place Page
CSS
- Add supporting CSS files as needed. The styling can be basic.
- Be sure to use your selected color schema and typography listed in this plan on your site plan document.
Testing
- 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
- Commit and push your work up to your course repository.
- Return to I-Learn and submit the URL.