Help HN: My app 'looks crap' in need of design advice.
I have spent 0 time working on design of my little app:
http://www.myplaylist.biz/
As it is just an experiment in the making and something to grind my teeth on while I await to find a decent job in this industry, thus I have concentrated on back-end features and processes, now though I am seeking advice from others for ideas about how to improve the appearance 'look and feel' and fist impression..
Please be brutal and constructive.
Thanks in advance
21 comments
[ 5.1 ms ] story [ 71.3 ms ] thread() Meat Loaf (YMMV)
2. Site looks usable enough.
3. Unfortunately there seem to be 3 million similar sites springing up recently that do exactly the same thing. What is unique with your site?
I'm no expert but that red clashes with the lime green. I'd suggest using a pink. The blue writing is a bit hard to read, perhaps make it a lighter blue.
To be honest I wouldn't change it too much. It doesn't look like a shiny new 'web 2.0' website but I think that's a good thing. A lot websites look like they were made by the same person these days. Their perfection (and conformance) makes them invisible.
Congratulations on your new app. Btw I like your 'music videos'.
red on black is tacky... maybe use an image.
not design, but you might want to put some <noscript> tags somewhere telling me somethings (like info which seems to be help) don't work without it.
I'm having trouble spotting ads from content. things seem kinda all over the place... might want to change the groupings justifications and colors...
although I notice that I can play by click on the group of images, which barely make sense to me, it redirects... I don't know why it redirects it should just play, and the controls should be below it.
your nav at the top doesn't stand out, simple is use a gradient of a different color from your background.
just some suggestions, I'm not a graphic designer (I do pencils for art though).
Can you explain what you mean Im lost on this suggestion? thanks
<noscript> html tags will render if a browser doesn't support (or has disabled) javascript. Personally I would put help on a page all by itself, it's less slick but it ensures people can use it.
"Enter any band whatsoever" doesn't really make sense...
A search for KoRn gave me a bunch of pictures of corn (lol) and the playlist consisted of some guy reading a book to me.
A search for Smashing Pumpkins returns a playlist that doesn't work.
A search for Madonna returns a playlist for Madonna and one for Stevie Wonder (wtf).
After a search, the page is just confusing - there is text everywhere and none of it labelled to tell you what it is. Playlist reference #: Why do I, as an end-user, care about this? I'll never remember Stevie Wonder is 216 - I will remember myplaylist.biz/stevie-wonder though. The free songs available are just thrown over to the side with no label saying what they are (actually, the label saying the # of free songs is way over in the middle - nowhere near this list), plus there is no cosmetic alterations to the text (I've seen some all lower, some all upper).
When viewing a playlist, I think some Ajaxified "framing" would be worthwhile. So the playlist can stay active and doing it's thing, but I could view the information, more playlists, the embed code, etc without leaving the page.
Oh yeah - remove the AdSense, you can throw that in there when you have your design finalized and you people that aren't ad-blind are looking at it. Right now, 90% of us never see Ads (through scripts or habit).
Why should I login/register?
Not a bad idea - definitely needs a new domain, some design work, and some time spent on usability and user experience.
1. The layout is prehistoric. It harkens to the earliest days of internet design. Lose the global auto centering and create some blocks. Do this on a sketch pad and make as many variation as you can before deciding (see: http://v3.jasonsantamaria.com/archive//2004/05/24/grey_box_m...). Also, if you don't want to actually make borders, ensure the blocks are small enough wrt the text to be well-defined.
2. The pallet chosen is diluted. An easy way to chose pallets is to use a program such as kuler.adobe.com and make an analogous or complementary pallet. Don't make the colors too intense and test them as much as you'd test any other part.
3. The typography runs together. Typography is becoming huge in online design and it's really hard to get right. To learn a bit, I suggest Mark Boulton's "Five Simple Steps" especially steps 4 and 5 (http://www.markboulton.co.uk/journal/comments/five_simple_st...).
4. Keep asking people. When you design something you never have a good idea of how effective it is. Asking people here and elsewhere is an absolute must, so this was definitely a good step.
Hope those help and inspire.
(That is, if you mean something in the direction of http://gamer.nl when you say 'blocks'.)
By 'block' I meant "display: block;" css statements, more or less. Take a look at the link from Jason Santa Maria for one example of those this can be interpreted; although, in my own designs I use them a little differently.
My quick tips:
1) Think of adding a new color for links, now you have bolding but it could be useful to have more contrast on links and less contrast on information
2) Group the information somehow. Make boxes and lines ,even invisible ones(grid design). Eg. Youtube, there is lots of information but everything is in a box and the boxes are lined.
3) Info-text on the frontpage looks kind of bad. Don't ever scale fonts horizontally or vertically.
http://en.wikipedia.org/wiki/Grid_(typography)
http://www.markboulton.co.uk/journal/comments/five_simple_st...