Bandwagon? Web Design? BIG FILES ALERT

[Sam.]

Sorry if this is starting to annoy people, but I notice others had posted their designs for website in here, and since I have no other place to show off my creativity, I might as well.

Recently, the radio station I worked on in the UK (my uni one, nothing major) has starting looking to updating their site. I occasionally do some graphic designy stuff for them so they asked me if i could help. I said i'd look into it. The site as it is is here http://www.livewire1350.com .

I wanted to give it a more 2.0 appearance but I dont know if i've gone too far with reflections and gradients. Also it seems to me like it looks a bit "things from photoshop thrown together" if that makes any sense. Is there anyone here with web design experience who can help me out? At the bottom I've put a sample of one of the flyers I did for the station to give you an idea of the style and vibe of the station.

Please bear in mind this is an idea, nothing final, but I need help and ideas!

Hope this isnt too wide:



Flyer:

[Andorxor]

First you  should remove the red eyes from the woman in the header and try to cut them out cleaner from the photo.And than you should change the ratio of your page or,because not everyone has a widescreen monitor.

[Darth Mandarb]

Yo!

As was mentioned, the lovely ladies are a tad on the rough side.  Are they the DJs?  If they are not it's a little unclear their purpose (to me at least).

I wouldn't worry about the 'widescreen' part of it ... I'm sure you'll be writing the code to allow it to resize depending on resolution (that's beginners web 101)

The colors are a bit obnoxious (which might be the intent) but you've essentially got full-bright yellow, green, and magenta/pink on the screen at the same time.  It's a little on the overwhelming side!  The text in the body is very difficult to read as well.

I am at work now and can't do a paint-over but if I have time when I get home tonight I'll whip up an idea or two for ya!

Cheers!

[Sam.]

As I said, this is a very rough starting point.
With regards to the picture, they are DJs yes, but since we havent had time to take any proper pictures i just picked a random one from facebook until there is something else to put there. That is why there is redeye and it has been so choppily cut out.

The colour scheme is another thing that is bugging me. I want it to be really vibrant and "cool" looking, kind of kooky and indie i suppose would be a rough description.  Black on Yellow is the current colour scheme of the station, I thought it might be a bit easier on the eye to reverse that.

Finding colours for the areas was difficult for me, does anyone have any suggestions of colours i should use? I'm working on an update but i could do with a few more tips!

[Darth Mandarb]

There are a couple of utilities that you can use (I even use 'em from time to time) for generating palettes that 'work' together!

http://www.colorschemer.com/online.html
http://www.colorsontheweb.com/colorwheel.asp

There are tons of these out there (some better than others).

[creatorlars]

Hi Zooty!  I have been a professional web designer for 10 years, I think your design looks good -- but you need to simplify the design elements so they feel like a cohesive whole.  Usually it's best to pick 2-3 colors, and 1-2 typefaces and just go from there.  Here's a couple suggestions, take them or leave them...

1) The header of the site and the content area do not match.  You need to pick one direction or the other and stick with it.  It seems like you're struggling for the site to have "more" so that it doesn't appear boring or flat, but with web design it's more about keeping things subtle and simple in my opinion.  Make some simple "design rules" for yourself and stick to them.
2) I like the header design, and I think it matches the flyer well.  Try redesigning the content area and keep everything to white/black/yellow.  Consider using a readable, gray shade of text on a white or black background to make it sleek and easy on the eyes.  The yellow and black contrast well to make a header that really pops.
3) I know how much of a pain it is to design long, horizontal headers.  I suggest making the width of the whole site much smaller and using the space better. Increase the size of the two heads so that they feel like they're the same "weight" as the title.  Maybe try stacking the elements on top of each other to create more dimension and decrease vertical space (Girls beneath the nav bar, title overlapping it on top, etc...)
4) Get rid of the gradients (like the yellow behind the DJs) and go with chunky solid color shapes like you've done with the title.  The two styles aren't working together.
5) The chunky solid shapes aren't web 2.0, but web 2.0 gradients/reflections/shinyness looks like shit and I like this much better, so go with it.  Just my opinion.  
6) Think about negative and positive space, and how you can alternate it to create contrast among design elements.  In other words, think about the white areas around your black chunky shapes as shapes too...

I know I probably repeated myself a lot here, but it's early in the morning.  Hope this helps a little.

[Sam.]

Ok, I have tried to listen to your advice and come up with another edit. I decided to not put photos in future mockups as I dont't have any of decent quality. There is still something bugging me about this design. I want the site to look, sleek, not just blocky. I don't know if this is the right direction or not, what do you think?

also, i thought i'd include some links to radio websites that I think are kind of the direction i want to go in:

http://www.bbc.co.uk/radio1/

http://www.bbc.co.uk/6music/

http://www.xfm.co.uk/ (my favorite radio site)

[creatorlars]

I think this looks much better, great job!!  Colors look great and it feels much more "solid."  I think you're going to find your "sleekness" in subtle details, rather than drastic changes.  If you don't like the way it's going, try comp'ing out some different ideas from scratch instead of trying to force this one.  (Just my advice.)  The Web2.0 gradient look, if that's what you really want, is very simple, just pay attention to other sites and it's easy to replicate.  I tried to do something like it on this site that I did last year: http://www.funimation.com/shuffle

My main suggestion from here is to vary the subheadings/body type a little more.  Everything looks bold right now, and this decreases the contrast between elements.  For example, in the spotlight where it says "Drive" and then "Tune in Daily..." I would unbold the "Tune in Daily..." paragraph and make it a point or two font size smaller.  Just keep priority of visual elements in mind... right now the first things you see are the big bold yellow headers -- which is perfect.  Now you want to make sure the user can easily scan those spotlight titles next.   I would consider adding a box around the "News" area to match the "What's On" area as well.

[Andorxor]

I would try to find a way to make the angeled areas of text straight,because you can only write straight with HTML and blinds and search machines can't read pictures.

[creatorlars]

I agree -- I would definitely make any text-based content that will be updated often fit into a straight HTML text area.  You don't want to have to edit and export an image slice every time you update the content.  Should be fine for the big yellow/black section headers, though.

[InCreator]

All I suggest is third color.

Make it strong neon orange or magneta.
And make all article/thing titles and similar things in that color.
Would look cool, I think.

[Sam.]

Here is something I have done today, just chucked it together over this afternoon so please forgive it's foibles. I like the direction this is going in, but since I have no prior web design experience (really) I don't know if it is cliche or passe,