Sophie Mason: Technical Process

Throughout the production of my website I used screen shots to document the process I used, and the changes I made.

The first task I carried out was creating my title in Illustrator:

Once I had worked out the grid I used the rounded rectangle tool to create the basic shaping to my text, from there I then deleted certain lines using the direct selection tool.

Once I had finished the title I then coloured it light blue and added a drop shadow which allowed it to stand out well against my chosen background.

To allow me to understand how my site was going to link together I produced a site map:

As you can see from the above I have an external link running straight from the main pages to my blog. By having the external link it allows outside viewers to gain access to my site + therefore increases 'Search Engine Optimisation'.

Once I had finished my title I designed my 760pixel x 550pixel website in Photoshop. To allow the spacing to be accurate for each section of my site I divided my layout using the guides, then using those as a stencil I was able to mark out + finalise the slicing that was needed.

Above you can see I named each slice individually to correspond with what section of my website it was making it alot easier to work with and edit in Dreamweaver.

The site was then put it into Dreamweaver where the following was carried out:


As you can see in the screen shot above the navigation in my site is all linked up correctly + all the pages for my site have been created (seen in the folder). When creating the nav bar borders appeared around the buttons, to correct this I set the border settings to '0'.

I also aligned the website in the center by adding a auto margin + changing the position within the properties of '#Table_01'. Although I had the option of adding a coloured background I decided to give it a thick white border as it tended to grab the viewers attention much better.

To display my images I decided to install LightBox as it allows for an easy scroll through process for the viewer.

The first step was to gather some images I wanted to use and size them correctly - allowing them to fit on the screen easily. I also had to create a thumbnail size for each image.
The piece of coding below was supplied on the website and went within the <head> </head>.

Once I had the above in place I could start on linking my images to the scripts, this included inserting coding such as rel="lightbox" and [group] to group the images. These codes were placed within <body></body>.


The coding above allows the three images that can partially be seen on the right be shown in the the LightBox effect when clicked on.

As you can see below the coding worked bringing up the box complete with 'Next' + 'Close' buttons. I also inserted a caption/title for each image.

One the LightBox was all tested and confirmed as working I played around with the layout. Originally I was going to have the images in a block on the home page then within the 'Work' section have a summary of each piece. However, I didn't like how it looked so chose to have them running down the left hand side of each page then a brief summary of each on the 'Work' page. However all the images didn't fit and it tended to be quite cramped. For this reason I decided to put them on the Work page, centered in the middle.

Overall I'm extremely pleased with the outcome of the technical processes I faced. If I could improve one element it would be taking more pictures of work and adding them to the Work page.