Friday, October 24, 2014

Journal #4: Website Flowchart and Wireframe

Site title:
California Drought – Los Angeles County

Developer:
Adam Hain

Rational or focus:
The goal of the site is to educate the public on the severity of the drought specifically in the Los Angeles County area.  It will also provide ideas for reducing water use and a small amount of history of water use in the region.

The site will feature:
      1. Standard navigation
      2. Internal and external links
      3. Thumbnails linking to photos and one video
      4. 1 ordered list
      5. 1 precipitation table
      6. CSS styling

     Content:
The site will contain 9 total html pages:
1.     Home/ Nav: This page will contain basic overview of the state of the California drought specifically in LA County.   It will also contain navigation to the 4 main sections of the site.

2.    Resources:

-Section 1
How Can I Conserve Water?
List of ways to reduce water usage

-Section 2
LA Water Facts
List of facts or statistics pertaining to drought

-Section 3
What’s Happening
Article on examples of what is being done around the county, including goals of local government and private parties.

3.     Historical Information: Article that briefly describes how the LA water system came into being

          4-7.  Media: The media section features  a media main page with thumbnails that link to individual pages containing photos.  The photos will be contemporary and archival.  I hope to have at least one page containing a short video as well.  I have drawn 3 media pages on my flowchart but if I find more photos this could grow a bit.

              8. Links: General Links to resources around the Web

              9. Ca Gov Links: Links to specifically Government resources

Target Audience:
The target audience is Southern California residents.  It will be primarily aimed at adults and older teens. 

Design Considerations:
My aim is to create concise articles as I found many sites on the subject to possibly be too dense for the busy reader.  I would like it to be simple and uncluttered.  I have tried to incorporate empty white space to avoid a sense being overwhelmed by information.
I would like it to be accessible to all readers, so will be checking colors for color blindness considerations, as well as attempting to create markup that caters to all residents.

Limiting Factors:
There are a number of features that I would like to add and have seen around the web.  However, with no knowledge of Javascript, Flash or HTML animation, these features are likely unrealistic.

Here is my wishlist:

1.     parallax scrolling – I’d like the background to move at a different rate than the foreground text.

2.     animated navigation buttons – I’d like these buttons to pop up or spin slightly when hovered over.

3.     design complexity –I would like to create a more complex, multi-column responsive design. As I am new to photoshop and HTML, it is difficult to even create a multi-column mockup let alone write the code.

4.     animation -  I hope to create a short 2D animation as I am in the graphic design class as well and we will be covering Flash later in the quarter.

See below for flowchart and wireframes:












No comments:

Post a Comment