Wireframes are one of the earliest steps of the design process.
At M|B, they fall into the Information Architecture part of our
process. Once the architecture for the entire site is defined
(in a site map), the next step is to design the architecture for
key pages or templates. This is what a wireframe is used for. A
wireframe is kind of like the blueprints for a building. It
shows all the elements of the page, suggests how they should be
organized and begins to talk about interactions or states of the
page. They do not show the “look & feel”–they are just a gray-
scale representation of what makes up the page. For example, a
wireframe will show primary navigation, but not what that
navigation will look like (buttons, tabs, a colored bar,
something else?); a wireframe will identify where a hero image
will go and the type of message it will communicate, but not
show the actual picture or final text. To relay this
information, at M|B we use gray-scale drawings of lines, boxes,
shapes and words. We then overlay a