If geeks love it, we’re on it

Icrontic’s new design: behind the scenes

Icrontic’s new design: behind the scenes

Icrontic went through a major shakeup this past weekend: we rolled out a new design and moved our three WordPress sites (Tech, Gaming, and Life) into a single WordPress MU install.

To understand why we did this, you have to know how we got here. Icrontic launched as a casual PC hardware news site back in 2000 and existed on a string of home-brew content management systems. By 2008 we were doing full-time technology coverage and had moved to WordPress. In November of 2008, we launched Icrontic Gaming, and this past summer we launched Icrontic Life. To accomplish this, we added new WordPress installs on new subdomains.

The Problem

The three-install setup was problematic because we were still only showing Icrontic Tech (what we lovingly refer to as ‘Blue’ internally) on the Icrontic.com home page. It gave casual guests an inaccurate picture of “what Icrontic is.” We also looked very blog-like; the previous Icrontic theme was our first major WordPress project, so we didn’t get very daring with it. On top of that, it was an administrative nightmare–everyone had four user accounts! It took a lot of code to keep three WordPress accounts in sync with each forum account.

Next, you have to understand what’s in store for the future. We currently have member blogs through our vBulletin forum and, frankly, the software sucks; it’s confusing, unintuitive, and just plain hard to use (and even worse to theme and customize). Moving to WordPress MU gives us the framework for the next phase of the Icrontic Master Plan, part of which is to move those member blogs into WordPress.

The Process

Let’s talk about this crazy new look. How did it happen? It started with listing our problems: only Tech articles on the home page, confusing navigation, and not enough cross-pollination of content between sections. Then there were stylistic concerns: the theme was “soft” with rounded corners and fades that didn’t match the attitude we were trying to convey. It needed less “slick blog theme” and more “this is Icrontic, dammit.” The site’s design needed to grow up, join the big leagues, and make a statement.

We wanted something bold and iconic that focused on all three parts of Icrontic: Tech, Gaming, and Life. It should have a section that mixed features from all three. Most importantly, we wanted it to focus on the people behind the content and act as a gateway to our superb community.

Here is a quick-n-dirty sketch from August 20th, 2009:

What is this I don't even

What is this I don't even

After we let it percolate for a bit, an HTML mockup was created on August 30th:

Lots still missing, but the core idea is there

Lots still missing, but the core idea is there

From there, it was a month of periodic design revisions with the staff, a month of refinements, and then three weeks to make it all work in a WordPress template. Color-coded sections, easier archive browsing, improved legibility, and a grid-based layout are some of the major improvements.

The Master Plan

As we alluded to, this is only the first phase of a broader plan for Icrontic’s development. This past year has seen a lot of growth on Icrontic and a solidification of its new identity. The second phase will include migrating our forum onto a new, extensible platform that will take our community to the next level.

Icrontic is already pretty rare in both the caliber of our forum community and how connected it is (via both the code and staff) to the site’s front page content. We have a unique vision of what “community” really means online, and we’re going to develop an experience that captures that.

This redesign was a big project, but it was just a warm-up for what’s next.

Comments

  1. timuchan
    timuchan Loving this new design! Nice having all the news on the home page, I like having it all "at a glance." :)

    Lincoln, where'd you get the twitter module on the home page from? I might need to do something like that for my company's site some day.
  2. Tim
    Tim My version of the home page does not look quite like that at the top, and there's a message across the top saying I need to upgrade from IE6. What's wrong? :)
  3. poofie
    poofie i'm diggin the new design. GG <3
  4. Thrax
    Thrax
    Tim wrote:
    What's wrong? :)

    You're using IE6.
  5. Kwitko
    Kwitko
    Tim wrote:
    I need to upgrade from IE6
  6. _k
    _k How am I suppose to submit articles now? I want to get a piece put on life about BUTTSCRATCHERS!
  7. Cliff_Forster
    Cliff_Forster Tim, you can download Chrome and use it only for Icrontic. We wont tell Microsoft, it can be our dirty little secret.
  8. Margo I guess I failed the challenge the first time around. Ok, I'll try again: Great job! You make tech look accessible for people like me. I actually understood everything in this post :-)
  9. Linc
  10. timuchan
  11. Grimnoc
    Grimnoc Abso-friggin-lutely-fantastic!
  12. Grimnoc
    Grimnoc Awesome job, Lincoln.
  13. Preacher
    Preacher Linc,
    It looks and works great. Two opposable thumbs up!
  14. AlexDeGruven
    AlexDeGruven Only thing I've noticed is that the centering for the forum nav seems to be declared a little bit differently than the rest, causing it to shift a little bit when the window is wider than the content area of the forum.

    Observe:
    Attachment not found.
  15. Thrax
    Thrax The dark template is broken at the moment.
  16. UPSLynx
    UPSLynx Great coverage of the design process. I've LOVED working with the new site over the last few days.

    Can't wait for Vanilla, either. I remember you showing me the mock up, and then talking/obsessing about Vanilla when I came over to visit.. post SIGGRAPH I believe. Good times, can't wait to see it's integration
  17. primesuspect
    primesuspect Vanilla is going to do for the forums what V12 did for our front pages.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!