BA (Hons) Music - Year 2, Semester 2

Computer Studies

Web Design

I decided to create my site for my Friend's father, Mr. Pye, who is an Architect with his own practice. He had previously expressed interest in having a website, which he could advertise on letterheads etc, and which could also be accessed via a link from The Royal institute of British Architects (RIBA), but didn't know how to go about designing a web site. I saw this as an ideal opportunity, as I would be able to produce something that would be useful and fully function for the assignment.

I began by collecting a wide range of information about the practice, such as practice statements, Curriculum Vitae's, company logo's, as well as basic but essential information such as telephone and fax numbers etc. I also collated pictures from previous projects that had been designed by Mr Pye. Although the pictures and logo's were provided in digital format (Photoshop files) I found that they needed to be edited slightly, and the quality decreased so that the file size wasn't too large.

His requirements were that he wanted a simple site, which was effective, loaded quite quickly, and contained all relevant information in an easy-to-view format.

Once I had collated all this information I inputted all the relevant text into Microsoft Word, and categorised the digital photographs of projects into separate project folders.

I took ideas from the Company's existing letterhead design and incorporated them into the web page, in particular the colour scheme, and the idea of the banner at the top of the page, adjacent to the logo.

The software program Dreamweaver was used to design most of the pages. As I had never used this software before, I found it quite difficult to operate effectively in the beginning. The first problem I encountered was regarding screen resolution. I had started to design the site in 800*600 resolution, and found a significant difference in the look of the pages when viewed in 1024*768. After questioning friends and family and looking at other commercial web sites, I concluded that the most popular resolution was 1024*768. It is also stated on the index page that this is the recommended resolution for the web site.

Whilst researching other web sites I also noticed that if the 'favourites' bar was added or removed, the web site actually changed dimensions to fit into the newly sized area. However, this did not happen with my web site - everything simply moved over to the right when the favourites bar was displayed. After much experimenting I discovered that it was because I had designed the page in Dreamweaver by inserting graphics within layers, instead of tables. So I again began to re-design the site, this time using tables.

The no-frames version of the site was the first to be designed, creating the index page first which, although simple in design was very effective. It consists of 9 images arranged in a square, the centre image being the portal, allowing the user to select frames or no-frames versions of the site. To get the alignment of all the images correct, but allow the user to select from two links on the centre image, I had to use the image map facility. This allowed me to split the image into 2 sections, allowing for two separate links. I also added some JavaScript to this image so that it was invisible, but appeared when the mouse pointer was placed over it, and then disappeared when the pointer was removed away from the image, using the behaviours section within Dreamweaver.

The next page completed was the main page. This consisted of a very brief synopsis of the practice, with an animated gif, which I created from a selection of four images given to me by Mr Pye. This page also includes the main buttons on the left-hand side, which allow the user to access the various pages. I designed the buttons in Photoshop, and saved each one separately as a gif. file, I also created a second button with a blue background so that I could apply the rollover image function, to add some interest to the page.

From this main page the user is able to access the following pages:

The Practice: Practice statement containing aims, objectives, specialist areas etc.

Projects: Provides further links to seven previously completed projects

C.V: A copy of Mr Pye's career C.V. - with a further link to his personal C.V.

Contacts: Details telephone number, fax number, address, e-mail etc

Links: Contains a link to RIBA (Royal Institute of British Architects), and for the purpose of this project links to the pages of other members of the group.

The same background colour was applied to all the pages, and the logo and banner is also at the top of each page, in order to keep the overall look uniform.

The Projects page was probably the most difficult to design. I wanted this page to stand out as it was a showcase of previous work and needed to be visually effective. The picture at the bottom of the page was scanned from one of Mr Pye's plans, and in order to reduce the file to an acceptable size had to be reduced in quality.

I decided to create some new buttons in Photoshop, again two versions in order to apply the rollover effect. The buttons are arranged in a diagonal pattern, again to make this page slightly different. I also added JavaScript to this page, by using the behaviour options within Dreamweaver so that when the mouse is placed over a button, an image appears on the left hand side that relates to that particular project. This effect was created by first inserting the image, and then setting the visibility to "invisible". The JavaScript was then set to show the image when the mouse pointer was placed over the button, and hide it again when the pointer was removed. However, I decided not to include this JavaScript within the frames version due to the smaller amount of space available.

The buttons on this page linked to a further seven pages, which were almost identical in their format, containing one or two pictures of the project and a short description of the work undertaken.

I found the other pages relatively easy to create, as pages such as 'C.V' and 'The Practice' consisted of text only, apart from the logo and banner at the top of the page.

I then began to create the frames version of the site. Again, this is where I had to refer back to lecture notes, and resort to creating the fames page manually in notepad, as I found it difficult to create frames properly within Dreamweaver, again due to my lack of familiarity with the software. I entered the instruction into notepad to create a page which consisted of three frames: one at the top of the page containing the logo and banner; one at the side containing buttons; and the main frame which contained the bulk of information.

In order to create the relevant pages I copied the information, graphics and buttons from the no-frames version, omitting the logo and banner that would now appear in the top frame, and the buttons, which would appear in the left. I did this using Dreamweaver, but then found that I again had to use notepad to change the target frame for the links from the buttons, so that the information would appear in the main frame.

A section of the assignment criteria requested that sound be incorporated into the web page. However, due to the nature of the subject, there was little opportunity to do this. I found a Wav. File that I thought would be effective when users entered the home page - almost like the windows start-up sound, but I thought that adding sound to any other parts of the site would be ineffective and only serve to increase download times.

Mr Pye was given the option of uploading either the frames or no-frames version, and chose the latter, as we felt that it was better structured than the frames pages. He is happy with the web page, and will shortly be uploading it to his own server with his own domain name.