I agree with the 37Signal way of mocking up web stuff, using HTML/CSS straight-up. It’s fast, it pushes you to know your tools better, and produces layouts that can actually be solved in the medium. There is still a place for Photoshop/Gimp/Illustrator/Inkscape, however, as you still need to explore the look and feel, textures, colours, and shapes.

For my own sites, I use Inkscape sketch out new ideas. It covers most of what a web designer needs, and is freely available.¹ Today’s 10 minutes of mock-up produced a very blue, boxy alternative layout for my blog. I limit myself to 10-20 minutes of sketching, then I put it away for a few days/weeks and look at it compared to other sketches made over the year. When I find something I like, I move on to slice it into a theme.

Today’s sketch:

• Inspired by Eric Wendelin’s excellent blog. I’m thinking of a 1-column version, with the sidebar in the footer, with subtler colours (I’m not sure I can pull off his excellent bright colours).
• Background is 2 layers, one as a background colour, the second as a diagonal texture (pattern-fill, rotated + sized, at 10% opacity)
• The body is another 2 layers, one as the shadow for the second (a 2% layer blur, reduced color level)
• The header is in two parts, one for the text/menu, the second will be some sort of art (hopefully classy vectors, or a high contrast photo)
• The date callouts are a simple box combined with itself rotated (with a second layer for the shadow)
• I’m not sure about the blue, and textured charcoal is a good possibility. The blue was the first colour I picked from my current Inkscape palette (Khaki).

Download the SVG.

1. I just purchased Adobe CS3 ($1600+) for my commercial design work. It isn’t cheap, but it is an excellent set of tools. ↩

HD:XmotiveHarness:src/Motive.c, also known as “The Soul of The Sims, by Will Wright”. It’s interesting to see prototype code for such a classic game, and even more interesting that he uses K&R-style braces.

Here are some real world examples of Prototype 1.6. Every few months I look at the many alternatives, but Prototype always remains the most elegant of the lot.

A peek at 37Signal’s bleeding-edge use of rails/prototype/etc., a good incentive to learn the tools. Their software is excellent.

Not that in-browser windows are a great idea, but here is a Javascript library for showing modal and non-modal Javascript/browser windows. The library includes window styling, dialogs, and performs quite well on my workstation.

I’ve been working on a handful of web apps in my spare time. Nothing amazing, nothing revolutionary, just simple, fun tools. And while I’ve shown off a few of the logos, I haven’t written about the applications or their design. I’m not sure if I hate giving up the ideas (as if ideas were golden), or if I’m wary of not finishing them (free time is a commodity, and new ideas hit me regularly).

Well, fuck that. I need to write more. The lack of writing is a sign that work is getting under my skin, or that I’m getting lazy, complacent with life in zombie land. Zombie life sucks: it’s undisciplined and it’s uninteresting: far from my normal inspiration. And inspiration is fun.

Thwarter

One of my most tangent projects is for a Z-machine replacement of sorts. It’s working out to be a text-adventure tool that obsesses over making writing the games about the writing (and playing the games about reading). Infocom’s Z-machine was fun, but it wasn’t a writing tool (it was a programming language). Confusing the two limits both who becomes authors, and how much writing they do. And including the potential for multiple players (and/or authors) makes it damn-near freakin’ cool.

I’ve completed the “language” design for this one (it’s all table-based, edited like a wiki), and have a few basic prototypes done. This weekend I moved on to the UI design, something that I’ve been doing in Inkscape and the Gimp (an incredible pair of tools). The next step is to settle on a first approach and grind my way to a working demo. I have an unfortunate fixed-deadline work project this summer, which will likely eat into my spare time, so I don’t expect to have a useful prototype done until the late fall at best.

Elsewhere

I’m in the midst of a few other projects, interleaved with life, work, and art. I have a simple TODO tool in the oven, to tame my never ending stream of ideas, and a number of other things at varying stages of completion.

I’m learning to cull my growing queue of ideas too. Part of the trick is to let things percolate for a while, and see if they stick to the mental wall of, well, stickiness. Good ideas keep coming back to you, and the rest just evaporate by themselves. There are other heuristics too, but that’s a topic for another post.

Free domains!

Speaking of culling, my domain portfolio needs some cleanup. I’m giving away the following domains to a good home (for non-profit use), or for a reasonable fee (for non-evil commercial interests):

• aggregatorator.com
• cheatsheetbuilder.com
• sixwords.org
• gr8tr.com
• feedr8r.com
• gatorator.com
• justaskoldguy.com
• cookbookr.com

One per person; first come, first served (friends first); highest bidder, and so on.

A sliding tab view script (uses Prototype), a speedy web based (js) drawing tool, and a nice striped table script.

I bumped into jQuery today, which looks like it’s gaining on the Prototype library. It seems to do batch operations in a more intuitive way, allowing you to toggle one or more selectors in one go.

The Prototype Javascript graphic library does basic SVG, Canvas, and VML rendering for web pages. Not to be confused with the other Javascript Prototype library.

How constraints can be motivating, or how to prototype a game in under 7 days. A set of tips and tricks from 4 grad students who made over 50 games in a semester.