Good UI Design Through Mockups

At Hardin, when we begin the process of developing software, we’ve found that it’s vital to separate the artistic component of design from the usability, “human computer interaction” component. When you combine the two, it’s way too easy for both designer and client to get caught up in the small details of which gradient or texture or font or image looks the best, which while important should not overshadow the usability of the interface.¬†Our approach to design focuses on first nailing the UI through mockups, then skinning it with great looking art. We’ve had great success doing this using mockup tools (such as Balsamiq), which make designs look like they are hand-drawn so as not to confuse them with drafts of artwork. In Balsamiq’s own words, regarding their rapid wireframing tool:

Mockups reproduce the experience of sketching interfaces on a whiteboard, but using your computer, so they’re easier to share, modify, and get honest feedback on. Wireframes made with mockups look like sketches, so stakeholders won’t get distracted by little details, and instead can focus on what’s really important instead.

We’ve used these tools to great effect on many projects. Below are two recent examples, one a pure mockup and the other a series of mocked up components overtop of an existing interface:

We always like to introduce people to some of the tools that help us produce great software, and Balsamiq is certainly one of them. If you’ve never seen it before and are curious, check out their introductory video:


Tags: , , ,

Leave a Reply