Featured articles News

New 9rules: Design Thoughts

Over at Quofda the question today is “Do you like 9rules Volume 3?” and I thought it appropriate to answer it here. Feel free to answer this question over at your blogs and the trackbacks will show up over at

What It Looks Like

If you’re not used to seeing this type of look out of me, don’t worry, other people feel the same way. I always find this interesting — the idea that it doesn’t “look like a design I’d put out.” I’m pretty sure I have a particular style, but it’s not rooted in tangible things you can point to in a screenshot. I’m a stickler for the right padding between elements, keeping things uniform. I like producing a design analogy and using it throughout the site, not doing one-off design elements that never get used again. Beyond that, I like to do something new for each site I design, something that I’ll put in the toolbox and pull out at a future date. Here are some new things I did on the new 9rules:

  • Using CSS text-shadow to produce a glowing effect instead of a drop shadow effect. If you have Safari (or WebKit nightly) you’ll see this on the hover effect for the 4 links up in the header. It’s simple to code (search for “text-shadow” within the CSS file) so it was fun to use.
  • Deeper transparency effects. If you resize the window you’ll see the elements in the top blue header area are sliding around on top of the blue line background. The “Browse By Community” element looks especially cool with this effect.

Now apart from specific techniques that I used to execute the design, the layout and design itself was important in this iteration because it was a clean break from the past site. The old 9rules was complex and had many moving parts, and since the new 9rules is just member content, it was like starting fresh as far as the information that needed to be displayed. I wanted this new design to reflect the cleanliness and simplified content options presented, so a clean and tight visual design was the goal. Big white content area, wide columns, ample padding between layout pieces, big typography. The visual touches to separate each area are sparse, but noticeable. I especially like the layout of the member grid listing in the left column.

How It Works

The new 9rules is refreshing to me as a 9rules reader because it makes the content more accessible and is right up front. I don’t have to click from the homepage over to the “member entries listing” to find what I want, it’s right there. It sounds obvious, but straight-up usability was the goal from the onset because — dare I say — had been on a usability decline for over a year. Adding new features adds complexity, and we tried to please all types of users who visited 9rules — people who wanted member entries, people who wanted Clips, Notes, profiles, whatever — so the site wasn’t optimized for any particular use case. That would be impossible, because so many different types of users frequented our site. Now, we know what people want when they come to the new 9rules: they want to see blog entries from our members. And we give it to them.

It’s The Best

In my opinion, and in the opinions of a half dozen or so beta testers, this is the best version of 9rules yet. I think this opinion spawns from the visual design being cleaner, but it also comes from the minds of many visitors who never used the new features (Notes, Clips, to name a few) and yearned for a return of the old, singular functionality we used to offer. We’ve brought back the old concept, added some great new features, and dropped it into a cleaner and more usable layout, so I think those aspects combine to make it “the best” we’ve done… so far.

If you’ve got any design thoughts or technical questions, be sure to hit me up in the comments.