After reading Head First Web Design, I’ve decided to take the plunge and create pen and paper wireframes for several of my Drupal content types.  I’d initially planned to design-as-I-go for each content type - improving each content type by modifying the node template PHP files in my Acquia Marina theme. This became pretty time consuming without a clear direction, so wireframing, here I come!

I’ve also developed enough content for the site that I know the direction it’s going - this helps a lot when it comes to visualizing how it will look. I also have an idea of the design I’m looking for from other content-heavy web sites - I’m already up to 1,700 unique pieces of content after importing all of the content from EveryPark.

For wireframing ideas, I found Using Wireframes to Bring Your Site Together from Design Reviver and Five Commandments for Wireframing from Boagworld.  Although I’m wireframing alone as the information architect, I’m also the designer, developer, and content creator, so that one’s fine! My drawings are horrible - I should probably invest in a ruler, but again, they’re for me.

I’m versioning my wireframes - I’m not ruling out switching to a prototyping web site or application in the future, but it’s a lot easier to just draw and scratch out what I want. One tip I have for those of you who are new to wireframing like me is to start by wireframing out an existing web site - like News.com, for instance.  If I do switch to a tool, Wireframing with Google Drawing looks pretty good.

I’m going for a consistent look and feel, and some of my Drupal content types are very similar (why isn’t there any kind of inheritance in CCK with content types?),  so I created two wireframes that will represent about five different content types.  I have another family of content types that are also very similar to each other, and I’m able to get away with one wireframe for that as well.

The next step for me is implementing my wireframes - from my research, I have three choices for theming my content types with Drupal:

• Editing PHP Template files by content type
• Panels
• Display Suite

I’m going to start with the first option - editing the TPL files myself. That gives me control over everything at the CSS level, and it reduces the overhead of the other two modules. I’d like to experiment with Panels and Display Suite, but I’m worried about running into limitations with these modules.

For my next post, I’d like to discuss lessons I learned from theming content nodes with PHP.