When it comes to wireframes, I use a mixed bag of approaches, depending on how the team is structured. Often, I have been the one doing the visual product/site design following UXP activities like creating a sitemap or info architecture doc of some type, and doing a lot of sketches to get the design down “in my head”. So I go from sketch on paper to visual design to dev notes sent with designs.

Or, our team is doing collaborative design/dev planning and the framing is done on a whiteboard, which we take photos of, and then each go work on the front end/back end with the plan understood mentally, so we don’t have to detail every single interaction in one document.

Either way, I then go straight into Photoshop & Illustrator to work on the screen design, doing a few samples, that I show to the other team members to get reaction and input on before building the rest of the screens out (either myself, or directing junior designers or contracted designers if a large project.)

Here are various types of wireframes I have done while working.

Mobile App

Here is an example of a mobile app wireframe for a conceptual prototype I recently did. I do not have the connectors on this but usually would.

See the interactive prototype for Shirtee at inVision
Read my blog post about the complete process

WordPress/BuddyPress App

Often my wireframe work is done in sections based on what devs are working on at that time, and so they are documents with explanation about functional elements of the design. This is an example of that approach that I created when working on the Sporting KC Membership app I designed, and a separate one on details for registering.

See the portfolio piece with some finished screens
See all the screens/details done before launch

Real-Time Event App

For Sporting KC, we designed a real-time app for a live online press conference that was top secret as it regarded a major announcement of their new stadium naming with Livestrong. This app was based on my proprietary app called Intefy that offered similar features, but they wanted their own and a bit more. You can see a design progression here of plain wireframe, a visual wireframe, and then the finished product.

Tech details in my portfolio

We reused this code and page layout for an unexpected PR stunt when Ochocinco came for a trial during NFL lockout, as if he wanted to switch to soccer. See that version in my portfolio.

Websites

A. This is an example of page layout wireframes for the stadium site of the Kansas City Chiefs.

See the finished homepage

B. This is a high-level view of networked sites where I planned to add an umbrella parent and navigation and coordinate the design style of each blog, though they were separate sites. This is something I refer to as visual integration (making sites or products appear to be connected when they aren’t technically.) I also had custom illustrations commissioned for this project and have those in this document too because they are precious. 🙂

See the finished design concepts

Social Media

This is a good example of why I sometimes don’t like to spend a ton of time wireframing… the design often gets changed because in reality, when designing, other choices make more sense or look better. I began with a Facebook tab concept in wireframe, but changed it in design as part of a full summer campaign in this style. Click the wireframe and see the finished image next.

 More Fresh Practices