Smoking - Website

Due to me rebranding the company, and developing the new face of it basically, I feel it's essential to at least consider the design of their website. Obviously due to my lack of web design skills, I can't produce the website, but I will design it the best that I can.

Whilst I have many problems with their website, I won't go on to change too much about it in terms of the information on there as it's not really fair. I'm just going to make it look more professional and tie it in with what I am producing.

This is how the face of the website looks now... (oh dear).

I've had a quick look at some other smoking websites for some general initial ideas.

I did a couple of initial sketches for the website.

As shown in the sketches, I am going to keep the background white and have a smoke effect to the left of the screen. This will be a fixed image so even when the screen is scrolled down this will still be in the same place.

I want to create the background image so that if a website is made full screen on a 13" macbook then the fullback ground will fit it. I understand the differences in sizes of screens and between macs and pcs and all that, but this is what I have decided.

I looked at the smoke effects I have and tried a few out.

It's nice and simple like I want it to be. I prefer the first one the best so I will use this one.

Also in the sketches, I drew an idea to have a bridge page that will loads when the web address is typed into the search bar, and will be a different one of the suggestions with each load. The lines will be directly centered in the middle of the screen, like so...

So here is all of the bridge pages using the suggestion lines that I have.

In context on the website.

Not exactly sure how to have the home page so I sketched some more ideas down to work with.

Getting the links right on this is what will be key to the layout of the website. I am unsure whether it would best suit being across the top or down the left hand side of the page (I hate that they have them currently down the right side). I got on to designing this and experimented to see which was best.

I want to do my best to not alter things too much, so I typed out the links that they have on their page, and shortened ones that could be but kept the rest  the same. To have these at a big enough size for a navigation bar across the top, it does outside the work area I have decided to go with.

I made them into a list going down the left instead.

Not really sure on this, tried it in bold.

Just not sure, I spaced them out a bit more. I think I prefer it going across the top a lot better. Hmm.

I decided to split the really long links to be over two lines, and then put each of them into boxes that are all the same size. This works a lot better and gives more structure to the top of the page. This is the navigation I will go for.

Seen as there is 8 equal boxes going across the top of the page for the navigation, I have decided that I will use this for the grid of the website - put guides on to follow.

At the top of the existing webpage, it reads 'It's a book. It's an attitude. It's a movement.' so I will include this at the top of the web page I am doing. It's basically just a really quick, snappy overview of what Kick Butts Take Names is so it's essential really.

Now, down the right of the page there is a picture of the author of the Kick Butts, Take Names book, which I am guessing is a main bit of information they would like to keep and be instantly accessible so I will include this one the one that I produce. Instead of having the really bad to an angle square that it's in, I'll crop down the picture (shown below) to be just a square, and will put a light boarder around it.

They also have a direct link with their Facebook page on the right too, which is a big deal seen as they direct you to it with the brief and what not so I'll also include this.

I've now added these, and this is how the webpage is looking so far. This will be the basic structure used for any of the pages on the website, The blank area to the left will be the editable area where the relevant information for each page will go, the top and right side will stay the same.

Now that I have the basic structure sorted for the website, I can now think about how the rest of the home page will look. I think with me having the bright pages with the suggestions on them, the main thing that should come up should be basically like an ad containing the world no smoking day info on there. This will be the majority of what will appear, and then I will include the rest of the information below this that already exists on the existing website.

Here's how it will look on the browser.

I'm going to keep the main bit simple, and literally just put the how long line on, and the date with a click here for more info line, so that it would direct them to another web page with lots more information on it about the day.

Does that area need a smoke effect?

Yes.

Here's how it would look on the browser.