Making a decent looking menu

[Al6200]

Okay, here's the deal. I'm making a tutorial for site called Newgrounds. I am an intermediateish Actionscript and have a somewhat deep technical knowledge of 3D modeling and graphic design. So I made a tutorial on it.

However, I am sadly aesthetically challenged. For my tutorial, I've made 6 diffrent menus and I'm not really able to look at them and tell which one looks the best. I would appreciate it if you'd tell me which of my menus looks the best.

I'd also like any advice you have on making visually pleasing menus and buttons. My menu has 14 items, and I want to display them without confusing my audience or generating clutter.


Menu 1:

http://denvish.net/ulf/1151891153_swift%20menu.php

Menu 2:

http://denvish.net/ulf/1151891292_swift%20menu.php

Menu 3:

http://denvish.net/ulf/1151891457_swift%20menu.php



Of those 3 I really can't tell which is the best.

[IMJ]

All three menus have their own strengths, so it kinda depends on what you want to achieve.
The first one is like a step-by-step tutorial. There's no clutter and is very clear, but there is no overview and takes longer to go through it.
The second one has the best overview, but could be intimidating. The user will have to do "search".
The last one has a bit of both. The menu is devided into main categories and when the user finds one interesting he'll go there. Which will then bring up dropdown menu.

I think the 3rd one is the best, but as I said before. It really depends on what your goal is. On a side note, I hope the design of the menus arent finalized, since they're really awful right now....

[nih]

I preferred the one with the drop-downs. You can fit a lot more information into a menu that way.

[Al6200]

Ummm, as with the designs not being finalized, here is the thing: I have no idea how to make them look good. I've tried diffrent gradients. I don't know if I should try gradients backgrounds. Or maybe lots of filters does the trick.

One problem with the drop down menu is that not every option drops down. And some of the options I couldn't fit into the drop down menu.

I kinda like the first multi-page design because it has an uncluttered feel to it. I also think that design will be easiest to edit as I go on, as opposed to the drop down menu which is rather hard to edit one you've built it.

I guess I'm kinda asking how people make good looking backgrounds and make interfaces aesthetically pleasing. If this requires a doctorate in fine arts or an in-born skill that I don't posses, please inform me.


How do people make nice looking buttons? I always make plain verdana text with a yellow box on the rollover event or I use the blue glow filter on rollover. Is there a better way than this?

One last question: On the menu with the multiple pages, do you think this will confuse people on Newgrounds. I mean, I've worked months on the actual content so I don't want someone to see a complicated menu and not see my work.

[Zimmermann]

I'd use the second menu. You quickly get a good overview. The first would be good if you had more chapters. And the third just doesn't seem to work at all (both usability and design wise) :)

If you choose the second then loose the ugly button effects and you should probably look for better colors. Just think "simple" when you redo it and save all the fancy effects for another project.

Btw can you pm me when you're done? I'd like to use the tuts ;)

[Al6200]

Zimmerman,

I actually have a fourth menu, which I didn't post because it isn't as "graphic" as the others.

http://denvish.net/ulf/1151940119_swift%20menu.php

So your advice is to just go with all the links on one page and then make them all very simple. My big problem with that is clutter, although I think I can avoid it, maybe. My second problem with that is it makes it feel less linear, know what I'm saying.


I see what you mean when you say "simple buttons". But I'm not really sure how to make a simple button. I'm pretty sure a button should have a rollover state. Should buttons be beveled something like that. Anyway, thanks for all the advice.


My tutorial overall isn't finished yet, although the Swift 3D section is done. I still have to do a Flash section and some other neat stuff. I also had an idea where I'd submit a 5 mb version to NG and then I would get a screencaster and make an enhanced version that users can download that has video clips instead of screenshots. But that could be really time-consuming so that idea probably won't get off the ground.

[Digitalosophy]

Zimmerman,

I actually have a fourth menu, which I didn't post because it isn't as "graphic" as the others.

http://denvish.net/ulf/1151940119_swift%20menu.php

So your advice is to just go with all the links on one page and then make them all very simple. My big problem with that is clutter, although I think I can avoid it, maybe. My second problem with that is it makes it feel less linear, know what I'm saying.


I see what you mean when you say "simple buttons". But I'm not really sure how to make a simple button. I'm pretty sure a button should have a rollover state. Should buttons be beveled something like that. Anyway, thanks for all the advice.


My tutorial overall isn't finished yet, although the Swift 3D section is done. I still have to do a Flash section and some other neat stuff. I also had an idea where I'd submit a 5 mb version to NG and then I would get a screencaster and make an enhanced version that users can download that has video clips instead of screenshots. But that could be really time-consuming so that idea probably won't get off the ground.

Go with #4 :thumb:

Not trying to sound mean or harsh at all here but the previous 3 aren't too great to look at. You said yourself your not sure how to make them look nicer, so why try?

If you can't come up with a nice design then hey who says you have to? This is going to be a tutorial site, where people can learn, who cares how it looks?

Just lay the information the user wants to see right in front of their face without any gradients, etc..

THose loud colors and gradients you have make the site look amatuerish.

Again just trying to help :kommie:

[johnfn]

You said yourself your not sure how to make them look nicer, so why try?


Thats easier said then done ya know.


This is going to be a tutorial site, where people can learn, who cares how it looks?

Only the whole Newgrounds community. :P

[Zimmermann]

I see what you mean when you say "simple buttons". But I'm not really sure how to make a simple button. I'm pretty sure a button should have a rollover state. Should buttons be beveled something like that. Anyway, thanks for all the advice.

What I mean by a simple button could be like when you're viewing a normal html page where links are blue and underlined on roll over.