Being a small studio, I find yourself wearing many different hats at Paper Tower. The last two weeks I feel like the only thing I have been doing is wireframing. Looking back—that feeling is totally valid, I have wireframed one very complicated site, another website, and a mobile game. There is much discussion around the process of wireframing, such as the best tools to use, level of detail, and 37 Signals process of skipping wireframing and jumping straight into prototyping. There are great articles about all those points on the web, so I’m just going to share the process we are using currently.

Whether we’re working on a website, app, or game—wireframing is typically the second step in our process. For web, we organize the pages into a visual hierarchy known as a sitemap. On the app side, in place of a sitemap, we create flow diagrams to understand the different routes a user will travel through the app. One important point to make here is that if this is client work we make sure the we get client sign off on step one before ever moving to this step. Inexperience interactive designers have a tendency to jump right into the design phase and make the mistake of skipping over these early architectural stages, which usually results in wasted time and lower profits.

Wireframing is of crucial importance, especially when interacting with clients. We have found that some clients struggle with sitemaps and conceptually trying to understand how a site fits together. In those cases, a wireframe is the first tangible visual that a client can sink his/her teeth into and get a sense of what their new app/site will actually look like. I tend to think of a wireframe as skeleton for the final design. As you are creating the skeleton important decisions are being made, such as what is the most important piece of information or action for the user? How much screen real estate does an element deserve? And how will users navigate through and interact with this site/app? The wireframe ends of dictating a large part of the design.

Here are some examples of the wireframes I’ve been working on. I wireframe in Photoshop. There are ton of different tools that can be used and I’m not the type of person that has a religious devotion to any one tool. I believe that the best tool for you is the one that you are most comfortable with and that enables you to get your work done in the most efficient manner—for me that is photoshop. The reasons I like Photoshop is that I am extremely fast in it and it segues nicely into the design phase. Typically we do our web and app designs in Photoshop. If we have vector assets we create them in Flash or Illustrator and them bring them into Photoshop. We do this because its a lot easier to save out graphics for web and apps through Photoshop than other tools. If the wireframe file is setup correctly in Photoshop, it is very easy to pass to any designer and begin work on the design phase. The site site/app will be in the correct dimensions, resolution, and elements should be close to their final locations.

The amount of detail we put into a wireframe really depends on the complexity and the client. From the above examples you can see that the home page for MCHC has a lot less detail than the interior page. This decision was made due to the complexity of the home page. The home is much more complex than the interior, so we stripped out almost all of the details, so the client could focus on the hierarchy and not get distracted by details. The interior page was so simple that we felt that more detail would be help the client understand what exactly was going on. As a rule, the simpler the better, but should be handled on a client by client basis.

What are your thoughts? Have a favorite tool or technique? Have questions? Let us know.