From phone snapshot to watercolor paper

At the beginning of the month I finally, finally launched Make It Legit. I’m happy that I took the time to work through it to be what I wanted it to be – especially because I decided I must make an illustration with each post, and came up with a format that got me back into watercolors after a long dry spell (literally).

Here’s a work-in-progress photo on the left for the the finished image on the site itself. Most illustrations so far are pulling references from other places.

It took a bit of work to get to that part, though, so here is the breakdown of what it took to get the site going. Maybe this will help you if you’ve been thinking of starting a blog too.

Concept

Lesson: Claiming your virtual stake early is always advisable.

I got the idea in late 2011 after it occurred to me that there were some similar themes to the advice I was giving designers to help them get unstuck. I wasn’t sure what to do with it, but I knew I wanted a way to describe it. After jotting down a bunch of words trying to get to the right idea, I landed on the phrase “make it legit” as best captured two key components: it’s about getting things made (to differentiate from ideas, prototypes or other vision pieces), and perhaps more importantly, having what gets made be something genuinely useful for people. The URL was available so I grabbed it, and after a little more thought, got the Twitter handle too figuring I could use it to announce new stuff. I am really glad I did as it would have definitely been gone within a few months (probably by the dude at @makeitlegit_ or someone else).

Content plan

Lesson: Have a good sense about how much you can really say/create.

I knew it wouldn’t work for me to sort it out on the fly–I’m not the journaling type. But…there was something to the advice that seemed like it might be useful to capture. I started a running list in Simplenote to write down each of these bits of advice since I knew I could talk about them. I realized some of that advice was the result of working through things that frustrated me, and started paying more attention to that initial trigger in my day-to-day work. It doesn’t happen often, thankfully, but as it did I would make note of what it was right at the time. Later that day or week, I’d usually come around to thinking about it again, and would actively think through what was really happening there a little more objectively…and figure out how to come up with something constructive about it. That would then become a new topic.

I did this through much of 2012, and it was a handy little exercise. I started keeping track of how many topics there were, and once I hit 50, I felt pretty confident about moving forward. Even if I had nothing left after exhausting that list, that’s still a decent amount of content.

Setup

Lesson: Be thoughtful about how much to DIY.

This was the worst roadblock for me. I’m an experience designer and an artist, and I have a degree in computer science. That sounds like that ought to be the perfect combination for making a site, the elusive designer/developer combination that’s supposed to just create amazingness. I couldn’t shake this expectation for a while, and it utterly paralyzed me.

I started making progress on this once I started letting go of this, a piece at a time, to get down to the parts that were most important for me to do myself. Handcoding the structure from scratch? Not important; WordPress would be faster to set up and reasonably extensible. Make a template from scratch? Investigated for a bit, and decided I could customize the look of an existing theme and that would be good enough…plus then I could start with something responsive, eliminating another level of DIY.

The last piece was accepting Alan’s help on the setup and troubleshooting. Even though I genuinely did not want to do this part, it took me some time to let go of stubborn pride. He set up the WP install, and later on, did some troubleshooting on formatting issues I had while fine-tuning it, both of which were key to getting it going.

Template

Lesson: Getting feedback, even on stuff that’s not all that great, helps for getting unstuck.

Around November 2012-ish, once I knew I had enough content and a vague idea of format, I started planning out color schemes, layouts, fonts, etc. Or rather, I mocked up a few things that felt somewhat half-assed to me, but it was something…at least enough to get some feedback from a trusted friend, Kevin, who was in the early stages of his own project (an illustrated book). We met to show work in progress and talk about it, and much as I disliked where my work was at, getting his feedback helped me think through what I wanted to do with it and enough confidence to get to the next stage of starting to work with the some dummy content in the WordPress template to figure out the overall structure I wanted.

After trying out dozens of themes I opted to buy one, GoodLayers by Good Space, which had the key things: it was nicely responsive, and it had both photo & text snippets for summarizing blog posts. I started stripping out content immediately, and over the course of a few days and coming back to it with fresh eyes had hacked away to an amount of content I started to like. I hit a wall on the formatting for a few items and Alan helped tackle those to free me up to think about the next level of refinement.

Fonts

Lesson: Trust the basics: one for headlines, one for body.

I know font designers; I’ve worked with font fellows at Adobe. While I have a good eye for fonts, I’m not a font geek to the level of people I know. I browsed a bunch of articles about font trends, and then just decided I should pick what looks good to my eye. I knew it’d be easier to work with Google Web Fonts in the theme I’d chosen, and I also knew I wanted my headline font to be a handwritten-looking font. I went browsing and and picked out 14 different handwritten fonts from there, and 21 different sans serif fonts for the body.

I made some mockups in Fireworks to narrow it down to six or seven pairs of fonts, and for the final decision tried them out in the code. By then I’d written a sample article using one of the topics so I’d have something real to work with. This helped quite a lot for choosing fonts because I could slip into reader mode and just see what seemed easier on the eye, and better for the tone of the content. I ended up picking a font called Nothing You Could Do (love that name) for the handwritten font, and Open Sans for the body. I used these in the logo as well to make the look consistent.

Final styling

Lesson: If the structure’s good, just make the pieces work together within it; don’t force it.

I ended up doing a lot more customization to the theme’s CSS than I expected to simplify the number of font sizes and styles being used across the theme. Alan figured out some of the vexing remaining styling issues, and that gave me enough momentum to shift over to the articles themselves.

I ran some experiments on the image sizes that worked best with the template and opted to work within those constraints for the illustrations. Fortunately, I found these 4×8″ watercolor pads from Fluid that are pretty close to the right aspect ratio. It’s not the highest quality watercolor paper, but it’s good for my purposes. I decided I’d be pretty strict about making clean pencil work, and finish with light watercolor shading and lines with a 005 ink pen. It’s a style that demands precision, but it’s worth it; I’ve been quite happy with the results.

Getting the writing style right was a separate effort, but fell into place pretty naturally as I thought about what I’d want to read. It had to be short enough to read in a minute or two, and it needed to have a particular point so you’d get something specific out of it. I’ve been able to stick with it so far. For here, I am not so rigorous, so this is mostly just whatever’s coming off the top of my head.

That’s it! It’s done. Or rather, it’s just begun. Go check it out.