There are designers who can start with a blank canvas. Their heads seem full of ideas and inspiration to motivate that first design choice: palette, layout, type, etc. I have friends, artist friends, who have a magic, bottomless, idea reserve they grab from as if pulling rabbits from a hat full of rabbits having sex like rabbits. Their access to new ideas is without end.
I don’t work like that. For me to get something out, something has to go in. Where these other creatives are an autonomous, kinetic machine, I’m a toaster oven. I can make toast, and sometimes pretty good toast, but I can’t make the bread that goes into the oven. I need something to react against, root for, chew up, swirl around, remake.
After we’d finished the new site copy (though it would change a bit), I started to pull together ideas, or in my toaster oven metaphor, choose and slice some bread. In an earlier draft of the site that never launched, we had a space theme happening. I’m not exactly sure where that started, except there is a pool of design I like to return to for ideas, so it’s very possible I stole something from there.
If you’ve looked at the work we’ve put out over the years—particularly for our own branding—it shouldn’t be a surprise I’m a huge fan of mid-20th century print design. The texture, the open space, the hand-made imperfections (because the designs we’re literally handmade verses with mouse-precision in Photoshop), the total of it resonates with me, only equalled by 1920s/1930s Soviet propaganda (the conflict of mid-century capitalism and fervent socialist agitprop has not escaped me). Since the first web designs I did, back in the late 90s, I’ve been a big fan of rubbing a little dirt on stuff, attempting that hand-made feel, however deceitful the practice is since the only things I touched were a keyboard and mouse. Regardless, I think that hewed aesthetic represents what This by Them does well. We’re detailed and exacting in our code and design, but we’re also big fans of the natural imperfections found in life that give us all our originality and singularity. Yes, those are big, fat concepts and sound pretentious, I agree. But hell, we have “Dent the Universe” in our tagline—so we’re already guilty of grand illusions.
Riffing off the “dent” line and Scott’s sweet implementation of the starfield, I began to cull images from this very fine collection of industry ads from the 1950s.
While I was most intrigued by the design elements from the collection, that’s not where I like to start. Type choice and palette, for me, is the bedrock. And in that order. Being we had the theme and inspiration, the type needed stay in spirit. Truth be told, I would set my whole life in DIN—but we don’t have a web license and the good web versions are pretty pricey. My choice, Futura, is hardly a second prize and would do perfectly to communicate the sophistication of the above designs while having a nice, friendly roundness to it. The goal of the site is to attract clients, and fonts have character and personality, however subtle, which absolutely communicate a feeling to the viewer. The body font was a bit tougher. I wanted something that fit with the hand-set feel of the era and that was readable and attractive on screen. I went with Kepler, though the thin serifs can get mushy at smaller sizes (retina iMac—I’m coming). I tried quite a few serif fonts for the body, but in the end stuck with Kepler, compromising a little mush for the right feel.
We’ve had a palette of sorts over the years, a yellowish gold (or goldish yellow) and some kind of teal, colors, again, inspired by the 1950s epoch. Our base colors needed an update, and some friends. I have a few tools I use to create palettes. First is ColorSchemer Studio. I never get a whole palette from the app though. It would be really great if the app allowed customization beyond the first color entered. Because it doesn’t, I use it to get a ballpark scheme and then tweak colors through the design process. SASS variables are a godsend: to be able to adjust in one spot and immediately see site-wide results is just rad. I use micro-adjustments in the Photoshop color chooser, which I wrote post about here, and copy the HEX back into the SASS. Plus, making fine adjustments for individual elements using SASS’s +darken(), +lighten(), and +desaturate() are tools I just can’t imagine living without these days.
So there’s the palette. It’s a muted collection, low saturation and mid-toney. I was thinking about how colors (ink) looks soaked into a printed page—particularly on yellowed and aged paper. Normally I wouldn’t create more than five colors. We had some design elements that need greater variation (which I get to below), thus a broad spectrum.
In high school I worked on the school paper. One of the first things you learn in journalism is how to place information into your story. The most important stuff comes first, becoming less and less important as the piece goes on. Why? People don’t always finish reading the whole story and the last thing you want is to bury an important fact in the last paragraph. Your site visitors are the same. They’re skimming. Only a small percentage are reading every word on the page. It’s important to give visitors a visual hierarchy that leads them through the site content and allows them to stop and go more in-depth if they want to.
To give you an idea of how I tried to achieve this, I’ll talk through the decisions for the above section. First was getting the visual hierarchy. I started with What We Do up in the corner with tons of empty space around it. Because it’s the only element there, it obviously catches the eye (and it’s top-left where us Westerns first look on the page). The large text size gives it visual emphasis while the thin weight (which matches and balances closely the line weight of the icons) doesn’t allow it to take over the section—the text in bold would be too much. The next two heading sizes are bold, the paragraph-lead and the services headings with the services headings a bit smaller size. Lastly is the services copy, set in italic and with a lighter text color, giving it the least visual weight on the page. So how does this add up? For the reader, she can scan What We Do to the icons, both about the same height and line weight, connecting them visually and in effect saying we do what the icons represent. The weight of the paragraph-lead to the services headings also pair visually by their similar style, but one level deeper in that the viewer actually needs to read the text for the connection to make sense. The services’ descriptions are the least important information in the section, the italics and light color let the viewer know that. I added a :hover state on the service entries to darken the text and enlarge the icon, so if a reader did decide to dig, he was rewarded visually, making the copy pop.
Did I plan all this out before I started? Um, no. Not in the least. I can’t say I even thought this in-depth about the decisions while I was making them. Me, the toaster oven, kept cooking the page, moving elements and changing weights, etc., until the balance appeared. While it can feel like magic when a eureka! moment happens, designing isn’t magic. It’s science. Maybe a mysterious science full of magic, but all decisions break down to simple processes. This is good. As a designer, my job is not to ponder the deep things of life. My purpose is to clearly communicate an idea, to make declarative visual statements. Obfuscation and quandary are not my friends—though I do really, really like them.
Because my design decisions tend to be reactionary, I can fall victim to “feelies,” saying to myself, “well, that feels wrong and this feels right, so it must be right.” As a designer, my gut instinct has to have reign. But the danger of giving into it blindly is like being hungry in a convenience store: “Damn, those Little Debbie chocolate things look delicious. Oh look, Slurpees! Large and blue please.” Before you know it, you’ve scarfed down anything that looked good, ignoring the consequence of feeling like crap an hour later. Designers can do the same to the page, loading in every whim, tantalized by eye-candy. Our gut, our appetite, should drive us, but—despite what my five-year-old will tell you—a plate of sweets isn’t a meal.
That all said, when I initially looked through the industry ads, this page and the star was the first I pulled into a folder called “Ideas.” I just loved it. The asymmetrical points. The odd overlaps. Precise and chaotic. Nom nom. I had no idea how I could steal and use it. But I was going to find a way.
We wanted to have a description of our working process without overloading the page with text. Too, each of the steps in our process has a similar weight, one isn’t necessarily more important than another, thus a perfect opportunity for the star to visually represent each step and at the same time showing them as a whole, interconnected thing. Even the animation spin I added demonstrates our working process is ongoing, always trying to improve the project. While a big list of the process steps with definitions would give the viewer a little more depth, it also had the chance of overwhelming her with too much information. She’s likely to skim. Truth is, we’d rather go into all that on a call where a potential client can ask questions.
So yes, the colorful star and animation are eye-candy and my previous explanation of all it represents few visitors, if any, will consciously get. I’m cool with that. I trust the design to communicate the idea as strongly as the text, and I believe the viewer feels it, senses it, when there’s harmony. It makes the message—in this case “Hire us!”—more powerful, and by that more people will, um, hire us.
01 “Hello World” | 02 Goto 01
I think a successful design feels obvious, as if there wasn’t any other way to do it than the way it was done. It has an internal logic, an inevitability of form and message. Of course this is crap; there’s no one way to do anything or to say that something can’t always be improved, but good design attempts to convince us otherwise.
Rather than seeing the creation as a mysterious whole, it’s helpful for me to think of each decision as a separate process, like a cog that needs to work with everything else, and all working together to present a clear, compelling message. Does our new site accomplish this? Well, that’s up to the viewer. If we weren’t proud of it, we’d never have launched, which we can say with confidence as there are Finder folders full of half-starts and failed designs. Eventually the current site will find it’s way to the archive and we’ll start the whole thing over, a new theme, a different message, but the creative process will remain the same.