6 ms·

Help HN: My app 'looks crap' in need of design advice.

11 points by agentbleu 18y ago

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

mooders 18y ago
Overall, it looks okay. Nothing too offensive. Have a look at some colour scheme sites to get a palette of complementary colours. http://kuler.adobe.com http://kuler.adobe.com works very well, as does http://www.colourlovers.com http://www.colourlovers.com.
jgrahamc 18y ago
I typed in the name of the greatest rock band of all time() and got a play list (it worked), but the pictures in the slide show were baffling: a bunch of cats and pictures of food. () Meat Loaf (YMMV)
axod 18y ago
1. The .biz domain was created for spammers, and people who can't get a .com name. .biz/.info etc have 0 credibility... 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?
- xenoterracide 18y ago
  not sure you read his question. He's asking for help with design, this is a learning project 'till he get's a real job not a business.
  - axod 18y ago
    Sorry, yes. In that case I think the design is good enough. Just need to apply it to something else, and go for it.
jsmcgd 18y ago
Its not that bad. You played it down quite well. 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'.
xenoterracide 18y ago
the bluish grey on the greyish black doesn't work, you need more contrast. 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).
- agentbleu 18y ago
  "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." Can you explain what you mean Im lost on this suggestion? thanks
  - xenoterracide 18y ago
    you have an info button in the upper left hand corner. it seems to provide a help dialog, however it doesn't work if I have javascript disabled. <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.
    - agentbleu 18y ago
      thanks
walesmd 18y ago
I agree with the comments people suggested earlier about coloring - a quick treatment with some schemes found at Kuler, ColorSchemer, ColourLovers - those will help. "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.
- agentbleu 18y ago
  thanks. I have made some changes to clear up the info page. ref the ajax for embed, info etc. good idea, I shall look into that. Fixed the playlist issues ref Smashing Pumpkins, madonna etc, this is all done on the fly automatically, Smashing Pumpkins was out of music and needed a quick refresh, the tagging problem just some random error... and images for korn well these are tagged as such. You should register if you want control over images and music else sys does its best given the search term. But thanks very much very insightful.
- marijn 18y ago
  As far as color-scheme assistants go, I like http://www.colorsontheweb.com/colorwizard.asp http://www.colorsontheweb.com/colorwizard.asp .
tel 18y ago
A number of comments. 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_method.php 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_steps_to_better_typography/ 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.
- marijn 18y ago
  'Blocks' are not necessarily an improvement. Some would argue that their time has come and gone. I certainly prefer simple designs with as few quasi-separate units as possible. (That is, if you mean something in the direction of http://gamer.nl http://gamer.nl when you say 'blocks'.)
  - tel 18y ago
    Oh no, not at all. Those cramped, futuristic styles are not the aim. It might be cool to try to pull them off as a retro style, but otherwise I'd stay far away. 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.
enra 18y ago
The playlist listing looks chaotic. Text is scattered all around, and its hard to make sense about the information and controls. 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.
azharcs 18y ago
I had seen this web-app covered on TechCrunch some months back. http://www.techcrunch.com/2008/04/16/myplaylist-combines-flickr-and-online-music/ http://www.techcrunch.com/2008/04/16/myplaylist-combines-fli... I had liked the site then mainly because of its functionality and simplicity. I personally think the cloud is too big and using too much real estate, use smaller fonts and red and white in the same row are strict no-no.
jjburka 18y ago
In addition to adding some more color ( I would use kuler and upload your logo then mess around with the colors) , I would removed the 'detele blank images' button you display on the playlist page.
ii 18y ago
Align your graphic elements. http://en.wikipedia.org/wiki/Grid_ http://en.wikipedia.org/wiki/Grid_(typography) http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_designing_grid_systems_part_1/ http://www.markboulton.co.uk/journal/comments/five_simple_st...
ii 18y ago
If I were you, I would borrow layout ideas from www.cuil.com

11 points by agentbleu 18y ago

mooders 18y ago

Overall, it looks okay. Nothing too offensive. Have a look at some colour scheme sites to get a palette of complementary colours. http://kuler.adobe.com http://kuler.adobe.com works very well, as does http://www.colourlovers.com http://www.colourlovers.com.

jgrahamc 18y ago

I typed in the name of the greatest rock band of all time() and got a play list (it worked), but the pictures in the slide show were baffling: a bunch of cats and pictures of food. () Meat Loaf (YMMV)

axod 18y ago

1. The .biz domain was created for spammers, and people who can't get a .com name. .biz/.info etc have 0 credibility... 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?

xenoterracide 18y ago
not sure you read his question. He's asking for help with design, this is a learning project 'till he get's a real job not a business.
- axod 18y ago
  Sorry, yes. In that case I think the design is good enough. Just need to apply it to something else, and go for it.

jsmcgd 18y ago

Its not that bad. You played it down quite well. 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'.

xenoterracide 18y ago

the bluish grey on the greyish black doesn't work, you need more contrast. 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).

agentbleu 18y ago
"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." Can you explain what you mean Im lost on this suggestion? thanks
- xenoterracide 18y ago
  you have an info button in the upper left hand corner. it seems to provide a help dialog, however it doesn't work if I have javascript disabled. <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.
  - agentbleu 18y ago
    thanks

walesmd 18y ago

I agree with the comments people suggested earlier about coloring - a quick treatment with some schemes found at Kuler, ColorSchemer, ColourLovers - those will help. "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.

agentbleu 18y ago
thanks. I have made some changes to clear up the info page. ref the ajax for embed, info etc. good idea, I shall look into that. Fixed the playlist issues ref Smashing Pumpkins, madonna etc, this is all done on the fly automatically, Smashing Pumpkins was out of music and needed a quick refresh, the tagging problem just some random error... and images for korn well these are tagged as such. You should register if you want control over images and music else sys does its best given the search term. But thanks very much very insightful.
marijn 18y ago
As far as color-scheme assistants go, I like http://www.colorsontheweb.com/colorwizard.asp http://www.colorsontheweb.com/colorwizard.asp .

tel 18y ago

A number of comments. 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_method.php 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_steps_to_better_typography/ 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.

marijn 18y ago
'Blocks' are not necessarily an improvement. Some would argue that their time has come and gone. I certainly prefer simple designs with as few quasi-separate units as possible. (That is, if you mean something in the direction of http://gamer.nl http://gamer.nl when you say 'blocks'.)
- tel 18y ago
  Oh no, not at all. Those cramped, futuristic styles are not the aim. It might be cool to try to pull them off as a retro style, but otherwise I'd stay far away. 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.

enra 18y ago

The playlist listing looks chaotic. Text is scattered all around, and its hard to make sense about the information and controls. 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.

azharcs 18y ago

I had seen this web-app covered on TechCrunch some months back. http://www.techcrunch.com/2008/04/16/myplaylist-combines-flickr-and-online-music/ http://www.techcrunch.com/2008/04/16/myplaylist-combines-fli... I had liked the site then mainly because of its functionality and simplicity. I personally think the cloud is too big and using too much real estate, use smaller fonts and red and white in the same row are strict no-no.

jjburka 18y ago

In addition to adding some more color ( I would use kuler and upload your logo then mess around with the colors) , I would removed the 'detele blank images' button you display on the playlist page.

ii 18y ago

Align your graphic elements. http://en.wikipedia.org/wiki/Grid_ http://en.wikipedia.org/wiki/Grid_(typography) http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_designing_grid_systems_part_1/ http://www.markboulton.co.uk/journal/comments/five_simple_st...

ii 18y ago

If I were you, I would borrow layout ideas from www.cuil.com