The Great Discontent Redesign

That other Ryan and Tina just rolled out a redesign of their excellent online interview mag The Great Discontent. I thought it’d be a good idea to break it down a little bit, especially since I’m still gathering inspiration for my FDGB redesign.

I think the biggest change on the website has to do with the IA. TGD’s almost three years old, and now that the site’s content needs are better defined, the structure has changed accordingly. Blog posts have now been broken out into a separate Blog page, and interviews can now be easily filtered on the Interviews (formally Archives) index through a more prominent tagging system. One of my favorite additions is the Recommended tag in the Interviews section. This really helps guide a new user through some of the best interviews TGD has to offer.

Typography has always been one of TGD’s design strengths. The main block copy and pull quotes are set in Leitura News, a smart serif face with editorial roots designed by Dino dos Santos, and the headers and various other pieces of micro copy are set in Maison Neue, a friendly contemporary sans-serif designed by Timo Gaessner. One nice detail about the layout is that FlowType.js is being implemented to ensure a comfortable line measure is always employed.

The layout, as before, is minimally elegant, but now reflects the new print magazine design, with Mondrian-esque thick black borders that section content and lead the eye. It manages to be at once both playful and poignant. The main hero block of every interview is still art-directed, and can now be either landscape or portrait, black-on-white or white-on-dark.

Overall, the redesign keeps everything that works about TGD while better defining its ancillary content and making once-buried-but-useful features more prominent. It even looks beautiful in the source code. TGD is a website I have constantly frequented in the past for inspiration, and this refresh will keep me coming back for the foreseeable future.

If you haven’t already, go and bookmark The Great Discontent, and start digging into its rich history of creative industry reviews.

Pattern Lab Workflow with CodeKit

As I’ve mentioned in earlier posts, I’m using this project to explore Atomic Design methodology, with Pattern Lab spitting out an easily-maintainable style guide. At first, I felt like I was stumbling all over the place, but thanks to CodeKit, I’ve gone from crawling to walking.

So, here’s my Pattern Lab workflow as it stands now:

  1. With a look established in Photoshop or InDesign, I jump into Pattern Lab, making sure startWatcher.command is activated.

  2. Also, I make sure CodeKit is open. I have it watching the entire Pattern Lab folder so it can compile my Sass files in “source” while still being able to auto-reload the index located in “public.” I click “Preview” to pull up the style guide in the default browser (I’ve set a custom path to the index file since it’s located in another folder).

  3. I select or add the appropriate mustache file and, as best I can, semantically mark up the component, then save it. The Pattern Lab watch command automatically generates the new site with the added component, and CodeKit reloads the browser, which I keep on a separate screen. The great part about Pattern Lab is that you change the “browser” width within the browser, so I can check certain media queries without leaving full screen mode on my Mac.

  4. Next I add the Sass/CSS to style up the component. Hitting save on a Sass file triggers CodeKit to recompile all the Sass and inject it live into the browser.

Before adding CodeKit, I had to use the command line to compile the Sass, manually reload the page, then scroll down to where the component was. It. Took. Forever.

It’s important to also note that I’m using Autoprefixer when compiling the CSS. It just makes things so much easier on anyone writing CSS, plus it’s built into CodeKit, and all I have to do to use it is check a box. Completely painless.

So, that’s my Pattern Lab workflow is shaping up. You could go hardcore and use Grunt or Gulp, both of which are free, but for the sake of ease, CodeKit is just amazing.

Update: After working with this setup for a while, it’s become increasingly annoying how both CodeKit and Pattern Lab both refresh the page. This becomes exponentially problematic the bigger your project get. I did some digging and found a post from Dave Olsen, the main PL developer, and he says “use the watcher to auto-regenerate your site when you make a change and use the auto-reload server to automatically reload your site when your site is regenerated. If you use CodeKit you’ll want to turn-off its auto-refresh feature when using Pattern Lab.

Resources:

Art Equals Work Redesign

I’m constantly looking for inspiration for the redesign of FDGB. Nathan Ford’s recent redesign of his blog, Art Equals Work, and his consequent breakdown of the process, are proving invaluable to me.

Nathan emphasizes the Mark Boulton school of Content-Out Design. Basically, you start with and design around—gasp—the content. I know, I know. Novel approach, right? As rudimentary as that might seem on the surface, it’s an important concept to grasp in the pursuit of truly responsive design.

In the world of print, the page dimensions determine layout. On the web, there are no natural fixed-dimensions. The page is whatever size the user wants it to be. That’s why the content becomes so important, and Nathan clearly articulates this as a guideline for the redesign:

“I write about web design, CSS, and other not-so-wild topics. To match [the content], this site should employ a grid system that’s quietly varied; balanced, but with the ability to give the content of posts uniquely expressive typography.”

This knowledge of content purpose helps clearly define objectives and maintain design focus. You must know all the variables in order to account for them.

Another interesting feature of this redesign is the use of ratio-based columns rather than the more common fixed column approach. I feel like it lends the design a sense of the organic.

Go check out his blog right now. And while you’re at it, add it to your bookmarks. He publishes some fantastic content.