Tim Gittos

I'm an Australian currently living in Austin, TX in the USA.

I currently earn a living programming, though I wouldn't call myself a programmer. If I had to attach a label to myself, I'd use the term autodidact.

I love learning, and my favorite things to learn about are programming, computer graphics, AI & machine learning, robotics, painting and creativity.

Wireframe Your Interfaces First

Last updated on 17 Dec 2008

As I’ve mentioned in a past post, I’m doing a rebuild of the CMS here at work and I’ve reached the point where the internals are done, and now I have to create a user interface for the application.

Now, in the past I have worked a variety of jobs and in those jobs a variety of roles. One of my jobs saw me as a web developer, like now, but with a difference: I was the only web developer.

I was responsible for quoting, requirements analysis, planning, design, development, testing, debugging, deployment and maintenance. If there’s only one thing I learned there, it was that web development is more than HTML and Javascript and a server side language, and a freelance web developer needs to know more than just programming and design.

What I really found hard was the design part.

That is, until I read somewhere that design is visual communication. Just like any other form of communication, you need to have a point, something to say. However, that point can very easily get lost in the minutiae of designing, of making sure something looks good.

I’ve found that wireframing is essential. You use the wireframe to establish the point of the page, the information that a page needs to contain, free of it’s appearance. You use the wireframe to tweak the structure, to experiment with different work flows. When you’re done, you go over the top and start designing.

Wireframing has enabled me to quickly build a general structure for a user interface, concentrating on the information and tasks that interface needs to perform.

I wireframe with Balsamiq, which I’ve found to be an excellent tool. You can try it out indefinitely on their site, fully functional, and all it costs is pop-up every 5 minutes asking you to buy it. I’m recommending we buy at least one copy for work, and I recommend you check it out if you want to make effective applications.