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:
- Thematic
- Good ‘ol Twenty Ten
- Satoshi – Probably erring on the side of too much style with this one but it looks great.
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!
Leave a Reply