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.
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.)
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 · 01 February 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 · 01 February 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 · 01 February 2008
Very nice and clean, I like it.
And BTW: Screw IE6! ;)
Greetings
§ Patrick · 02 February 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 · 02 February 2008
Very nice work, Sean! Love the design…
§ Julian Schrader · 02 February 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 · 02 February 2008
Nice work.
Note how I spell ‘Accommodations’ though. This jumped out at me.
§ Shane · 06 February 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 · 07 February 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 · 07 February 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 · 07 February 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 · 11 February 2008