Final Edit of 'Dog'

Here's my final edit for 'Dog'

Finito!

Here's my completed homepage:

About Me page:

Portfolio page:

Social networking, alt tags and linking to my online marketplace

As social networking is a key aspect of marketing i thought it imperitive that i link the site to my facebook and newly formed twitter account, something i did specially to link to the site and add another avenue for marketing and communication, when needed. These links are shown at the footer of each page, this way visitors can easily view/contact me through my facebook and twitter. I used the same photo of myself for my twitter as is on my hompage so it is obvious straight away to any visitors that they have come to the right place.

I added alt tags so that different aspects of the page are named when you hover your mouse over them. This will be helpful for relevant content if and when i come to optimise the site for google in future. According to the tutorials i used to help me build the site inserting alt tags is also considered 'good practice'.

Finally, as i already have an online marketplace (www.part-x.co.uk) i thought it would make sense to link both my personal portfolio and this site, and make it obvious they are owned by the same person. I have a link both on the home and portfolio page which can direct users to partx. This is to ensure i capitalise on all visitors to my portfolio in terms of marketing my online marketplace. It also shows potential employers that i have skills in aspects of business and marketing as well as the film aspect of my resume.

Google Maps

I wanted to integrate my website with google maps, primarily to make my site, and thus my image, more competitive in the short term. However i believe if i was to ever do free lance work in the future this would be beneficial for clients or anyone else wanting to find me. Although for the time being the address is set to my term time flat this can be easily changed to whatever premisis i decide to work from in future.

I found some open source code for both the enquiry form and google maps integration which was relatively simple to copy and paste into my page.

Open Source Code

I found a few different types of open source code which i could use to make my site a little more interactive, as this would serve as my professional site for the forseeable future i wanted to create a site good enough to create a positive first impression of my work, potentially for employers to use to gain an insight into what skills i have to offer.

I searched on google for a rotating banner so that the picture of me, which i photoshoped on to a brick wall earlier, would rotate continuously. This would give a sense of interactivity and allow the hompage to avoid looking static and stale. I found some code called jquery that would do the job so i inserted this into my CSS using the demo.

Lightboxes

As i mentioned before i could have embedded my portfolio videos, or just made each video open in a new window, however i decided against this in order to continue with the clean minimal theme of the site. Instead i used lighboxes so when the screen shot of my worked is clicked on the video opens up in a centred, small window while the rest of the screen goes black.

In order to achieve this i used a lightbox called 'prettyphoto. This was simple to insert with their documentation and you can easily play youtube and vimeo video which was perfect for the nature of the work i wanted to present. Below is a link to what I used: http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

The hard part-Divs and CSS code...

Once i had found my imagery and general theme for my site i went on to set up the divs, containatives and then the CSS code to instruct and route the divs. This was an arduous task and had me regularly confused, unable to work out why the site was not following the instructions i set out in the code. However after what has seemed like a very long time my about, portfolio and homepage are all done, which just leaves the contact page to complete.

I have kept the file structure as simple as possible keeping all html pages in the root folder and images, css in another folder.

Previous to setting up the divs and CSS i took screen shots of my two short films in order to resize and use later as i want to set up lightboxes for both of my videos, rather than just embedding a link.

Homepage banner?

I wanted to personalise my site with a banner, so I found an image of a brick wall, similar to banksy and photoshopped a photo of me. I used the pen tool to cut me out. For the fonts, I went to dafont.com and found a graffiti style I wanted to use.

Theme...

Somethign which i plan to express in my about section is the type of work i admire, and aspire to become involved with in the future, all raw true life stories, often documenting the darker side of life. Because of this i wanted to make the feel and look of my site relevant to the type of work i hope to document in the future, giving the viewer an all encorporating experience when they visit the site.

After giving this idea some thought i decided upon a graffiti font style and background. A film/documentary that i admire is Exit Through The Gift Shop, a Banksy production. I wanted to give this sort of graffit/street art feel to the site so i googled some banksy imagery.

Once i found a good enough quality image i kept it to use as a background later.

Wireframes

Once i had chosen a rough sketch version it was time to create wireframes to work to. After some thought i realised that 4 pages would be neccessary to contain all the content i would need for my portfolio, i am building this with a view to using it in future as a platform to document my work and reference point for any potential employers in future. This was one of the reasons i decided to familiarise myself with the process, what's the point in paying someone else to create something you can learn to do perfectly well on your own!

I decided i would need an about, contact, portfolio and homepage to display my work and personality effectively. Here are my wireframes:

Sketching out designs

The first step i took towards creating my online portfolio was to do some rough sketches of how i wanted my site to look.

I sketched out two alternatives and chose which one i liked the most

I ultimately decided upon version 1 as i prefered the central top logo(my name) and felt that it looked cleaner, something i believe is essential to a good website as unecessary images and text can make it seem cluttered.

Interactive Space:My Portfolio

It's been a while since my last post as I've been pretty bogged down with creating this online portfolio for myself. When doing my first interactive space for design practice 1 i realised firstly how difficult code and html seemed initially, secondly how easy it could be if the right amount of time and effort was spent learning it and thridly how useful this skill could be to me in future.

Bearing this in mind i decided to use my time over the easter break to emerse myself in tutorials and books to crack css. Although at first it was an uphill struggle i found that things started to click in my mind far more quickly than i had expected.