Latest Posts

So you think you can build a website?

No, it’s not a new reality TV show! It’s about the right way to build websites – especially very BIG websites that have 1000+ pages with a couple of dozen different templates and myriad inner page layouts to convey. Where to start? Did anyone say ’fire up Dreamweaver and start pumping out code?’

Why waste time with mockups?

OK, if you’re a small operation and the only developer and building the site for only one client – maybe you can skip all this mumbo jumbo. But, if you have (or ever hope to have) a big website redesign job with multiple stakeholders (they’re not clients anymore) – and I’m talking 20+ stakeholders with very healthy egos and project derailing abilities – you’d do well to take my advice on this one. You see, as developers we already know how all this stuff works. But your stakeholders usually don’t have a clue and are relying on you to clearly articulate to them – in a style and language they understand – how it all works. After all, if you fail to convince them of your brilliant plan, it will be scrapped anyway. So trust me on this, get into mockups, wireframing and prototyping if you want to work for BIG clients.

Okay I get it, let’s start wireframing!

Right, first we need to know a few things (actually we need to know heaps of things but we don’t have the time or space here). So, the few key things we’ll focus on here are;

• How many pages
• How many templates (0r master pages)
• How many levels of navigation (IA)
• How many page variations
  • home page layout
  • standard content page
  • product display page
  • product “more details” page
  • shopping cart page
  • thank you page (after product purchased)
  • contact us page
  • error pages
  • etc… 

All of the above needs to be defined before the creative design begins. These elements MUST be fleshed out in boring old black & white before the artists get to it – because once they do, your stakeholders will be totally absorbed and sidetracked by every shade of colour, every placeholder image, every miss spelt word, every pixel out of place and everything BUT what they should be focusing on – which is (drum roll please…), the layout. How will it work – not, how will it look & feel. Because if you go ahead and build it all shiny and new, but your users don’t have a clue how to operate it or find key information – its all money down the drain. 

Time to mock it up! 

Once all the above is determined and everyone is in agreement with how each main page will operate, we mockup the basic wireframes containing all the key features and functionality of the site – which we will know from our requirements/ scoping document.

The mockups must be ”vanilla” representations of the website – there will be no artwork, colours or styles applied at this point – this is to keep everyone focused on the critical pre-build phase (believe me, this approach will save the project lots of money down the track).

Try before you buy… with clickable HTML prototypes

The next step we suggest is to make the wireframes clickable so your stakeholders know exactly how it will all work and flow – this tends to set their expectations and provides visibility into the end product – without getting too hung up and distracted by pretty pictures (these are still important of course, just not now). That way, when the designs are built in to the site, there won’t be any nasty surprises or basic functionality questions like ‘how does that work’? Or ‘can we move it over there?’ We want to nut all this out way before the design stage.  

A winning formula!

Once all your stakeholders have clicked the death out of the HTML prototype and all the approved amendments have been reworked – it’s finally time to hand it over to the developers and designers who will cut the code and create the look and feel respectively. The end result will be a robust, functional and beautiful website (or software) solution – built the right way, from the ground up that your users – and management will love! Win/win! 

~ Steve Maher (Metaweb)

Metaweb is a Brisbane based online consultancy.