Final Site

Final Layout


Homepage

I am very happy with how my home page turned out because it looks exactly how I designed it as well as all of the interactive rollover features working well. I think it is effective at having all of my work in one place as well as the extra information given by the rollover and it gets more work across in a clear and concise way, with the option of finding out more by clicking on the image. I think the nav bar is clear and simple to use and the roll over effect makes it more interactive and user friendly as it is clear to the user which part they will be linked to when they click. I think the simple colour scheme works well because it compliments the images without overpowering them.

Portfolio Pages

I think my portfolio pages are effective because they all follow a uniform style and look cohesive with each other. The simple box layout with the images gets the information across clearly, and using the same font as my navbar kept them all coherent with the rest of my site. Using the same colour scheme for the boxes as I used in the rest of my site again make it all look coherent, as well as the fact that it keeps it simple against all the colour in the images and stops the pages looking too cluttered or colourful.

About Page


I think my about page is effective because the simple icons get across the information quickly and clearly without the user having to read big paragraphs of text. The software icons are easily recognisable because of the font and colour schemes I used, and having the skills match the site colour scheme stop the page looking too cluttered and overwhelmed with colour.

Contact Page

I think my contact page is effective because it is simple and clear as I kept text to a minimum and arranged it clearly within the boxes. It is also interactive with the user as they can use the text forms and click on the email and phone buttons. The form is fully working and can be filled in and sent off by the user. Using the same colour scheme stopped it from looking overcomplicated and kept the page looking clean and cohesive with the rest of the site.

Evaluation

Overall I am very happy with how this site turned out and I think it looks very effective and at a professional standard. I took on board things that I found in my research and kept the colour scheme and font consistent and the layout clear and simple throughout. I think it is all very coherent because I did all of the pages in the same basic style and didn't stray from my colour scheme or boxed in theme. I think the interactive elements are also very effective and the rollovers helped me to condense the information on my home page by having the text on a rollover over the images. Having a rollover nav bar also helped the site become more interactive with the user and made it simpler to understand as it is clear for the user about where that link will take them. I also think having a working form is an effective addition to the site because again it increases interactivity with the user and improves contact because the user can send message straight from the site instead of having to go into their own email accounts. I think the site displays my work effectively because I managed to place everything on the homepage so as soon as the user visits the site they can see my full range of work, as well as easily find out more about it if wanted by clicking on the image. 

Site Development

Homepage

I started of by creating a div and filling in with colour to make the header for my page.

I then added in my name as an image and placed it into a div over the colour background.

Next I added in the nav bar as separate images for each section so that they could all be linked to separate pages.

Finally I added in the social media buttons, again as separate images so that I could link them separately.

The space header bar is all a little close together and there is a lot of empty space so I will move it all along to lengthen the site.

I moved them along so that the space is evenly distributed.

Next I added in the search bar and text. I did this as images because a working search bar would have required a lot of extra coding for it to work and this wasn't necessary for this site.

I then began to add in the images. To do this I made separate divs for each because I wanted to add rollovers on top of each of the images.

I created all of the images as rollover images which allowed me to add the text description as a layer on top that appears when the mouse moves over the image.

I then added in the rest of the photos but I found they were too big for the current page size so it will have to be extended.

I extended the size of the page so that I could fit all of my images in without having to go through and resize them all as this would have been very time consuming and I would no longer have been able to fit four in a row.

I added in rollovers to each of the images as with the first one.

I wanted the navbar to have a white text rollover to make it clearer for the user that these were clickable, so I used the rollover image function to add the same image in whit over the top.

This made the text change colour when the mouse rolls over it which I think makes the site clearer to use and more interactive with the user.

Work Pages

I used the same basic template as on the home page with the rollover navbar and links, and added in divs for the text and images that I had designed in illustrator. I decided to add the text in as an image so that I could keep my font and keep all the text on my site cohesive with the nav bar because if I had typed it all in to dreamweaver the font would be changed for anyone that doesn't already have it on their system.

About 

I added in the text and icons I designed in illustrator using divs. As with the portfolio pages, I chose to add the text in as images so that my font would show on all devices. 

Contact

First I added in the basic images that I had designed on illustrator using divs. I wanted the text form to actually work and for the user to be able to type into it so I worked on that next.

When I initially added in the text it had a drop shadow outline to it and I wanted the box I had previously drew to be the container for the text so I had to work out a way to delete this.

I edited the CSS by changing the border to 'no border' and this solved the problem.

The text is now fully editable and can be typed in by the user when they click in either of the text boxes.

I then did the same for the message part of the form and extended it to fit the entire box my increasing the height and width of the text form.

I wanted to create a working send button so that the text disappeared and was sent off when it was clicked and found this wasn't possible with the image button I had created so I settled for having a working button made by dreamweaver over having the one I had designed in my font. The entire form of text now disappears when it is clicked which is the 'sent' effect I wanted to create. I also chose to add in a message within the box to make it clearer that text can be added in the box. I made it so that the message appears every time the page is loaded, but it is erasable if the users wishes to replace it with their own message.

I then added in my icons for the emails and phone numbers. I decided that I wanted another interactive element on the page so I decided to make them rollover buttons. This would also make it clearer to the user that these are clickable which makes the site easier to understand and would show the user that clicking them would take them to a new email or to call the phone number.

I chose to invert the colours on rollover, so that when hovered over the black and white colours switch over. I did this by adding it in as a rollover image and creating the two images as separate layers.