Category Archives: prototyping

960 Grid System layout tools and code sure to save design & development time

960 Grid SystemNathan Smith has launched, a very promising framework and design toolset for layout using CSS. Besides a great foundation of code for implementing a flexible grid system, he’s created accompanying templates for sketching preliminary designs on paper and wireframing detailed designs in Visio, OmniGraffle, Fireworks, and/or Photoshop. As with any Nathan Smith endeavor, this kit is very well thought-out and executed. He’s considered many details and implemented them thoroughly.

If you’re looking to cut down development time while sketching, wireframing, or coding hi-fi prototypes in HTML, Nathan’s work in the is sure to be a great starting point.

Read more about the whys and hows in Nathan’s explanatory post on, and download the framework (only 180KB for all the tools, only 4KB of actual code code compressed) at,

Leave a comment

Posted by on March 26, 2008 in code, process, prototyping


Spring MIS 374 Lecture

I was thrilled that Sharon Dunn asked me to visit the 40 Acres to lecture the Spring MIS 374 class on High-Fidelity Prototypes again. The talk was basically the same as the one I delivered in the Fall, so I won’t waste disk space or bandwidth in posting a re-run. While the students didn’t have as many questions during the talk, there were several after class and many more through email.

I really enjoy sharing this talk and am considering working up a few others based on the questions that have come up after. I sure hope Eleanor and Sharon will have me back again next year.

Leave a comment

Posted by on March 24, 2008 in prototyping


My Old School

I was thrilled back in August when Eleanor Jordan, my former professor now Professor Emeritus at UT Austin asked me to come speak to her class about high fidelity prototyping. “MIS 374 – Business Systems Development” is the capstone class for MIS undergrads. The students learn project methodology concepts and test everything they’ve learned in the 4-year program on teams to complete real-world projects for Austin-area clients.

Last Monday (10/22/2007) I drove down to Austin for the day to share a slightly modified version of the high fidelity prototyping talk I gave just over a year ago at Refresh Dallas. The class was great. They were very receptive and had great questions during and after the presentation. Unfortunately, our time was cut about 15 minutes short by a “non-specific” bomb-threat, but we got through most of the presentation and several students stayed after to chat while UTPD scanned the building.

I enjoyed the experience and will be happy to go down any time they’ll have me again.

The presentation and pre-class notes are available on the Downloads page.


Posted by on October 25, 2007 in prototyping


Garrett’s Content is the Design

Garrett's articles

My friend and co-worker Garrett Dimon recently relaunched his eponymous blog. The results are fantastic. Garrett cites the work of Edward Tufte as his inspiration to provide visually compelling examples when writing about web design, technology, and other usability topics. The new layout is completely clutter-free, focusing completely on the topic at hand. His simple grid layout provides a variety of interesting ways to incorporate illustrations and examples that are both meaningful and pleasing to look at.

I’m looking forward to reading Garrett’s future posts. If you’re into user experience and visual design, you will likely look forward to them as well. Add his feed to your reader if you haven’t already.

Leave a comment

Posted by on February 19, 2007 in design, process, prototyping


The Prototyping of Star Wars

Death Star Canyon

Stephen Anderson provided a wonderful talk a few weeks ago at Refresh Dallas (and subsequently at Refresh06 in Orlando) on “Creating Pleasurable Interfaces: Getting from Tasks to Experiences“. He does a great job of making the squishy elements of UI design feel tangible. The truly wonderful interfaces that we use everyday are our favorites because of the intangibles that Stephen so eloquently describes in this talk. There’s a lot to learn in there and apply to any project we’re working on.

Ralph McQuarrie conceptIn this talk Stephen mentions the work of Ralph McQuarrie. When George Lucas was shopping the idea for Star Wars to different studios, he was concerned that the traditional method of providing a script to read would not do justice to the scope of setting and drama that the story would provide. He wanted something more than just words on a page to literally illustrate the characters and settings he wanted to film. So George hired artist/illustrator Ralph McQuarrie to do just that. The use of such supplemental material for movie pitches was not at all common during that time. McQuarrie later said “I understand my pictures did something to convince [20th Century] Fox to make Star Warsâ€?.

I know Walt Disney used rough sketches for storyboards in the production process, but I think George Lucas’ approach to develop such high visual fidelity illustrations was novel for selling the project. Lucas realized that there was too much room for interpretation when he only used a script; he wanted to provide more concrete examples of the vision he had for the project. That’s exactly what we do when we insist on some form of prototype to advance our project instead of relying only on a written requirements and design document.

When you’re just trying to get a project off the ground, high visual fidelity concept screens can really help make your inspiration infectious with investors and other project sponsors. Illustrating the key ideas with great visual clarity so they can get a flavor of what their investment will return.

Leave a comment

Posted by on November 21, 2006 in prototyping


Mock Data Generators

As Dan Brown demonstrates on his “Representing Data in Wireframes” poster, the fidelity of your data can make a big difference in its ability to identify flaws early in the design process. The main reason designers use repetitive or otherwise lo-fi data is that it takes time and creativity to develop realistic data. Here are two tools that could help generate higher quality “dummy” data for your mock-ups and prototypes in less time than it would take for you to make up your own lo-fi samples.
Kleimo Random Name Generator
This web page uses data from the US Census to randomly generate up to 30 male and female names at a time. It has an attribute for obscurity as well. This little page can be really helpful for creating a realistic list of names. A random pop culture reference is fun to throw in every once in a while. But if your list of names reads like the credits for the Simpsons, you could loose some credibility with your clients.
Truly Random password and number generator
A lot of junk came back when I googled “random generator mask” trying to find a web-based application for generating random strings and numbers using a mask. Most of the hits were for Windows applications to generate passwords or lottery numbers. After trying several I finally found one that could be very useful for generating mock data. Solid Programs‘s Truly Random creates random strings based on a mask you provide. The mask is useful for creating numbers to match the format of your data. The downsides to this app (it’s in Windows and its not very easy on the eyes) are outweighed by the power it provides to generate plausible data quickly. It costs $19 to register Truly Random.
I wish someone would develop a web-based app to deliver both of these tools on a single, easy-to-use page (see update below). If not as a web app, a Universal Binary would be nice.

UPDATE: Benjamin Keen’s Data Generator provides the best of both tools mentioned below in an easy to use online form. He provides many useful datatypes (phone/fax, names, custom lists, etc.) that should cover most of the needs I can think of. Many of the types allow masked options editable for custom formats (like a Texas drivers license or client-specific account number). The output formats include HTML, Excel, XML and SQL. Very nice work.

Leave a comment

Posted by on November 6, 2006 in business, code, design, prototyping


Links from the High-Fidelity Prototype Presentation


Here are the links I referred to in the presentation this evening.

I’ll try to have the deck posted by this Sunday. As promised, here’s the PDF of the deck of last Thursday’s presentation.


Posted by on September 14, 2006 in process, prototyping



September Refresh: Prototyping

The next Refresh Dallas meeting will be held on September 14th at the Christopher A. Parr Library (see for all the details).

I’ll be the presenter this month. We’ll explore the benefits and costs of using Hi-Fi Prototyping using a real life case study as context.

Hope to see you there!

UPDATE: Thanks to everyone at Refresh Dallas for hosting and attending the meeting last week. I’ve formatted the presentation for print, and it is now available here as a PDF.

1 Comment

Posted by on September 4, 2006 in prototyping



Thoughts on iRise

This evening I watched a demo of iRise, the prototyping tool developed by the company of the same name. Here are some quick thoughts I took away.

The tool seems easy to use. Drag and drop screen and scenario painting looks straight forward. I can see how quickly you could develop a fairly deep prototype. It would be much faster than coding, even if you had a rich set of templates like protokit to start with.

The output has good visual fidelity. While it uses proprietary metadata to style the visual elements, it will import CSS. It appears that absolute placement of graphics doesn’t allow for a fluid layout, but there does seem to be a high degree of control over style attributes and placement. The interaction with “data sheets” provide rich data interaction simulation (something that we’ve been stratching our heads over on protokit). What seems to be lacking is rich DHTML (or as the kids call it “Ajax”) behavior. The few widgets they demoed when asked seemed to refresh the screen on each activation. There might be ways around this with hacks or in future releases.

The output has low mark-up or code layer fidelity. The output is a proprietary format similar to PDF. Like Adobe’s Acrobat strategy, a free viewer is available from iRise that will “run” prototypes (iDocs) developed by the iRise tool. Like protokit, this makes the prototypes very portable and easily viewed with or without a connection to a server. The downside is that there isn’t much (if any?) mark-up that can be reused by developers. This is especially not-good news if you’re documenting design to be shipped off-shore for development. I’d like to be able to specify accurate examples of what the mark-up should be.

The trade-off might be worth it. You save time developing the interactive model and can use some of that time to develop an interactive style guide with markup examples. You could even develop static HTML renderings of each screen, they just wouldn’t have the cool interaction that the iDoc offers.

So, when does one use iRise? Protokit? Just prototype in Rails using scaffolding? Well, any junior consultant will tell you the answer is always “it depends”. But iRise is a fascinating first step into automating the design process. Hopefully I’ll get an opportunity to evaluate iRise further to see if the mark-up side shortcomings can be overcome by overloading the available attributes and other documentation capabilities.

Leave a comment

Posted by on May 31, 2006 in prototyping


Prototype generation packages

Until I heard about Axure last week I didn’t know about any tools out there for creating prototypes. But in the last week, I’ve learn the names of two others. The list I’m keeping currently includes:

How did I miss all these before? Please leave a comment if you think there are others that should be added.

I have not spent much time looking at each of these. From what I have seen so far they offer high-fidelity prototypes to make sure that the sponsors/potential users understand how the application will work, look and feel.

I am very curious to see how well it generates code. The other side of the protokit benefit is that developers can also see an authentic design. Ideally, a high-fidelity prototype should look real both on the screen and under the hood. Developers should see all of the presentation assets (images and css) and exactly what mark-up their code (jsp, asp, php, etc.) should generate.

If you’ve had experience with any of these tools (or have examples online that they generated) please leave a comment below. I’m very interested to look at the output.

Ironically, these packages also automatically generate all the document debts that high-fidelity prototypes help eliminate the need for.

1 Comment

Posted by on March 31, 2006 in prototyping