implementation
1st prototype
The first prototype can be seen here.
It was sent to the partners for initial assessment and so that they could provide me with the content for each page.
It only includes working versions of the home and about pages without any significant content.
questions for the partners
Below are the questions that where sent by email to the partners along with the prototype.
- What do you think about the position and size of the PSD logo?
- Do you like the navigational system?
- Is the amount of information on the home page enough?
- Are the headings distinctive?
- What are your general thoughts on the layout of the page?
- Do you like the "skip to content" feature?
I also asked if there were any other issues that they had with the design.
feedback
The partners feedback was very positive and they also supplied me with all the site content.
However they did specify some significant changes that they wanted to be made.
- The company logo's size must be larger;
- all the content provided must be displayed correctly;
- another image should be in the top right corner of each page.
Other than those three demands they were very pleased with the initial prototype.
refining the prototype...
increasing logo size
Because of the low-resolution of prototype 1's PSD logo, if I increased it's size the quality would deteriorate; so I edited the original high-resolution copy. I did this using Macromedia Fireworks. The image to the right shows me doing this.
I then saved over prototype 1's logo and increased the division's size allocation in the CSS document.
inserting the content
I now had all the content which needed to be included on each page. So all I had to do was copy and paste it all into the correct pages. This was done using Macromedia Dreamweaver 8.
To check the content's accuracy I used the built-in spell checker. I also created special headings to divide the pages into logical sections and inserted anchors when appropriate.
adding another image
Due to the partners wanting another image included on the page. I chose to use the image that I created earlier on in the design stage. Using CSS I was able to position this image in the top right hand corner of each page. Below is the code used:
background-image: url(../images/body-bg.png);
background-repeat: no-repeat;
background-position: 98% 35px;
The first prototype has been a success, the web site is definitely coming together. All the content is in place and the client is happy. The web site is now ready to be scrutinized by end-users.
Click next to continue...