Style Switcher

Predefined Colors

Posted on

Wireframes

BY: reedfisher0 COMMENTS CATEGORY: Design Process

What is a wireframe?

Technically, wireframes are simple, black on white line drawings of an interaction. The idea is to show how an interaction might work while being completely agnostic to visual design. A wireframe could be produced with pen or pencil on paper, or with some kind of software.

I kind of like wire frames that look like they were hand-drawn — just an idiosyncrasy of mine that is possibly shared by other interaction designers, being as there are several software ways to produce designs that look and feel like hand-drawn wireframes.

Wireframe has other words used interchan2_menugeably; mockups and prototypes, though neither of these imply the same thing, while perhaps not excluding the concept of a wireframe.

In many situations, though, “wireframe” is used for page and flow designs where the site or application designs being called wireframes are extremely tight and fully-colored and styled representations, and properly so. Example: I recently worked on a large national site moving older pages from a content management system that was being dumped to a new system. The new design was done and extremely detailed, and so our wireframes were appropriately fully rendered, pixel-perfect pages. There was no point in changing the really well-done designs into black and white drawings.

Wireframes are, after all, a tool for building interactions — not the “end” itself. Although I have to admit a dark desire to build an entire site that looks like a hand-drawn wireframe!

 

 

 

Posted in Design Process

Post a Comment