design practice: Web design brief

After creating all the pages and their links, the next step was to create the appropriate pages to correspond to the tag lines.

Once I had created all the pages for the separate services of the company

i then wanted to create a small blurb that would explain each service in a very

generalized way. again adding to the function of the website, and the overall image.

It just adds another quality to the page.

__________________________________________________________________________________

The next stage was to create the services page, I wanted to create sub-pages within this so that the viewer could navigate quite easily to the website that they wanted it. I did this by creating more .html pages and linking them in the exact same way as i had done for the previous roll over buttons.

I then placed the image within the banner space. I think

this does look really sophisticated and professional which was

my main aim. I am really happy with how it looks.

Then I wanted to create a banner image that would sit along the

top of the website, this was so it would add another

visual quality to the page in an interesting way and guide the eye.

I am really happy with my colour choices because they are very

vibrant compared to the whole page so they really stand out

and attract the eye. And by colour coding them this way it

helps the functionality of the website. Very clear and simple was the

main aim.

Once i had worked out how to link the pages and get them working

i then decided to look to create the individual buttons for each section. I

wanted to colour code them so they would stand out and it would

be a little bit more colour on the page. Using the colour palette i had already

chosen i broke down the individual sections and changed the hue to represent

different services.

On this page i chose some of the images i had taken from websites i liked

and then using a grid format i placed them in. I wanted to have emphasis

on different areas so that they could be clearly seen. I didn't want to bombard the

viewer with loads of images because theres quite a lot of services.

The first button i created was very basic, I just wanted to get

the functionality of it right before i even tried to put the page together.

Once i had created the button i then linked it to its relevant .html page.

__________________________________________________________________________________

The next stage was to create the contacts page that would hold all the information about the individual designers and their contact details. As well as a map and the address and contact numbers for the company. I also wanted to include a little blurb that would have a little bit of additional information about contacting the designers etc.

I am happy with this layout because it is all clear and works

really well as a grid, everything is lined up really well.

I created the full page layout in photoshop, I wanted to see whether

it was possible to create the whole page and then insert it into the page

so that it would sit exactly where i wanted it to.

Below are all the images i decided to use for each person, I wanted to get images that would have a little bit of character to them, just so that they were a little more personable.

__________________________________________________________________________________

Here I was creating the about page. I wanted a general overview of the companies policy and personal aims to help their clients. One of the main things we promoted in our presentation was working closely with clients, so I wanted to make that very clear in the blurb about the company.

Once i had created the text i then went into photoshop to

create the appropriate body copy in the appropriate text.

Having already decided that I would split the boxes so

that there would be split text, i needed to mark out the size

of the box in relation to the text I would be adding, just so I

had some dimensions to work from when I went into photoshop.

With this code i was trying to work out how to add the

lightbox2. Which we were told would be quite easy.

I eventually gave up on it after following several tutorials on

youtube and my own notes. There was probably something really

easy that I had missed but i couldn't work it out. So I decided to use

another banner image to have on the page instead.

__________________________________________________________________________________

Now that i had created all my templates and had linked up all my pages I could start designing. I decided to take a lot of the mage i would use from professional websites that I had been looking at to go study for my placement. This way i new the work was of a high quality and it would interest me. Also the variety of companies that i looked at would have a variety of work that i could showcase on my website.

Here i am creating the image for the home page. As i had outlined in my sketches and templates for this website, I wanted a large image that would act as a banner to go across it so that immediately it would grab your attention.

I then went into photoshop can created the text i wanted

and transfered it onto the website. I am happy with this layout

because it grabs your attention straight away and the text just adds to it.

In order to test how large i could have the text i mapped out

what i wanted to say before i went into photoshop and then

created the image type to place in.

After taking the image i just placed it quite easily into the box,

because i had already cropped it, it slotted in perfectly.

I began by splitting the main editable space into a table

that was broken into two rows, one for the image and the other

for the text.

_________________________________________________________________________________

I had to create a template to then create the rest of my pages from it, breaking it down into .dwt and then 4 more .html pages that would hold the other information.