Design Complete – Band Website

by . Originally posted

Ok so last week I set myself the challenge to design a metal band’s website with the single reason of getting my learners cap on, sitting down and forcing myself to work on it. It was all for a fictional client, so the pay cheque is equally as fictional, but the experience was worth it.

I’m rather pleased with the outcome, although I struggled at times to keep the grunge style without compromising the clean(ish) look to the design.

I’m particularly happy with the left hand side, “doors open in” component. I feel the clock is clear and helps draw the eye to information without being a mass of text.

The text logo came out surprisingly nice, especially as I’ve done even less logo design than web design 🙂 The font used in this logo is then carried through the site to help maintain a sense of identity and a uniform look. As a @font-face text font, it could quite easily be used on a site without the need for image-text replacements, so it’d still be readable by search engines and screen readers.

Death by Sushi - Band Website

Death by Sushi, a band website (Click to enlarge)

The footer section needs a bit more work, although I would have stayed away from a complex footer you see on many sites. However I stuck to my plan and marked this design ‘finished’ as my week limit was coming to an end.

The whole point of this exercise (and hopefully many more to follow), is to improve my design skills through work and feedback, so I’d really appreciate all constructive feedback I get.

Hope you liked it

 

Like this article?

Categories: Computing, Web Design

Tags: , , ,

5 Comments

  • Ross says:

    Mostly very good. Now…I definitely couldn’t do a design like that so I feel bad commenting on it. While I don’t MAKE designs, I do feel I can give useful suggestions about designs that I do see. So…a few suggestions follow, but these are really minor and possibly things you thought about but chose to do differently for some reason, or maybe you just ran out of time?:
    – Possibly a slight accessibility issue with black-on-dark-red text
    – From a UX/conversion point of view, could you put the signup form on the page, rather than linking to it?
    – Include an embedded music player?
    – Include titles in the band news articles
    – One of my pet peeves at the mo – and something I’m guilty of doing too – but the big image at the top takes up a lot of room and doesn’t serve a whole load of purpose. Perhaps if the image was narrower, you could move the calls to action up and have more information “above the fold”? I’m still working this out. Images are really important in design but how, with the variety of screen sizes in use, can we make them, and the space around them, functional, whilst preserving the “space” that they give on a page and not generating too much textual clutter. A real design challenge!
    – Information-wise, I’d probably like to see some tour dates on the front page, even just the next one?
    – Any social media?

    Good work though. I like it! 🙂

    • Paul Joyce says:

      Thanks for a comprehensive reply there Ross; don’t feel bad about commenting on something you don’t actually ‘make’, you still have lots of experience around the subject. Plus your a web user so you’d be the kinda person viewing this site.

      – I must admit I didn’t even think about the accessibility issues of red on black text; I should definitely run it through those sites that allow you to view pages as if you had visibility/colour problems. Slap on the wrists there for me. Good point
      – Regarding the UX point of view, I would code this up so the signup form would load via ajax in a lightbox element when the link was clicked, with a static signup page to fallback to. From experience do you know if a visible signup form would have a higher conversion rate that an obvious link to it? It does make sense it would.
      – Yeah the embedded media player was something I wanted to include, although tastefully done so not to remind people of 99% of MySpace pages 😉 However I simply ran out of time. But its good to know that what I planned to do was picked up by someone else. I was also hoping to tuck some social media aspects in their too, preview some tweets / forum and facebook activity etc
      – Good idea about the titles appearing in the band news component. I think because I was just laying stuff out and filling with placeholder text I overlooked that each post would have a title component, doh! Something that would have come up later to give some agro. Another wrist slapping
      – I agree with the image being too big, and thinking further about allowing for a more fluid design, I think I’d do the 2nd design so the main graphic takes up 2 columns (not all 3), sliding the current 1st or 3rd column content up alongside it. The columns could be made to collapse under each other on small width browsers, such as mobiles.

      Thanks for the feedback; some brilliant points raised that (hopefully) I’ll take on board with my next design challenge.

  • Kerry says:

    Paul, I love it!
    The style you have chosen is good because it tells me what the band are like (I’m not familar with them) but without making the website too dark, which some could be accused of.

    You’ve put all the information up front so that it’s good and clear, I can find everything I would’ve needed.

    I honestly can’t see anything visually wrong with what you have designed, it appeals to me as a site I could visit frequently.

    You’ve kept it simple without too much words, which I think is perfect for online absorption.

    Oh by the way I was viewing this on my Samsung Galaxy S2 and it was clear and crisp without loosing any detail.

    😀

    • Paul Joyce says:

      Thanks for your kind words Kerry.
      DeathBySushi was a random name I came up with after a Twitter post about eating too much at a all-you-can-eat buffet, alas the phrase seemed to good to waste.

    • Kerry says:

      Ahh I see, would make a great name for a band, which I think I mistook it for at the time you tweeted it. :o)

Leave a Reply

Your email address will not be published.

Links and useful footery things…

Copyright © 2021 Paul Joyce. Follow me on Twitter or perhaps Google+