{"id":788,"date":"2015-01-07T12:53:27","date_gmt":"2015-01-07T20:53:27","guid":{"rendered":"http:\/\/blog.thinkapps.com\/?p=788"},"modified":"2015-09-11T15:38:00","modified_gmt":"2015-09-11T22:38:00","slug":"how-to-create-wireframe-for-designer","status":"publish","type":"post","link":"https:\/\/thinkapps.com\/blog\/wireframes\/how-to-create-wireframe-for-designer\/","title":{"rendered":"How to Create a Solid Wireframe for Your Design Team"},"content":{"rendered":"

Advice on how to create a clear, effective wireframe for your design team<\/em><\/p>\n

Graphic designers working in app development are responsible for far more than creating pretty screens that are nice to look at. They\u2019re the ones that bring your UI (user interface)<\/a> and UX (user experience) to life. They take your ground-breaking idea and turn it into something that\u2019s actually useful<\/i> to the general public, which is no small task.<\/span><\/p>\n

But as a startup, hiring a full-time in-house designer may be a little past your budget, so outsourcing the design of your app to a reputable designer or design firm<\/a> may be the best way to go. <\/span><\/p>\n

However, as with any time you hire external talent, great communication is essential. Without it, there are bound to be hang-ups, misunderstandings, and designs that weren\u2019t exactly what you were looking for.<\/span><\/p>\n

Fortunately, there\u2019s a way around that mess. Creating a solid wireframe<\/a> as the core document you give to your designer to work from is one of the best ways to move forward and turn your entrepreneurial idea into a money-making reality. <\/span><\/p>\n

But making a great wireframe (especially one that speaks for itself) can be difficult for first-time entrepreneurs. So we\u2019ve put together a list of our five best tips to help you create\u00a0a wireframe that will make it easy to work with an external designer to produce\u00a0an incredible app.<\/span><\/p>\n

What Is a Wireframe?<\/h2>\n

Before we launch into our tips, let’s make sure we’re all clear on the basic concept of wireframes.<\/p>\n

As we explained in a previous post<\/a>, a wireframe is “a visual representation of the elements on a website or mobile application. Typically they are created in black and white and can be hand-drawn or created using an online tool.”<\/p>\n

1. Treat It Like a Blueprint and\u00a0Annotate Away<\/span><\/h2>\n

Pardon the obvious statement, but yes, the wireframe for your app is exactly<\/i> like the blueprint for a new house. <\/span><\/p>\n

Without a blueprint, builders don\u2019t have any idea where to place electrical outlets, toilet and sink plumbing, or space in the wall supports for doorways. If all you do is give them a few snapshots of finished houses you like and the vague description of \u201cI want a nice house,\u201d there\u2019s no telling what you\u2019re going to get. Even the best builders in the world won\u2019t be able to make exactly what you want from that kind of description \u2014 they need a specific plan from which to work. <\/span><\/p>\n

It\u2019s the same with app designers: without a detailed wireframe, your designers won\u2019t know how to set up navigation menus, how to lay out their imagery in Photoshop<\/a>, or the exact steps the user should go through.<\/span><\/p>\n

The good thing is, getting started with a wireframe \u2014 even with no prior experience \u2014 is easy and free. A download of a software like JustInMind<\/span><\/a> lets you get started by experimenting with creating rough screen designs with element placement and navigation. But JustInMind isn\u2019t the only option, others include: Moqups<\/span><\/a>, InVision<\/span><\/a>, NinjaMock<\/span><\/a>, and Basalmiq<\/span><\/a>.<\/p>\n

To help your designer, provide heavy (yet succinct) annotations on each of your wireframed screens and along the flow arrows in your wireframe map.<\/span><\/p>\n

\"JustInMind\"<\/a><\/p>\n

JustInMind\u2019s screen wireframe management includes pointing arrows and callout bubbles to help you annotate your screens.<\/em><\/p>\n

For example, it could really pay off to point out blocks of text or image content that may change frequently, so the surrounding design doesn\u2019t depend too heavily on what\u2019s currently there.<\/span><\/p>\n

You\u2019ll also want to let your designer know about monetization aspects<\/a>\u00a0and how they affect the flow of a section of the app. For example, if only paid subscribers have access to certain sections of your app, or if the acceptance or decline of an in-app-purchase affects the next screen the user is led to, your designer needs to know this.\u00a0<\/span>Drawing from his UX expertise, he may decide it\u2019s best to present two different menus to subscribers and non-subscribers. He may even be able to\u00a0use some of the tricks up his sleeve to visually motivate the in-app-purchase, thereby helping your app make more money.<\/p>\n

2. Fill Dummy Boxes with Information<\/span><\/h2>\n

While your first round of wireframing will probably be quick and dirty in an attempt to get your ideas on paper, your first draft should not be what makes it past your internal review and out to your designer.<\/span><\/p>\n

For example, in your very first draft, the actual written content won\u2019t be your main concern. Tools like Dummy Lipsum<\/span><\/a> can generate place-holder text for you while you make sure the basic look and feel are correct. But for subsequent versions, adding actual context and meaning to your screens will help the designer convey the true purpose of your app.<\/span><\/p>\n

\"Dummy<\/a><\/p>\n

This is what it looks like when you use an automatic text populator like Dummy Lipsum: random words are selected for the menus, and Latin text (as you can see in the background) populates any text-based content space that\u2019s more than a few words long. Changing the random words to actual menu choices and the background text to something that could actually end up in your final version will help ensure the design is more succinct.<\/em><\/p>\n

Filling your screens in with actual information does two things for your designer:<\/span><\/p>\n

It gives him a better idea of what the app is about and what its goals are.<\/span><\/h3>\n

This means his knowledge of the app goes beyond the brief app store description<\/a> you provided when you were first discussing the details of the project. It also\u00a0covers you in case you forget to mention any key details to him in your phone conversations. <\/span><\/p>\n

It shows him where design improvements can be made.<\/span><\/h3>\n

You hire a designer to make things look good, yes. But a great\u00a0designer is just as much about functionality as he is about art. When you hire a designer who\u00a0knows a good deal about optimizing user experience and present him with actual UX information, he\u2019ll be able to suggest optimizations for your app flow or screen layout that you wouldn\u2019t have thought of before.<\/span><\/p>\n

3. Share Past and\u00a0Updated Versions<\/span><\/h2>\n

Give your designer the insight you had on your app from the very beginning. Send him the most current version of your app\u2019s wireframe to work from: the more polished your ideas are, the better his output will be. But also send along the past versions\u00a0(making sure to clearly label them as such), even from your very first basic sketches that were too ugly to show your own mother.<\/p>\n

While he will work from the most recent version, seeing old ideas for screens, their annotations, and the notes on why some things were changed will help him create an app design that is more exact to your expectations. He\u2019ll be able to see your thought process and know what ideas got rejected or changed and why. It ensures that he doesn\u2019t repeat an idea you had but decided to ditch in favor of something else, saving time and energy on both ends (and likely saving you some money, to boot).<\/span><\/p>\n

4. Do It in Hi-Fi<\/span><\/h2>\n

Hi-Fi (high fidelity)<\/a> wireframes help convey the look, color and feel you want your app to have. They leave less to the imagination than hand-drawn sketches or simple diagrams made in PowerPoint<\/a> or Paint<\/a> programs.<\/span><\/p>\n

(If you’d like to learn more about low vs. high fidelity, check out this\u00a0previous post<\/a>.)<\/p>\n

They may end up costing a little bit of money, but software programs designed to help you develop hi-fi wireframes give you simple drag-and-drop elements so you can easily place text boxes, image holders, menu access, and buttons on a colorful mobile device screen. The good news\u00a0is, once you get the hang of the\u00a0program, you can blow through a number of screens in the same time it would take you to create one lo-fi screen.<\/span><\/p>\n

Protoshare<\/span><\/a>\u00a0is a great tool that allows you to make both lo-fi and hi-fi app wireframes.<\/span><\/p>\n

\"Lo-Fi<\/a><\/p>\n

This side-by-side comparison shows you the difference between a lo-fi wireframe (left), from which you can start your basic coding, and a hi-fi wireframe (right), which you can use to create all the finishing touches.<\/span><\/em><\/p>\n

Making your wireframes look closer to the live version of your app means your designer has to rely less on his imagination and can create an end product that\u2019s incredibly polished and better matches your desires and UX needs.<\/span><\/p>\n

5. Annotate Your Inspirations<\/span><\/h2>\n

Finally, coming from our own experience in working with teams of\u00a0designers, we\u2019d like to encourage you to add annotations about where your design and user flow inspirations came from.<\/span><\/p>\n

Especially if you\u2019re new to\u00a0app development, chances are you took inspiration from a handful of your favorite apps for their design, user experience, and emotional feel as you use them, and you want to replicate parts of that within the context of your own app idea.<\/span><\/p>\n

When you add an element to your wireframe that is particularly important to you, add an annotation along with it that states what app you got that inspiration from and why it\u2019s so important to you. If your designer can use the app you\u2019re referencing to understand what you\u00a0like and get a feel for the same things you want your user to feel, you\u2019ll be much happier with the end result.<\/span><\/p>\n

Next Steps: Start Making an Effective\u00a0Wireframe Today <\/span><\/h2>\n

Are you totally new to wireframing? Learn more about what it is<\/a> and find some additional tools to get started<\/span><\/a>. <\/span><\/p>\n

Already have some wireframing experience and want a little more advanced advice on making a killer app? Check out this video we posted on designing Android apps for success<\/span><\/a>.<\/span><\/p>\n

Featured image from Balsamiq Mockups<\/a>, a fantastic wireframing tool.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"

Creating a solid wireframe to give to your designer to work from is one of the best ways to turn your entrepreneurial idea into a money-making reality.<\/p>\n","protected":false},"author":35,"featured_media":1008,"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":"\nTop 5 Tips for Creating Wireframes<\/title>\n<meta name=\"description\" content=\"Creating a solid wireframe to give to your designer to work from is one of the best ways to turn your entrepreneurial idea into a money-making reality.\" \/>\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\/how-to-create-wireframe-for-designer\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Top 5 Tips for Creating Wireframes\" \/>\n<meta property=\"og:description\" content=\"Creating a solid wireframe to give to your designer to work from is one of the best ways to turn your entrepreneurial idea into a money-making reality.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/thinkapps.com\/blog\/wireframes\/how-to-create-wireframe-for-designer\/\" \/>\n<meta property=\"og:site_name\" content=\"Build Blog by ThinkApps | Content on Entrepreneurship, Mobile Apps, Web Platforms and more\" \/>\n<meta property=\"article:published_time\" content=\"2015-01-07T20:53:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2015-09-11T22:38:00+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/d1vqbpto5tbbz0.cloudfront.net\/blog\/wp-content\/uploads\/2015\/01\/07205327\/Balsamiq-Wireframe.png\" \/>\n\t<meta property=\"og:image:width\" content=\"800\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Chelsea Baldwin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Chelsea Baldwin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/thinkapps.com\/blog\/wireframes\/how-to-create-wireframe-for-designer\/\",\"url\":\"https:\/\/thinkapps.com\/blog\/wireframes\/how-to-create-wireframe-for-designer\/\",\"name\":\"Top 5 Tips for Creating Wireframes\",\"isPartOf\":{\"@id\":\"http:\/\/localhost:8080\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/thinkapps.com\/blog\/wireframes\/how-to-create-wireframe-for-designer\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/thinkapps.com\/blog\/wireframes\/how-to-create-wireframe-for-designer\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/d1vqbpto5tbbz0.cloudfront.net\/blog\/wp-content\/uploads\/2015\/01\/07205327\/Balsamiq-Wireframe.png\",\"datePublished\":\"2015-01-07T20:53:27+00:00\",\"dateModified\":\"2015-09-11T22:38:00+00:00\",\"author\":{\"@id\":\"http:\/\/localhost:8080\/blog\/#\/schema\/person\/df330e21067533d3fdf5a04b6d33e6fe\"},\"description\":\"Creating a solid wireframe to give to your designer to work from is one of the best ways to turn your entrepreneurial idea into a money-making reality.\",\"breadcrumb\":{\"@id\":\"https:\/\/thinkapps.com\/blog\/wireframes\/how-to-create-wireframe-for-designer\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/thinkapps.com\/blog\/wireframes\/how-to-create-wireframe-for-designer\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/thinkapps.com\/blog\/wireframes\/how-to-create-wireframe-for-designer\/#primaryimage\",\"url\":\"https:\/\/d1vqbpto5tbbz0.cloudfront.net\/blog\/wp-content\/uploads\/2015\/01\/07205327\/Balsamiq-Wireframe.png\",\"contentUrl\":\"https:\/\/d1vqbpto5tbbz0.cloudfront.net\/blog\/wp-content\/uploads\/2015\/01\/07205327\/Balsamiq-Wireframe.png\",\"width\":800,\"height\":600,\"caption\":\"Balsamiq Wireframe\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/thinkapps.com\/blog\/wireframes\/how-to-create-wireframe-for-designer\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"http:\/\/localhost:8080\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Create a Solid Wireframe for Your Design Team\"}]},{\"@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\/df330e21067533d3fdf5a04b6d33e6fe\",\"name\":\"Chelsea Baldwin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/localhost:8080\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/a7265e74e2ba4155d195d56ce35de01a?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/a7265e74e2ba4155d195d56ce35de01a?s=96&d=mm&r=g\",\"caption\":\"Chelsea Baldwin\"},\"description\":\"Chelsea Baldwin is a former app development company executive who now works as a tech-based freelance writer and marketing consultant.\",\"sameAs\":[\"http:\/\/www.carolinafreelancewriter.com\/\",\"https:\/\/www.linkedin.com\/in\/chelseabaldwin1\",\"https:\/\/x.com\/chelseajanea\"],\"url\":\"https:\/\/thinkapps.com\/blog\/author\/chelsea-baldwin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Top 5 Tips for Creating Wireframes","description":"Creating a solid wireframe to give to your designer to work from is one of the best ways to turn your entrepreneurial idea into a money-making reality.","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\/how-to-create-wireframe-for-designer\/","og_locale":"en_US","og_type":"article","og_title":"Top 5 Tips for Creating Wireframes","og_description":"Creating a solid wireframe to give to your designer to work from is one of the best ways to turn your entrepreneurial idea into a money-making reality.","og_url":"https:\/\/thinkapps.com\/blog\/wireframes\/how-to-create-wireframe-for-designer\/","og_site_name":"Build Blog by ThinkApps | Content on Entrepreneurship, Mobile Apps, Web Platforms and more","article_published_time":"2015-01-07T20:53:27+00:00","article_modified_time":"2015-09-11T22:38:00+00:00","og_image":[{"width":800,"height":600,"url":"http:\/\/d1vqbpto5tbbz0.cloudfront.net\/blog\/wp-content\/uploads\/2015\/01\/07205327\/Balsamiq-Wireframe.png","type":"image\/png"}],"author":"Chelsea Baldwin","twitter_misc":{"Written by":"Chelsea Baldwin","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/thinkapps.com\/blog\/wireframes\/how-to-create-wireframe-for-designer\/","url":"https:\/\/thinkapps.com\/blog\/wireframes\/how-to-create-wireframe-for-designer\/","name":"Top 5 Tips for Creating Wireframes","isPartOf":{"@id":"http:\/\/localhost:8080\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/thinkapps.com\/blog\/wireframes\/how-to-create-wireframe-for-designer\/#primaryimage"},"image":{"@id":"https:\/\/thinkapps.com\/blog\/wireframes\/how-to-create-wireframe-for-designer\/#primaryimage"},"thumbnailUrl":"https:\/\/d1vqbpto5tbbz0.cloudfront.net\/blog\/wp-content\/uploads\/2015\/01\/07205327\/Balsamiq-Wireframe.png","datePublished":"2015-01-07T20:53:27+00:00","dateModified":"2015-09-11T22:38:00+00:00","author":{"@id":"http:\/\/localhost:8080\/blog\/#\/schema\/person\/df330e21067533d3fdf5a04b6d33e6fe"},"description":"Creating a solid wireframe to give to your designer to work from is one of the best ways to turn your entrepreneurial idea into a money-making reality.","breadcrumb":{"@id":"https:\/\/thinkapps.com\/blog\/wireframes\/how-to-create-wireframe-for-designer\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/thinkapps.com\/blog\/wireframes\/how-to-create-wireframe-for-designer\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/thinkapps.com\/blog\/wireframes\/how-to-create-wireframe-for-designer\/#primaryimage","url":"https:\/\/d1vqbpto5tbbz0.cloudfront.net\/blog\/wp-content\/uploads\/2015\/01\/07205327\/Balsamiq-Wireframe.png","contentUrl":"https:\/\/d1vqbpto5tbbz0.cloudfront.net\/blog\/wp-content\/uploads\/2015\/01\/07205327\/Balsamiq-Wireframe.png","width":800,"height":600,"caption":"Balsamiq Wireframe"},{"@type":"BreadcrumbList","@id":"https:\/\/thinkapps.com\/blog\/wireframes\/how-to-create-wireframe-for-designer\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http:\/\/localhost:8080\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Create a Solid Wireframe for Your Design Team"}]},{"@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\/df330e21067533d3fdf5a04b6d33e6fe","name":"Chelsea Baldwin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/localhost:8080\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/a7265e74e2ba4155d195d56ce35de01a?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a7265e74e2ba4155d195d56ce35de01a?s=96&d=mm&r=g","caption":"Chelsea Baldwin"},"description":"Chelsea Baldwin is a former app development company executive who now works as a tech-based freelance writer and marketing consultant.","sameAs":["http:\/\/www.carolinafreelancewriter.com\/","https:\/\/www.linkedin.com\/in\/chelseabaldwin1","https:\/\/x.com\/chelseajanea"],"url":"https:\/\/thinkapps.com\/blog\/author\/chelsea-baldwin\/"}]}},"_links":{"self":[{"href":"https:\/\/thinkapps.com\/blog\/wp-json\/wp\/v2\/posts\/788"}],"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\/35"}],"replies":[{"embeddable":true,"href":"https:\/\/thinkapps.com\/blog\/wp-json\/wp\/v2\/comments?post=788"}],"version-history":[{"count":5,"href":"https:\/\/thinkapps.com\/blog\/wp-json\/wp\/v2\/posts\/788\/revisions"}],"predecessor-version":[{"id":5489,"href":"https:\/\/thinkapps.com\/blog\/wp-json\/wp\/v2\/posts\/788\/revisions\/5489"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thinkapps.com\/blog\/wp-json\/wp\/v2\/media\/1008"}],"wp:attachment":[{"href":"https:\/\/thinkapps.com\/blog\/wp-json\/wp\/v2\/media?parent=788"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thinkapps.com\/blog\/wp-json\/wp\/v2\/categories?post=788"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thinkapps.com\/blog\/wp-json\/wp\/v2\/tags?post=788"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}