Design by faking

28 September 2011

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...

Wireframing

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 960.gs 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.

IA

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.

Color

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.

Share

Related tags: design django

Comments

1 Noah Kantrowitz says...

Also learn and love Compass.

Posted at 6:28 p.m. on September 28, 2011

2 Justin says...

Wow I can't believe I hadn't heard of bootstrap before. Thank you for that.

Posted at 7:47 p.m. on September 28, 2011

3 Vicky T says...

Great post. I'd only heard of 960 and the color scheme thing before. Thanks

Posted at 8:17 p.m. on September 28, 2011

4 Scott Pierce says...

"Have its babies", that makes me laugh. Bootstrap is great. I might have to try out a pattern now as well.

Posted at 7:13 p.m. on September 29, 2011

5 Stephane says...

Thank you so much for all those tips & tools ... very very interesting !!

Posted at 4:36 p.m. on October 6, 2011

Comments are closed.

Comments have been closed for this post.