Interactive Wireframes: Roll Your Own, Raising Content Strategy using HTML

Tom Pixton of Communication Production Services at MIT gave a thoughtful presentation on how interactive wireframes can help streamline a project. By using real content, the client gets involved earlier, thus being more invested in the web design process.
Pixton had his first break through when he “rolled his own” using HTML 5 and CSS, thus highlight the importance and raising awareness of content to the client. This creates a more thoughtful web redesign experience in the long run because you are creating early opportunities for you and and your audience to interact with the content.
Because he was well versed in HTML and CSS, he was able to easily “get it up there” – to have the client start to visualize before further work was done on design.  He included media queries to give access to the mobile option as well, and that gets them excited. Additionally, a validated HTML wireframes also provides designers and developers with a concise model of the site that help to align expectations with resources.
But generally speaking, the most important thing is to just get it up there. Tools he recommends and uses, when not rollin’ his own: balsamiq, axure, bootstrap.
Creating a better understanding of content and content strategy early on is supplements with user testing. Tom typically works with the client to create the questions so they aren’t leading questions. He uses Guerilla Suability tested which helped them validates and invalidates critical assumptions at cheap cost with rapid results.
“But one step in web development process is often skipped over or forgotten altoghetr: content planning”. Kristin Wemmer.
Also, in this talk Pixton gave two examples of how interactive wireframes have improved his process: the child care center redesign and the redesign of their own office.
He ended it with a memorable remark, “If your users are happy, you’re happy.”