Archive for the ‘Design’ Category

KillerLight theme released

KillerLight screenshot

My first WordPress theme, KillerLight, has been released on wordpress.org. The theme is a slightly altered version of the one used on here.

Like this site, it has a javascript-based animated header which fades slowly for a lovely faux-lighting effect. All current WordPress features are supported, including widgets and gravatars.

One important thing to note about the theme is that IE 6 is not supported – it’s just not worth the effort. Instead, a message is displayed to users of IE < 7 informing them that they should either upgrade or get a different browser.

KillerLight improvements

If you haven’t noticed already, I’ve made a few improvements to the KillerLight theme.

  • There is now a JavaScript-driven header animation, which has the ability to detect a slow computer and disable itself. You can turn it on and off manually with the button at the top-right.
  • A few more icons have been added here and there
  • The ‘read more’ link is now styled
  • The footer can expand vertically instead of being fixed height

I’ve taken a look at it in IE6, and it’s not as badly broken as I feared. At the moment the animated header screws things up royally, and the top horizontal navigation doesn’t display horizontally. I hope to at least get things looking reasonably presentable soon, by disabling the animated header for IE6 and changing the way the top nav is styled.

As for a future release of the theme, it’s all planned out in my head. A non-branded version of the header images will be included, so anyone can have that fading animation. The name of the blog will be overlayed in standard text.

I also have a few ideas for spin-off themes, which are a slightly different take (new graphics) on the same structure. Watch this space!

KillerLight screenshot

It’s been a long time coming, but I have finally produced my own design for this site.

KillerLight is based on the theme of ‘illumination’. I wanted it to give the impression that things have been illuminated by artificial means, and I looked to a few existing WordPress themes for an idea of what needed doing.

It’s taken about 3 days to put together, just in time for the new year. It was created using a mix of Photoshop, Eclipse (with PHPEclipse) and Notepad++ (for CSS editing). This is my first WordPress theme, and the first serious bit of web design I’ve done in a while.

I also did a little bit in Flash, attempting to have the header rainbow stuff animated and fading between different colours, but there were too many issues so I’ve put that idea on hold for the moment. You can view my attempt if you like by sticking the querystring ‘?animate=true’ on the end of the URL. I know that it doesn’t work in FF on Ubuntu, probably because the Flash player implementation for Linux is a little different.

I don’t have IE 6 at home, so I’ve not been able to test in that. However I assume it will be quite broken, so for anyone unfortunate enough to still be using < IE 7, they will be warned that things won’t look nice and be advised to upgrade or get a different browser. Seems to work fine in FF 3 and Safari (Windows) though.

This theme is not by any means perfect, and there’s plenty more work to do on some of the bits that aren’t commonly accessed. With that in mind, if you spot any issues, please report them in the comments of this post.

DUOS June 2008 poster design

The brief for this design for Durham University Orchestral Society was something that fitted in with Shostakovich’s Symphony No. 5, composed under the watch of the communist state in which he lived, whilst surreptitiously incorporating musical ‘messages’ that the outisde world could spot.

DUOS Poster for Shostakovich\'s 5th Symphony

Due to illness and a very busy period at work, the designs were a little rushed but I think they came out well in the end. It’s an adaptation of an original propaganda poster (if you hadn’t guessed).

Here are some initial interface wireframes for the iPod Touch remote control. I’ve not shown all of the menus because that would be quite a bit of work. These three should give you an idea of what I intend to do though.

Main menu

The main menu summarises the major systems of the house. Clicking on one of the buttons takes you to more controls for that system. The colour of the buttons indicate the overall state of the system – green = OK, yellow = warning, red = error, grey = disabled.

mockup-main-menu.png

Audio

The audio controls will list the 4 zones, with a drop-down menu next to each button to select the audio source. Clicking the large button switches the zone on or off. Pressing the ‘Use for all’ button copies the settings of the selected zone to all the other zones.

mockup-audio-menu.png

Security

The large buttons display a thumbnail of the live video from the cameras. Clicking on the large button will show the full video feed (resized to fit the iPod’s screen). Cameras can be disabled for privacy.

mockup-security.png

DUOS posters

DUOS approached me several months ago and asked me to produce a poster for a concert in Durham Cathedral. Apparently they liked it so much that they’ve come back and asked me to do 2 more for some concerts in December :) I’m not a professional designer, but it’s nice to have a go at designing something that’s not a website.

The first poster:

DUOS Poster - 17th June 2007

This design was based around the theme of the main piece of the concert – death’s fiddle striking up.

First design for concert on 1st December:

DUOS Poster - 1st December 2007 (Version 1)

This one was inspired by the only reasonable artwork I could find for one of the pieces. The original was landscape, so I had to take some liberties with Photoshop and apply it over the top of a photo. While the result was ok, it wasn’t particularly easy to read and was very busy. This design was dropped in favour of the one below.

Second design for concert on 1st December:

DUOS Poster - 1st December 2007 (Version 2)

Much simpler, going back to the violin cliché. It does the job.

Poster for concert on 6th December:

DUOS Poster - 9th December 2007
This one was inspired by a tutorial, although I didnt follow it to the letter. I’m afraid I can’t lay my hands on the link at the moment, but I StumbleUpon’d it, so click that Stumble button a few times and you might find it!