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.

Smoking - Lighters

Everyone who smokes needs a lighter, so that's why I have decided that designing one for the World No Tobacco Day would be a good choice to do. I had a look at existing ones to see what sort of designs usually go on to them, which can be seen on my design context blog. The designs are quite simple and to the point.

The most information I will include on the lighter design I produce, I have decided I will stick to using just the logo, the date & day title, the website and possibly the see how long you can go line.

I like this one as it's simple, but I feel like I should include more information on it.

Reducing the size of the logo to fit at the bottom works well and allows me to use the full side for other information. This works well.

I played with the sizes a little to see if it stopped the right side looking a bit too cramped. Not too sure if I'm feeling this actually.

Accidentally screen shotted it going off the artboard, which explains the line. I tried out having the logo back how it was and including the line with the date. I think this works well.

I altered the sizes again to see if I could get the elements to sit better in the area.

I really like having just the how long line on one side, keeps it looking simple, and at first read it will be a little like huh, and will make the person reading it want to turn it over. I tried the logo the same at the bottom again and added the website as a call to action on it so if someone does want to find out more then they know where to go.

I tried shifting the logo to the other side with the hot long line. It makes the right side not look as cramped as it was.

I decided to try having the logo orientation the same at the how long line as everything else is vertical rather than horizontal on the lighter. This works but I don't like it being at the top of the lighter.

I switched the sides around so the logo would be at the bottom of the lighter. This works, but I will keep experimenting for now.

I tried again similar to the first one that I did but this time including the call to action line. I like this one.

I took the logo off the design and included the how long line instead. I really like this design but I am not sure if I would need to include a logo? Tough decision. I really think the layout on this one works really well and is simple and not too crowded.

I will have a see and come back to them.

Smoking - Beer Mats

Considering that a lot of people social smoke, especially when they are drinking alcohol, I figured producing a beer mat is an obvious option. It's something that's on every table and most people at some point whilst drinking take notice to them - I know I do!

Again, using the same elements as I have on the poster, I transferred these into some design experiments on to a beet mat dimension. For the dimensions, I found it online...

I played around with the layouts of it, and changed the suggestion as I think suggesting someone to drink some water when they are out drinking alcohol wont really work so I chose the most appropriate from the ones I have.

Trying to think how a beer mat is for an alcohol company they usually make the most of their logo on one side of the mat, so I had a go with this (shown below). Whilst I think it's alright, I think I prefer the idea of having the information included over both sides of the mat as I believe this will make people interact with them better.

I decided to have a see if it works to split the two main elements to be over both sides. I think this works well as you would read one side then turn it over to see what the other one will read. I have decided to go with the logo being smaller in the bottom corner again as I think with the red it makes it stand out enough amongst the grey tones. I decided to have the website on both sides of the mat as well.

Not sure on how the logo sits with the website section, so I altered this to make the logo smaller and split the website information to sit over two lines. I think this gives the mat more balance.

 I put this on both sides so that the mat could be placed either way and the logo would always be visible.

Due to the way that the craving line blends a little too much with the smoke effects I avoided including it really on that side of the mat, but I think it will need one so I experimented with this.

I am pleased with where I am at so far with these. I need to print them out and go from there with them as I wont know for sure whether the type sizes are completely right. Also, I might consider using some other suggestions on there, or come up with some more at least.