blog

Some thoughts on life

November 16th, 2009 by Tim

Maybe it’s because it’s 2AM, maybe it’s because I’ve just spent the last two hours listening to Autechre and Squarepusher or maybe it’s because I’ve been reading Web.Studies, more then likely is it’s a mix of all of them and more. But I’ve come to the temporary conclusion that there is nothing of us.

I’ll try to explain what I’m trying to think. From Bill Bryson’s A Short History of Nearly Everything to McKee and his Textual Analysis book and the more I read about post-structuralism. It’s just another theory that radically goes against the previous theory (structuralism and its ilk). Then someone in a century or more or less will say something else plausible and academic thought will shift that way.

It makes sense then, looking at it from afar and above, that there is no thought. No tangible way of being. I feel this should shock me but it’s like the Lemon Jelly song, Page One from ‘lemonjelly.ky’ (you can tell I like them, can’t you?)

Imagine if you can what it is like to have no possessions at all, nothing. Very few people are able to imagine such a thing, to have nothing at all. Well let us, you and I, try to imagine something a hundred times harder, not just to have nothing at all, but when there was nothing at all. The very beginning of time, the dawn of history, page one. Nothing at all. The earth itself without form, a void. Only an emptiness, formless, a dark endless waste of water. No living thing, no plant or tree no bird or animal. Nothing. This is before people; before anything at all. A void, sitting silent, still. And then.

Nothing.

Same applies for human thought, there’s no connecting factor with how we are or think. There’s progress and then nothing comes of it, or at least that’s how the song seems.

Well that’s it for the time being.

Some reflections on the site so far

November 15th, 2009 by Tim

I believe the site’s took taken shape (thank you Julia) and is fully working. If anyone finds any usability bugs please do get in touch, though.

Things I have learnt in the last couple of weeks:

  • Some basic PHP
  • Some basic Javascript
  • How nice (so far) Dreamhost are, even if they do keep trying to sell me a private server.
  • The loveliness and forgiving nature of HTML 5
  • How the best designs in Photoshop are the accidental ones
  • That I actually find it easier to hand code than use Dreamweaver and go through its menus.
  • The importance of typography
  • The importance of accessibility
  • How WordPress works and how to customise templates.

It’s been pretty fun designing this from the ground up and getting back to grips with it all. Everything validates at HTML  5 and CSS 3 apart from my  blog, but I’m working on that. It has two errors because of inline CSS when a gallery is implemented but I’m not sure how much I can influence that or if it’s just WordPress, anyone got any ideas?

I still have to make the kerning on the titles look more natural, they’re all set to a kern of -75 but because of the nature of the waves it makes some letters look much closer to each other so I’ll have the fun task of typing each letter into it’s own layer and aligning them tomorrow!

Showcasing Work

November 6th, 2009 by Tim

It seems that in designing this site I have overlooked one crucial aspect. Actually showcasing my work in a good way. The way it is now I could have a maximum of four projects before it started to look bad and I’d need a scrollable div. Not the end of the world I’m sure but there are better solutions out there and I want to find them. So that’s today’s task, make a cup of tea and think, design, implement. All from 12.40, I need to stop going to bed so late!

Site Criticisms

November 3rd, 2009 by Tim

I can’t help it, I’m really not liking the site as it’s turning out so I’m going to propose some changes. Leave a comment if you agree/ disagree with any of my suggestions.

  1. It looks unbelievably amateurish, probably because it is.
  2. The silly bubble things don’t really make sense.
  3. The header is ugly and hard to integrate into a good site design.
  4. Meh.

On the plus side, apart from the nav element, it looks relatively consistent across ~50 browsers although I’ve had a few complaints about screen issues which hopefully will go away with the redesign anyway. So I’m going back to my visual diary and going to kinda start again. Here’s hoping.

Update at 8.50pm: I’ve had a change of heart, I’m going to give my design one more chance and build it from scratch (again) but this time with a couple of ideas I picked up from brainstorming a separate site. I’ll post the results up here after I’ve returned some films and bought some milk!

Site Progress

November 1st, 2009 by Tim

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.

Lemon Jelly – Stay With You

October 30th, 2009 by Tim

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.

Changes to Portfolio

October 23rd, 2009 by Tim

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?

One Day Project

October 20th, 2009 by Tim

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:

initial concepts

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.

Structure

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

Logo Designs

Structure and Design

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

Rough portfolio design

A very quick rough version in white:

White Design

White Design

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

Everything consolidated:

Header Design for Portfolio

October 16th, 2009 by Tim

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

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

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.

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

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!