Main Content

I added my main content underneath the slider in a white box. I layed the content out in three columns inside the main container. I made the headings dark grey in colour in font Arial Bold and font size 18 pixels and the main body of text in the same grey but not in bold and a font size of 11 pixels. I did this because I didn't want the main body of text to be too big or too small. So this is how I built the main content for my home page. In the first column I welcomed visitors to my site and wrote about my design background to date. Underneath this I added university work years 1 2 and 3 which would link to the relevant years work on the uni work page. In the second column I had a paragraph about me and then underneath this paragraph about my hobbies and interests in which I included links to other websites. In the final column I added my friends sites so visitors could have a look at their sites as well. I also added contact information so people couldcontact meand underneath this I added social network sites I am on with links to my pages. Below is a screenshot of the home page main content.

Home page content

On the uni work page I once again layed it out in three columns in the first column I listed all my work done in Year 1 with links to each piece of work. Then I would do the same for Year 2 and Year 3 when I was ready to add work to my portfolio site from those years. For the final column I left it the same as the home page final column. Below is a screenshot of the uni work content.

Uni work page content

On the about me page I decided not to use the three columns and just to have a left and right container. The left container would contain the text and the right container would contain the pics. I added in the left container text about me and my hobbies and interests with links to sites relevant to my hobbies and interests. Then in the right container I added images of me at running events and at Hull City matches. Below is a screenshot of the about me page content.

About me page content

So now I had my site layed out as I wanted it all I had to do now was create all the other pages ie the uni work pages so that is what I did. My next step is to compare my site to other portfolio sites.

Website

Once I had the corporate ID and background for my site I could start work on the site itself. I built my site in Adobe Dreamweaver using the skills I had learnt in Year 1. I used my corporate ID for the header of my site and added my email address toit. I made the header 760 pixels in width and 171 pixels in height underneath the header I addedthe navigation for the site. I coloured my navigation bar in the same orange I had used for my ID and header. I then added home, uni work and about me to the bar in white size 13 pixels verdana font. These would be my main navigation titles for my home, uni work and about me pages. I then added a hover to them so when the user hovers over the home title in the navigation bar the home button would be highlighted by a darker shade of orange. This would indicate to the user that they where on the home page of the site and the same thing would happen if they hovered over the uni work or about me button. Below is a screenshot of what I've talked about so far.

The above image shows the home button is highlighted so the user is on the home page.

Below the navigation I added a J Query image slider which I wanted to display my uni work, my previous graphics work and my hobbies and interests. So that is what I did for the home page I added slider for uni work, graphics work and then a slider to represent university with images of the interior of the Hull School of Art & Design. The next slider was of images of me in New York and New York landmarks, because as I've said before New York is my favourite travel destination. Then the final slider was a montage of images of me at Hull City matches and at the London Marathon. This is because running and watching Hull City are my favourite past times. Below are screenshots of the home page sliders.

Uni work slider

Graphics slider

University slider

New York slider

Hobbies and interests slider

Then for the uni work page I added sliders that only showed my uni work and for the about me page I just added still photos of me on the right hand side of the page. So I had the header and navigation done and the sliders added the next step was to add the content.

Corporate ID

The next step was to come up with a logo and identity for my site. I started off by drawing out ideas in my layout pad for a logo. I wanted a simple logo that would work in greyscale and colour when printed or on the web. From my drawings I came up with the logo below that I drew up in Illustrator. It's basically my initials C D joined together but I think it works as a logo.

My logo in greyscale and colour

The next step was to come up with a corporate ID. I decided I wanted to incorporate my logo into the design so I played about with the logo. In the end I came up with the ID below I enlarged the logo and extended the top half of the C in width and then cropped it. The image below shows the crop marks so you can see where I cropped it. I then added my name next to the enlarged logo and underneath my name I added Web Design in a larger font in orange and dark grey. After this I added a smaller version of my full logo in black. I am pleased with my corporate ID and it would look good in print and on the web.

My corporate ID in colour

Design

My first step was to come up with a design for my new look site. I wanted a site that would reflect my personality and hobbies and interests along with showcasing my talents as a Graphic Designer and Web Designer to prospective employers. After looking at other portfolio sites one in particular caught my eye it was by a freelance web designer who was based in London called David Tyler http://www.tylerwebdesign.co.uk. On his website he has a faded background of the London Skyline as his background. So after seeing this I decided I wanted to do something similar for my site. Below is a screenshot of David Tyler's website.

Instead of the London Skyline I wanted landmarks of Hull because that is where I live and study. I also decided I would like to incorporate the New York Skyline into my background as well. I chose New York because it is a place I have been too twice in recent years and its my favourite travel destination. So once I knew what I wanted in the background I began to draw them up using the pen tool in Adobe Illustrator. I did this by finding images of the landmarks I wanted in Google images and drawing around them with the pen tool. Then I coloured them in different shades of grey. For the New York landmarks I chose the Empire State Building, The Chrysler Building and the Flat Iron Building. Then for the Hull landmarks I chose The Deep, The Town Docks Museum and the KC Stadium. Below is my background:

CAT's Professional Target Report

Proposal

For my professional target report I am going to write about my own personal portfolio site. I will describe how I created it from start to finish with the obstacles I encountered along the way. I will then compare my finished site to other designers sites already out on the web. I will look at how they have showcased their work online and review what I think is good and bad about their sites. Then finally I will look into how I would go about promoting my website and myself to prospective employers in the future.