aWireframeML

aWireframeML - Application Wireframe Markup Language

Application Wireframe XML and reference software/stylesheets. This project aims to create a xml schema for defining application wireframes. The goal is a methodology and programming language agnostic format. Wireframes are used during the requirements phase of software development to create a functional representation of the to-be application.

Wireframes are used as an effective tool to elicit true application requirements versus "look and feel" requirements (which can later be fleshed out by building upon the wireframe to create a prototype) from [non-technical] users. Wireframes are useful for nearly every type of software or process development effort as well as a brainstorming tool for developers.

Status: Alpha / Request for Comments

• Current Version: Alpha .02 USE AT YOUR OWN RISK!
• View Documented Schema Here
• Download XSD Here
• RSS News Feed

Example: Hello World

• helloWorld.xml - Hello World in aWireframeML.
• helloWorld.html - Hello World wireframe documented by applying aWireframeML-documentor.xls (generates a user clickable representation of wireframes) to it.
• helloWorld-tree-view.html - Hello World wireframe tree view by applying tree-view.xls (generates a HTMLized tree representation of any xml document) to it.

Wireframe?

• Think of your application like a TinkerToy
• It's made up of views or states (round thingy with pegs)
• These may contain multiple components (more round thingies)
• Changes are a result of actions or events (connecting sticks)
• Here is an example -- don't get caught up in how this looks (this is NOT a screenshot) -- it's the concepts that count -- wireframes may be represented by graphics or text

OK, So what can I do with aWireframeML?

• Not a whole lot at the moment. You could use it to create XML wireframe instances.
• One idea is that you could create a XSLT Stylesheet to generate a clickable web app.
• Another idea is that a repository of common wireframes could be used to jumpstart development.
• The basic idea is to be able to export out of one wireframing tool (example: a UML diagraming tool) to import into another (example PHP or CFM web app.) and vise versa.

In theory...

1. You create a wireframe (in your favorite tool that can save in aWireframeML format) -- maybe this tool is a web app made of simple forms and text that you can collaborate with end users -- maybe it's a windows app with pretty drag and drop shapes. The important point is that you don't do this in a vacuum. As you are creating it, be sure to work closely with your users.
2. Then use a code generator (maybe same tool) OR pass it off to developers as a specification to create a prototype foundation.
3. This code could be in Perl, PHP, Cold Fusion, J2EE, .Net etc... It could be a web, WIN32, X11, WAP, etc... application.
4. Everyone reviews the prototype. This could be an iterative process.
5. If all is good in the world you would now have classes/stubs/sub routines/etc... that you could quickly flesh out. Maybe at this point you use a different programming language. Maybe your prototype was a web app that you could share around the world, now you generate the framework for your target (a WIN32 thick client.)
6. The advantage of this approach versus a design document is that your users have buy in and full agreement on requirements. You have a self documenting and working prototype. This means less defects and rework, more efficient use of development time. (note: you will usually not generate production level code from a wireframe -- however it may be used to create the basic structure to build upon)
7. This is just a simple example of a process -- modify it to fit whatever methodology (waterfall, RAD, XP, FLiP, Catalyst, J2EE, etc..) you like.
8. There are other things you can do to complement this process (personas & goals, storyboarding, design reviews, etc...)

Why is aWireframeML here?

• I was creating wireframes and found that wireframing tools either used propietary formats or really odd looking data formats. See example [ wireframe.wir ].
• I started in one tool and found I had to completely start over when I switched tools.
• There had to be a better way.

Help Out!

• Comments and critiques are the most valuable right now. Use Source Forge Forum for submitting them.
• Logo Suggestions.
• Getting tool developers interested.

Application Wireframing Reference Sites

• UML Model driven architecture (MDA) approach
• FLiP Wireframes
• GROK Wireframe Article
• SecretAgents Wireframe Article
• Simple Application Wireframe Example
• Hal Helms on Wireframing
• BoxesandArrows Wireframe Article

Not what you were looking for? Here are some other XML Schemas for defining applications:

• UIML - User Interface Markup Language open standard user interface description language in XML. This can be used to take a wireframe a step closer to production code.
• Know of something that should be listed here? Let me know or post a link in forums

NetFlix.com