: March Madness Bracket on Website 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
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.
.
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.
More posts by @BetL875
2 Comments
Sorted by latest first Latest Oldest Best
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.
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.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.