Help HN: My app 'looks crap' in need of design advice. | Hacker News Reader

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

11 pointsagentbleu21 comments

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

View on HN

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_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.

'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 when you say 'blocks'.)

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.

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?

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.

Sorry, yes. In that case I think the design is good enough. Just need to apply it to something else, and go for it.

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.

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.

As far as color-scheme assistants go, I like http://www.colorsontheweb.com/colorwizard.asp .

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'.

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.

I had seen this web-app covered on TechCrunch some months back. 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.

Align your graphic elements.

http://en.wikipedia.org/wiki/Grid_(typography)

http://www.markboulton.co.uk/journal/comments/five_simple_st...

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 works very well, as does http://www.colourlovers.com.

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).

"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

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.

thanks

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)

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.

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

Reply on news.ycombinator.com