Theme Tip 14 – Using WordPress for Wireframing

14 December 2010 comment icon3 | Categories: 24ways

14

If you are a web designer, information architect, project manager or developer chances are at some point in the last few years you’ve created a wireframe for a website or web application. If you don’t know what wireframes then stop – go find out – then come back and read the rest of this.

There are lots of excellent tools for creating wireframes and some of the best free ones are not bad at all. Two tools I’ve used heavily in the past include Axure (fantastic but not free) and Visio (only ok and not free but gets the job done).

But more and more I find myself ditching these tools altogether and using WordPress as a wireframing tool. Wha?

Yes, you heard me right – I use WordPress itself as the wireframing tool.

So how does that work? Well just before we get into the how, let’s talk about the why.

  • It’s a doddle to create ‘wireframe’ designs quickly.
  • The end product is a high fidelity user interaction design that your clients can fully experience – not just flat screen mockups from photoshop/fireworks.
  • No time wasting – why waste time creating low fidelity wireframes in another application which will be binned at some point when you then move into your favourite code editor to start re-creating your layouts as proper markup and CSS. Jumping straight into the browser has other major benefits in that font rendering, browser rendering/support issues etc. come straight to the surface at the start of the design process. As long as you don’t find yourself using these constraints as a crutch limiting your creativity you’ll be ok.
  • Once your wireframes are done – your project is halfway complete. If you setup a clean new WordPress for your client and kit it out with a barebones minimalist wireframe like theme but put the time to incorporate real content, menu structures and widget placement then by the time your wireframes are agreed, your actual website is also half built! Once you then start apply colour, typography styles, imagery and the final UI style enhancements you’ll find things much easier.

Right now there’s no dedicated WordPress wireframe themes in the public domain – (we might release one eventually!) But there are some great themes which can be put to good use as wireframes, including:

So today we’ve only scratched the surface of this really broad and interesting topic. Do let us know if you’d like to read more on this!

3 Responses to “Theme Tip 14 – Using WordPress for Wireframing”

  1. themesforge on 14 December 2010 at 11:19 pm said: Permalink

    [New Post] Theme Tip 14 – Using WordPress for Wireframing – http://themesforge.com/24ways/theme-tip-

  2. Kristine Jubeck on 12 September 2011 at 8:39 pm said: Permalink

    Wow! I’m so excited to see someone else is doing this. It’s how I’ve begun to build all of my sites, actually. I even train the client to use WordPress early on so that they can help build out the site. They get comfortable with editing the site content, and the entire process of gathering and organizing site content goes much smoother. I wrote a client-focused article talking about the approach here: http://www.awebsitetolove.com/design-last-a-practical-approach-to-web-design/

    • Ed on 14 September 2011 at 8:20 pm said: Permalink

      Hi Kristine,

      I agree 100% with your approach. Getting them comfortable with WordPress early on definitely helps in the long run!

      Ed

Leave a Reply