I’ve finally added all of the content to the website, including the information on the about etc. pages. I have completed the navigational structure, linking every page to each other, and I have set all of the media queries to change the layout for different browser sizes.

To sort out any final changes, my client and myself held a video conversation using Google+, because we could share screens and my client could point out to me exactly what he wanted changing.

The first thing my client pointed out was that he felt the navigation in the sidebar was too far apart. He also stated that although the words were linked to the relevant pages, the images were not. This was my error, I had been meaning to do it for weeks but got distracted with other aspects of the site alongside other work efforts. I reduced the distance between the images and titles, and added the necessary links to the images.

tweak - nav

The next thing we discussed was the content in certain pages. I  pointed out to my client, that the information in the ‘About’ , ‘Other Services’ and ‘Biography’ pages held not nearly enough information to warrant spreading the information over three pages. My client wanted to create a new page layout to center attention onto the information, but because this would still leave the pages scarcely occupied, I advised my client to merge these pages.

First, I deleted the unnecessary pages from the navigation. My client wanted me to put bullet points in between the footer links, so I obliged and redid the footer for him:

tweak - nav2

He sent me a picture of himself to use as a profile image, and I applied this to the ‘about’ page. I then transferred the information in the ‘Other Services’ page into this page, and moved the ‘ABOUT’ title into the main content area to allow the profile picture to be a bit larger in the sidebar. I also feel that it gives the content area a bit more substance as it looked fairly bland with just the text.

tweak - about page

On the home page, the centerpiece banner containing the title didn’t stretch the entire width of the browser and contained the end corners which were still visible. My client wanted to know if I could stretch it the whole way across the browser, cutting off the edges so it appeared to stretch beyond the screen. To achieve this I edited the image, cutting off the edges and setting it to 100%width in the CSS.

Another aspect of the home page my client was not entirely content with was the three featured images. I’d tried using CSS code to replicate the opaque background behind the caption on the psd designs, but had been unable to replicate it perfectly. He pressed the matter to see if it was possible, when I realised something  I should have considered long before but for some reason hadn’t thought of. I took the images directly from the psd and used these as the images for the home page. He also requested box shadows behind these images which was just a simple matter of adding class=”shadow” to the images as I’d already predefined CSS styles for that class affecting any image requiring shadows. I think the changes improved the home page greatly.

tweak - home page

There were a couple of other things that needed to be addressed. There was one issue with a piece of work where the main image on the project slider was one which my client had not done. It was a cover for a booklet my client had designed the layout and the inside for, but not the cover art. I simply changed the main image and the thumbnail to a page of his choice which ended up being page 3 of that booklet.

The slider itself had a prominent white border around the main image and the thumbnail images. My client did not approve of this, and I removed the white border at his request.

tweak - remove white borders

A vigilant eye could tell that we also changed the fonts during this discussion. We looked at a few web-safe fonts that could stand as the main normal text font, and came up with two alternatives:

tweak - font

In the end we chose Lane as our font, so I incorporated it into the website:

tweak - font line spacing attention

Whilst doing this, I added letter-spacing to the header (‘overview’), as my client felt it was too clammy in its original state. He also wanted me to make it clear that there was more to see if the user clicked on the main image, so I added a note beneath the main information to highlight this.

This was pretty much everything that we discussed, and once I’d sorted these problems out my client and I both agreed that the website was finished! Probably not my shrewdest move to not charge him anything for making his website, but as a web design student looking for work to build up a portfolio, I’ve got to start somewhere. Working for a friend has it’s benefits – My client as a designer himself is creating me a logo in return for this website, and I have been assured that any web work my client receives whether he wants to design it or not will be passed on to myself to build. I can add this site to my web portfolio, and as I have a section on my clients website under the ‘Partners’ page, any client of his will be able to find my website and hopefully I’ll get some work that way!

Advertisements