Why Wireframes Love Comic Sans

The Comic Sans font has often been derided as the font choice of amateurs, but it is useful for creating mockups.

Indeed, it is the default font in popular wireframing tools, such as Balsamiq.

facebook wireframe

Wirefame of Facebook page created using Balsamiq

When I first started wireframing, I would hand-code the wireframes in HTML, or use tools such as Axure. In either case, the resulting wireframes looked to the client like they were basic web pages — they were just waiting for the real graphics and text to be added in.

This caused a misunderstanding — the client would believe that the application was further along in the development process.

Of course, wireframes are blueprints, not early stages in the software development.

That’s where Comic Sans comes in. This font helps present the wireframe as a draft sketch. I would also recommend using not quite straight lines — essentially, anything healthordisease.com that gives the wireframes a hand-drawn look.

These features are default in Balsamiq, but with a bit of Googling, you can quickly find hand-drawn stencils for other wireframing tools, such as Omnigraffle, Axure, Fireworks, Pencil, etc.