Does anyone know of a formal grammar approach to UI design? I currently have wireframes for 100+ pages and I'm now driving out the commonality / identifying reusable components.
I'm interested in the idea of a grammar. For example, a page in BNF may be:
<page> ::= <nav-bar> + <title> + [<alerts>] + <data-grid>
And a data grid:
<data-grid> ::= [<filter-bar>] + <table-header> + <table-rows> + [<edit-pane>]
My motive is to spot common patterns and formalise in to a UI specification.
The short answer appears to be no, there does not seem to be a formal approach to describing UIs using a grammar. However, based on the answers below and further research I've rolled my own solution.
I've created a my grammar as an XML schema, but using RELAX NG due its simplified syntax.
Here's how a simple page schema is visualised:
I'm then using an XML editor with auto-complete to aid describing UI pages:
Which is proving to be very productive.
Then finally I have a simple script to turn XML page UI descriptions into HTML mockups, along with some CSS for rendering:
The most exciting part is ability to programatically apply heuristic analysis, plus the simplicity in globally applying different UI layouts to the whole set of mock pages quickly and easily, allowing for rapid mutations and iterations of UIs.