Wireframe Your Interfaces First
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.
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.