#008: Photoshopping the Module Pattern

(Updated on )

The entire site is going to based on “modules.” Each little thing is going to be literally be in a box (both visually and in the code, ultimately). We start with a module for the most recent blog post on the homepage, but the module pattern will be used everywhere. Individual comments, sidebar areas like “The Poll”, advertisements… everything.

Once we have this base article module in place, we work on a bit of typography within it. We use a real post title (a good idea for getting a sense of length from something real), but then use Lorem Ipsum (gasp!) for the excerpt (practical).

We introduce some new fonts. The headers (in a perfect world) will be Whitney Condensed Bold and the body copy will be regular Whitney.

We introduce “the little colored square” concept for modules. This hangs on a long time in the design process but (as you can see on the site if we’re still on v10) it ultimately morphs into a colored bar.