Evaluation

Overall I found this project the most challenging due to the nature of browser wanting to "jaffa" up the website differently in each one. However that was not the only problem as I also had a real client who didnt provide me with content soon enough for the deadline. I had to improvise with dummy images off google, but I do understand this would not be acceptable in the world of web design.

Apart from these issues i feel the project went well and I learnt many interesting things along the way.

"Dont Make Me Think"

After reading Steve Krug's book "Dont Make Me Think" I found out a lot about information architecture but disagreed with it from my design point of view. So I took a break and opened my mind and read the book again.

With an open mind I could understand much better from his point of view, the tabbed navigation although it looks a little bit cramped, it is what users have come to expect, even now on blogger I am within sniffing distance of tabbed navigation as well as tabbed browsing.

I also took on board the advice about a visual hierarchy, by making important heading larger this allows a user to know exactly what they should read first, sub headings would then be smaller and finally paragraph text would be smallest as this is the order I want a user to percieve the page.

Finally I have taken on board the advice about letting a user know where they are at all times. To do this I created an active state on the navigation to show the users which page they are on as well as having a title relevant to the specific page they are on.

Other Changes

After going through my user testing feedback I have made some minor alterations such as a larger font for both paragraph text and navigation links, I also moved the navigation away from the edge so that it wasn't crammed away in a corner.

Other Changes include the layout of the gallery images since I wasn't happy with the single line layout.

Lightbox Problems

After making the decision to use lightbox, I put the code into my site but nothing happened or at least it didnt seem to, then a colleague noticed that instead of loading the picture over the website it was infact loading at the bottom of the page, this was unacceptable so after racking my brain as to why it wasn't working, I called in the cavalry.

My colleague knew the problem after spending a few minutes looking at my referencing and source code as well as file structure. We worked together spending about 20 minutes fixing the problem.

The final result is better than I expected and the site is working like a charm.

Folder Structure

Here is an example of my file structure, it is done in this way to keep thing nice and tidy and the naming conventions avoid any errors when uploaded to the server.

User Testing

At this point I felt it was relevant to do some user testing while I had a basic mockup of the site. From this I can learn how to alter the site so that it is easier for people to use and understand.

Adam Colby: After using this website I found that the navigation was easy to find and simply laid out. Each link takes you to the page you want to go to. 
However on the gallery page the images arent clearly presented and would benefit from a link to a bigger image.

Sammy Foston: This website has a nice clean layout and everything is where you would expect it to be however the site may benefit from a contact form that can be filled in.

Graham Hirst: The first thing i noticed about the website is that the home picture is pixellated and this would put me off straight away. but after been asked to run through the website as if I were bbuying some jewellery I managed to find my way through quite easily, although the navigation could maybe do to be a bit bigger.

From this I have learnt that the website I have built is not to everyones taste but it does the job that it is required for.

More tuning

After some fine tuning I managed to give the site a nice luxury feel and give a crisp clean site that doesn't require the need to scroll. This is helpful for a user as there is less chance they will need to reel through reams and reams of website to find what they are looking for.

Remember "Don't Make Me Think!"

Photoshop Mockup

This is a representation of the website and how it will look when I first present it to the client.

After mocking this up I found that by putting all containers in a logical order and defining the rules properly it was much easier for browsers to keep the website consistently the same.

The navigation is in the top left because it is where a user usually looks as a first point of call when entering a website.

Steve Krug says that "people won't use your website if they can't find their way around it" from this I decided to name each page without having some confusing obscure name but a plain home, about, gallery and contact. Nothing confusing about that.


After showing the client, she agree that the pages are named nice and simply.


On another note the client did want to see some more colour as the website looks a bit to dark and gothic.


I explained some colour theory but promised that images of the jewellery would brighten the page up much more.

Wireframe Ideas

Here is the first wireframe design I came up with, the hierachy does'nt seem right and the client mentioned that the homepage should not have so much text on so that it will be inviting.

 So I went back to the drawing board and finalised a more appropriate wireframe.

This wireframe is designed to fit all browsers and screen resolutions, although unfortunately on wider screen resolutions there is a large overflow of white.

This wire frame is useful because there is no need to learn your way around the navigation it is put simply in the first place a user would look and will always be in that position no matter what page a user clicks on.

Site Map

Here is the site map to show the links and hierachy of the pages on the website.

The site is very basic, but it doesn't need to be fancy due to the fact the client is only a very small business.

RESEARCH CONTINUED

Now I will look at some economy jewellery websites for comparison, this will help me decide what I want the clients website to feel like.

 This website has a mixture of luxury and economy jewellery, the design reflects through the colours that are used the deep black shows an essence of wealth and glamour and the subtle pastel tones, bring the site to a broader market.
There are too many font types in my opinion, and due to the navigation been the same font size as the main body there could be some confusion distinguishing the two as two separate elements.

On the other end of the scale I found this website, the navigation is clearly distinguishable from the body of the website, the blue colour is used to create a feeling of trust for the user but unlike the high end websites, the website doesn't seem to have the same elegance as the luxury websites. This may be because there is not such a heavy usage of black throughout the website.

Information Architecture - Research

For my project I have researched a wide range of jewellery websites. I have noticed there are noticeable differences between the top end of the market (luxury items) and the bottom end (economy items).

The top end websites use a lot of black. Some research into colour theory has shown that black represents luxury and expense, making the website feel very mature and suave.

On the other side of the market, these websites use a lot less black and use more trusting colours such as orange. Whilst these websites don't look as sophisticated they are still fit for purpose.

The purpose of these jewellery websites is to sell a product. The website I have been asked to produce is to promote and sell hand made jewellery.

This is an example of a luxury jewellery website, as you can see there is a lot of black but there is also a lot of red, further research has shown me red is the colour of passion, energy and power. These colours work together to create an overall sophisticated feel. The website requires a learning curve to be able to use which is not very good from an information architecture point of view. The site also has a large flash element which on some bandwidths could take a while to load in which time the prospective customer could leave.

Here is another example of a luxury website again using a sea of black, this website has a more noticeable navigation bar which makes it easier to use/navigate, contact details are clearly visible, this website has a feel of promotion not just for the jewellery but for the shop itself.The navigation glows when you hover over this helps to show which option you are clicking and where you expect to go. There is also an active state for the chosen option denoting which page you are on. This is good information architecture.

A third luxury website I researched is this, it starts of with a large image with and enter link which must be clicked to enter the website this gives the website to promote there best piece of jewellery. the navigation is viewable from any page and again has a hover state showing where you are pointing and an active state to show which page you are viewing.