Don’t Build a Website Without Wireframing

I have a confession to make.

I’m not into details. I’m a big picture guy, one who loves strategy and vision and what-if scenarios. But when it comes to translating ideas into something that can be built, and built correctly, and without too much unnecessary time and expense, I often fall short.

I sometimes tell my developers, I can’t really describe what I want (or don’t want to take the time to do it), so just get something up. Once I see something and use it I know exactly what changes I want to make–but not until. (Usually I show them a few web sites that I love and say, “copy this feature of this site and this feature or design of this site.” But I still leave them far too many decisions to make.)

The result? Wasted time and money.

Playing with a website or with software and having insights into what to change and how to improve it is critical. According to the latest Business 2.0 magazine Jeff Bezos spends Saturday mornings playing with his web site and making a list of 10 things he wants to change. On Monday, he organizes his forces to make the improvements.

I love that the CEO of a $15 billion company spends so much time obsessing about the customer experience.

I also love heads of internet companies who spend time diving into web analytics and who personally write customer surveys to see what their customers are doing and thinking. (Okay, okay … while I have heard that a number of very high-profile CEOs personally use web analytics tools like Omniture I admit that I don’t know of a single CEO who writes customer surveys. While at MyFamily.com I think I personally wrote more than 300 daily surveys about dozens of topics. With 100,000 users logging in every day, we could get 1,000 responses to any question within a few hours. I loved asking my customers questions and getting instant feedback! I also loved organizing my marketing team to have weekly calls with real customers to find out what we could do to improve our service. Once in a board of directors meeting a question came up about how many of our users owned a digital camera and how many planned to buy one in the next year. I quickly posted a survey and by the end of the board meeting we had the results! But I digress….)

My subject today is how to correctly mockup or prototype a web site before sending it to the development team for coding and design.

Two of my closest friends who are also parallel entrepreneurs do very detailed mockups using Powerpoint or Word to design exactly what the pages should look like before sending them on to development. They save thousands of dollars every time they get a web site built, because they do a lot of the upfront design work.

Problem is, both are fairly gifted with design. I’m not. I don’t have an artistic bone in my body.

So here’s what I’m going to do from now on. I’m going to follow the advice from 2001 of the great folks at Future Now Inc and use the wireframing approach to web site design.

I can do basic HTML. So without doing an ounce of visual design, I can wireframe a web site’s functionality. I can create the flow showing what links on what pages do what things.

I prefer not to do this by hand, so I’d like to ask you, my reader, if you know of any software tool that will guide you through the wireframe process (as described in the article above) and then quickly generate the HTML code for you.

In the late 80s we used Dan Bricklin’s Demo software to do screen mockups. But this was more design-oriented than just functionality oriented (and it was a DOS program.)

If you know of any tools that I should be aware of, please let me know. (To reply to this post click on the comment link below.) Thanks in advance.

12 Comments

  1. I don’t know of any software to do it in HTML, but I’ve been doing some web development contract work on the side and I get the page mockups in PDF format, which they have originally created in Adobe Illustrator. Even though it’s normally used for graphic design, it should work equally well to create a wireframe mockup of a site.

    Just a thought.

    And by the way, I’ve thoroughly enjoyed reading about what you’ve learned in the world of business. Thanks for sharing your knowledge.

  2. How about just using Microsoft Publisher that is built into the office suite. You can take Microsoft Word and Powerpoint skills to the next level without having to adopt many new skills.

    -Steve

  3. Eliot W. Jacobsen

    I’ll second the vote for Denim. Especially for someone like you, for whom TabletPCs are literally part of the family. It’s pretty cool.

    I personally mock up in PowerPoint using hot links between slides. Almost anyone can contribute to a mocked up PowerPoint site. Disadvantage is that when you need lots of content below the fold, the PP standard landscape or portrait mode may not extend down far enough.

  4. Have you tried Visio? It is a pretty common wireframe tool in design companies I’ve worked with. Illustrator is also good (as someone already mentioned) but it takes some design skill to use.

  5. You might also check out VoodooPad for Mac OS X. (http://flyingmeat.com/voodoopad.html) It is a stand-alone program for Mac OS X that behaves like a Wiki. You can create new pages and link to them simply by putting their titles in the text. All the pages easily become interlinked. When you’re done, you can export all the pages as HTML, XML, or text, or you can export to your iPod. Very easy to use.

  6. You can use the Outliner tool in Radio to create a wireframe. Each heading is a web-page, sub-items, and sub-sub-items can be the content and flow. The cool thing about the outliner is that it is really XML, and if you give this XML to any web developer worth his/her salt, then they can transform the file into a web page very quickly.

    Since you blog with the Radio tool, you are already wireframing without knowing it. You can use the Stories to create and link pages to each other, thus creating a wireframe. Also, you can create a sub-folder in your Stories directory to represent multiple web projects. And you can copy the stories to developers who can create web pages fast.
    Cool, Huh?
    Regards,
    David

  7. […] After seeing one of Spencer’s Powerpoint web site mockups two years ago, I blogged about the need for wireframing before developing a web site. But I didn’t know the depth of Spencer’s approach until last week. I just kicked off a new web site project where the developer did wireframes (he was already familiar with Spencer’s approach). And I’m working on my first Powerpoint currently for the next generation for one of my web sites. […]

  8. I personally like Axure. It provides not only wireframing, bit it also does mockup work and can even generate the specification for the pages and site. It has controls for flow and it is easy to view the site flow from one place, or to connect pages together in an easy manner.

  9. Sanjay Sheth

    One tool that sounds like it would be great for you is Denim. It’s made by the Group for User Interface Research @ UC-Berkeley. Essentially, it allows you to use a Tablet PC to draw up a wireframe mock-up of the website and then have it convert into real HTML.

    http://guir.berkeley.edu/projects/denim/

  10. Luca Unti

    If you have a ColdFusion (CFML) server installed (btw a free download from either macromedia or newatlanta) there’re many free wireframe tools, a few of them that i personally tested are Rebar (download and example at http://www.fusium.com/rebar ) and the wireframe tool on sourceforge http://sourceforge.net/projects/wireframetool/ . There’re also more sophisticated tools like Adalon from Synthis (a free adalon wireframe edition was available ).
    Many of these tools are listed on the fusebox website http://www.fusebox.org/index.cfm?&fuseaction=methodology.wireframes with link to useful articles on wireframing from exceptional web programmers like John Quarto-VonTivador and Steve Nelson.
    Also if you like podcasting a nice conversation on the subject is available in mp3 at http://halhelms.com/webresources/flipout/flipout_2.mp3 hth

Leave a Reply

Your email address will not be published. Required fields are marked *