[Project Complete] Design for a music website - $200

[JustinLloyd]

(Admin code added by Michael - N412774W)


This competition is for a music website. The website is a resource for people to find out more information about particular bands that it lists.

Here are the details:

• Name of web site is Rockers Online.
• Primary colour scheme is purple and black.
• No black backgrounds.
• Do not emphasise the leopard print pattern.
• Two pages, the pages should be generic enough to reuse for a number of uses.
• The current website is at http://www.rockersonline.com/
• The front page should be laid out like a blog/news page.
• Each page should have space for an advertising banner & Google AdWords? section and the GEMM search box.
• No Flash, no DHTML, no frames. The current site is frames based but the owner is moving away from that.
• Website is text content heavy and should load quickly.
• We don't want any HTML, just the PSD.
• A winner will be chosen by February 15th.

Please review the current website as it is to get an idea of the information content that it contains.

The two pages to be designed are the front page, and one band page with the list of bands for whatever the sort criteria happens to be (year, genre, etc) down the side.


The website logo is attached to this message.

[Lilja]

Here is a start :)

Check it out in your browser (http://www.viastep.no/do/rockersonline/v1.htm)

Needs more work but I want to hear your oppinion before I spend more time on it :)

Lilja

[cosmic]

here are my entries


http://www.cosmicwebdesigns.com/design_outpost_contests/rockers1.jpg



http://www.cosmicwebdesigns.com/design_outpost_contests/rockers1B.jpg

[JustinLloyd]

Lilja: Most definitely not the design we are looking for. It is not even close to something we would consider using. I’ll give you some feedback but I’m not going to spend my time going over everything that is wrong with the design.

1. The grey text inside of grey boxes on grey background is boring, mundane and too hard to read.

2. The news & blog area is the second most important feature of this page, why does it have only ~20% of the available space?

3. It looks like a template I could have pulled from any of a dozen different template design sites. Worse, it's a very corporate template that would be used by a boring IT website.

4. This is our landing page, people arrive here expecting to find out information about bands they like. These is nothing that conveys this.

5. The letters that launch the alphabetical listing give me no indication I should click on them, plus they are too small.

6. The body text uses a smaller than normal font.

7. Amazon de facto standard has taught web users that the search box goes on the top left.

8. The user has to read an entire paragraph of text to find out they are supposed to click on the letter (I know this site well and I started thinking “what letters?” when I first looked at your design) to go to start browsing for bands.

9. Your navigation elements follow the current design too closely. We’re looking for something inspiring and different with good ease of use.

10. Do you wander through life holding your hands up in front of your face to frame the scene like a movie director? No? Then why insist on this for a website that contains copious amounts of information? With this design we’re introducing people to a vast library of talented musicians and insisting they look at it through a keyhole.

This criticism is harsh but I look at this design and immediately want to navigate away from the page.

[JustinLloyd]

Cosmic: Nice design. The second one with the changes on the header works better.

1. He's playing the sax unfortunately. If we go with your design we probably want to put a long-haired guitar playing rocker on there (said the long-haired, guitar playing businessman).

2. The search goes on the left.

3. Play around with the idea of navigation, we don't necessarily want to stick with the current way of selecting a letter. We might want a genre list, or a list of all bands that can be scrolled. We're completely open to ideas.

4. More graphics, throw in thumbnails of the band.

5. Break the 800x600 mindset. Steal ideas from Amazon and the BBC News website. Longer pages are better. Avoid horizontal long breaks between sections, give the user an idea there's loads of interesting stuff further down the page too.

6. We're probably going to put GEMM on to its own search page and put our own web site search on to the front page. GEMM will most likely have it's own permanent banner or a very large button on every page in addition to a regular advertising banner.

[Lilja]

Thanks for the feedback.

This criticism is harsh but I look at this design and immediately want to navigate away from the page.

Well, it helps alot. I (and the other designers here at DO) got an better idea of what kind of design you are looking for.


I will start over again :)

[pod]

Hi

Here is my first draft I looking forward for your comments questions

Thanks

[Luc]

I'll enter.

[JustinLloyd]

pod: Very nice. Certainly a direction we want to be moving in.

Just a few points:

1. I'd like to see the text a little larger if we go with your design.

2. Text links should probably always be underlined (but this is a draft so that's excusable :) )

3. It might be better to use buttons with a graphic letter on them for the individual alphabetical listing across the top rather than straight text. Just an idea I'm kicking around.

[pod]

Thanks for your feedback
I'll be post the revisions a soon as possible.

[Anne]

Here's one from me
Anne

[cosmic]

here are my revisions:

http://www.cosmicwebdesigns.com/design_outpost_contests/rockers3.png



slightly different header
http://www.cosmicwebdesigns.com/design_outpost_contests/rockers3B.png

[Sharan]

Hi! I'm actually the client Justin is doing this for (it's my site). I just wanted to post here to let people know we've both been insanely busy and Justin keeps planning to post feedback but getting busy and forgetting. Sorry about that! But he will be posting feedback soon (I'll try to remind him to take care of that this weekend) so this will be happening soon.:)

BTW, if anyone's still working on any designs you should post here soon or at least let us know so we'll wait, since right now we're leaning toward one design but I want to make sure we don't miss anyone.:) I'll let Justin post here and give you more details.

Thanks!

[JustinLloyd]

Sorry for not posting feedback sooner, I've been insanely busy with a project deadline and it's tax time for my company and I had to make sure the accountant had all the relevant information required so that took a couple of weeks of my time as well.

Anne: That's a very nice design. The little guitar logos on each section really add a nice touch. We were certainly considering this as the potential winner until cosmic came along.

Cosmic: The latest design you posted is really nice. And it is the one that I am leaning towards right now. Until you posted your design Anne was in the lead.
1. The first version is the better one as I don't believe that the page will be able to stretch horizontally with the gradient that you have in the second design.
2. The large black block of text in the "Welcome to Rockers Online" will need to be reworked. The text is no longer strictly relevant as you changed the way the navigation works, plus the black rectangle just doesn't fit the rest of the layout.
3. The guy in the top header should probably have longer hair. Right now he looks more grungy than rocker.
4. I'd like to see the section headlines for "updates", "music news", "my artists" to have a grey strip behind them like in Anne's design. The little guitar motif on each one is really nice too.

To Everybody Else: If you are thinking of submitting anything please can you let me know ASAP and submit your entry by Wednesday of this coming week as I would like to close the competition.

[cosmic]

Here are the revisions.

I am having a tough time finding appropriate pics for the header.


http://www.cosmicwebdesigns.com/design_outpost_contests/rockers4.gif

[JustinLloyd]

Cosmic: My room mate, unsurprisingly, has a number of photographs that she has taken at various concerts. We can scan a selection of those for you if that would help. If so, what format do you want them in? What resolution? etc

[JustinLloyd]

Cosmic: The updated design looks really good. Other than the guy in the header that has "stock photo" across him, we're almost there I think. I guess I need to make a final decision on the winner very soon.

One question: The section on the lower left, below the mailing list sign up, what were you thinking would be placed there?

[cosmic]

Other than the guy in the header that has "stock photo across him"
That text will be removed if I buy this pic from istockphoto.


My room mate, unsurprisingly, has a number of photographs that she has taken at various concerts.
I'm sure i could use a few of them. Jpegs are fine.


The section on the lower left, below the mailing list sign up, what were you thinking would be placed there?
I need to think about this.

[JustinLloyd]

Cosmic: Just wanted to make sure you weren't pulling a late night and in your bleary eyed state had not noticed the "Stock Photo" slapped right across it. :-) I've seen it happen where an artist created a texture and it had something like "copyright 1998 blah blah" right across the image and he was too tired to notice. :-)

We'll pick out a couple of photos and scan them in and post them here for you. Medium grade jpegs will probably work okay for now until we finalise the image.

Other than the image at the top and the question over the bottom left part of the screen I believe I'm very happy with the way this design turned out. I'm going to speak with the client and get their input and we should have a final decision very soon.

[JustinLloyd]

Cosmic is the winner at this point. Other than the picture across the top I believe the client is happy with the design.

Cosmic:
1. We still need to get those sample photographs to you for replacing the picture across the top. I've been so busy I haven't had chance to scan them in, I will take care of that this weekend for you.
2. Can you begin on the second page. I think everything is fine for the first one, make the second page design generic enough to use to represent a band or artist.
3. Don't create any HTML, just ensure the images are in Photoshop format with proper layers and text that is editable so the client can get in there and cut up the page herself (She's very particular about her HTML).

[cosmic]

I'll get started on the second page soon.

[cosmic]

Here is the second page:

http://www.cosmicwebdesigns.com/design_outpost_contests/rockers4a_artist.gif

[cosmic]

The section on the lower left, below the mailing list sign up, what were you thinking would be placed there?

I think maybe a concert listing could go there.

http://www.cosmicwebdesigns.com/design_outpost_contests/rockers4a.gif

[JustinLloyd]

Cosmic: Apologies for not getting back to you sooner. It's been another one of those super busy weeks. Attached to this message are the promised concert pictures. Hopefully there is something in here that you can use. Obviously being concert pictures they are ordinarily taken from below the level of the stage and also in low-light conditions so you will be working within those restrictions.

Let me know if there is anything else I can supply you with.

[cosmic]

Revisions:

http://www.cosmicwebdesigns.com/design_outpost_contests/rockers4b.gif



http://www.cosmicwebdesigns.com/design_outpost_contests/rockers4c.gif




http://www.cosmicwebdesigns.com/design_outpost_contests/rockers4d.gif

[JustinLloyd]

cosmic: In the words of the client "They all look good." The client is entertaining the idea of having a rotating header. I think the design is pretty much done. I'll get final feedback from the client and have her sign off on it if she is happy.

Can you try blending the image on the left of the banner a little more, either drop the contrast of the image, or darken the fade to colour on the right of the banner so that the gradient isn't so severe. I know you can't go too far to the right with the gradient ramp as it won't enable the page to stretch horizontally but it could probably be taken a bit further to the right so long as the gradient ramp ends, making it visibly obvious that it has ended, before the right hand edge.

a) We'll need just the unflattened PSD files that contain all the elements.
b) We'll need the fonts you used to create the design.
c) Can we get the three different headers that you've created with those new photos?

[cosmic]

http://www.cosmicwebdesigns.com/design_outpost_contests/rockers4e.gif



http://www.cosmicwebdesigns.com/design_outpost_contests/rockers4f.gif



http://www.cosmicwebdesigns.com/design_outpost_contests/rockers4g.gif

[JustinLloyd]

cosmic: Yeah, that looks a whole lot better. I'll get final feedback from the client today and then we should be ready to call this a wrap.

[JustinLloyd]

cosmic: We're almost there. Just a couple of small points.

a) Can you make sure you either supply the fonts you used that are non-standard, or supply the names and foundry for the fonts so I can obtain them.
b) Can you ensure that the page header with the gradient on it is supplied in layers as the client will want to change the image as new pictures are taken at concerts. Obviously everything should be layers anyway.
c) Can get the "Go" button, the arrows on the main navigation, and the "More" button images so that the client can implement the buttons as roll-overs when she gets around to working on the site. A simple highlight or whatever you think works.

Other than the points and minor change I've specified, we can call this a wrap and your work here is done.

Thanks very much for your time.

[cosmic]

Got it.

[cosmic]

Download files here (http://www.cosmicwebdesigns.com/design_outpost_contests/rockers_final.zip)

It was a pleasure.

[JustinLloyd]

Cosmic: That all looks great. Thanks for the work. Real top notch design.