Wireframes

On Wireframing Tools for Microsoft Environments

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:

  • Axure: I use Axure because the engagement I was on was in a Microsoft shop and it was the best available at the time. I've grown used to it's good and bad points. Familiarity has bred content. It produces rapid HTML prototypes but unusable HTML - that said, I like the Microsoft Word specification output, because Word is the easiest way to get documents around the current client site.
  • Visio: if there is a Hell for IAs, Visio is the tool that they used to design it. The best thing that can be said about it is that it works - one screen at a time. You can do a bit of work with masters and reuse them, but it is all manual and harder work than it could be using one of the add-on sets - like Intuitect.
  • Intuitect: Intuitect is a great idea, but has some flaws because it sits over the top of Visio (but I understand that they're working on it, and I look forward to seeing it grow). It is extensible, and can use real CSS (which in turn can be substituted for other real CSS, so "reskinning" should be easy).

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.

Axure RP Pro: Rapid prototyping and documentation tool for website applications

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 Axure RP ($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?

What to do about data in wireframes

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 variety of ways to deal with data in wireframes in the latest Boxes and Arrows.

User Interface Library

Gabe Zentall has published a library of user interface templates 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, Column Two and Reloade]

Practical Applications: Visio or HTML for Wireframes

By Jeff Gothelf in Boxes and Arrows.

    Design organizations inevitably run across the debate of Visio versus HTML wireframes. The decision for one over the other is never a clear-cut one since, as with all things IA-related, it depends. This article seeks to sort out the issues by describing the pros and cons of each and identifying situations where one may be more effective than the other.
Wireframing on Clickz

Bryan Eisenberg (of FutureNow and GrokDotCom) has a good article in today's edition of ClickZ called Framing the Problem. 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 Zen and the Art of Deliverables (PDF) presentation at the 2002 IA Summit. 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.

OmniGraffle wireframe palette: minor updates

I made some minor updates to my OmniGraffle wireframe palette to include a title box, some added box outlines, and note shapes.

OmniGraffle wireframe palette

I created an OmniGraffle palette for creating wireframes.

Didn't feel like coughing up the dough for ConceptDraw, although it looks to be quite powerful. Cost cutting seems to be the theme song around my office these days. OmniGraffle is affordably priced and is a servicable alternative for creating user flow diagrams and wire frames on Mac OS X.

Design: static pages are dead: how a modular approach is changin

ACM interactions article by Julie Pokorny 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.

Wireframing

In grokdotcom, John Quarto-vonTivadar on wireframing. 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.

Results of wireframe poll

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.

A divided approach to Web site design: Separating content and visuals for rapid

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:

    "A well-designed Web site fuses great content and effective visuals, among other elements. Ironically, integrating these elements too early in the design process can mask problems that might otherwise be detected early, and lengthen the design cycle. This paper describes a way to shorten your design cycle by getting focused, early user feedback on the different layers of your design."
Available online: http://www-106.ibm.com/developerworks/library/wireframe/wireframe.html

XML feed