Hello there,

My site’s taking form nicely. I’ve decided to construct it in HTML 5, the reasons being 1. It shows I’m up with web trends, most modern browsers can render the basic tags I’m using. 2. I want to push both people and browsers to supporting the new standard rather than waiting for 2020 or whenever the W3C believes it’s going to become the de facto. Get in touch if you think that this is a good or bad move. So far all the pages validate apart from the main page because it uses Dreamweaver’s built-in script for the rollover image, I’m sure there are alternatives though so I’ll research that. Interestingly, (for me anyway) I’m still using Espresso as my main editor, I guess mainly because of the really easy FTP access it gives and Quick Upload on save. The fact that it’s so much nicer looking, quicker, and better organised than Dreamweaver, I just wish it had better lazy code writing like Adobe’s beast but it’s a small sacrifice to make tbh.

I’ve got a nice contact form that uses PHP and has basic JavaScript validation with the help of Kirupa and a few Google searches. It’s been quite fun building that portion and learning some PHP and how it works, same with JavaScript, I’ve never managed to get into it and understand it but the more I spend in it’s company the more it’s starting to make sense. Most of the pages now have content and are coming along nicely, a couple of images to spruce things up. Also there’s a custom error page that I’m rather fond of but definitely not the best out there.

I’m still not happy with the design; I can’t get it to look how I want it to be. The only cure is more hours on Photoshop but already I’m tiring of it =p.

The next things for me to do are: complete and upload my CV, build a site map,  build a WordPress theme to make this blog consistent with the site and get the design and colour schemes right.

A couple of days before I received the One Day Project brief I had, coincidentally, started working on my page structure and header design for my own portfolio. I’ll take you through the steps that brought me to my current design but with the new brief, I’ll probably scrap this design and start afresh but we’ll see.

Firstly, I drafted and brainstormed what I believe would constitute ‘me’ on the web. You can see these below:

From this, I decided that it should be personal, but in an almost non-identifiable way. So I took a fairly low quality picture of myself with iSight and used the Cutout filter in Photoshop to stylise it – giving it that slightly more anonymous feel. I then used the smudge tool to give the header some more fluidity.

First draft of my header design

The font used is Garamond with -75 tracking so it’s all quite close together. I used Garamond in this simply because it’s my favourite font and, hopefully, adds to a more ‘professional’ feel. The red and blue used I liked because of its simplicity. I keep thinking of the ‘Marley & Me’ logo, (not that I’ve ever seen the film, mind) although I just looked at it on iMDB and they don’t share much resemblance so it must be the Marley & Me logo in my mind.

As you can see though, the colours look atrocious and ugly, far too brown and not the kind of image that I want to show to prospective employers. I think it would also be hard to design a whole site with that kind of swatch so, as you’ll see in the next design I lighten it. The smudging I don’t think works particularly well either and I’m left with the problem that when viewed online it will look like a box because of the lack of fading and block colours.

Second header with lighter image

I quite liked the fact that the background seemed to be coming out of my head in the first one, like ideas. So I’ve tried to keep the same sort of thing going in the second one by adding the words ‘Graphic’ and ‘Web’. The overlay circle is quite nice because it lightens the colours and gives me something a bit nicer to work on in terms of a swatch. Circles are also representative of protectiveness as well as being quite dynamic. As Mark Shufflebottom said, they’re good to use on the web because it breaks out of the grid in a kind of Dadaist way, mainly because they’re quite a bit harder to setup and look good!

In this one I’ve also extended the image to include my hand holding my mouth (yes, that is what it is). Unfortunately, the image still doesn’t flow well with the page. So I resolved to fix this in the next design by adding… lines!

Third header revision, now including lines.

In this design the thick lines have been added to be quite bold and give some structure as to where and how to read the image. I also added the word ‘Games’ to give a third addition to my repertoire but I don’t think we cover any of that until the second year but no harm in putting it in now. However, when I imported this design into my rough HTML structure the thick black lines obscured the menu and was too low down so…

Fourth revision with cutoff head

My final design so far now is cutoff below the line, taking out those hands and mouth once again like the initial design. Because of this you also get a semi-circle which I think are quite fun looking. The colours for the words are all colours from the face as well. I am quite happy with this design there are just a few things that I know I can improve upon. These are:

1. The font colours simply don’t look right, they look nice enough but I don’t think they work when coupled with the face image. I think I need a more ‘block’ like font to match the lines.

2. The browns, although lighter, are still brown. I could completely change the hue to something quite exotic or use shades of grey to make it monochromatic, I’ll play around in Photoshop after this post and some lunch to see what looks good and update from there.

Apart from that, I’ll add some other ideas and perhaps go down a different route as I seem to be slightly ahead and, at the moment at least, have the advantage of time, which I haven’t had since I started this course it feels!