Joedawalker.github.io

Weather Site Plan

Purpose

The purpose of the Weather Site is to give current weather conditions in 3 different ways. The initial page will give the weather for the current location based on the Geocoding location information from the device. The second is weather for 3 specific locations accessible through a dedicated link, and the third is weather for any location determined by a search string.

Audience

Primary audience is adults ages 18-30. Most will be students. Access to the site will be split between mobile devices and laptops. A secondary audience wil be anyone interested in weather.

Audience Goals:

College students move around quite a bit so one goal would be to quickly get the weather contions for their current location as they head off to class or study. They are also often far from their homes so the ability to quickly get the conditions for a specific location is important as well. The third goal deals with planning for travels...the ability to get weather conditions for any location will help with last minute packing for road trips.

Persona

Photo of Joe Cool

Content

All weather pages should include location name, current temperature, forecast high, forecast low, current weather descriptor, forecast percentage of precipitation, and current wind speed and direction on small devices and hourly temps should be added on larger screens. The pages of the Weather Site will be built in the following order:

Pages

  1. Franklin, Greenville, Springfield: weather for each specific location. The weather for these pages should be pulled from the weather.JSON file that will be provided.
  2. Home:weather for the current location. Current location should be determined by using the Geolocation API of the browser. This information should be passed to the WeatherUnderground API (https://www.wunderground.com/weather/api/) to retrieve the current conditions.
  3. Search: Begins with only a search box, characters entered will cause a list of suggested matches to appear. Selected location will pull up the weather. The search term from the field should be sent to the WeatherUnderground autocomplete API (https://www.wunderground.com/weather/api/d/docs?d=autocomplete-api&MR=1), and the results used to pull the current conditions for the selected location.

Styles

Branding

The client provided the following initial concept for a name and logo:
Weather Site The name should be bold & italic

Site Logo
This logo can also be rendered using a HTML entity - ☔

Typography

Heading Font:Sasita From Google Fonts

The Sansita Aphabet

Body Copy Font: Helvetica

The Helvetica Alphabet

Colors

colors we will use

Elements

(add title attribute to each anchor)

Navigation

Navigation Template
  • Link:normal: #FFF
  • Link:visited: #D8F
  • Link:hover, Link:focus: #0E89D5
  • Link:Active: default (omit from styles)

Opaque rounded content box

Content Box Template
  • background-color: rgba(200,200,200,.6);
  • margin: .2em auto;
  • border: 1px solid;
  • border-radius: 5px;

Wireframes

Small Screen

Small Screen Wireframe

Large Screen

Large Screen Wireframe