WDD 130: Web Fundamentals

Website Planning Document

Overview

Developing a site plan is a critical step in any web design and development process. Site plans help establish the purpose of the site, the targeted message, and the overall look and feel. The plan provides a framework to apply consistently across the pages of a site. It is a blueprint from which to design and develop.

Prepare

Site Plan Outline

Site plans come in many shapes and sizes and in varying levels of detail. Here is a list of common elements in a site plan.

• Statement of purpose and goals
• Definition of the target audience
• Personas and scenarios (Who will use the site and how will they use it?)
• A style guide
  • Branding Information (how to use the branding for the site correctly)
  • Typography choices and justification
  • Color palette
  • Specific styling of elements on the site (headings, lists, paragraphs, forms, links, buttons, and so on)
• A site map
• Wireframes showing general layout and content areas for major pages

Purpose Statement

From the beginning, websites have always been about displaying content. This is the underlying purpose behind every site on the Internet, or at least it should be. In order to determine which content or functionality you should put on the site, it is critical to determine the purpose or goals of the site. The content should support that purpose. At a high level these purposes can take many forms:

• Build Revenue : Build revenues for your new/existing business or
• Share Information : Share corporate or educational information or
• Share Opinions : Share opinions on a subject
• Share Personal Interests : Share personal interests with family and friends

All websites should have a purpose, and that purpose should be more than 'My teacher is making me do this'. The purpose needs to be defined by the client and stakeholders and not the site developer. For the course rafting project, you will need to imagine that you are the owner of the rafting business and have decided that it is time for you to have an online presence.

Target Audience Statement

Websites are all about content. The purpose helps define what content you should include, and the content should target your specific audience or audiences (websites can have more than one). Some questions and scenarios that can help drive site content include:

• Who are the target customers? Describe their life (or business) situation (age, financial situation, interests, and so on)
• What do they want?
• What do they expect to find or what questions will be answered by them accessing the website?
• What are their needs that aren't being met?
• How will my audience usually access my site (desktop, laptop, mobile device)?

The Style Guide

Color Palette

Color plays an essential role in any website and so the colors you use should be chosen deliberately. The follow video is on color theory and can help with these choices.

Watch: 🎦 Beginning Graphic Design: Color

Using the coolors.co tool, explore the five color palettes stripes. Each color has four items that show when you hover over them: Alternative Shades, Drag, Adjust, and Lock. Play around with one color until you end up with something you like. You will use this tool to choose the color schema of your rafting project this week. You can hit the space bar on your keyboard to generate different complementary color schemes for the color you chose. Feel free to lock other colors and generate until you end up with 3–4 colors you like.

Fonts / Typography

Along with the colors you choose, fonts have the next largest (or maybe even larger in some cases) impact on the look and feel of your site.

Watch: 🎦 Beginning Graphic Design: Typography

Read: 📄 CSS Fonts - This article provides a video demonstration of applying CSS font declarations and an example of how to use Google Fonts.

A Site Map

The site map provides a graphic view of the hierarchy and relationship between the pages on a website. The site map is typically a sketch of all the pages and references on the site and is derived from the customer's functional specifications. The hierarchical relationship is illustrated and will drive the site navigation and links. Depending on the project, these site maps can be complex. More than likely we will not draw up a site map for the rafting project given how small the project is.

Wireframes

The wireframe shows what the home page will look like, or in other words, how it will be laid out. The rafting site home page wireframe will be provided to you and the home page will be built using that prescribed layout.

Since the style guide will be the largest portion, let's take a look at the FamilySearch style guide example to get a better idea about how site plan might be put together. Even though this exact content may not be a site plan, but this style guide demonstrates similar purposes of the site plan that we will create in this class.

Activity Instructions

Consider the purpose and audience of the FamilySearch site. Ponder the following questions and statements about the FamilySearch site.

1. Why do you think the current hero image used on the main page of FamilySearch is effective or not?
2. Does the site accomplish the purpose well and cater to its audience?
3. Consider the main menu. Why were these topics and words selected for the main menu? Are there any sub-menu items that are phrased as questions?
4. In the FamilySearch^TM Style Guide, select the Colors menu and review the Logo Colors. Compare these colors with the FamilySearch Logo and note the application. Do you have any color contrast concerns?
   
5. In the FamilySearch Style Guide, select the Typography menu (left hand side of page) and read through the directives of use and avoidance. What is the purpose of HTML headings(see Usage Notes) that is being supported here for accessibility?