Let's start with Boyd's IP Theft (oops, I mean Dictum) on Prototyping Tools: it is easier for someone who knows what they are doing to transfer a design concept on the back of a business card with a crayon than it is for someone without a clue to perform the same task with any other medium.
In other words, the important part is transferring the design concept not look at the size of my tool.
Sure, some tools make things easier. Some tools are more efficient than others.
You've got a heap of choices. Rightly or not, most client sites in Canberra are Microsoft shops, so for portability purposes there is an argument to use XP-friendly prototyping tools. I'm not saying it's right, just easier.
Some I've looked at include:
There's a lot more to prototyping tools than this - a lot more. This article is a starting place for yet another discussion on the subject.
I don't do as much formal specification writing these days as I used to, but I've been noticing some promising software for prototyping and specification writing lately. Could be that I've become so entrenched in the Visio world that I never pick my head up to take notice any more.
I downloaded the demo version of ($589 for Pro, $149 for Lite version) after quickly viewing their Flash demo. This Windows only tool allows you to build a page hierarchy for a site and then design the pages by dragging and dropping widgets (like Visio stencil objects) onto the wireframe pane. As with Visio, you can link widgets to other pages and then generate the document as an HTML prototype. What intrigued me most was the Microsoft Word specification document that it produces, providing the wireframes with notes for all of the page objects.
Software like this seems like a real time saver for rapid development, which is the kind of work I've been doing a lot of lately without the actual prototyping bit. That is to say, I turn over informal specs and wireframes on short schedules. To be able to handle all of these tasks in one tool seems great. Anyone have any experience using this or similar tools? Which do you like best?
There’s a problem with endless copied and pasted pseudo-data in wireframes - if the numbers in the shopping cart don’t add up, or clients struggle with lorem ipsum, what’s an IA to do? Fake data can distract stakeholders and take valuable time away from examining core functionality. Dan Brown offers a in the latest Boxes and Arrows.
Gabe Zentall has published a in Adobe Illustrator (also available as PDF), which provides UI elements for use in prototype design. It covers Windows, OS X, and Palm. The templates are excellent excellent for creating high-fidelity wireframes or prototypes. Template sets are separated on different layers in the Illustrator file and all are of course, completely editable. This is perfect for Illustrator wireframers. I'm thinking that this would be a nice OmniGraffle pallette as well.
[Thanks, and ]
.
Bryan Eisenberg (of and ) has a good article in today's edition of ClickZ called . It's a good, simple introduction to the “why wireframe?” question, and considering ClickZ's audience (marketers, advertisers), it's good to see IA mentioned there, though not explicitly.
At the end, Bryan adds in an Einstein quote (“If I were given one hour to save the planet, I would spend 59 minutes defining the problem and one minute resolving it.”), which reminded me a lot of a similar discussion of wireframes and other deliverables — John Zapolski's presentation at the . To paraphrase John's comments, if someone asks you how long it takes to make a sitemap, tell them it takes five days, even if actually takes two hours. The four and a half days you spend thinking about the information architecture problems make it possible for you to create the sitemap in two hours.
I made some minor updates to my to include a title box, some added box outlines, and note shapes.
I created .
Didn't feel like coughing up the dough for , although it looks to be quite powerful. Cost cutting seems to be the theme song around my office these days. is affordably priced and is a servicable alternative for creating user flow diagrams and wire frames on Mac OS X.
discussing modular template-based design for sites with frequently updated content. Users of the Internet have become increasingly sophisticated in their expectations for the content and timeliness of informational Web sites. This is especially true for sites that deliver real-time information. For example, content portals such as Yahoo! provide late-breaking news through content management systems, and sites such as weather.com have realized that in addition to serving their core users, they can also syndicate their contents to a variety of other sites. ... It is not enough to design templates that structure navigation and visual identity. Truly dynamic presentation of information will take a modular approach, and templates will need to include a rule structure that specifies how content and interactions are combined. As content management and other systems enable and demand such modular approaches, the role of the information architect becomes more challenging.
In grokdotcom, John Quarto-vonTivadar . In web-speak, a wireframe is a skeletal rendering of every click-through possibility on your site - a text-only "action," "decision" or "experience" model. Its purpose is to maintain the flow of your specific logical and business functions by identifying all the entry and exit points your users will experience on every page of your site. The goal is to ensure your needs and the needs of your visitors will be met effectively in the resulting website. You wireframe first, before a single line of code is written, a single graphic or color is chosen, or a single word of copy is composed. Wireframing is not concerned with design, navigational layout, content or even the developers' and designers' concepts of how to produce your website.
As of today, the results for the short run of the poll "What tool do you use to make page wireframes / scaffolds / blueprints" shows that of 65 users who voted, Illustrator and Visio are the most popular, with each getting 22 votes (33.85%). Other votes: Freehand 4.62 % (3), Pencil and paper 7.69 % (5), Other 6.15 % (4). The rest of voters preferred a thin slate and a blunt object -- Neanderthals.
Jeanette Fuccella (Human Factors Engineer) and Jack Pizzolato (Web Site Designer), both at IBM, have posted this paper on how to overcome obstacles in the site development cycle by separating content and visuals using wire frames.
Abstract from the paper: