A Blog from Start to Finish

Prophet contacted me about a blog they wanted to run. They wanted a multi-author blog with all of the modern bells and whistles on which they would write about the brand and identity world. They needed someone who could help them work out the UX-UI, visual layer, and build the site. Wordpress was identified as our platform and I've got to say Wordpress consistently amazes me. This open source platform runs smoothly, is easy to configure and customize and delivers a solid experience for the end user.

This was a start to finish project for me, meaning I was going to work with the team from the initial content discussions through to launching the site. I enjoy getting to work on the full length of the project, it's rewarding to see the final site launched and in use. This project got divided into three, fairly typical, parts. We started with UX, did visuals, and then finished with the theme building.

The Foundation

The Information Architecture vs UX

Even a simple site or a well established concept, like a blog, needs the underlying information architecture (IA) or user experience (UX) thought out. IA and UX are terms that seemed to get tossed around often in conversation and just as often seem to be used synonymously. According to Wikipedia the IA considers the structure of the content while the UX is about the human interaction. This is interesting, it's as if the UX is a "top down" approach (starting with the user) while the IA is a "bottom up" approach (the underlying information). Given these definitions, for my workflow, the IA happens first and the UX usually happens later in the visual design phase. Most of my projects fit within a standard trio of site-maps, flow diagrams and wireframes and that's typically the output of this phase.

Painting It

The Visual Design

With the blueprints down, it's time to make the art layer. Obviously this layer contains the look and feel but it also is responsible for supporting the hierarchy and user experience. The Visuals are usually when the client starts connecting with, or really understanding, the site. This means we occasionally have to reconsider some of the IA. If you design in a flexible and iterative way, this shouldn't be a problem. One thing that interests me is that in the visual layer, typically clients are provided with several options that they choose from. Often the design that is chosen just happens to fit this particular project best, meaning that there is a lot of good cutting-room-floor content that comes out of this stage. I've included some of the alternate designs in the slideshow because I think this process is interesting.

Building it

Coding the Wordpress Theme

Now it's time to build the theme. In a CMS like Wordpress this is a mixture of installing and configuration with actual coding. The advantage to a CMS is that you don't have to start from scratch, almost all of the coding is already written by the open source community. For a custom designed site, most of the coding is going to be in the theme layer which means a lot of HTML/CSS and some Javascript and PHP. The Inspiratory used 14 pre-built modules, one custom module, and a custom theme. For Wordpress I typically use one of the default themes (In this case twentyeleven) and rip it apart, rewriting the template files to get the functionality I want. In Drupal, I typically start from scratch or use an "empty" theme like Stark. I think this is typically because Wordpress is a more specific use case, so the prebuilt themes seem to have most of what I want already written. If I choose Drupal for a project, I'm typically doing something more unique. I'd like to hand it to the Open Source community, both of these CMS projects are amazing. They enable so many projects that would be unfeasible because of the time and expertise involved in rebuilding all of this from scratch. My thanks to you.