The original settings page for my Tic Tac Toe game was pretty unintuitive and horrible. Neither visually pleasing nor having a great amount of utility. So I was tasked with improving it. I had to create three different design mock ups, test it with three different people, timing the time it took for them to complete the settings, and then create a final mock up for the game.
The first design I mocked up was using a horizontal box scheme. The player one and player two settings were in their own quadrant and the board dimension/first-player settings had their own boxes too. I chose a charcoal-blue background and white font for the most part.
The time it took for this one was about 20seconds. The horizontal layout tested well but it was visually mediocre.
The second mockup, unlike the previous, was completely vertical. The settings were still grouped the same, but they were placed vertically. Brown was the background color.
The fill-in-time was around 13 seconds. Quicker than the other one, but it was not deemed as pleasing as the horizontal blocking scheme. It was kind of ugly, too, as one can see.
For the third mockup, I used a css template called ‘Materialize.’ It was very informative and easy to follow, so I was able to use some javascript tools with it. I really liked it, so I knew I was going to end up with it. It was originally vertical, but after the testing on 1/2, I switched it to horizontal because that was deemed better. I did some tweaking here and there and ended up with this:
I find it to be very slick-looking and it has some neat responsive touches, originating with the Materialize CSS/JS part of it.
I liked it so much I ended up revamping the entire web-version in this style and with Materialize. The end result is fresh and ‘modern.’ Very pleased with it.