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.

Template

Next I created the template for the design of my website on illustrator.

Home Page

I decided I wanted to make a grid of images as my main home page with the nav bar along the top. I created a grid for a size guide so I could accurately lay in my images. I chose a simple sans serif font for my logo to make it clear and bold and legible.

Next I started to lay in the images. I cropped the images to fit into the shapes, but this won't matter because they user will be able to click through to a separate page if they want to see the full image.

This is the site with all the images layer in. I think this grid of images looks effective because it displays a wide range of my work in a small space so that users can immediately see my entire portfolio and if they want more information they will be able to get it by clicking on an image.

Next I added in the links on the nav bar. I decided to have three pages - portfolio (home), about, and contact. I also added in two social media links, and I made these into a similar style to the rest of the page by outlining them and keeping them in black and white. I underlined the text to give the links more impact. I also added a bar in the bottom to add in any extra things I would like to be on every page of the site as this will be something that doesn't change along with my nav bar.

I decided to add a search bar onto the footer because I didn't want to clutter the top and this is something id like to be available on every page. I created it in a similar black and white boxed in style to the rest of the site and used the same font for continuity and it's clear and has good legibility.

I wanted to add some more colour to the site to give it more warmth and personality so I chose this peach colour as it is subtle and compliments the images without overshadowing them.

I experimented with having all of the backgrounds peach for the icons and the search bar but I decided this was too much and they get a bit lost in the background and stand out less.

I changed the backgrounds back to white and I think this is a lot more effective because they now stand out more because they have a bold contrast. It also helps break up the peach a little so that it is easier on the eye and doesn't drown the website.

I wanted to have a hover overlay on my images so that the user could get the name and a brief description about each project without having to click through to each individual page if they only want an overview.

I used the same typeface for continuity and because it is clear and very legible.

I tried a couple of arrows  but decided just to leave it in the end because although I thought this might make it clear to click through to another page it became quite cluttered and I think the dots are enough to show the text continues to another page when clicked on.

I then added in a white hover over the page links to add more interactivity for the user and clearly show the page they are on.


In-depth Portfolio Pages

Next I created the individual portfolio pages. I wanted to add these so that the user could see a more in depth explanation of each piece of work as well as full size and additional images. I experimented with various colour and stroke combinations to try and find the most effective.

Although I like this I think there is now too much peach on the page and the contrasts between white and peach is not very strong so there may be legibility issues.

I then made the text black to improve the contrast and added black outlines to break up the peach. I think this is better than the previous design but there is still too much peach and the peach and black is the same as the nav bar and this makes everything look too similar.

I then tried this in white combat it looking too much like the nav bar but again this just isn't a bold enough contrast and legibility is slightly lost.

I then went for a peach outline and black text. I think this looks very effective because the outline links it in with the rest of the site and the black text has a very high contrast against the white background so is very clear and legible. I tried a large title at first but because the text on the rest of the page has been kept small I think this is too overpowering and doesn't blend with the rest of the site.

I decided to box it in using the same styling as the box below but just bolded the title to make it clear and stand out against the body text. It think this looks really effective because it flows well with the rest of the page and is very clear and legible.

I then repeated this layout for the rest of the pages to keep continuity.

This project has multiple images so will need to be a slideshow. I represented this on the template by showing the additional images below the main one.

About Page

For my contact page I would like to make a working form where the user can type their details into  a form and press send to send it off. I also chose to add in icons to go along with the email and phone number to add some images to the page. I did the text and boxes in the same style as the rest of the site to keep a cohesive style and design.

Contact Page

I chose to make my about page icon based and represented each category or piece of software with an icon. I matched the software icons with the same colour scheme that the actual program icons used and tried to music the fonts to make them easily recognisable so that extra text wasn't necessary. I chose to use text instead of images for the skills as some of them would be hard to put into images and may not be easy for everyone to understand. I kept them in circles to be in keeping with the style of the software icons. I chose to use the same colour scheme as my site for these to add some continuity and not clutter the page and make it too overpowering as the software icons are already very colourful.