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
Example: Hello World
- 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
- Changes are a result of actions or events (connecting
- 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
- 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.
- 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.
- Then use a code generator (maybe same tool) OR pass it off to
developers as a specification to create a prototype
- This code could be in Perl, PHP, Cold Fusion, J2EE, .Net etc...
It could be a web, WIN32, X11, WAP, etc... application.
- Everyone reviews the prototype. This could be an iterative
- 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
- 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)
- This is just a simple example of a process -- modify it to fit
whatever methodology (waterfall, RAD, XP, FLiP, Catalyst, J2EE,
etc..) you like.
- 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.
- 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
Not what you were looking for? Here are some other XML Schemas for defining applications: