Wireframes & The HIG

Wireframes are an important part of the communication process around developing software. The tool we’ve used most frequently for this is Balsamiq. Wireframes explicitly do NOT have colors, fonts, images, etc. If there is an existing style guide and it covers the what's in the wireframes, you're usually ready for development to implement. If the existing style guide does not cover the designs, a style guide is generated and/or a series of mockups are created to cover the fonts, colors, etc. These mockups are most typically done in Photoshop, or (depending on the skill set of the creator) HTML/CSS.

Put another way, for most applications (especially internal applications) the formula is:

Wireframe + Style Guide = Ready to Implement Design

If you are building an internal application, I highly recommend leveraging the standard Human Interface Guidelines (HIG) from Apple and/or Microsoft wherever possible to help simplify the process for designers, developers, and users. By leveraging a standard HIG, you can reduce development, design, and training time.

The farther your style guide and designs wander from industry standard HIG, the more training you’ll need to provide your users to understand how to use the software. If it’s a cutting edge new application intended to completely change how people think about, say, social media integrated with video on a mobile device, that may be part of the plan. On the other hand, if it’s, say, an internal accounting application? Stick with the HIG.