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.


  1. rnovino
    Permalink to comment#

    Really Loving all the videos :) and learning a lot of things How can I get notified if there are new videos? for the v10 redesign?

  2. brendan
    Permalink to comment#

    Just because I used to always tick and untick the ‘auto select layer’ box like you until someone told me… Hold cmd and click the item/layer/image/text etc you want on the canvass and it will select that layer for you but wont trip you up as soon as you’re done.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.