Wire-Frame

For the presentation due on Tuesday week, we were asked to produce a wire-frame for our sites. A wire-frame is a blueprint of how you want your final site to look and as such it is a useful thing to have. A wire-frame ensures your site pages maintain the same look and feel throughout. 

It doesn't have to be the finished article but a wire-frame will outline the positioning of the various element of your site: content, pictures, navigation buttons etc. Here is an example wire frame:

'Borrowed' from wikipedia

It's obvious that this wire-frame is more like a blueprint than an finished website, but it presents all the information, buttons etc. that you want to display on your site, quickly and easily. This wire-frame was made using Balsamiq but I decided to use photoshop.

There were three reasons why I decided to use photoshop for my wire-frame:

1. We have been learning photoshop in class so it seemed sensible to keep using it.
2. Photoshop has a wealth of tools which come in useful when making a wire-frame. Primary among these are the layering, rulers, grid lines and eye-dropper tools. 
3. It's possible to make objects a certain size and shape automatically, apply effects to them and then use the layering options to export different parts of your wire frame as jpegs/gifs to be used on your website. This speeds up coding the html later on.

So while a web tool like Balsamiq is much quicker for making a crude mock-up of your site, I felt photoshop was the better option. After an afternoon of hard work I came up with this:

 

This will be my site's home page. It will show a couple of pictures of myself working offshore and have some introductory information about the site. 

The colour scheme of this site was chosen because I think it looks clean and easy to read while maintaining something of the spirit of seismic exploration. The black is obviously a nod to the oil we look for, while the red, orange and yellow squares are similar to the colour scheme we use to represent seismic data. I may change the squares along the bottom of the page to wavy lines, to represent the different layers of rock that we detect in seismic exploration, but for now the squares will do.   

The font used is tahoma, again, because I think it looks clean and easy to read. This was one of the fonts available in photoshop so I will need to check if it's available as an html font.

 

The intention is for the banner and footer to stretch the entire width of the page, while the content will sit in a wrapper in the middle. I will need to set my pages to a maximum height so there isn't too much information on any one page.

Depending on how much detail I want to include in each of my sections, I may have to add a secondary navigation bar.

The general template for my pages looks like this:

The layering function comes in very handy here to turn on and off part of the image. What's more, by grouping different layers into sections such as banner, main content, pictures etc. it's easy to switch off big chunks of the site.

I was also able to take the picture place holders from the photoshop file and save them as gifs:

This square has a shadow effect applied to it; easy to do in photoshop but much more difficult to do in html.