Matt Hackmann

MattHackmann

The thoughts and goings-on of some programmer dude.

The Lazy Approach to Design

It's getting to be that time of year again when I begin making preparations for the annual awwnime bracket. Unlike last year, where I split the bracket up into boys and girls, I'm going to head off any "well, this character identifies as..." issues off at the pass and go back to a single bracket. And with the new bracket comes yet another tweaking of the design.

Last year, I requested custom artwork of 2012's bracket winner from a fledgling artist who was active in /r/awwnime. I placed his pieces on the site, mostly working around the existing design. This year I wanted to do something different, partly because I really am coming to loath that design, partly because I want to try something new. That something is mostly eschewing the much pixel pushing and heavily using photography and typography to create the interface.

Carrying on the trend of having the previous year's winner "emcee" the current year's bracket, I picked up a Nedoroid of said winner as the center piece for the design. Nendoroids, for those who have lives, are a chibi style line of figurines that are fully posable and come with a variety of different accessories and faces, allowing you to make many combinations of expressions. Generally, this is not my type of thing being more of the "static" figure type of guy, but for creating a photo based site design, it's quite perfect.

Now, I won't lie. The decision to go with this type of aesthetic was for the look, the other part was because I felt it was going to be simpler to pull off. Which is probably true, if you know how to correctly operate your camera, light your scene, and orchestrate things compositionally. I, sadly, did not know how to do these things very well. As such, this was my first result:

First thing's first, the positioning of the little Tsukiko is way off, gobbling up (pun intended) too much of the center stage, leaving disgusting areas on the side that are trying to be hidden by some falloff gradients. Also, despite my best efforts to color correct the initial image, it still kind of has a urine stained feel to it (much like K-mart). Despite using the same post-processing, the iPhone landing screen was far and away better, if not color wise, certainly compositionally.

Actually, that peeking above the fold arrangement is what I used for all of the app branding, from App Store images to icon. I quite like it.

Not satisfied with the original desktop splash screen and wanting to get the thing coded soon, I gave it another go. I happened to have some banana muffins sitting in the freezer, so I thought that might make a better set piece than the random not-identifiable-as-curry-box in the background. After switching the camera into full manual mode and playing around with poses and lighting, I arrived at this result:

Holy shit, that's so much better! So much better in fact, that almost all post processing was removed in Photoshop leaving only some slight tweaks to the color curves to bring the blues up a bit. Of course, this is but one of at least three screens that I have to do, the remaining two being the nomination and voting screens. Not sure what I'll do for those at this point, but at least I'm getting a feel for the camera and how these photos need to be taken to work well within a web layout.