Geek & Mild by Sean Sperte


POWERED by FUSION

May 5, 2009 Nip & Tuck for Geek & Mild

gmredesign.jpgLast night I launched a redesign of Geek & Mild. Here’s some of the backstory on it, if you’re curious.

The ampersand

It’s no secret that I’m a big fan of the ampersand. Back when I was debating between names for my website, it was a big consideration. I wanted a name with an ampersand in the middle. (Cut from the list were “Apples & Onions”, “Geekery & Me”, and “Greek & Geek”.)

When I began brainstorming a new design for Geek & Mild, I wanted to make the ampersand a bigger focal point. Now it’s the most prominent graphic on the site. I’ve also refined the site logo and created a favicon, both of which feature the ampersand.

‘A lack of color here’

Geek & Mild has always sported a black and white color motif. It’s part of the brand. For this design I wanted to maintain that brand, but update it. I’ve done that by starting with black (#000000) and taking it one-step up (#222222), to a dark almost-black. And by starting with white (#ffffff) and doing the same, to an almost-white (#ededed). A gamut of grays — as well as the signature “highlight” yellow (#ffffcc) that I’m so fond of — accent the rest of the site detail.

Navigation

I’m a minimalist, so my blog reflects that. I’ve always maintained a minimal site navigation, but for the redesign I thought I’d push it even further. I wanted the navigation to be as organic as possible.

For the archives, I did away with a separate landing page, and created a small, widget-like link area to access all of Geek & Mild’s previous content by month. It’s available on every page, viewable by moving the cursor near the right-hand side of the page. I’ll admit, the concept is very self-indulgent, but I think the design works well. We’ll see how it goes. So far I’ve heard only good things about it.

As for the About Me page — arguably one of the most important pages a website has — I’m still trying to figure out how to perfectly (and naturally) integrate it. Right now you can find a link to it in the footer. This might prove sufficient, but my gut is that it won’t.

Accouterments

Some of the finer design details are the ones that are my favorite. For instance, the rounded corners (viewable in Safari and Firefox) on blockquotes, form fields, the pagination controls, and some links.

There’s also the introduction of the check-mark for the aside referral permalinks. (Notice, too, that I’ve dropped the “aside” label for those, and replaced it with [✓].)

I heavily debated dropping support for comments, but I genuinely appreciate feedback, and believe that most of the comments I receive actually contribute to the discussion, rather than degrade it.

Coming soon

Still left to do is (1) a search option, (2) a mobile-phone optimized version, and, as mentioned, (3) a better way to access About Me.


Comments

This is absolutely amazing.

Ian
May 5, 2009

Love it. Zeldman just talked about redesigning your blog publicly in the opening session at AEA yesterday, and you’re doing it the next day… You’re quick.

Almost couldn’t find the about me link even when I was look for it.

Thanks for sharing your thought process.

Jim
May 5, 2009

Rock! & I love it!

David Russell
May 5, 2009

I’m glad you didn’t ditch the highlight yellow, and the archives are fantastic.

I wonder if it would be cool to add additional navigation to the archives widget? Perhaps just above “NOW” you could have a “BEST OF” that links to a page with some of your highlighted posts. One thing I liked a lot about your old site design was how well the most recent 30 articles were displayed on the archives page.

All in all, it really is a great redesign. Very mature, clean and simple.

Shawn Blanc
May 5, 2009

Brilliant.

I wonder if you could put the about link in the sidebar with the archives links. Just put some space between it and the archives.

Drew Gallagher
May 5, 2009

Good idea, Shawn, I’ll consider doing that.

Thanks, everyone.

Sean
May 5, 2009

Wow, really well done. I love the innovative nav.

Filed under inspiration.

Eli
May 5, 2009

Love it!

I was a big fan of the old design, but I totally love this new look… very bold not having a navigation bar — don’t think I would have the guts.

Jesse J. Anderson
May 5, 2009

applauds

Good stuff here, all around.

Kevin Ohlin
May 5, 2009

Really elegant, I love it! The only slightly odd thing is the email field below defaulting to .(JavaScript must be enabled to view this email address). Wouldn’t you rather have it blank?

Sam Rayner
May 6, 2009

Also, the email address in my comment above has been replaced by ‘(JavaScript must be enabled to view this email address)’. I’m pretty sure it is.

Sam Rayner
May 6, 2009

Great work Sean! Big fan of the redesign. The only thing that seems like is missing is some type of indicator that the archives are on the right side of the browser window. The little nubbies on the side are so small that they almost aren’t noticed which might be a little too minimalist from a usability standpoint. Perhaps a box as long as the number of archive categories and wide enough to say “ARCHIVES” vertically. Then when you rollover the box it slides out from the side to reveal all of the months. Just a thought.

Overall it’s a great refresh.

Justin Kirkland
May 11, 2009

Add a Comment

Guide:

*strong/bold*
_emphasis/italics_
bq. blockquote
"link":http://...
Numbered list: #
Unordered list: *