Umbraco as a wireframing tool?

I’m loving Umbraco so much that I started using it beyond his CMS capabilities. Lately, after trying several mockup and wireframing tools, I finally settled with… Umbraco! We’re mostly using Twitter Bootstrap for our web apps, and those two in combination make an excellent wireframing tool.

It is really simple to set it up, I don’t even setup an SQL database, SQL CE is enough. Then, you need some basic document types:

– Master (to store datatypes for all nodes like umbracoNaviHide, Title, umbracoRedirect)
    – Page (generic page, usually only with on RTE datatype)
    – ComplexPage (for pages with more than one RTE datatype)

Now you also create some basic templates:

– Master (include Twitter Bootstrap, JQuery and basic HTML layout here)
    – Layout 1
    – Layout 2
    – …

Create some basic macros and put them in templates:
– Main navigation
– navigation

… and that is it! Now just add content pages which actually represent application screens. In example:

– Dashboard
    – CRM
        – All clients
            – Add new client
            – Delete client
        – Export
        – Import
    – Contracts
        – List Contracts
        – Expired Contracts
…

In RTEs of those pages you can add Twitter Bootstrap code. Most of this is reusable later in development!

This is basic scenario and I do expand it if needed. In example, note doctype “Complex page” above. What I like to do, now in Umbraco 7, is to enable new option in v7 for it: “Enable List View” which lists sub-nodes in data-grid and not as child nodes. Then I can add sub-nodes to that “complex” page and each sub-node represents peace of UI of the page. This is because for complex pages, single RTE with a lot of Bootstrap code is not really readable. So I split it in peaces as child nodes of the page!

For more complex projects, I create several new document types which can be used here and some can be really complex like: toolbar, search bar, table, etc. Then, simple macros/templates can turn those into reusable UI elements (it is related to my Widgets post).

Enjoy!