3

I've got a little site I built for myself and a friend that let's us run our tiny little March Madness pool. Functionally, it works great. But for the display of the brackets, it's, well, just plain ugly.

ugly.

Quick NCAA Bracket Explanation in case anyone doesn't know. There need to be 64 total teams on the outside, divided into 4 quadrants. Inside each quadrant there are 4 more levels of games (16 teams down to 8, to 4, to 2, to 1). After that the winners of the 4 brackets each play 1 other, then those winners play each other

Each team is "clickable", and for me, each little colored square has to be in its own selectable elements based on id. Currently it's a table design (boo!), and, as you can see, so ugly.

Any ideas for making this look a little nicer? The rest of the site is ultra plain (I call it clean) with gray/black/white, but I could change this easily.

Improve this question
6
  • Are there really 4 quadrants? Surely it's just one pool, unless you're reseeding or randomising when you're down to the last 4? – e100 Feb 24 '11 at 19:41
  • 1
    Actually I think tables are well used here. It's clearly tabular data and making this in nested divs would be an actual nightmare. Good job on selecting the right element for the right job :) As far as "prettifying" it goes, gradients, everywhere! :D – Kyle Feb 25 '11 at 7:26
  • My point above may seem at a tangent, but I'm trying to work out if you need the 4 colours, and why you start on the left and right edges and work towards the centre, rather than the classic left to right progression. – e100 Feb 25 '11 at 12:31
  • e100 -- yes, there are 4 quadrants. See this image search: google.com/… . This is a yearly tournament of many colleges and Universities in the United States (I think only the US...) with 64 teams (well, 68 now, but 8 teams play a day earlier and whittle the field down to the standard 64 teams.) However, my layout doesn't actually have to be split into quadrants. That's just how it is normally done. – Matt Dawdy Feb 28 '11 at 15:02
  • Lovely design. :) – JFW Feb 28 '11 at 15:20
4

Couple of possible suggestions:

-Could you allow users to scale it up or down so they're viewing only a single round (or a couple of rounds, or half the teams, etc.)? It's a little easier to scroll up and down in a browser than it is to scroll left-right, so if you had to scroll down a little most users would probably not have a problem with this.

-Grey out defeated teams / levels (so that only currently active teams have colors)

-Use something like a border around each pair so it's easier to see who's playing who (this would be more useful at the beginning since there are so many more choices to start)

Could you use s instead of table elements? This way you could simply change the div id of individual team(s) to things like active, inactive (defeated), currently playing, etc. That shouldn't interfere with the clickability (is that a word?) of each element yet allow you more control over the shape, size and outline of each block element.

Also, what do each of the colors mean? Are they an NCAA division, "owned" by a certain individual, etc? If it's something standard (like geographical or NCAA division) I'm assuming the users will all understand it, but if it's just done to try and visually separate the various teams you might be better off creating a physical border.

Improve this answer
4
  • Scaling: Absolutely I could, and that's a great idea. When I made this last year, I was literally doing final testing as the bracket was being announced, and I cheaped out on the interface big time. Hence why I'm here. I just should have come here THREE MONTHS AGO! Graying out teams -- again, great advice. I'll do that. Border around the pair -- not sure if I can do that easily, but it does need to be done. – Matt Dawdy Feb 24 '11 at 15:34
  • "Could you use s instead of table elements" -- I'm not sure what you meant to say there. Divs? If so, that's well beyond my CSS skill level to make divs line up perfectly like that. Any links? As for the colors, they were just for separation. They are ugly as sin and totally washed out. I hate them. If I do split up the bracket into 5 tabs or something, then I think I could get rid of the colors. – Matt Dawdy Feb 24 '11 at 15:46
  • yeah, sorry - divs. when you stick the brackets in the html editor for the site kills them. – lawndartcatcher Feb 24 '11 at 18:25
  • 1
    You could probably grab a pre-made CSS grid layout from somewhere and alter that. I'm kind of a fan of 960.gs and their grid system. – lawndartcatcher Feb 24 '11 at 18:27
3

The thing that most detracts from the appearance to me is the central 3 boxes for the finalists and winner. It would look better if you put them all on one line, and used one or two colors that were different from the four quadrant colors. If those three boxes were given visual separation (eg white padding), then they could be the same color, but it probably would be better if the two finalist boxes were one color and the central winner a different one. This stuff should be doable with just tweaks to the table structure.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.