STREETS IN TIME PROJECT – Wireframes

For Project 4 (design and build a web 2.0 Community website) I have decided to create a site based on an idea I had last year.  Over the past few months, I have been using images of old Brighton from the fantastic website http://regencysociety-jamesgray.com, and taking identical shots of the locations.  I discovered that using a jquery slider (adapted to fade rather than slide) to fade the old picture over the new results in an effective comparison that I find visually extremely compelling.

Each page will contain the following:

  • A logo for Streets In Time
  • A navigation menu
  • A map showing the location of the image being viewed
  • A comments section

Below are a few wireframes I sketched out for the site.  From the outset, I decided that I wanted the overall feel of site to be light and clean, free of clutter and noise to avoid any distraction and have the image as the main focus:

Image

Image

Image

 

I intend to make the site Responsive, and the below wireframe shows how the various elements of the page adjust to fit the screen of the device on which it is being viewed:

Image

 

In the end, I decided that I would have the maps viewable as an option, rather than always displayed on the page, so as not to distract from the main image.

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s