{"id":475,"date":"2014-07-16T19:02:47","date_gmt":"2014-07-16T19:02:47","guid":{"rendered":"http:\/\/buildblog.wpengine.com\/?p=475"},"modified":"2015-09-11T15:23:45","modified_gmt":"2015-09-11T22:23:45","slug":"tips-for-effective-wireframing","status":"publish","type":"post","link":"https:\/\/thinkapps.com\/blog\/wireframes\/tips-for-effective-wireframing\/","title":{"rendered":"Tips for Effective Wireframing"},"content":{"rendered":"

In this guest post,\u00a0Leon Barnard, a\u00a0designer at Balsamiq Studios, shares advice for creating effective wireframes.<\/em><\/p>\n

Even with modern software development methodologies (such as agile software development<\/a>) the road to building software is riddled with risk and uncertainty.<\/p>\n

These challenges can be mitigated by creating rough visual sketches of the product, called wireframes, before coding begins.<\/p>\n

Why wireframe rather than just writing functional specs or jumping right into code?<\/h2>\n

Wireframes encourage debate\/discussion (on the right topics)<\/h3>\n

They invite multiple perspectives on the problem and the proposed solution and allow everyone to get a preview before it’s too costly to make changes.<\/p>\n

Wireframes encourage exploration\/ideation<\/h3>\n

Wireframes are not just about visualizing a solution, they actually help you brainstorm more ways to solve the problem.<\/p>\n

Even though they look simple, and tools like\u00a0Balsamiq Mockups<\/a>\u00a0(full disclosure: I work at Balsamiq<\/em>) make them very easy to create, wireframing effectively requires a frame of mind that takes time to develop.<\/p>\n

Here are some wireframe tips and tricks for the uninitiated:<\/h3>\n

1. Think Flow, Not Style<\/h2>\n

This isn’t the time to be thinking about pixel dimensions, colors and fonts. Instead, try to think about the problems you’re trying to solve and the flow between the screens in your app or website.<\/p>\n

You may have a very clear idea in your head but may not realize how everything is connected or understood by the end user until you see the pages on a screen. The styling, look and feel can come later. This is the time to explore, play around, and get all your bad ideas out of the way!<\/p>\n

2. Use Content Placeholders to Keep it High Level<\/h2>\n

Even as you’re focusing on flow it can be tempting to get into the weeds fine-tuning wording and appearance. You’ll be eager to see your idea come to life, and a black-and-white sketch often won’t feel “alive” enough for the instant gratification you crave.<\/p>\n

One trick to prevent you from diving in too deep at this stage is to rely on built-in placeholders for content. Instead of adding logos and photos use an image placeholder (a rectangle with an ‘x’ inside) with a label and resize it to the approximate proportions (horizontal, vertical, square, etc.). For blocks of text add a headline or subtitle and a paragraph. Balsamiq Mockups even comes with a “lorem ipsum” text block shortcut<\/a> for filler text.<\/p>\n

\"\"<\/p>\n

3. Don’t Converge Too Soon<\/h2>\n

Wireframes are as much a tool for you to play around with concepts and ideas as to communicate the final design. It’s gratifying to see your idea start to take shape and you may feel ready to move on after all the pieces are in place. But just because it “works” doesn’t mean it can’t be better.<\/p>\n

Don’t be afraid to\u00a0linger\u00a0in this phase.\u00a0Changes now are fast and cheap. This is the time to make sure you’ve got the right design before you start writing code.<\/p>\n

Challenge yourself to come up with at least three different concepts for each major part of your app before moving on (here are some tips and tricks for pushing yourself creatively<\/a>).\u00a0For example, here are three different navigation concepts for the same part of a site (click to see larger).
\n\"effective-wireframes4\"<\/a><\/p>\n

4. Create Simple Click-Throughs for a Reality Check<\/h2>\n

You don’t need something that looks final to get a feel for what the actual product experience will be like. Once you’ve iterated and feel reasonably good about your design, try linking the screens together and generating a simple click-through PDF prototype. Go through a few scenarios and see if you hit any snags or find any places where the user could get confused. Send it around to your team and have them do the same. Take another pass at the design to fix the problem areas you identify.<\/p>\n

Allowing others to “experience” the app early on in this way is also a great way to get developer and stakeholder buy-in. People often get excited to build and use the app after getting a taste of it through on a simple prototype.<\/p>\n

To learn about linking screens together here’s a video showing\u00a0how to create links between wireframes in Balsamiq Mockups<\/a>.<\/p>\n

5. Annotate to Enhance Clarity<\/h2>\n

Once you’re satisfied with your wireframes you can start using them as a guide for building your product. You may want to use an application like Adobe Photoshop to create a high-fidelity mockup as the next phase or you may feel comfortable going straight to code.<\/p>\n

Either way you’ll be using your wireframes as a blueprint for the next person or team who will be using them and you can enhance their value by adding annotations. These can be anything that might not be clear from the image itself, such as instructions for the developer or pointers to supporting resources. In Balsamiq Mockups you can\u00a0turn off the annotation layer in a single click<\/a>, so it’s easy to toggle between the annotations view and the mockup itself.<\/p>\n

\"effective-wireframes3\"<\/p>\n

Happy wireframing!<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"

In this guest post,\u00a0Leon Barnard, a\u00a0designer at Balsamiq Studios, shares advice for creating effective wireframes. Even with modern software development methodologies (such as agile software development) the road to building…<\/p>\n","protected":false},"author":11,"featured_media":486,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[4,3],"tags":[26,68,27,110],"acf":[],"yoast_head":"\nTips for Effective Wireframing<\/title>\n<meta name=\"description\" content=\"Even though they look simple, effective wireframing requires a frame of mind that takes time to develop. Here are some tips and tricks for the uninitiated.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/thinkapps.com\/blog\/wireframes\/tips-for-effective-wireframing\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tips for Effective Wireframing\" \/>\n<meta property=\"og:description\" content=\"Even though they look simple, effective wireframing requires a frame of mind that takes time to develop. Here are some tips and tricks for the uninitiated.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/thinkapps.com\/blog\/wireframes\/tips-for-effective-wireframing\/\" \/>\n<meta property=\"og:site_name\" content=\"Build Blog by ThinkApps | Content on Entrepreneurship, Mobile Apps, Web Platforms and more\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/BalsamiqMockups\/\" \/>\n<meta property=\"article:published_time\" content=\"2014-07-16T19:02:47+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2015-09-11T22:23:45+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/d1vqbpto5tbbz0.cloudfront.net\/blog\/wp-content\/uploads\/2014\/07\/16190247\/effective-wireframes6.png\" \/>\n\t<meta property=\"og:image:width\" content=\"750\" \/>\n\t<meta property=\"og:image:height\" content=\"369\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Leon Barnard\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Leon Barnard\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/thinkapps.com\/blog\/wireframes\/tips-for-effective-wireframing\/\",\"url\":\"https:\/\/thinkapps.com\/blog\/wireframes\/tips-for-effective-wireframing\/\",\"name\":\"Tips for Effective Wireframing\",\"isPartOf\":{\"@id\":\"http:\/\/localhost:8080\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/thinkapps.com\/blog\/wireframes\/tips-for-effective-wireframing\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/thinkapps.com\/blog\/wireframes\/tips-for-effective-wireframing\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/d1vqbpto5tbbz0.cloudfront.net\/blog\/wp-content\/uploads\/2014\/07\/16190247\/effective-wireframes6.png\",\"datePublished\":\"2014-07-16T19:02:47+00:00\",\"dateModified\":\"2015-09-11T22:23:45+00:00\",\"author\":{\"@id\":\"http:\/\/localhost:8080\/blog\/#\/schema\/person\/d3ad5941875969bc97c30d8525681103\"},\"description\":\"Even though they look simple, effective wireframing requires a frame of mind that takes time to develop. Here are some tips and tricks for the uninitiated.\",\"breadcrumb\":{\"@id\":\"https:\/\/thinkapps.com\/blog\/wireframes\/tips-for-effective-wireframing\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/thinkapps.com\/blog\/wireframes\/tips-for-effective-wireframing\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/thinkapps.com\/blog\/wireframes\/tips-for-effective-wireframing\/#primaryimage\",\"url\":\"https:\/\/d1vqbpto5tbbz0.cloudfront.net\/blog\/wp-content\/uploads\/2014\/07\/16190247\/effective-wireframes6.png\",\"contentUrl\":\"https:\/\/d1vqbpto5tbbz0.cloudfront.net\/blog\/wp-content\/uploads\/2014\/07\/16190247\/effective-wireframes6.png\",\"width\":750,\"height\":369},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/thinkapps.com\/blog\/wireframes\/tips-for-effective-wireframing\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"http:\/\/localhost:8080\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tips for Effective Wireframing\"}]},{\"@type\":\"WebSite\",\"@id\":\"http:\/\/localhost:8080\/blog\/#website\",\"url\":\"http:\/\/localhost:8080\/blog\/\",\"name\":\"Build Blog by ThinkApps | Content on Entrepreneurship, Mobile Apps, Web Platforms and more\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\/\/localhost:8080\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"http:\/\/localhost:8080\/blog\/#\/schema\/person\/d3ad5941875969bc97c30d8525681103\",\"name\":\"Leon Barnard\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/localhost:8080\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/cd4e09e8a1a2a371af80595858c7c29f?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/cd4e09e8a1a2a371af80595858c7c29f?s=96&d=mm&r=g\",\"caption\":\"Leon Barnard\"},\"description\":\"Leon Barnard is a writer and designer at Balsamiq Studios. He contributes to the Balsamiq UX blog and curates the Balsamiq Champions blog about how and why people use Mockups.\",\"sameAs\":[\"http:\/\/balsamiq.com\",\"https:\/\/www.facebook.com\/BalsamiqMockups\/\",\"https:\/\/x.com\/@leonbarnard\"],\"url\":\"https:\/\/thinkapps.com\/blog\/author\/leon\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tips for Effective Wireframing","description":"Even though they look simple, effective wireframing requires a frame of mind that takes time to develop. Here are some tips and tricks for the uninitiated.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/thinkapps.com\/blog\/wireframes\/tips-for-effective-wireframing\/","og_locale":"en_US","og_type":"article","og_title":"Tips for Effective Wireframing","og_description":"Even though they look simple, effective wireframing requires a frame of mind that takes time to develop. Here are some tips and tricks for the uninitiated.","og_url":"https:\/\/thinkapps.com\/blog\/wireframes\/tips-for-effective-wireframing\/","og_site_name":"Build Blog by ThinkApps | Content on Entrepreneurship, Mobile Apps, Web Platforms and more","article_author":"https:\/\/www.facebook.com\/BalsamiqMockups\/","article_published_time":"2014-07-16T19:02:47+00:00","article_modified_time":"2015-09-11T22:23:45+00:00","og_image":[{"width":750,"height":369,"url":"http:\/\/d1vqbpto5tbbz0.cloudfront.net\/blog\/wp-content\/uploads\/2014\/07\/16190247\/effective-wireframes6.png","type":"image\/png"}],"author":"Leon Barnard","twitter_misc":{"Written by":"Leon Barnard","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/thinkapps.com\/blog\/wireframes\/tips-for-effective-wireframing\/","url":"https:\/\/thinkapps.com\/blog\/wireframes\/tips-for-effective-wireframing\/","name":"Tips for Effective Wireframing","isPartOf":{"@id":"http:\/\/localhost:8080\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/thinkapps.com\/blog\/wireframes\/tips-for-effective-wireframing\/#primaryimage"},"image":{"@id":"https:\/\/thinkapps.com\/blog\/wireframes\/tips-for-effective-wireframing\/#primaryimage"},"thumbnailUrl":"https:\/\/d1vqbpto5tbbz0.cloudfront.net\/blog\/wp-content\/uploads\/2014\/07\/16190247\/effective-wireframes6.png","datePublished":"2014-07-16T19:02:47+00:00","dateModified":"2015-09-11T22:23:45+00:00","author":{"@id":"http:\/\/localhost:8080\/blog\/#\/schema\/person\/d3ad5941875969bc97c30d8525681103"},"description":"Even though they look simple, effective wireframing requires a frame of mind that takes time to develop. Here are some tips and tricks for the uninitiated.","breadcrumb":{"@id":"https:\/\/thinkapps.com\/blog\/wireframes\/tips-for-effective-wireframing\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/thinkapps.com\/blog\/wireframes\/tips-for-effective-wireframing\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/thinkapps.com\/blog\/wireframes\/tips-for-effective-wireframing\/#primaryimage","url":"https:\/\/d1vqbpto5tbbz0.cloudfront.net\/blog\/wp-content\/uploads\/2014\/07\/16190247\/effective-wireframes6.png","contentUrl":"https:\/\/d1vqbpto5tbbz0.cloudfront.net\/blog\/wp-content\/uploads\/2014\/07\/16190247\/effective-wireframes6.png","width":750,"height":369},{"@type":"BreadcrumbList","@id":"https:\/\/thinkapps.com\/blog\/wireframes\/tips-for-effective-wireframing\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http:\/\/localhost:8080\/blog\/"},{"@type":"ListItem","position":2,"name":"Tips for Effective Wireframing"}]},{"@type":"WebSite","@id":"http:\/\/localhost:8080\/blog\/#website","url":"http:\/\/localhost:8080\/blog\/","name":"Build Blog by ThinkApps | Content on Entrepreneurship, Mobile Apps, Web Platforms and more","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/localhost:8080\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"http:\/\/localhost:8080\/blog\/#\/schema\/person\/d3ad5941875969bc97c30d8525681103","name":"Leon Barnard","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/localhost:8080\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/cd4e09e8a1a2a371af80595858c7c29f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cd4e09e8a1a2a371af80595858c7c29f?s=96&d=mm&r=g","caption":"Leon Barnard"},"description":"Leon Barnard is a writer and designer at Balsamiq Studios. He contributes to the Balsamiq UX blog and curates the Balsamiq Champions blog about how and why people use Mockups.","sameAs":["http:\/\/balsamiq.com","https:\/\/www.facebook.com\/BalsamiqMockups\/","https:\/\/x.com\/@leonbarnard"],"url":"https:\/\/thinkapps.com\/blog\/author\/leon\/"}]}},"_links":{"self":[{"href":"https:\/\/thinkapps.com\/blog\/wp-json\/wp\/v2\/posts\/475"}],"collection":[{"href":"https:\/\/thinkapps.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thinkapps.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thinkapps.com\/blog\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/thinkapps.com\/blog\/wp-json\/wp\/v2\/comments?post=475"}],"version-history":[{"count":4,"href":"https:\/\/thinkapps.com\/blog\/wp-json\/wp\/v2\/posts\/475\/revisions"}],"predecessor-version":[{"id":5484,"href":"https:\/\/thinkapps.com\/blog\/wp-json\/wp\/v2\/posts\/475\/revisions\/5484"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thinkapps.com\/blog\/wp-json\/wp\/v2\/media\/486"}],"wp:attachment":[{"href":"https:\/\/thinkapps.com\/blog\/wp-json\/wp\/v2\/media?parent=475"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thinkapps.com\/blog\/wp-json\/wp\/v2\/categories?post=475"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thinkapps.com\/blog\/wp-json\/wp\/v2\/tags?post=475"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}