good menu/preloader?

[Al6200]

Is this a good preloader/menu? Its designated for a tutorial I'm putting on Newgrounds.

http://denvish.net/ulf/1153238011_preloader_menu.php

[revelations1318]

sorry, but it looks pretty horrible to me

[Denise032]

Well, the design is not the best but it does the job. What's important in a tutorial is the content and how easy it is to follow/navigate. Seems OK to me so far...

[Al6200]

How do I improve the design? Is it just the preloader or the menu too that is ugly? How can I deuglify it?

What precisely is ugly about it?

Any tips for improvement are appreciated.

[Al6200]

I'm rather frustrated with the whole menu thing

;(

I keep making menus and then scrapping them, I've made like 6 now for each diffrent menu, just because I make a menu and it looks like, well, garbage.

I know that there isn't a turnkey solution, but there has to be something tangible wrong with my menus, something I can remedy...

For my Swift 3D menu, I tried 5 or 6 diffrent menus before I came to this one, which I decided was the best:

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


The trouble with menus is that you can a lot of effects, but then its just cluttered. You can make a multi-page menu, but that's hard to navigate. You can not have any effects, just black text, but then no one will take you seriously.

Considering my audience of Newgrounds, its rather important that my preloader and menu screens are aesthetically pleasing and decent looking.

[waseem]

what you can do is just simplify the preloader, check out the preloader tutorials on kirupa, instead of a loadbar you can have a movieclip as a loader. For the menu and buttons, I also would reccomend the tutorials here on kirupa, try out the movieclip buttons rather than the basic button class. Look around websites and look at there menus.

[waseem]

If you also want it to look professional, try diffrent fonts, new fonts. search google for free fonts and try find one suitable for your tutorial. Also change the background try a radial gradient rather than the white to black gradient. Try diffrent colors too.

[=guinness=]

first of all dont use a bold font for every piece of type, looks too chunky, bold is for titles and important words or phrases.

choose a different font, what is that looks like arial or myriad :td:
try helvetica, univers, futura or another clean (real) san-serif

get rid of glow, yeah flash 8 has it, doesnt mean you have to use it and unless done really well it looks bad, here is ruins the legibilty of the text.


try a dropdown menu


keep your menus uniform throughout the site, dont change them from section to section unless it is ABSOLUTELY warranted. there should be a system to the menus that unifies them and the site.

learn how to create hierarchy in your type so people can see a flow of information (i suggest buying a design book on typography and layouts/ grid systems) and there are no descent resources for this online.

everything is too big for its content window. make the font smaller

[theflash]

you need to see some good designs and see what you find interesting in that... dont copy it but learn the factors that you like and try incorporating those factors in your design...

look for aesthetic factors in your design... in simple words it should be pleasing, now you need to dig into things which will make your design pleasing

for example,
menu shows good combination of colors then look at the good color combinations, search on internet for more details if you need... and there was a link to see color combo I dont remember now...

And dont get discouraged at any stage

cheers :thumb:

[Al6200]

I really appreciate all the feedback.

I tried to make a drop down menu, but it turned out pretty bad. Part of the problem is that once you make the drop down menu, editing a single part of it can be very time-consuming. Maybe I should sketch out my designs before implementing them...

Guinness,

I really like that drop down menu you made. The current system is when you rollover a button it brings down some text and images explaining it. Basically in your menu it only brings down a few words of explination. Is that better than bringing down that huge chunk of pictures and the like?

Also, what do I use instead of glow filter when someone mouses over the button? Should I just do a simple color change?

[Lord Impero]

not good...expected the meterial to stay when i rolled out :pa:

[=guinness=]

if you describe it as a "chunk" then you already know its not the best.
simple color change is clean.

[Al6200]

Taking what all you guys said, I'm remaking it.

Its similar in style to what you described. Basically the plan is that I have the buttons on the top and bottom, I'm going to take your advice and use a logical hierarchy of font size. Also I'm going to use the indentation technique.

I'm also going to make the "buttons" movieclips. And when the user rolls over one of them a sort of grey box rolls in from the left covering the center area.

I'm also going to use a grey/blue, using lighter colors for when someone rolls over an option.

Thanks, i'll post the menu here when its done!

[Al6200]

And i made this:

http://denvish.net/ulf/1153333713_preloader_menu.php

The preloader hasn't been changed, only the menu, but I could still use advice on the preloader :}

Its still a little bit of an alpha, but I think its okay. Does anyone care to comment on it? Better or worse than my original?

[Al6200]

Do you think my new once is better than my first menu?

[prozacn]

i prefer the new one as its a lot more simple however i'm still not feeling the colours really go well together.

[Al6200]

Blue and Grey don't go well together?!?

[waseem]

i dont understand your whole project thing, all u do is rollover buttons but thats it??

[prozacn]

Blue and Grey don't go well together?!?

they do but the grey is quite dark and the blue is a multitude of blues in a more turquiose way but anyway.

you could try increasing the stage size, simplify the links by removing the rollover. Then when the person clicks on the button, say swift, it would fade (any transition) in displaying a photoshopped styleized image of some of the content from that section on the right while giving a broader description on the left on top of a partially transparent grey rectangle (if needed). You could then throw in a view button and voila.

just a thought however

[rondog]

lose the bevel and drop shadow on your hovering arrow..also make it symetrical...it doesn't seem symetryical to me, I may be wrong. Use a different font and instead of the '|' maybe find a nice modern bullet point or something.

[Jolly_Fat_Man]

What is that creepy thing hovering over the buttons following my mouse?
Kill it!

Your on a good course now. Less ugly things...

Loose that bar on the side of the buttons and use a shine from lower to top.
Maybe the top grey area could go to black and the lower as well. Then you could use white for the letters, also change them to pixel fonts and make them smaller...

That blue ...ish color could disappear.
Also...
As is those buttons, specially on the lower half, aren't as easilly recognized when you're on top. Maybe a color change...

www.colorlovers.com (http://www.colorlovers.com)
Get some color palettes from there if you think about changing the colors to something more bright.

You have a small area to show. Less is more. You should save Bold for really important stuff, like the title.

Another thing... Why is there a Play button?
The preeloader could be one of those circular revolving things and on the center you could have the %.

[chriskalani]

best site in the world.

[Al6200]

Waseeme designs,

The project is a tutorial, and its almost done. However, I onyl posted the menu because that is what I'm looking for critique on.

[jimmyd80]

To be honest, they all look pretty bad. Why are you making everything so large? It makes it look very amateur. Try scaling things down and taking advantage of negative space.

[Anogar]

The pixelation doesn't help either.

[AndyM103]

I can't see the difference.

You need to go for flat colours... I can see that you're really trying but the background doesn't work.

You have some good ideas but you need to simplify everything.

[Al6200]

What are flat colors? I think I'm already using them... Does flat color mean not gradient or not shaded in such a way as to have a pseudo 3D effect?

Sorry, but I don't have a background in graphics or design.

I also don't know what negative space is. And as for why I'm making everything so large, its so that it covers the entire space, as that is what I need to do. Anyway, I think it looks a little nicer with some new edits. I animated the description so that they roll in and roll out.