THANK YOU for understanding why the banner works. There are a lot of people who "know about web design" who seem to be convinced that two tone/inverted/negative space on the banner is "terrible" or "breaks rules". In reality, it's a fundamental trick of graphic design, and it works very well. The banner / topbar is the strongest part of the design imo
*facepalm*
Okay, Contrast 101:
http://www.webdesignerdepot.com/2010/09/fully-understanding-contrast-in-design/
There you go. Read up, it'll help a lot.
Does your banner contrast with the rest of the site? Do your buttons? Yes, obviously. You have a bright white banner with a plethora of colors vomitted all over it, all sitting atop a black and grey website. You have bright red, orange, blue, and green buttons on the same website.
Question: why?
Contrast is used for two main purposes: attention and beauty.
These things definitely aren't pretty; the colors work amongst themselves (sitting the buttons to the side, the colors complement each other even if they do belong in an Easter basket), but they don't work with a user-driven content shell. If
you were producing the content you could probably make it work, but you're designing someting that can be acceptable only when
there is no user interaction. In essence, your design of the banner and buttons are both naturally obtrusive.
This is a good webpage. Notice how he uses both shape, location, and color for contrast; currently you're only using color for contrast and haven't paid much attention to location or shape (don't tell me you did, the extent of your placement for these things is "where they were before, but bigger").
Where does your attention go? Immediately to "Bye-Bye Redirect". His content is accentuated by the contrast. What's more, it's a butler, not a salesperson. Do you want to know who this guy is? Want to read more about him? All of that is clearly labeled and easily found using only cardinal directions. Straight up, there's another colored text block. To the right? Widgets and whatnot. To the left? Navigation. Straight down? More content. If you drew lines with a straight edge across the page, you'd fine they don't lead to much "noise". Each direction has a clear indication of what you want to do once you know where they are, and for a first time visitor they start where he wants them to start and moves from there.
You with me so far?
Here's the website with some lines to help you visualize the sections as a designer would. Blue lines are for things that "make sense"; they fit with the rest of the website, making it cohesive. I did the lines by hand and without a ruler, but you get the idea.
The red lines are those that show things that don't "make sense"; they are independent variables and meant to be treated independently.
Now, to clarify, red doesn't mean
bad. It means independent.
Which is normally bad.
Like this!
You've basically got 5 or 6 independent sections of the website all piled on top like Smashboards is some kind of sandwich made by a depressed minimum wage employee in a run down McDonald's with those bulletproof shields up. Fast and messy.
Now the last guy had only HIS content to worry about. He had two ways to look at it: how to make people see his content, and how people would see his content. You're designing for a forum which is a different monster; it involves users wanting to participate actively in creating user-driven content. This means while his website is a showpiece, yours needs to a
machine. It
needs independent variables to the site that are useful and accessible to all users.
Let's start at the top.
You've got this bigass banner.
You've made it a HUGE contrast to the rest of the site. Your eyes are naturally drawn to the banner.
Why would you want that?
Seriously, stop reading and write it down. "I want the banner to be the focal point for the user every time they visit Smashboards because ________"
...
Seriously, write it down. WRITE it. Don't think it. Have concrete evidence of your thought process so there is no cognitive dissonance here. Don't leave this post thinking "Psh, what does he know" and assure yourself you've already noticed all this. You didn't, or it wouldn't be live.
....
...
You got it? If you skipped ahead, you're not looking for improvements in the site. You're looking for an argument you can shut down, something that can indicate that YOU are right and WE are wrong, that you did an awesome job and you can go to sleep happy. If that's the case, close this browser and be ashamed of yourself.
If not, congrats! We're going to do some in-depth stuff. Fancy.
Starting from the top, here's your banner and it's conjunctive toolbar. Fullscreen, this is what most people should see.
Starting from the right, you've got some good stuff going in in regards to space. This kind of gets destroyed in anything but full screen, but it's really hard to do things like this in anything BUT a fullscreen mode. That's why most websites don't do things like this. People don't browse in fullscreen very often anymore. They have multiple windows open at any given time, and they stack them over other programs.
So, black mark on you there. You designed a car that can't make turns. Sure, it might look awesome on the salt flats going 300 mph in a straight line, but if its circumstances change it is no longer awesome.
That's a pretty big design overhaul needed right there.
BUT, in fullscreen the space looks good. The space to the right and the left is mostly synchronized (the scrollbar hurts it quite a bit; it should probably be moved slightly to the left because of that, but no biggie. This is one of those things that skips mention on paper because it doesn't appear until it is in a functioning browser window and suddenly your ratio is off).
Looking at the toolbar below, you find it lines up with the buttons above quite nicely. Good design for an independent section of your website. This doesn't fit with the rest of the site, as shown prior, but independently it is okay.
However, again, when not in fullscreen your ratio messes up. When viewing the "window space" on the right side, it fits perfectly other than the scrollbar. Ditto to the left. The ratio of the empty space inbetween them is acceptable, but if you're not in full screen it all goes to hell.
You've gotta pick one. Is your website fullscreen-only mode, or is it "cram all the options into a browser window"? Both can be acceptable depending on design, but you've implemented "cram" while designing for "fullscreen only". Pick, you can't do both successfully without making it look ugly.
So, independently, your banner and toolbar is more or less acceptable. Good job! It only needs tweaks towards perfection, which generally means "you're done".
This next picture shows that banner and toolbar with the actual website, which is where things immediately begin to fall apart.
Before I refer to the banner above again, let's get to the rest of this top section. Did I mention it's freaking huge? Because it is. Moving on.
On the right side again, I've forced some perspective for you. Does that look right? It shouldn't. Those lines/arrows coming out of the corners are being forced to be parralel when it should occur naturally. They don't actually "point" in the same direction; I'm forcing them to. That's why it seems a little off.
The blue lines show that the distance between both sides is accurate (which should be automatic), but that doesn't make it "pretty". Look at the orange line and how it progresses. Does that LOOK pretty? Because even when that line isn't there, that's how people interpret it visually. Your brain picks up on those things not
quite matching.
So why doesn't it match? Did you want to draw attention to it instead of making it look nice? If you want to make it look nice, make the ratio the same between the ad and the bar below, or make the length the same between the bar below and the announcements bar. It's pretty easy and standard. But I'm going to assume you wanted to draw attention to it, because something that glaring can't be accidental.
Especially since you have a giant orange box around the announcements. I don't know why that's there, but that's plain ugly and pointless. Scrap it.
Which pencil do you notice?
Now look at the pens. Do your eyes constantly go back to that pencil, even if you don't want them to? That's the effect of contrast. Overuse of that
kills a website.
Currently, anyone looking only at the top has TWO competiting elements: the announcement box that's irritatingly off, and the bar above. Only when scrolling until one of them are off the screen can you "get away".
The huge contrast between the white and blue and the dark black is unacceptable for what Smashboards is. If you want Smashboards to be a community site, you need a main page. Smashboards.com should take you to a main page with a banner and buttons and options and stuff, with one of them being the forum. If you want Smashboards to be a forum, which it has been since forever, you need to focus
on the forum.
You are attempting to "sell" the banner at the top and the announcement box at the same time. Don't. We don't need to be sold on either of them.
Change the entire color scheme for the top banner. It should be blacks and greys, just like the rest of the site. That blue bar that changes colors each time you click on a button? Completely superfluous. It doesn't tell us anything. "Oh, my bar is green. That means I clicked on Connect". Well no ****, I just clicked on it. All that bar's color does is grant you some attention issues.
Again, blacks and greys. Don't add color where it doesn't need to be. Add different colors for different skins, but this site is predominately black and grey and you're just suddenly throwing paint on it saying "BRAWL IS COLORFUL". It isn't. Brawl HAS colors. It isn't colorful. It's actually the darkest and least vibrant of all the smash games so far, so I'm not even sure what you're getting at.
Oh, and this is just an aside, but that entire announcements box? That'd be WAY cooler and actually useful if it wasn't
designed to be useless for anyone that doesn't want those exact things. Site announcements? There's already a forum for that RIGHT BELOW IT. Big tournaments? Eh, I guess. Doesn't matter much to me since I don't travel that far for tournaments. Most don't. Featured topics? Okay, I guess some people want to see things like that. Thumbs up on that one; that's a good way to spread good threads.
Would be cooler if you could maybe have those customized. It'd be cooler for me to see "Mafia", "Brawl Backroom" and "Featured Topics". That'd be perfect for me. Why can't I do that? Why is that not an option? That shouldn't be difficult to implement.
Hey, you could get rid that glaring bar on the side! With a "featured topics" list you could actually bring up those things on the side when they are relevant rather than having a link
no one will click ever unless they are brand new. Maybe all that info could go in the, oh, Info page? Hell, if we can customize I'm sure all that stuff will pop up for the people it is relevant to. Did I mention that Melee and 64 aren't going to have those things updated ever? Because you just implemented a new feature based solely around dead content. I already did get rid of the bar in my pictures by using "user cp", and will continue to do so. It doesn't really make sense for that bar to exist.
Know why?
Because it was designed independent of the site, just like the banner, and then placed into the site that was already there.
Oh, and by the way? Use the same freaking fonts.
AND get rid of those giant icons next to the forums. -_-;;
But let's move on.
So, we've determined you have THREE competing elements all shouting to get the user's attention: The banner at the top, the advertisement below it, and the announcements bar below that.
This is too much vertically. Fix it. This is USER driven content. Not smashboards staff driven content. Fix it, shrink it, smash it. Make it smaller. This is why people hate ads. We put up with them because, come on. We have to, they pay for things. But you managed to put two of your own advertisements on the page for no reason.
Change the color scheme to where it doesn't contrast with the actual content, get rid of the bright orange banner around the announcement box. I get it, you want people to see. Well, this is an ******* salesperson's style. This is the kind of person that says "Hey, I know you don't care about this so we're going to MAKE you car! LOOK LOOK LOOK!".
Drop the attitude, be a butler. If we want to use those "boards info connect' buttons, we'll go ahead and look up there. If we want to use that giant announcement box, we'll look up there. They don't have to be surrounded in bright colors that make our eyes bleed.
Now we can FINALLY get to the actual content.
One of these things is not like the other, one of these things just doesn't belong....
Oh, it's the giant freaking exclamation point.
Be a butler, not a salesperson. You know what I look for for "new posts"? A bold title. Which we already have. You know what I don't notice if I'm not looking for it? A bold title.
You know what is going to scream at me
every time I open my User CP no matter what? Those red exclamation points. They are angry, they are loud, and I am NOT inviting them to my birthday party.
Those icons suck. Every last one of them, get rid of them, they're worthless. Maybe if you shrink them to 1/4th the size. Your icons should
not be noticeable unless someone is looking for them.
You see that "poll" icon next to the Midwest SiiS5 tournament? You know how obtrusive it is? It isn't. it says "I'm a poll" if you're looking at it, and nothing else.
Look at how much better that is
simply by removing them entirely. You have made
negative progress in implementing those icons. They're large, they're garish, they're bright on dark, they are everything you don't want to do. If you disagree, go ahead and put glitter on them and make them sparkle because why the **** not.
We're ALMOST ready to get to the actual forum.
Except...
WTF. You have a "notices" popup box too? I just "noticed" that myself amongst all the noise. You should probably, oh, I don't know, put it in the OTHER giant notice box.
I HOPE that's just leftovers that haven't been accounted for. Pleeeeeease let it be leftovers.
Before we get to the actual posts, first some things you've said recently:
MMM said:
Normally I'm not super crazy about glow effects myself, but as a few people have brought up, Smash is a very colorful and bright game, so I think it's well-suited for this community given that it's about Smash, which you seem to agree with. I think it works really well for the forum titles.
Smash isn't a very colorful or bright game.
It uses elements from games that ARE colorful, but it isn't, by design, a bright and colorful game. It's actually the darkest and most subdued in the series and they added a lot of shading and shadows to this one.
Admittedly, the post buttons were probably the most difficult part of the design, mostly because they have the job of tying in the colors / images everywhere else on the site with the forum (which by design is less customizable / colorful). They are definitely what I am most opened to criticism / suggestions on.
No, they don't. The buttons don't have that job. You gave them that job. You gave them that job when you decided the top banner needed to have a bunch of Easter colors in it because you decided "hey, let's solidify Smash as a kiddie game. Anyone? Anyone?".
The buttons before were small and grey, and they did everything right. Yours are bright and garish and huge and do everything wrong.
The buttons need to
not have contrast to the actual post. They should be noticeable when someone looks for them, but
not when someone isn't. If you're reading a post and you see those buttons, those buttons are a failure because they're screaming "HEY, USE ME TO QUOTE" when they should be patiently waiting for you to ask them.
Normally I'm not super crazy about glow effects myself, but as a few people have brought up, Smash is a very colorful and bright game, so I think it's well-suited for this community given that it's about Smash, which you seem to agree with. I think it works really well for the forum titles.
No, it isn't. Also, **** you for saying just because I like Smash it means I have to like bright colors and glow effects.
There's another picture of a game I play. Whaddaya know, Smashboards is filled with people that play Smash and
do other things. We're also predominately males. OLDER males. Like, teenagers and above. I'm 25. Most of the smash scene in Ohio is in their 20s.
Competitive Smash isn't a kiddie game. Stop treating it like it is. You should be a member of this community so I don't know how you forgot that and, frankly, you should be ashamed for not thinking "will advertising Smash as a kiddie game hurt the competitive scene".
Thanks, I assumed people would want something similar in terms of the forum's color.
But then you changed everything else. -_-;;
Personally, I liked the darker colors because it wasn't as ****ing bright. But that's more personal preference than anything, so I won't garrote you over it. But still, I want Revolution back. Like, as it was. No changes.
And as others have said, the font glow? Whoever thinks that is a good idea for
anything that needs to be read probably drank bleach with their cereal as a child.
I know it can be hard to design text and colors and whatnot because you don't actually
read it. You know what it says so you gloss over it. For people trying to read it? Annoying as hell.
Now to the actual posts.
There's a post for you.
Wait, what'd I do there?
Oh, I moved those giant ugly buttons to a place that isn't completely in the way which helpes prevent an excess of negative space (decreases vertical scrolling)! Progress!
Hmm... actually, trying to read that post, my eyes keep glancing towards those bright buttons at the top even though they aren't so huge anymore. Why would they do that? Well, let's look through the words... they're buttons... they're bright... Ah! They're bright. Got it. The only adjective we really have for them other than "colorful".
Ta daaaaa.
Now they aren't in your ****ing way all the time while you're trying to read actual content that you came for. I didn't even fix the background for the images, just rip, resize, and greyscale. They're not the right shades of grey and are on a block color background that doesn't synch with the header and they're
still superior.
Of course, simply shrinking the buttons does a lot. But those colors? Freaking bright. Ditch 'em. You're on a black background. You want to use colors like that on things you want people to pay attention to and people DO NOT WANT to pay attention to those buttons. They want them when they want them, and they want them gone when they don't.
There's a brief lesson in contrast. Now hopefully you can understand why the banner
doesn't work.
Oh, and I make money doing this too. But you know what? I'm not a professional at it because it's not my training and I'm not good enough to be a professional. I am, however, competent enough to know that everything good is designed around users first, functionality second, and if there's anything left you go back to users.
