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!

NET Media international services ltd. (NET Media međunarodne usluge d.o.o.) | OIB: 39220099203 | VAT ID: HR39220099203
Raiffeisenbank Austria d.d. Petrinjska 59, 10000 Zagreb | ŽR: 2484008-1106011288 | SWIFT: RZBHHR2X | IBAN: HR0224840081106011288
HQ: Starčevićeva 2 | Office: Kopilica 5 | 21000 Split | Republic of Croatia | T: +385 21 782 706 | F: +385 21 782 704
Registered at the Commercial Court of Split, under the No: Tt-11/5859-2 | MBS: 060277288 | Share capital 373.000,00 kn paid in whole | Board member: Mato Božić

NET Media international services ltd. (NET Media međunarodne usluge d.o.o.) | OIB: 39220099203 | VAT broj: HR39220099203
Raiffeisenbank Austria d.d. Petrinjska 59, 10000 Zagreb | ŽR: 2484008-1106011288 | SWIFT: RZBHHR2X | IBAN: HR0224840081106011288
Sjedište: Starčevićeva 2 | Ured: Kopilica 5 | 21000 Split | Republika Hrvatska | T: +385 21 782 706 | F: +385 21 782 704
Društvo je upisano u registar Trgovačkog suda u Splitu pod brojem: Tt-11/5859-2 | MBS: 060277288 | Temeljni kapital društva 373.000,00 kn uplaćen u cijelosti | Član uprave: Mato Božić

Contact us today!

You are here for a reason. Let’s talk.

Contact us