Are wireframes still valid?

We are now at the apex of cross-device and cross-platform application development.

The world we live in has rapidly changed over the last three years to a point where we are expected to get an application running on several different devices.

In previous posts, I’ve extolled the virtues of HTML5, CSS3 and the new Javascript libraries and APIs for rapid application development. HTML and CSS have come a long way and they’re all grown up now. Not only do they make rapid development more feasible, the same tools can be used to create rapid, interactive wireframes or prototypes.

One thing that has always been true about wireframes, clients really don’t understand them. I have always endeavored to wireframe in a way that is client-friendly, however capturing all the interactions in a static document can still make it difficult to put wireframes into context. You get very good at walking clients through the interactions (because chances are, they aren’t reading the functional notations) and you can capture  a lot of what needs to be communicated if you’ve carefully set-up the flow of your wireframe deck.

In this age of more start-up, less agency, the workflow is very much about the path of least resistance. In the past, I have done both static wireframing and interactive wireframing (or prototyping). I can tell you that it all comes down to time. There are many factors to consider. The scope and scale of the app will determine your approach. The number of core interactions and the fine-line between almost building the app and actually prototyping.

I would say that if it takes longer to place a static element on the screen and annotate it’s interaction, then prototyping is the best way to go. I’ve done my fair share of interactive wireframes in HTML, mostly using tools like Dreamweaver. There are newer tools, specifically designed for non-coders with a WYSIWYG interface that can be useful, such as Balsamiq.

Overall, I find WYSIWYG editors to be more frustrating and time-consuming. There is always something missing and you don’t have the degree of control that you would have when working directly with style sheets.

I’ve always known how to write code and have updated my skills in HTML5 and CSS3, so my preference is to prototype using some of the new frameworks available such as Foundation, which comes with a fairly extensive set of styles to work with. This, in combination with other tools like Placeholdit and Orbit, make rapid prototyping much easier and well, faster. Again, it comes down to time and choosing the right tool for the job. You really need to know whether it’s going to take you longer to create interactive wireframes vs. static wireframes. If your client is paying you by the hour, you need to make a responsible choice.

As I eluded earlier, the modern mindset is to think more like a startup and less like an agency. Today it’s all about product design and not so much about designing for a specific project. Keeping this in mind, it behooves all UX designers and Information Architects to have solid prototyping processes in their toolbox. It’s part of the job, more now than ever.

Here’s my recommendation: If you don’t know how to code using HTML5, CSS3 and some basic Javascript – that’s the first place you need to start. Really, it’s not rocket science and with the new code standards, it’s never been easier.

My toolkit includes:

Omnigraffle for wireframing (lots of great templates and libraries on Graffletopia and you’re probably already using many of them)

Foundation – for rapid prototyping. It’s up to you how you fine-tune the fidelity in your prototype. If you are pitching an idea to a group of investors, you should work with a designer to get a higher-fidelity prototype. Sorry IA community, I know I’m bending the rules on this one but it’s a fact. Investors aren’t doling out seed funding based on wireframes alone.

Orbit: Quick jQuery image slider plugin – this one is slick and dead easy to use.

Placehold it - An easy placeholder generator that really works well.

Did I mention CSS3? Learn to manipulate CSS3 and prototyping becomes a breeze.

Adobe CS5 Photoshop and Illustrator: Everyone in digital should at least know the basics of Photoshop. For a UX designer, knowing your way around Illustrator is a huge bonus. You will, at some point, need to create custom vector elements.You should include conceptual drawing in your toolbox as well. It doesn’t have to be realistic or “polished”. But you should know how to do a good line drawing.

A special thanks to the team at ZURB for pioneering kick-ass processes for interaction design and for providing so many great tools!