Website designing

1/10~12/10

Even though I went to Koha tutorial class before I created this website 

There were way too much issues+ the coding was really difficult for me as well.

I'm sure that I had lots of processes before I got to this stage.

but I didn't get to document whole process before I overwrite it.

(I was using Dreamweaver for CSS coding and had notepad as well to run html coding as well)

sometimes I saved my old html file onto new CSS file so I had to code everything again.

so before it is too late I'm going to document what I have done.

Intro page.

I've only changed a logo and pattern background from my original website.

When you click the logo you get to go into the main page.

What I have to change: the background image is cropped, so I'll have to code that again.

Main page

On my original main website page I had image+ the navigation separately

but on this newer one I have linked the image, 

so when you click onto the phone(for instance) you get to go to 'about' page.

I left the navigation underneath the links just to keep a consistency (or for people who might be confused)

What I have to change: the background image is cropped, so I'll have to code that again.

This is orange version.

Luckily I had the process of changing navigation image color in my folder.

I liked this because this color was friendly and it reminded me of a table color as well.

But this didn't really match the coffee tree pattern background.

grey version

I have toned down the grey.

This color was more likely to match with the pattern background,

but It looked gloomy+ and it didn't look friendly at all.

This was ok, but it was too confusing.

I liked this but If I had pattern+ a same pattern background behind it looked a bit weird.

Final navigation image. 

Simple/ friendly/ color matches!

About page

From original website I had lots of issues clearing the outline of the table.

(table that has been used to contain all the images and text in box format)

but now I've fixed that problem!

+ I have added the background to it.

What I have to change: when you see the background image in Mac 

the bar on the side moves so I will have to repeat the pattern..

and maybe make the image bigger so It is simple and easy to read.

Maybe change Helvetica font that has been used in the information

into the letter Gothic font like the navigation one.

_consistency.

Map page

This page could only be opened when you click map of fair trade producers link on about page.

The only thing that I have changed is adding the background.

What I have to change: when you see the background image in Mac 

the bar on the side moves so I will have to repeat the pattern..

Maybe change Helvetica font that has been used in the information

into the letter Gothic font like the navigation one.

_consistency.

Location page

From the original location page I have added the background 

+ when you place the mouse on top of the map it rolls over and shows details.

I have added extra photos of shops and the information+address underneath the map.

What I have to change: when you see the background image in Mac 

the bar on the side moves so I will have to repeat the pattern..

and maybe make the image bigger so It is simple and easy to read.

Maybe change Helvetica font that has been used in the information

into the letter Gothic font like the navigation one.

_consistency.

At this point my support page was left blank 

because I had no posters or cup decoration(3rd choice) file from my group mate.