Above: The same post, before and after. Before, the post’s title was on-grid, but it did not align with either the left-hand margin or the descriptive header above. Now, metadata has been moved to the bottom of the post so the title can align properly. Yellow highlighting has been added to increase emphasis on the title and also to help direct readers that they are not on the homepage but on a sub-level post. The double header bars have been replaced with a single underline. Also, the three vertical links from version 1 have now been incorporated into a longer, chattier header that gives visitors full access to the content of the site.
I’d been admiring the work of designer Randy J. Hunt and his studio Citizen Scholar for quite awhile. I was really knocked out by the beauty and elegance of his work on the great designer goodies site Supermarket, and after that I was determined to find a way to work with him on something. During a break from my studio this summer that has since become permanent, I did a bit of travelling, cleaned house, and then turned my attention to some of those rainy-day jobs you always save for tomorrow. Highest on my list was taking a fresh look at Lined & Unlined, and I dropped Randy a note to see if he’d be interested in helping me out. A design writer himself, he has done a stellar job as our blogger at AIGA/NY for over a year, and I knew our conversation about reworking the site would inevitably take us into thoughtful critical territory as well. After a ton of hard work and a great deal of patience with his demanding client, Randy and I wrapped L&UL v2. A few weeks ago, we sat down to talk about what’s new. —RG
Randy J. Hunt: What interested me most when we first started working, other than the content of course, was the idea of “not changing much.”
Rob Giampietro: That’s a good place to start. I’m fond of this saying by Stewart Brand from his “How Buildings Learn” BBC series. He says, “the chief architect of buildings is time.” I think in a way L&UL was a house I’d lived in for 2 years, and it was just time to move some furniture around, paint a wall, add a new driveway, etc.
RJH: Absolutely. In all cases I try to realize a design in service of content approach, but sometimes that’s difficult. In this case, I don’t think it could have been any other way.
RG: Sometimes when you start a new design project, the temptation is to throw things away. But this can be akin to saving over a file, you lose the thread of your thinking. I think we weren’t looking to throw anything away or save over anything in this case, Renda had done an amazing job building the foundation. We only wanted to look at a site that had grown organically over a good period of time and try to make some specific adjustments that will help it receive more of that kind of content and, also, to endure.
RJH: Looking at it in hindsight, I think three things happened:
- We identified features of the existing design that served very intentional purposes from the start, and made them “sacred”;
- We identified other characteristics that had developed over time or taken on a certain role, and built them into the design program; and
- We introduced new elements only at very functional levels.
RG: Let’s look at these one-by-one. What did we keep, in your eyes?
RJH: Color… Typography…
RG: The Times New Roman has a newsy and writerly feel we both liked and it felt like it identified the site. Also, the yellow is the site’s primary metaphor—L&UL is material that I’ve chosen to highlight for one reason or another. We did start looking at adding other colors—a grey as a secondary navigation cue, for instance, but these were fighting the simple, clean metaphor that yellow equals highlighting, and that’s what the site is doing.
RJH: In terms of organization, too, the architecture is identical. It was well defined when we started. There’s the Main Articles, the Library, the flanking column of Recommended Readings, and the “Resource” sections: your lists of Designers, Vendors, etc. These divisions sort of go beyond simple categories on a blog; they are frameworks that set up a need for you to develop content in specific distinct ways.
RG: It’s true. L&UL is a blog, but from the start I’ve been trying to make it a bit broader than that as well. In a way I see blogging as a really pure, really simple, almost diary-like mode of writing. But a blog is also a form. I think with L&UL, I’d like people who actually visit the site (most read on RSS, of course) to wonder for a moment if it’s a blog or not. There’s no comments, there’s no linkroll (at least on the homepage), and none of those other bloggy things. There’s this temptation with blogs to edge toward feature creep. L&UL tries to avoid that trap. Even the primary site interface, the top header, is now a paragraph of text. In spirit L&UL is a blog, in form hopefully it’s a website, or, more accurately, an archive. My archive, primarly of writing and written things.
RJH: Restraint is extremely difficult to pull off. L&UL was already restrained, but I think we focused the lens on that even a hair more. The idea of “Language as an Interface” came up repeatedly in the process.
RG: It’s trying to be a readers’ site. It’s not really a visual orgy. The type has been reduced to be as simple and direct as possible. One of the subtle changes we made was to make the text area wider, so that the Times is slightly bigger and more comfortable to read. It also creates a better distinction with the smaller right-flanking column, which handles the Helvetica better at a smaller point size.
Above: The main post column is now wider and the Times has been scaled up to be easier to read and more distinct from the flanking column. The teeny Times formerly in the flanking column has been replaced by an easier-to-read Helvetica. Both post titles and Recommended Reading Permalinks have been “primed” with a lighter shade of yellow, indicating they are live links. Metadata is now humbler and at the bottom of posts in a double-dotted line that acts as a buffer.
RJH: “Language as an Interface” was a technique that we borrowed from pages that were already happening deeper in the site. Now it’s used throughout.
RG: I think this was a phrase I shared with you at some point that we wound up talking a lot about. I don’t remember where I heard it, but I think I adapted it from something I was reading about web design. (N.B.: Of course it was 37signals.) It’s telling designers to remember that interfaces don’t always need to be visual—online, they can be verbal as well. This seemed like the right direction to keep in mind as we made upgrades to the site. Most prominently, the header changed so that all the areas of the site could be accessed at a glance and also put in context with one another. Now it’s kind of a self-effacicing mission statement that you can click on to get anywhere you want.
Above: The library, before and after. Rather than “dressing” metadata about the book’s title, author, and description, it is handled semantically with emphasis, placement, and language. Book covers are bigger and more browsable. The text column has been widened to allow for the use of the standard size of Times.
RG: “Language as an Interface” also played out in the library, as we added “by” and got rid of “dressing” the metadata so much. Now it just reads like a title by an author. Similarly, the articles page is now really a long post about the site with a wide array of ways in. Visually, we limited the kit of visual parts to an even smaller set than version 1. There’s dotted lines, double dotted lines, greyed metadata, highlighted titles, and arrows. That’s it.
Above: Almost all the new site’s visual elements are in play in this screenshot of the new footer. If you’ve gotten this far down, perhaps you’ll want to participate more actively on the site. You’ve also got a full range site areas in the “navigate” section, or just go back to the homepage by clicking the favicon.
RJH: It’s interesting to see how those choices, which are intentional, but also intuitive, end up looping around. By repeating the technique, it also makes it feel like more of a natural fit in each isolated uses.
RG: Anytime we needed to solve a problem on the site, we revisited that phrase.
RJH: Speaking of circling back: you mentioned highlighting already, but let’s return to it for a moment. It worked before as the metaphor, but now I think it works even better since we’ve added a very technical information design purpose to it. It’s now being used to emphasize your current location and make navigational links distinct from links in running text.
RG: Yes, now “where you are” is highlighted for you as you click, and emphasis shifts from the top left downward as you move through the site. So the title of a post is now highlighted, and even things that aren’t highlighted yet show you they can be highlighted by “priming” you for the fact that you can highlight them and go somewhere.
RJH: We’ve also added more easily accessible Permalinks to the Recommended Readings, which are “primed” in this way. I would say then that is a big one. That’s a significant amount of the content and the most regularly updated. Given the development of “snippet blogging”, having permalinks available makes in easier for other people to have relevant outbound links to your site, and this helps semantically and in terms of site traffic.
Above: The archives / articles page, before and after. Before, navigation had been scaled up to make up for an absence of content. In the new version, that navigation has been placed more appropriately in the flanking column where it is always accessible. In the main area is now a post-like summary of how the site got started, which posts are most popular, etc. Re-Recommended Readings are linked to directly using the new Permalinks, and other online tools like FFFFound offer ways into the site’s image content.
RJH: You identified several other minor needs, and we addressed them through the same filters that were influencing the heavy-weight parts of the site. Pagination, printable articles, navigation in the footer, and other details were all serviced.
RG: At the core you gave me a lot more control over the whole site—almost all the places where you see words, they’re my words and they can change.
