The square-cube ratio: when an object doubles in size, its surface area quadruples but its mass is multiplied by eight (oh, I was tempted to write “its mass octuples,” but that’d be a little much. Also, Firefox’s built-in dictionary doesn’t recognise “octuples”). And since a creature’s strength is proportional to the cross-section of its limbs, this explains why an ant can carry hundreds of times its own weight on its spindly little legs, a human can just about manage another human, and an elephant with its thick frame and stumpy legs can carry 25% its own weight. An elephant-sized human wouldn’t even be able to move.
So what’s the point? The rules don’t change when you get smaller or bigger, but how they manifest themselves does. This was brought home recently as I tweaked the thumbnails for VGVA.com‘s style switcher. The problem was to present the graphics, colour scheme, and overall look of each theme in a 20 x 20 space. Just shrinking the main graphics wasn’t enough. Details disappear, colours show up differently, even proportions can seem a little out of whack.
Consider the (newly finished) Christmas theme. That one was easy: I just took one of the snowflakes, shrunk it a bit, thickened the lines (otherwise they’d disappear), and then cropped it. Result: a pretty little thumbnail that does a good job of suggesting the whole while looking nice on its own. The tree wouldn’t have worked in a square space, and trying to show a whole snowflake would have meant (a) losing a lot of detail and (b) wasted space because those snowflakes are taller than they’re wide.
Second hardest: Red Fire. Deciding to go with just one shade of orange in the center part was easy, but then I fiddled a lot with the angle and granularity.
Biggest headache: Sunburst. Shrinking the sun graphic was no good: at that size it was just a shapeless smudge. Even worse: against the darker backgrounds I lost most of the contrast between the yellow and light blue. What to do? My first step was to thicken and darken the orange outline. That helped, a little, but the shape was still wrong. It was only a couple of days ago that I had my Eureka moment: stretch it out. The essence of the full-size graphic was in the shooting rays, so the thumbnail had to emphasize them. Also I lightened the yellow just a bit, to increase the contrast with the blue background. It felt a bit like cheating because I wanted to keep the colours the same, but the large sunburst had a white centre, so that was all right.
So, yeah. That is an interesting experience. I don’t know how many people this will interest, but I wanted to record this latest step in my quest to be a better Web designer.