Notes on the Synthesis of Form

Working over the past few months on a fairly large web application with a lot of moving parts, I’ve been doing a lot of thinking about abstraction in the design process, about how best to break it down so that my co-coder and I don’t go crazy wrestling with the complexity. Thankfully, I found a book written over 40 years ago that addresses these design problems directly, in a formal writing style both lucid and technical.

Patterns and models

Christopher Alexander, the architect and theorist best known for popularizing the pattern language method of analyzing design problems, wrote Notes on the Synthesis of Form in 1964, when he was 28 years old. The book was hailed as a breakthrough in design theory, but it also quickly gained notoriety in computer science, as the pioneers in that field recognized that the framework could be adapted to the nascent language structures they were developing (Alexander’s later book A Pattern Language is cited as one of the most influential works leading to the invention of modern object-oriented programming). Instead of a bottom-up approach that seeks to gather existing pattern recipes from those working in the field, Notes outlines a process by which you can methodically break a problem into related sets of diagrammed models, yielding a top-down solution.

To understand the human body you need to know what to consider as its principal functional and structural divisions. You cannot understand it until you recognize the nervous system, the hormonal system, the vasomotor system, the heart, the arms, legs, trunk, head, and so on as entities. You cannot understand chemistry without knowing the pieces of which molecules are made. You cannot claim to have much understanding of the universe until you recognize its galaxies as important pieces. You cannot understand the modern city until you know that although roads are physically intertwined with the distribution of services, the two remain functionally distinct.

One of the comforting sentiments in the book is his recognition that individual humans are unable to intuitively solve complex, modern problems without a visual model or mathematical structure to illustrate how the individual components interrelate (Alexander includes some nifty diagrams and sketches throughout the work).  The epilogue of the book states his focus succinctly:

My main task has been to show that there is a deep and important underlying structural correspondence between the pattern of a problem and the process of designing a physical form which answers that problem. I believe that the great architect has in the past always been aware of the patterned similarity of problem and process, and that it is only the sense of this similarity of structure that ever led him to the design of greats forms.

A design problem is not an optimization problem

Example tree-structured diagram from Notes on the Synthesis of Form

A basic tree of possible requirement sets for a kettle

His approach to design is essentially from the negative: given the yin-and-yang interplay of form (e.g. ‘teakettle’) and context (e.g. ‘person wants to boil water for tea in a kitchen’), the best way to the design the form is to develop sets of intuitively clear misfit variables, binary “good/not-good” properties. He describes this relationship in terms of “goodness of fit”:

Again, it is obvious that a kettle which is uncomfortable to hold causes stress, since the context demands that it should be comfortable to hold. The fact that the kettle is for use by human hands makes this no more than common sense. At the opposite extreme, if somebody suggests that the ensemble is stressed if the kettle will not reflect ultraviolet radiation, common sense tells us to reject this — unless some special reason can be given, which shows what damage the absorption of ultraviolet does to the ensemble. […] A design problem is not an optimization problem. […] For most requirements it is important only to satisfy them at a level which suffices to prevent misfit between the form and the context, and to do this in the least arbitrary manner possible.

Potato peelers and pruning shears

Simple line diagram depicting a layout for a village in India

One of the crazier diagram sketches from the book's appendix, depicting an optimal layout for a rural Indian village that was planned by Christopher Alexander

If you’ve seen Gary Hustwit’s documentary Objectified, about industrial and product design, you might remember the segment about potato peelers and pruning shears. The designers relate that in their work they seek out the “outliers” first, in this case that these tools need to be comfortable and usable in the hands of a hypothetical elderly, arthritic mother. If you’ve baked in that level of accessibility into your design, then a fortiori you’ve already solved much of the problem for the rest of your users.

In the field of web design and development, this is implemented as progressive enhancement, layering additional presentation and functionality layers on top of an already well-formed, accessible system.

Alexander’s method of breaking down the problem into functional sets makes it easier to recognize these widest-angle “misfit” outliers, and to design with them in mind from the outset, before you begin to design the actual physical form of the building, city, software, etc. If you apply this approach to all of the other aspects of the problem, an individual designer can achieve a solution that is inherently simple and orderly, rather than having to prune down and optimize a cumbersome structure. He makes a compelling case, and I see myself doing a lot more up-front consideration before jumping into my next large project. One final quote to tie things together:

Consider the design of the now familiar one-hole kettle. The single wide short spout embraces a number of requirements: all those which center round the problems of getting water in and out of the kettle, the problem of doing it safely without the lid’s falling off, the problem of making manufacture as simple as possible, the problem of making manufacture as simple as possible, the problem of providing warning when the kettle boils, the need for internal maintenance. In the old kettles these requirements were met separately by three components: a spout for pouring, a hole in the top for filling and cleaning, and a top which kept the steam in and rattled when the kettle boiled. Suddenly, when it became possible to put non-corrosive metals on the market, and cheap, available descaler made it unnecessary to get into the kettle for descaling, it became apparent that all these requirements really had a single center of physical implication, not three. The wide spout can be used for filling and pouring, and as a whistle, and there is no top to fall open and let scalding water out over the pourer’s hands. The set of requirements, once its unity is recognized, leads to a single physical component of the kettle.

(Image at top adapted from photo by Flickr user Todd Ehlers)

Hubbard/Birchler 2010

Screenshot of Hubbard/Birchler website

I once again had the honor and pleasure of working with my favorite contemporary artists, Teresa Hubbard and Alexander Birchler, this time to redesign and refresh the duo’s web presence. I created the first version of their site back in 2004 and it was time for an overhaul. This design is much cleaner and brighter, highlights their excellent body of work, and creates a framework that can be built upon as new pieces and publications are added. Some portions of the site are still a work in progress, so check back soon for further additions.

The Comics Curmudgeon, Redesigned!

Screenshot of the new Comics Curmudgeon site design

Always an honor to get to improve upon a personal favorite!

Some of my earliest childhood memories are of reading the newspaper comics: youthful confusion about the differences between Garfield and Heathcliff, Marmaduke and Howard Huge, the Lockhorns and the Family Circus, wondering who was reading those giant-yet-boring Prince Valiant strips on Sunday, pondering the bizarre evolution of Robotman. I’ve read the comics religiously ever since, missing only a handful of days over the past 20+ years. But there were so many strips I simply ignored, convinced they were stodgy hangers-on from decades long past, or else that they were unfunny legacy soap operas not worth the time to investigate.

Thankfully in 2004 Joshua Fruhlinger started reading the comics so we wouldn’t have to. His curmudgeonly commentary had an opposite effect, though: hundreds of thousands of people suddenly began to appreciate Mary Worth for all of her meddlesome glory, found themselves able to recite the sordid back stories of the girls of Apartment 3G, and learned new ways to determine whether or not you might in fact be a Plugger.

The Comics Curmudgeon is one of the few sites that I visit multiple times a day right in the browser (despite its handy RSS feeds), so it was a great honor to be given the chance to do a facelift of the site. Since I look at it so often, I figured I’d better do a good job. Not to mention that if I broke what was already a cherished site, I’d surely be mauled by his sizable community of rabid comics fans!

Some of the highlights of the redesign:

  • An awesome new logo up there in the header depicting Josh as drawn by Ces Marciuliano, writer of Sally Forth and creator of Medium Large
  • Brand new, handcrafted WordPress theme, designed to retain some of the lo-fi, Verdana-heavy charm of the old site while cleaning up the layout and typography considerably
  • A new jQuery-based @reply system for the comments section, modeled after the ad hoc format that his community evolved and had been manually typing in — his posts often reach 500+ comments, so this helps keep track of who’s talking to whom a bit
  • A new Advanced Archives page that lets users build the archive they’d like to see (ex: “Show me this month’s posts about Mary Worth that contain the word “meddle”, in ascending order, five per page”), also allowing for easy bookmarking of their search query
  • Cleaner, lighter code and speed optimizations on the server side to help offset the time it takes to pull down the large daily comics
  • A flexible “jello” layout that expands and contracts depending on the size of your browser window, to add a bit of whitespace and breathing room without breaking things for folks on smaller screens
  • iPhone and “other” mobile versions of the site (which double as low-bandwidth alternatives for those on dialup who’d like a speed boost) with AJAX comment loading

Hopefully it’s all a change for the better (I think it is!), and I look forward to hearing the feedback!

The Past Didn’t Go Anywhere

Wire mesh of the 2010 New Years ball overhanging a wire bridge in Sydney, Australia

So what I do is I collect stories, stories and songs and poems. I seek out the elders and garner stories and songs and poems. Stories characterized critically as “oh that’s that 60’s stuff”, like suddenly doing old rock n’ roll will be doing “that 50’s stuff”, well, this is the 90’s you know — I have a good friend in the east, a good singer and a good folk singer and a good song collector, who comes and listens to my shows and says “Uh, you sing a lot about the past.” So I sing about the past. You can’t live in the past, you know? And, I say to him, “I can go outside and pick up a rock that’s older than the oldest song you know and bring it back in here and drop it on your foot. Now the past didn’t go anywhere, did it? It’s right here, right now.” I always thought that anybody told me that I couldn’t live in the past was trying to get me to forget something that if I remembered would get them in serious trouble. It’s not that 50’s, 70’s, 90’s…that whole idea of decades packaged, they don’t happen that way. The Vietnam war heated up in 1965 and ended in 1975. What’s that got to do with decades? No, that packaging of time is a journalistic convenience that they use to trivialize important events and important ideas. I defy that.

Time is an enormous long river. And I’m standing in it, just as you’re standing in it. My elders were the tributaries, and everything they thought and every struggle they went through and everything they gave their lives to and every song they created and every poem that they laid down flows down to me. And if I take the time to ask and if I take the time to seek, if I take the time to reach out, I can build that bridge between my world and theirs, I can reach down into that river and take out what I need to get through this world. Bridges — from my time to your time, as my elders from their time to my time, and we all put into the river, and we let it go, and it flows away from us and away from us until it no longer has our name or our identity. It has its own utility, its own use, and people will take what they need, and make it part of their lives.

Utah PhillipsBridges

As we kick 2009 to the curb and bid a not-so-fond farewell to a rough decade, let’s not forget all the good things that happened, the great stories told, the friends made and the good people lost. Whether 2010 is really the turn of a new decade, or even just a journalistic convenience as Utah says, it’s never a bad time for a fresh start. Just remember that the past didn’t go anywhere, so make good use of it.

(Photo via Ben Harris-Roxis on Flickr)

adamschreiber.net

A screenshot of the adamschreiber.net "works" page, thumbnails of the artist's work

Another freelance project from this Fall: a minimalist and crisp portfolio website for Austin-based photographer/artist Adam Schreiber. This hand-built site leverages clean HTML and jQuery to display his works in a custom set-based image gallery. He’s had great shows at the CRL and Art Palace, and is currently featured in his first museum show at the Contemporary Arts Museum Houston until February 7, 2010, so if you’re in the area be sure to check it out!

John Marshall School of Law Distance Education

Screenshot of the JMLS Distance Education Website

Last Summer I was asked to help design a website “brochure” for the new eClass Distance Education program, a new graduate-level legal education offering at the John Marshall Law School in Chicago. I designed the basic look-and-feel of the site for them and the structure of the single-page concept with custom jQuery scrolling effect. The final coding and layout was handed over to the JMLS web team, who fleshed it out very nicely.

UT Law on the Go: New iPhone Web App

Screenshots of the UT Law iPhone app

Trying to keep up with the proverbial Joneses, today we launched an iPhone / iPod Touch mobile web app for the University of Texas School of Law. If you want to check it out on your iPhone right away, fire up the following link in Safari: http://www.utexas.edu/law/m/

I built it from the ground up with PHP, JavaScript, and a bit of elbow grease, pulling data from a handful of existing sources both on-campus and off. It makes use of the iUI JavaScript framework, which is a great resource for getting up and running quickly (but which also has some drawbacks — I’ll likely switch to pure jQuery for the next major version, but I’m also keeping an eye on the jQTouch project). A quick rundown of the features of the web app:

  • Directory Search — if you’re affiliated with UT Law School you can search our internal phone and email directory by name or department, using the native iPhone apps to place calls and send emails directly,
  • Event listings and Notices pulled from our existing calendar and Law Mail announcement systems,
  • RSS feed view of our press releases,
  • Recent Twitter posts from our Communications office (this will make more sense when/if we have more than one Twitter account posting official news, and can combine them into one stream here),
  • Maps: detailed building maps, Google maps that use the iPhone location services to guide you to our building, KML-based maps of public parking, nearby hotels, and restaurants,
  • and a psuedo-iPhone style photo gallery that’s pulled from our existing mini-gallery on the regular website, adding the ability to flick through the images (did you know that Mobile Safari adds nifty JavaScript events for multi-touch gesture support? I didn’t until this project…)

There are a lot of things already in the works for the next iteration. The number one goal is to support other popular devices, to live up to the ideal of “one web, any browser”. As a developer who has wrestled against the wide range of inconsistent desktop browsers and all of their HTML and CSS inconsistencies over the years, though, it was really, really, nice to work with a single browser that already supports HTML5 and CSS3 presentation out of the box. Now I’m spoiled.

Flotsam and jetsam

Hello to you two or three people that read and care about the things I post! It’s been awfully quiet around here, hasn’t it? I’ll give the weak excuse that I’ve been super-busy this summer, and the best laid plans of mice and men etc., etc. But I’ve also not been posting much to del.icio.us lately, which was always the filler that gave my site the illusion of some life in RSS-land.

I have been quietly posting stuff, though! I’ve moved most of my side-note activities over to Tumblr, which is usually more fun for me to play with (hey, it’s got graphics and video posts in addition to links!). If you’d like to follow along, head over to debris.adamnorwood.com or sign up for my new “side-channel” RSS feed. That feed will eventually track my other linked entries around the web, from del.icio.us, YouTube, Vimeo, and whatever else I feel should be annotated and passed along and shoved into your reader. I’ll also soon be offering a firehose feed, in case you want to keep up on all of these posts from both the full blog as well as the side items. Just got to figure out how to keep Yahoo! Pipes! from chopping and screwing my media <embed>s beyond recognition…

Okay, get back to reading the rest of the web!

christycarroll.com

chrsitycarroll.com

The first of my summer freelance projects is now live: the portfolio site for fabulous packaging designer, Christy Carroll. Love her work! Christy crafted the visual design for the site, and I implemented it in WordPress with a completely hand-tailored jQuery portfolio browser for the homepage. More to come soon…

F.A.T. Lab, GRL, TEMPT ONE + Accessibility

TEMPT ONE / GRL / FAT Lab Project

In one of the best eye-tracking technology projects I’ve seen, the folks from the Graffiti Research Lab and FAT Lab have teamed up with Theodore Watson, Zachary Lieberman, and Christine Sugrue to tackle a novel accessibility problem: enabling pioneering graffiti artist Tempt, hospitalized for over two years with the muscle atrophy of ALS (Lou Gehrig’s Disease), to be able to tag again. Out of all of the things I heard about at SXSW this year, I think this project was the thing that excited me the most — open source hardware + software hacking, vision work, accessibility concerns, graffiti and a great story!

The system they’re developing is using the excellent openFrameworks library and two small cameras: the left can be used as a “mouse button” event by holding that eye closed, and the right eye’s pupil is tracked for gesture. The result is a simple hands-free drawing app, which they will connect with the GRL’s laser tag tools, giving Tempt the ability to express himself through graf writing again.

You can check out the rest of their videos under the TEMPT1 tag on fffff.at (“Release early, often, and w/ rap music.”), but here’s a good one to get you started:


Day #6: From Beyond from Evan Roth on Vimeo.