Design by faking

I am not a designer.

I was in art class for many, many years, but really, my aim there wasn't to be a designer. It was to take something in the real world and make it very flat. This doesn't give me the magic ability to make websites pretty.

When I do side projects, however, I'm called on to be my own designer. It would be awesome if I had a designer tied up in my basement to do all that typography and spacing for me, but after the last one got out... Well. I learned to cheat.

A caveat before I delve into my stash of tools: this is not meant to minimize what a good designer can bring to your project. They are invaluable. Wait... no. They have a value. It's spendy. That's the issue with personal projects. They have a budget of no dollars.

Now, my tools...


When I have an idea for a site, I often want to wireframe it first. This is wrong. I should not do this. I should be finding content and working on my pitch. I find focused doodling to be the best motivator for me, though, and with personal projects, motivation is one of the hardest things to keep going.

A designer once sat me down after I completely destroyed her beautiful comp with my indifferent CSS and explained the grid system to me. Everything looks better when it's in a box, whether you draw the box or not. When you make the browser bigger or smaller, your logos and titles and text shouldn't jump around. They should be like good little soldiers and stay where they are.

It was like someone told me Santa was real, and I just needed to get on his mailing list to get free gifts.

For my wireframes, I go to for all my gridding needs. There, by clicking on the big ol' download button, I can get templates, CSS, and templates for Acorn (the only graphics program I've bothered to shell out money for). The physical templates are the most important to me. When I'm dreaming, I want a pencil in my hand and some paper in front of me. I can come up with some quick ideas and trash them if they're bad, or pin them up if they might work.


Check me out, using the designer lingo!

IA stands for information architecture, and is hugely important even for the smallest sites. For this, I go old school. I get out my index cards.

On each card, write up one piece of content that will be on your site. This should be more atomic than 'blog'. These should be the aspects that can't be broken down into more granular parts. 'Blog' is bad. 'How to deploy Django using nothing more than a Razr in the middle of the desert' is good.

Create as many of these cards as you can, even if you don't have the content yet. Once you're done, start organizing them into piles based on similarity. What similarty? That's up to you. Feel free to free-associate at this point. Maybe, rather than have a blog section, you realize you want a section for each content type.

Once you're happy with your piles, give them names. If you have friends, have them repeat the exercise.

When you have enough data (or as much as you can wring out of friends and family) look at the labels you've accrued. Chances are, you'll see a pattern emerge. Congrats! You have the start of an architecture.


In college, I learned through a class experiment that I'm slightly color-blind (apparently, I'm missing some pinks). Due to this, I have no faith in my ability to select colors that appeal to sensible human beings. I also have no faith that I'll be able to pick a palatte from a palatte collection site that isn't really eye-bleedingly bad.

Because of this, I lean heavily on sites that allow me to pretend like I can make my own palette. My favorite is Colr Scheme Designer for the amount of control it gives me, and the ability to save my palatte for later without having to give it a goofy name or registering for an account.

I tend to go easier on colors and pick the complement color option. For example, here is my color scheme for The Real Katie. Clicking on "Color List" gives me all the colors I'll be using throughout the site.

Patterns and texture

For the longest time, I shied away from tilable patterns on my site. Sure, they're pretty (when done right), but I lacked the tools and patience to make them correctly. Then, Jesse Noller pointed me towards COLOURLovers. You can take a pattern and add your own colors, then save it.

I lost an afternoon to this thing.

For when I need a more subtle texture, I hit up Subtle Patterns. They're low-key, already optimized, and they tile. Really, I don't need much more most days.

CSS frameworks

I've only just started dipping my toe into CSS frameworks. I have to admit, I can be a bit stubborn when it comes to magic. I'm proud enough to think that I really should be doing this on my own, but never remember that the time I have to allocate to personal projects is almost nothing.

Designer Bill turned me on to Bootstrap, by Twitter. When a designer gives his stamp of appoval on a CSS tool, I listen.

What does it do? It takes all those things you always forget to get around to doing and does them for you. Pretty forms? Done! Cross-browser compatability? No problem! Style ALL the headings? Yes! It even gives you some extrememly useful (and totally optional) javascript. I downloaded it, and within fifteen minutes wanted to have its babies. 

Once again...

None of the above replaces a designer, of course, but until Django grows to the point where we have a stable of available design guys loafing about, I hope some of these things make your lives a bit easier.

Writing: Diagrams

You would think that someone who loves drawing would love doing diagrams. I do not. I hate diagrams. I thought I would love them, but they ended up being the thing I hated most about writing Accessibility Handbook.

I mean, diagrams are nice for reinforcing information or getting across a more subtle point to a reader (they also don't hurt your page count). They break up your chapter and add visual interest. But oh my god, does making them suck.

Mistakes I made

With my first book, I didn't take the time to do the diagrams as I went. I just inserted a placeholder image with a vague description about what the diagram was supposed to be.

This was a bad idea.

When I dove into doing diagrams, I couldn't fathom why half of them seemed like a good idea. I'd stare at my note ("Something about embiggening") and curse my previous self for not just doing the diagram right then and there. I removed more than a few, then had to make up the missing space in a frenzied weekend of writing.

The reason I'd moved to doing the notes and placeholders, though, was that stopping to make a diagram can take you out of your writing groove. I'd sit down to write, then spend a half-hour either struggling with Gimp or sketching something, scanning it, then trying to refine it. Pictures are not worth a thousand words. I measured. They only take up the space of about 150 words. They were making me fall behind.

What I'm doing now

With my current book, I decided that I was going to find something that worked with my flow. I needed to make diagrams as I needed them, but I didn't want them to take up precious writing time. After all, you get lots of waiting time during editing that can be used for making the diagrams nicer.

I hit upon it by accident, really. I'd been taking pictures of sketches I'd been doing throughout the day with my smartphone, then posting them to Twitter. While these weren't archival-quality shots, they worked well enough for their intended purpose: amuse the masses. Why couldn't I do this for my book diagrams?

I started using a new workflow:

That looks like quite a few steps, but trust me, it only takes me about five minutes. Sketching is much faster than trying to start in a graphics program. My paper is already right here (I always have the sketchbook at hand), as is my phone, and Dropbox is always doing its thing in the background.

Eventually, though, I need to make nicer images. What do I use then?

Tools I use

I do not own Photoshop. I know, I know, that's crazy. The last time I checked, though, Photoshop was over five hundred bucks, and that's way over my impulse range. I have to truly believe with my heart and soul that I need something that costs over $200.

And no, before you ask, my work has not purchased me Photoshop. I'm a Python developer. That would be silly. I only got it at my last job because we'd randomly run out of designers, and sometimes you just have to fix some transparency on your own.

For screenshots and annotations, I love Skitch. It takes great screenshots that I can mark up immediately, and I love how nice it makes my lines look.

If I need to actually draw something while I'm on my Mac, I fire up Acorn. It does everything I really need it to do: layers, brushes, exporting, selecting, and cropping. I know it only does about 10% of what Photoshop does, but apparently that's the 10% I really needed.

If I happen to be working on my Mint box, I use Gimp. Then I cry a whole bunch.

If, for some reason, I'm on my Windows box (which I use almost exclusively for gaming), I break out I cry slightly less than I do with Gimp, but this is only because I'm distracted by the Steam icon in my toolbar.

When I have to mock up a site for a screenshot, I grab Twitter's Bootstrap. It saved me huge amounts of time, using their styling and templates.

Tip: Know your tools

If you need pull-down menus and icons to access different tools, you're doing it wrong. Learn what the keyboard shortcuts are for every tool you'll need, from creating layers to switching from paintbrush to pencil, to changing how you're selecting areas. Learning the keys made making diagrams a ton faster.

Also, it will not kill you to watch some tutorials on how to use your tools. You may not be planning on a career in the visual arts, but knowing all of the things your tools can do will only make your diagrams look nicer. There's a ton of hidden tricks that get pushed off of the main toolbar to save space.

Ask about colors

When I did diagrams for Accessibility Handbook, they were in color. I found out, while the book was in production, that the diagrams would be in black and white. Hell. Lesson learned: With the new book, I've asked in advance, and I know that my diagrams in this case will be in color.

Save everything

Another lesson I learned was to save everything, in every format. More than once, I had to grab the original file and change a color or a typo, or change some copy. This includes not only the image files, but the HTML files for my screen-shots. For a few of those, I just modified another file, and I was in a world of hurt when someone needed me to make a change.