Defining the visual style of Chucksports

While Chris and I were making mock ups and wireframes we were not concerned about the visual style. We wanted to get features in fast to make sure they worked well. Once the number of features going into the game slowed, and the time spent bug fixing went up, we really began focusing on the presentation of the game. Chris had made the original Chucksports website with the 1963 Topps baseball cards in mind as inspiration. That’s where I started. Making a sports trivia app whose demographic mainly includes sports fanatics, bringing up their card-collecting nostalgia through the game’s visual design made sense. And it doesn’t hurt that the ’63 Topps are really great looking. Bold, bright, and simple.

BaseballCards

I collected more reference than just the ’63 Baseball cards just to be sure there weren’t any awesome evolutions that I could pull inspiration from. I am too young to have any sort of childhood connection with the ’63 Topps aside from generally liking their design, so I wanted to check out the cards that I sorta-kinda collected when I was a kid. Cards throughout the ages have kept a bright color scheme, but have messed around with the way the information was presented. None were as bold as the ’63 Topps, who were minimal in complexity and information while still attention grabbing. Newer cards tended to distract the collector from the player’s portrait with outrageous framing elements and corny graphics.

IngameEvolution

My focus was to make the app feel like a you were playing with baseball cards on your phone. Being developed in xCode and Interface Builder, we were pretty limited with what we could do animation-wise, so I tried my best getting the graphics looking the part, as well has having bits of homage via the app’s design.

Stats01 copy

To create the look and feel of a card I created a rough looking texture that eliminated the smooth, glossy look that is generally found on iOS apps, and applied that texture to everything. This caused us some headaches, but I think the effect it had on the presentation was worth it. I also noticed how the old ’63 Topps had a bit of ink bleed around it’s text and large areas of color, which I mimic’d by using various outer glow/stroke/dropshadow effects in Photoshop. I took advantage of working digitally to enhance the way important elements stood out and called focus to itself, which I think is where the baseball cards lacked.

HiRes

The buttons originally had a strong bevel that made the graphics appear more 3 dimensional. The 3 dimensionality was ruining the card-effect that I was trying to achieve because the buttons did not look like an object that could be generated by a baseball card printer.

Buttons

Here’s a little display of a few key-screens of the final product.
Chucksports01

With simple, bold design and colors figured out, we continued onto some higher-level branding of Chusksports. We thought about what would come after Chucksports. Why is it called Chucksports? Who should we market to and how?

Part III will show how we developed the brand and display some of our marketing ideas.

Check out Part I if you missed it.