WDD 231: Web Frontend Development

Individual 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 individual website 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 HTML 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

  1. Refer to the project description, which provides overall site specifications.
  2. Create a single HTML document.

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 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

  2. 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.
  3. 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?
  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 HTML document exclusively.
    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. 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
  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 for the mobile view and for an larger, such as desktop, view for the home page.
    What is a Wireframe? - evolve
    Remember that earlier in the course we 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 document to your wdd231 repository.
  2. Return to I-Learn and submit the URL of this document.
  3. Be sure to test your own submission to make sure it renders in a browser.