Wire Frames
With the technical architecture setup and some branding elements designed it was time to make a start deciding how the mytechlog.net application would look and feel.  Instead of cracking straight on with functional and technical specifications we opted to create a full set of wire frame mockups of the entire application to help plan and design an interface before we made a start on coding the application front end.

A wire frame allows for an interface design to be quickly put together, amended and shared without investing a great amount of time to programming and graphic design.  I'd used a few dedicated wire framing tools before and standard graphics tools like Visio and Photoshop, but for this project we decided to invest in a particular wire frame tool: Balsamiq Mockups.

Balsamiq has a thriving User Community and via their MockUpsToGo.net website standard user interface components are shared amongst users.  The wire frames produced in Balsamiq have a whimsical sketchy hand-drawn feel to them.  This suits us well as we don't like to give the impression that a wireframe is the finished article.



Pretty much every single application screen including alerts and input warnings have been generated in a wire frame format.  Application controls can be hyperlinked to individual wire frame pages, so you can actually navigate through the mock up of the application to trial the interface, the user experience and test the aesthetics of individual application features.

Individual screens have gone through several iterations until the development team was happy with the outcome before we commited to writing any line of interface code.  This makes writing the functional specifications much easier, as you then have a fully visualised application to refer to, and when it comes to programming you have a full mockup to copy.

Finished screens bear a very close resemblance to their original mocked up design and this cuts down on any reworking of the interface once coding is completed.

Before: The wire frame mock up of the New TechLog screen.


After: The final version of the new TechLog screen.


Click here to read Part 2 of the Production Blog: Graphic Design