February 1, 2008 Website Launch: Generation Church Conference 2008

Last night I hit the “Launch” button on the [second revision] of this year’s Generation Church Conference mini-site. I really had fun with this one. The design is grid-based, the typeface is Helvetica (Extended), and the navigation is dynamic.

This project marks the first time I’ve publicly utilized the Blueprint CSS framework — which I’m absolutely loving. Not only did it save me time in development, but it also really helped me keep focus during the design stage. The default 24-column grid provided a construct from which I was able to be creative, but still controlled.

This is also the first time I’ve launched a website without first testing in Internet Explorer 6. It feels good. It feels real good.

gcconf08ss-home.jpg

gcconf08ss-sub.jpg

Additionally, I used Coda-Slider.js for the (Panic-inspired) navigation, and ThickBox.js for the light-boxed bios.

Have a look. (Don’t miss my favorite part — the “Register” button.)

Comments

Nice work! I still haven’t been able to totally get into blueprint, but I’ll take it for another spin at some point. In case you still haven’t checked, the site works fine in IE 6. The .png files in the nav render gray, so the nav is a little low-contrast. Otherwise there are only a couple of things slightly out of place, but it’s totally usable in IE 6.

Scott Nelle
February 1, 2008

Really just stunning work, Sean. Thanks for sharing it.

I loved the sliding on Coda’s page, and you’ve done a great job with yours. I’ll have to find some excuse to do that in one of my own projects. (It’s very Apple-ish, hehe)

Hamish M
February 1, 2008

As usual, it’s beautiful work. Love it. Completely agree about Blueprint. I’ve recommended and implemented Blueprint’s global reset and typography baseline on all of our projects at work. It’s a great tool.

Thanks for sharing.

Dustin
February 1, 2008

Very nice and clean, I like it.

And BTW: Screw IE6! ;)

Greetings

Patrick
February 2, 2008

Fine work, Sean. I think you really nailed this one, and I believe it has a lot to do with organization. The navigation does not just feel like a way to split up the content, but rather a way to instantly get what you need.

Granted, with the ease of use, everyone who visits the site will visit every “panel” at least once (probably more, simply to enjoy the animation) but you really get the feeling that all of the information is right there at your finger tips.

Oddly, I like the “Register” button least of the entire design. I feel it’s a little kitschy and overbearing in the context of such a well laid out site. Also, although I’m sure you are not responsible for it, the result of pushing that massive button is certainly not a reward, at least on for the eyes.

Congratulations on a job well done.

Joe di Stefano
February 2, 2008

Very nice work, Sean! Love the design…

Julian Schrader
February 2, 2008

And thank you very much for pointing me at the Blueprint CSS framework again.

I didn’t investigate it enough last time I stumbled across it, today I just read your post as I began working on a new project — and boy, Blueprint was able to speed up the process! Thanks again!

Julian Schrader
February 2, 2008

Nice work.

Note how I spell ‘Accommodations’ though. This jumped out at me.

Shane
February 6, 2008

Looks pretty neat, but don’t people have a problem with readability of the site? After all, it’s not just the looks but also the content.

Mark
February 7, 2008

@Mark I can see how this site might submit issues to someone who has trouble with their sight. However, Sean considered his audience (and frankly, he knows his audience well, as he works directly with them). This site is not geared toward the typical (if I may stereotype) person who may have trouble reading this. It’s geared towards youth (ages 15-25). Again, if I may stereotype, I think it’s safe to say that most who fall under this age bracket will be able to read the content on the site just fine.

I agree that we should absolutely consider readability in our designs. I think Sean did consider that and executed quite well here for his target.

Dustin
February 7, 2008

Great design Sean! I love the big blue button. One thing that a colleague noted about the Coda-Slider navigation is that it removes any ‘Back’ button functionality from the browser. While I don’t typically use the ‘Back’ button when browsing, this could pose as an accessibility issue for some users.

I am beginning to question the use of the Coda-Slider technique in a current project I am working on, as it restricts navigation for those that rely on ‘Forward’ and ‘Back’ as a primary mean of navigation.

Great work though, keep it up!

Jonathan Simcoe
February 7, 2008

Thanks for sharing Sean! I was just barely wondering where I could find a script that could emulate the coda navigation. Thanks for the tip on the cssblueprint too, that’s sweet! I’ve been working on my own mini-framework, and it’s been a real time saver. I think this will only help. I love the design, props!

Mike Metcalf
February 11, 2008

Commenting is not available in this channel entry.