• 0

Feedback for new design


Question

Hello,

I have been running a website to do with English Radio for the last couple of weeks. I've finally got fed up with the current design and have decided to make a new design.

I have made a mock-up in photoshop, which I would like feedback for. I think that feedback can tell me what's good at what's bad about the design.

This is the mock-up of the website. I think it is pretty self-explanatory, hopefully you can see the different from the current website (Radio 1 Now)

51036477.png

A little info:

  • The grey bar will only appear if there is an error/or message.
  • The hearts will be to favourite the song/artist
  • The 'i' in the pink circle will allow you to search for podcasts from the DJ
  • The site will be mainly AJAX based.
  • I'm trying to make the site sorta Web 2.0, as interactive as possible.

Thanks a lot, this feedback will be greatly appreciated by many of our users and by myself.

Tim

Link to comment
Share on other sites

12 answers to this question

Recommended Posts

  • 0

I think the Currently Playing, Current DJ and Next DJ can and should all be neatly organized in to one box and not spread out in separate boxes like that. Also Scrobble, Search On and Buy On can also be presented in a much neater way. Those are my only real problems with the design.

Link to comment
Share on other sites

  • 0

How would you present the Scrobble, Search and Buy buttons?

By 'one box' what do you mean? I think they are in one box at the moment.

Link to comment
Share on other sites

  • 0

Looks good so far.

Here are some things I would change:

  • Make your main navigation stand out more. Currently it just looks like text. I would make them button-esque, maybe tabs, a different colour from the background.
  • I'm not really sure if a login button is needed in your main navigation, since the login box is directly above it. Unless of course the button is to show/hide the login box. In which case, ignore this line.
  • Keep your channel navigation (top left) the same (don't apply the above feedback to this area), but possibly change the colour of the text links, just to make them look like they do something, and is not text. I would probably change each hyphen to a bullet (•)
  • Add some top and bottom padding to the breadcrumbs, make the links in the breadcrumb a different colour (even if it's just a different shade of the same colour) than the text. Maybe chuck in a house icon for the home link.
  • I really don't like the "tab" headings, I don't think they work, sorry :(
    I would remove the tab headings, as well as the lighter shade of blue behind the tab headings. I would probably confine each "set" in to it's own box, similar to the content boxes below, but a different colour/shade because you don't want your users to confuse think they are related.
  • I agree with Jordan, Currently Playing should be the header to the Currently Playing, Current DJ and Next DJ information.
    You could put something like: Current DJ: Joe, Next DJ: Sam. The other information such as time on-air and the description of their show could be contained in a pretty javascript popup on hover.
    This would probably require a massive re-shuffling of the entire top-area, though.
  • I would add some top and bottom padding to the content box headings, and apply some extra line-height, character-spacing and word-spacing to the content areas.
  • The wabcam box I would probably make specifically different than the others, in that there would be no content padding, so the image stretched out to each corner of the box, leaving only room for the heading and the window buttons. You could add the rounded corners in the bottom left and bottom right using CSS3. Older browsers won't be able to see the corners but it's only a very minor aesthetic issue. Most people probably won't even notice the inconsistency. Alternatively you could use an image overlay that consisted of only the blue corners at the very bottom of the content box, but that could be a little messy.
  • The image in the biography area needs some right and bottom margin and maybe make it look a little nicer by giving it a "padding: 1px; background: #fff; border: 1px solid #ccc;" or something similar.
  • The Audioscrobbler icons in the "Recently Played" area need some left margin, probably only of about 5px or so, just so it doesn't look like the text is running in to it.
    Maybe contain each line in "display: block;" div, float the AS icon to the right, and make each div light up when you hover over it. And give each row a light grey bottom border.
    You can then apply the same design, look and feel to the links and similar artists boxes.
  • Finally, I don't think it looks like you've designed to a grid. While it's not entirely necessary it sure can help a lot when lining everything up. I recommend the 960grid.

Hope that helps.

You don't need to follow all of it, it's just probably what I would do.

Good luck!

Link to comment
Share on other sites

  • 0

UPDATE (Sorry for double post)

v11w.png

Any more feedback, would love to hear some.

@Baines: I took as much as your feedback as possible. I'm not sure if you read the main post, but this version is in Photoshop and is not in any coding yet.

Link to comment
Share on other sites

  • 0

The whole design is very very cluttered. You really need to cut down the amount of information you've got into a smaller amount. Maybe even iconising some of it to make it more appealing to the eye rather than a huge wall of text (Which is what it appears to be).

For the icons, I recommend taking a consistent set of icons from one icon pack. This will help to give the design a better look overall.

Generally this could do with quite a bit more work, the general layout of the content is good, but more needs to be done before it is near the coding stage.

My 2 cents. :)

Link to comment
Share on other sites

  • 0

I have gathered from the feedback that yes, it is very cluttered. But the site is designed to give the user lots of information, I believe I have done this in the limited space possible. However I probably havent done it in the best way.

The icons, if you hadn't noticed are mainly icons to different sites, using the sites icons (Except the heart/add icon & the home icon).

Thanks for your 2 cents ;).

Link to comment
Share on other sites

  • 0

The second is a good improvement on the first...

I would use what you have learned, and create a new design from scratch, with one of the first steps being to literally sketch an outline....the website 'appears' cluttered because the layout is mismatched, and there is no definitive structure (this is what the above poster suggested). There is also a lot of blue - trying making a colour scheme (black and blue?) and use these to differentiate between content boxes, titles and background - E.g just stick to a blue background, use the black strips as a heading bar and have a black content box?

Overall, the 'content' section is not bad :) they are laid out in a grid style (no overlapping) and have defined boundaries, titles etc -

If you can apply this sort of principle to the top section you will be to a good start!

One way which would make a major improvement is doing something with the head - make the 'brand' of the website obvious - the plain text doesn't really work - when looking at a logo, you rarely read the text but recognise the letters, colours, styles etc....Try playing around with a logo/ something that is recognisable to your website!

I would also shrink the icons, they are kinda IN YOUR FACE...and low resololution which just looks like they've been pulled randomly from google images or something - make them smaller and subtle.

I hope some of this helps, I dont want to run you down because its a great start....making a webpage is a slow process which you will develop over time....

When i started, i found it useful to look at other webpages which were in the mainstream, and pick out elements that i like (without copying a webpage )

You'll get there!

Link to comment
Share on other sites

  • 0

The "Currently Playing", "Current DJ" etc looks a little bit funny.Try to get that are cleaner. Looks like that's the only thing that I saw on first sight. Other stuff seems to look decent.

Link to comment
Share on other sites

  • 0

v12.png

This is probably the final version, I have got to start coding today as I am on a very strict deadline.

Out of this one and the previous one, which one would you prefer?

Thanks a million,

Tim

Link to comment
Share on other sites

  • 0

I can't give you an answer because there isn't a design I 'prefer' - I see improvements but nothing that's ready to roll.

Just a few things:

  • Why does "currently playing" have a "last updated" time - surely it updates whenever the song changes anyway?
  • Tabs - Scrobble:, Search On: etc - they just don't work particularly well and look out of place - what is the blue heart with the + for, and why is it hovering half inside the scrobble tab? The same goes for all tabs - they need a bit of tidying up to make the design 'fit'.
  • How it is obvious what the purple round button with the i in it does?
  • What does the rounded circle below 'What's On BBC Radio' do?

Just a few things you ought to take another look at - because from an end-user perspective, those things just don't make sense in terms of usability.

Link to comment
Share on other sites

  • 0

A few things. The 'Last Updated' time is the amount of time since the song was last updated, it will be much cleared once the site is coded.

I've moved the heart icon out of the scrobble tab. It will become more obvious when its coded.

The purple circle with the 'i' sign will be obvious to the people who will use the site, it is a sign for BBC's iPlayer.

The circle below the title will appear when the page is refreshing, and will be animated.

Thanks, for the feedback.

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.