Warning: file_get_contents(http://www.linkedin.com/countserv/count/share?url=https://freshpractices.com/fresh-practices/wireframes/&format=json): failed to open stream: HTTP request failed! HTTP/1.1 404 Not Found in /home/customer/www/freshpractices.com/public_html/wp-content/plugins/tk-social-share/tk-social-counter.php on line 145
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.
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.
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.
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.
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.
A. This is an example of page layout wireframes for the stadium site of the Kansas City Chiefs.
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. 🙂
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.