

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

I have spent 0 time working on design of my little app:<p>http://www.myplaylist.biz/<p>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..<p>Please be brutal and constructive.<p>Thanks in advance
======
tel
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...](http://v3.jasonsantamaria.com/archive//2004/05/24/grey_box_method.php)).
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...](http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_better_typography/)).

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

~~~
tel
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.

------
axod
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
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
Sorry, yes. In that case I think the design is good enough. Just need to apply
it to something else, and go for it.

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

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

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

------
enra
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
I had seen this web-app covered on TechCrunch some months back.
[http://www.techcrunch.com/2008/04/16/myplaylist-combines-
fli...](http://www.techcrunch.com/2008/04/16/myplaylist-combines-flickr-and-
online-music/) 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.

------
ii
Align your graphic elements.

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

[http://www.markboulton.co.uk/journal/comments/five_simple_st...](http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_designing_grid_systems_part_1/)

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

------
xenoterracide
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
"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
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
thanks

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

------
jjburka
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
If I were you, I would borrow layout ideas from www.cuil.com

