Just a few stills from the music video for ‘Stay With You’ by Lemon Jelly, designed by the ever beautiful Airside. I also believe it’s heavily influenced by a 2004 interactive Flash animation by world renowned Japanese web developer Yugo Nakamura called Borders.

Anyhoo here are a few stills to help illustrate what I’m aiming for in my own portfolio.

You’ve probably noticed that the last one is completely different, that’s because it is. It’s from the same DVD/ album and is called ‘Go’ (featuring vocals by the legendary William Shatner) and uses the same layering effect. Like the Stay With You video it also takes the viewer on a journey through vast landscapes and is quite powerful despite not much really happening – just a guy with different backgrounds walking from one end of the screen to the opposite side. Anyway, the point of layers is still there and it uses photos to generate texture and meaning.

The one day project really changed my perspective as to how to design my portfolio. The header I made was kind of nice and all but it had no context. The design that I’ll spend the next week over (as well as my essay) should be much better and add more coherence throughout the site. This is basically a note to say that that’s now what I’m up to and I’ll try and get proper hosting for this blog and get my .com back online =). Anyone know any cheap reliable hosting let me know, kay?

Tuesday has arrived and that means the One Day Project is upon me. The brief is basically to design a theme for my site whilst referring to at least one other site and another source, in my case a music video. Also, design a basic structure and then if I’ve got time to build a simple mockup in Photoshop.

Lead up to deciding on the music video looked like this:

After spending a good portion of yesterday looking at things that I like it suddenly struck me that Lemon Jelly’s ‘Stay With You’ video was possibly one of my favourite pieces of design ever. Designed by Airside it is amazing, I’ll post a YouTube link when I have time. So, I’m thinking of using that wave design and colour palette as a place to start. I also really like the art style found in Okami with the watercolour effect and texture so I could desaturate some of the colours and add that.

All sounds well and good but I need to find some sites that deal with a structure that I can use. I’ve been looking at some blogs that have the ‘Top 20 Best One-Page Portfolio Designs” and it’s intimidating to say the least! I think I’m best off at sticking with something quite simple for today… but where? Hopefully I’ll find something.

I was talking about the watercolour feature, you can see an example of this here. Online, Heiko Brömmelstrote has a nice example of texture in the background adding a bit of ‘reality’ making it feel less like a screen. An example I’ve just found showing what I mean by overlaying texture with colour and making them look right is nineliondesign.com.

I’ve just found a beautifully laid out site, Theatre Website. I like the fact that the navigation comes first (usability) but this doesn’t detract from the wonderful header design that then leads to the rest of the site. I think I can incorporate this sort of design with the idea that I have, I’ll draw some sketches and see what comes out of it.

Update at 12. The sketches have been sketched, I’m now grappling with a logo design. I like the idea of Jason Reed, simply using a stylised signature. This makes the site feel much more personal, adding a small profile picture would be good idea. I like one guy, Kino who had a Flash header with his own head interacting with what you click on, I could do a similar thing with an animated face of myself, simply looking around.

Logo Designs

13.30 I’ve got some sort of Photoshop sketch, I don’t like the fact that it’s black though and the header design isn’t how I imagined so I’ll change that at some point to what’s in my mind when I find out how! I also need to figure out fonts and colours, I know what to do just not how to do it yet! Photoshop tutorials ftw. I’m going to have the waves as a block of colour coming from the side so it will flow better with the rest of the web layout. I’d quite like a non-serif font contrary to what’s there already, something quite curvy too akin to Alex Coleman’s site.

Rough portfolio design

A very quick rough version in white:

White Design

I’ll add to this throughout the day as I find more.

Everything consolidated:

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!