Archive for December, 2011

Beijing Bandits – 15th December 2001

Our first show with a full lineup.

Saturday, December 17th, 2011 General CSM, Stuff I've Done No Comments

Website design

Before designing any website, it’s imperative to have a clear idea of the function of the site before any actual design begins. Form must follow function (the exception being where the form is the function, but that must still be acknowledged before design begins). If this is not followed, the design will not suit the intent of the site, and the desired result will not be achieved. I have made my site to support the work I do making music for animation. I would also like to use it to get into installation art Collaborations. To this aim, it will function as an online portfolio of my work, it’s primary function as a sort of glorified business card, to show what I do and provide my contact details, and it’s secondary function as a method of introduction to my work through search engines etc.

Most websites for soundtrack composers are very neutral in their design, but as I have a clear aesthetic I am aiming for in my work I have decided to buck the trend and really make that aesthetic clear in this website.

Having a background in both Graphic Design and Computing (A levels in both), I could take either of the routes generally taken in web design – graphic first, or tech first – which path I took would be affected by my initial ideas. Because I had these skills, I decided I’d throw myself fully into this project, and fully design the graphics, html/php and css myself. I created this blog on wordpress.com initially, and wasn’t going to integrate it with my main site as I wanted to create the site outside of wordpress or any other blogging software, though I change my mind about this later on.

I initially collected together inspiration from a variety of sources to form a loose sort of mood board

I’d say that the biggest influence of these was The Night Circus, a book I had read a couple of weeks before starting my website before starting my website. This book – featuring a strong black and white circus visual aesthetic, and patches of red being a recurring theme – inspired my colour scheme greatly.

The towering tents are striped in white and black, no golds and crimsons to be seen. A black sign painted in white letters hangs upon the gates.

“Opens at Nightfall. Closes at Dawn.”

Though I have used a lot more muted greys than the Night Circus’ stark black and white.

I considered at this point creating an interactive site, going as far as doing a page or 2 of concept sketches, as I thought it would be the best way to convey the sense of mystery and wonder that I was trying to create. While I would have liked to do this, time constraints meant that it wouldn’t have been very feasible, given that I haven’t done any work on interactive web platforms for around 4 years. (I used to be quite experienced with Flash, back when Macromedia owned it.) Retrospectively I made the right decision in dropping this idea, as even my skills with php/css had deteriorated a surprising amount in the last couple of years.

After another session of aesthetic concept sketches, I settled on a couple of particular image I wanted my site to be built around – me, hung upside down from a rope, playing a piano below me. Initially I looked into actually staging a photo, but equipment restraints prevented this, so I instead opted for Photoshop, where I made this mock-up composite image:

I then decided to recreate this image in a style which mimicked some of the style of early 1900s adverts to fit with the vaudevillian theme and ended up with the image that was finally used on the site.

After sketching out different layouts for the site, I settled on this one as it is very intuitive to browse, so I made a grid layout in a graphics program and designed graphics for the site to match that grid.

After writing the necessary html and css to put the site together [First Site Draft], I realised that I would need to change the way the site worked in order to allow a fluid change of length, so I went back, changed the graphics, and restructured the site to look the same, but allow restructuring of the length. [Second Site Draft]

I thought of adding different effects into the design at this point, like a loading system that fades text out, smoothly resizes the content div (and graphics accordingly), then fades the new text in; or a parallax scrolling effect on the background image to give an illusion of 3D depth. While I am fairly confident I could create these effects (I even half figured out the fading one), they would rely heavily on JavaScript, which I would rather not use for compatibility reasons, and generally decrease cross browser compatibility. To make them work properly in a good range of browsers would require more time than I have in this project.

At this point I installed WordPress.org onto the server space I had bought, and started moving this blog across to it, however, partway through this process I made a decision that I would use wordpress as content management for my main site, provided I could transfer the design I had over to it with no significant visual changes, as it does make changing content massively easier and I had a much higher chance of keeping the site up to date and relevant if it was easy to edit.

I then spent hours and hours and hours of work converting the site to be a functional wordpress theme – eventually making it a child theme of the Hybrid theme that Marc suggested, though hacked about to the point of having only the very core mechanics of the theme left, and the rest re-written to suit my design.

I then spent a few more days adapting my design to allow the blog to use the same theme – with an added menu for the blog, again fully controllable from within the wordpress control panel.

The current design works in the vast majority of common browsers, showing some cosmetic issues though with content still readable and usable in some versions of dillo and in IE6, and being unusable in most other versions of dillo, epiphany, and very early versions of safari and firefox on windows (fine beyond 4.0 and 2.0 respectively).

If I continue to develop this site, or my general web presence beyond the time constraints of this project, I would consider adding the following:

  • A ‘catagories’ menu for the blog section.
  • A search box for the blog section.
  • Better written content, as the content on the main section of the site was quite hastily written.
  • More portfolio work.
  • The rope to the right of the content being looped with some clever use of css, rather than just being pretty long, and thus removing the current problem of the length of the site being restricted to a specific maximum
  • Make the site work in goddamn Internet Explorer 6, as this is the only high profile browser it has issues in.

I would also like to experiment with flash (or html5, or similar interactive web platform) to create some music toys, and maybe a more immersive site, with a less obvious agenda, that users can explore to discover different areas of what I do. I think this design concept would suite my work on a whole better, as I do tend to do a large number of very varied projects, though would be less good maybe for the facet of my work that I have dealt with in this project – music for animation and installation.

Sunday, December 11th, 2011 Networking Music, Stuff I've Done, Uni No Comments

GloPe – Control Methods (Video)

We discussed other methods of control for the music, including floor mats, flash cards and having a conductor.

We then experimented with me acting as a conductor.

Thursday, December 1st, 2011 Global Perspectives, Stuff I've Done, Uni No Comments