{"id":"8120","date":"2021-07-05T07:00:00","date_gmt":"2021-07-05T14:00:00","guid":{"rendered":"https:\/\/www.pickfu.com\/blog\/?p=8120"},"modified":"2024-01-24T16:08:47","modified_gmt":"2024-01-25T00:08:47","slug":"wireframes-wireframe-testing-basics","status":"publish","type":"post","link":"https:\/\/blog.pickfu.com\/wireframes-wireframe-testing-basics\/","title":{"rendered":"The basics of wireframes and wireframe testing"},"content":{"rendered":"\n<p>Wireframes are similar in purpose to a blueprint. At their core, they are stories about the future. <\/p>\n\n\n\n<p>Also known as a skeleton, a wireframe is a static, low-fidelity representation of all the pages that form your website or mobile or web application. It uses simple shapes to create visual page layouts, and to illustrate the structure of individual pages and how they connect.<\/p>\n\n\n\n<p>Before you get started building your website or app, you need to understand the basics of wireframes and wireframe testing. Let&#8217;s get into it. <\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"h-why-are-wireframes-important-for-design\">Why are wireframes important for design?<\/h2>\n\n\n<p>Wireframes provide designers with a foundation for the final design of a website or app. They also act as a reference point for functional specifications.&nbsp;They&#8217;re a middle ground between pen-and-paper sketches and an actual, clickable prototype. <\/p>\n\n\n\n<p>Designers create wireframes and validate them to ensure that the wireframe design contains all the vital elements while allowing teams to focus on core design decisions before diving into the details. <\/p>\n\n\n\n<p>Wireframes lets designers and users test the layout and <a aria-label=\" (opens in a new tab)\" href=\"https:\/\/xd.adobe.com\/ideas\/process\/information-architecture\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\" class=\"ek-link\">information architecture<\/a> of a website or app pages without the distraction of images, copy, and other elements.&nbsp;<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"h-what-is-the-difference-between-wireframes-and-mockups\">What is the difference between wireframes and mockups?<\/h2>\n\n\n<p>Though many industry professionals use the terms <em>wireframe<\/em> and <a href=\"https:\/\/www.pickfu.com\/blog\/mockup-testing\/\" target=\"_blank\" aria-label=\" (opens in a new tab)\" rel=\"noreferrer noopener\" class=\"ek-link\"><em>mockup<\/em><\/a> interchangeably, they&#8217;re not the same thing.<\/p>\n\n\n\n<p>Wireframes are design placeholders with a limited number of visual elements. Wireframes leave out elements like images, videos, colors, and actual text.<\/p>\n\n\n\n<p>Mockups, on the other hand, provide visual details such as colors and typography to give users a more realistic impression of how the end product will look.<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"h-how-can-i-make-a-wireframe\">How can I make a wireframe?<\/h2>\n\n\n<p>Just like any other design project, before creating a wireframe you must consider the following:<\/p>\n\n\n\n<ul>\n<li>Who is your target user?<\/li>\n\n\n\n<li>How will they use your app?&nbsp;<\/li>\n\n\n\n<li>What content, visual and written, will help them accomplish their goals?<\/li>\n<\/ul>\n\n\n\n<p>Once you\u2019ve answered these questions, it\u2019s time to explore various design layouts. <\/p>\n\n\n\n<p>Instead of using a digital prototyping tool, consider simply sketching your wireframe on paper. This helps you create quick concepts and gain actionable feedback that will be the foundation for your website or app.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/blog.pickfu.com\/wp-content\/uploads\/2021\/06\/kelly-sikkema-v9FQR4tbIq8-unsplash-scaled.jpg\"><img decoding=\"async\" loading=\"lazy\" width=\"2560\" height=\"1707\" src=\"https:\/\/blog.pickfu.com\/wp-content\/uploads\/2021\/06\/kelly-sikkema-v9FQR4tbIq8-unsplash-scaled.jpg\" alt=\"wireframes and wireframe testing: example of a wireframe sketch on paper\" class=\"wp-image-8872\" srcset=\"https:\/\/blog.pickfu.com\/wp-content\/uploads\/2021\/06\/kelly-sikkema-v9FQR4tbIq8-unsplash-scaled.jpg 2560w, https:\/\/blog.pickfu.com\/wp-content\/uploads\/2021\/06\/kelly-sikkema-v9FQR4tbIq8-unsplash-450x300.jpg 450w, https:\/\/blog.pickfu.com\/wp-content\/uploads\/2021\/06\/kelly-sikkema-v9FQR4tbIq8-unsplash-970x647.jpg 970w, https:\/\/blog.pickfu.com\/wp-content\/uploads\/2021\/06\/kelly-sikkema-v9FQR4tbIq8-unsplash-768x512.jpg 768w, https:\/\/blog.pickfu.com\/wp-content\/uploads\/2021\/06\/kelly-sikkema-v9FQR4tbIq8-unsplash-1536x1024.jpg 1536w, https:\/\/blog.pickfu.com\/wp-content\/uploads\/2021\/06\/kelly-sikkema-v9FQR4tbIq8-unsplash-2048x1365.jpg 2048w\" sizes=\"(max-width: 2560px) 100vw, 2560px\" \/><\/a><figcaption class=\"wp-element-caption\">Source: Unsplash<\/figcaption><\/figure><\/div>\n\n<h2 class=\"wp-block-heading\" id=\"h-what-should-be-included-in-a-wireframe\">What should be included in a wireframe?<\/h2>\n\n\n<p>Here are some best practices and elements to include when creating your wireframe:<\/p>\n\n\n\n<ul>\n<li>Determine layout via boxes<\/li>\n\n\n\n<li>Keep it in grayscale \u2014 meaning black, white, and shades of gray \u2014 and use color only to draw attention to important content<\/li>\n\n\n\n<li>Bring in actual copy but keep your typeface simple<\/li>\n\n\n\n<li>Use placeholders (for example, a box with an X is an image, a box with a triangle is a video)<\/li>\n\n\n\n<li>Connect individual pages together to create the user flow<\/li>\n\n\n\n<li>Test your design<\/li>\n<\/ul>\n\n\n<h2 class=\"wp-block-heading\" id=\"h-wireframe-testing-overview\">Wireframe testing overview<\/h2>\n\n\n<p>The goal of wireframe testing is to get feedback from users and make cost-effective changes if and where necessary.<\/p>\n\n\n\n<p>Once you\u2019ve got a paper prototype, you can go directly into wireframe testing and get a critique. Take the feedback, make a new wireframe, and test again. The more wireframes you test with your users, the better your final page or product will be.<\/p>\n\n\n\n<p>True, wireframes aren\u2019t interactive or functional, but they still illustrate the intention and flow that are essential in the design phase. Don\u2019t be afraid to scratch entire ideas and wireframes and start again.&nbsp;<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"h-what-are-some-questions-to-ask-when-testing-wireframes\">What are some questions to ask when testing wireframes?<\/h2>\n\n\n<p>There are three main concepts to keep in mind when asking for feedback: <a aria-label=\"usability (opens in a new tab)\" href=\"https:\/\/www.pickfu.com\/blog\/user-testing-vs-usability-testing\/\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"ek-link\">usability<\/a>, functionality, and design. <\/p>\n\n\n\n<p>Ask these questions during quality assurance (QA) testing to keep your project moving in the right direction:<\/p>\n\n\n\n<ul>\n<li>How do users expect your product to look?<\/li>\n\n\n\n<li>Do users understand what it does?<\/li>\n\n\n\n<li>How does it measure up to their expectations?<\/li>\n\n\n\n<li>How easy is it to navigate? Do users understand the navigation flow?<\/li>\n\n\n\n<li>Are features or functions missing?&nbsp;<\/li>\n\n\n\n<li>Does anything seem out of place or unnecessary?<\/li>\n\n\n\n<li>How likely or unlikely would they be to use your product once it\u2019s finished?<\/li>\n<\/ul>\n\n\n\n<p>Wireframe user testing helps you find weak points in your product. Time and effort invested at this stage is time and effort invested in improving the user experience.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/blog.pickfu.com\/wp-content\/uploads\/2021\/06\/manager-leading-a-brainstorming-meeting-.jpg\"><img decoding=\"async\" loading=\"lazy\" width=\"2000\" height=\"1334\" src=\"https:\/\/blog.pickfu.com\/wp-content\/uploads\/2021\/06\/manager-leading-a-brainstorming-meeting-.jpg\" alt=\"Wireframes and wireframe testing: manager leads a brainstorming meeting\" class=\"wp-image-8873\" srcset=\"https:\/\/blog.pickfu.com\/wp-content\/uploads\/2021\/06\/manager-leading-a-brainstorming-meeting-.jpg 2000w, https:\/\/blog.pickfu.com\/wp-content\/uploads\/2021\/06\/manager-leading-a-brainstorming-meeting--450x300.jpg 450w, https:\/\/blog.pickfu.com\/wp-content\/uploads\/2021\/06\/manager-leading-a-brainstorming-meeting--970x647.jpg 970w, https:\/\/blog.pickfu.com\/wp-content\/uploads\/2021\/06\/manager-leading-a-brainstorming-meeting--768x512.jpg 768w, https:\/\/blog.pickfu.com\/wp-content\/uploads\/2021\/06\/manager-leading-a-brainstorming-meeting--1536x1025.jpg 1536w\" sizes=\"(max-width: 2000px) 100vw, 2000px\" \/><\/a><\/figure><\/div>\n\n<h2 class=\"wp-block-heading\" id=\"h-how-to-use-pickfu-for-wireframe-testing\">How to use PickFu for wireframe testing<\/h2>\n\n\n<p>PickFu is a non-traditional and fast testing platform that\u2019s useful throughout the wireframe, <a href=\"https:\/\/www.pickfu.com\/tools\/mockups\">mockup<\/a>, and <a href=\"https:\/\/www.pickfu.com\/blog\/prototype-testing\/\" class=\"ek-link\">prototype<\/a> phases. <\/p>\n\n\n\n<p>Using PickFu, you can <a aria-label=\"target the audience (opens in a new tab)\" href=\"https:\/\/www.pickfu.com\/blog\/audience-targeting\/\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"ek-link\">target your audience<\/a> by relevant traits, such as the type of mobile device they use, their favorite mobile game genre, or their app store spending habits.  <\/p>\n\n\n\n<p>While PickFu isn\u2019t a live usability test, it lets you easily upload images of your wireframe for immediate feedback. By testing the layout, design, and user interface of your wireframe with an audience that reflects your end user, you can quickly verify whether you&#8217;re on the right track and make any necessary changes.<\/p>\n\n\n\n<p>In this PickFu poll, respondents were asked which of three app screenshots they would most likely download and why.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/blog.pickfu.com\/wp-content\/uploads\/2022\/08\/Screen-Shot-2021-05-24-at-15.06.52-1.png\"><img decoding=\"async\" loading=\"lazy\" width=\"970\" height=\"496\" src=\"https:\/\/blog.pickfu.com\/wp-content\/uploads\/2022\/08\/Screen-Shot-2021-05-24-at-15.06.52-1-970x496.png\" alt=\"\" class=\"wp-image-12003\" srcset=\"https:\/\/blog.pickfu.com\/wp-content\/uploads\/2022\/08\/Screen-Shot-2021-05-24-at-15.06.52-1-970x496.png 970w, https:\/\/blog.pickfu.com\/wp-content\/uploads\/2022\/08\/Screen-Shot-2021-05-24-at-15.06.52-1-470x241.png 470w, https:\/\/blog.pickfu.com\/wp-content\/uploads\/2022\/08\/Screen-Shot-2021-05-24-at-15.06.52-1-768x393.png 768w, https:\/\/blog.pickfu.com\/wp-content\/uploads\/2022\/08\/Screen-Shot-2021-05-24-at-15.06.52-1-725x371.png 725w, https:\/\/blog.pickfu.com\/wp-content\/uploads\/2022\/08\/Screen-Shot-2021-05-24-at-15.06.52-1-540x276.png 540w, https:\/\/blog.pickfu.com\/wp-content\/uploads\/2022\/08\/Screen-Shot-2021-05-24-at-15.06.52-1-345x177.png 345w, https:\/\/blog.pickfu.com\/wp-content\/uploads\/2022\/08\/Screen-Shot-2021-05-24-at-15.06.52-1-300x154.png 300w, https:\/\/blog.pickfu.com\/wp-content\/uploads\/2022\/08\/Screen-Shot-2021-05-24-at-15.06.52-1-286x146.png 286w, https:\/\/blog.pickfu.com\/wp-content\/uploads\/2022\/08\/Screen-Shot-2021-05-24-at-15.06.52-1-120x61.png 120w, https:\/\/blog.pickfu.com\/wp-content\/uploads\/2022\/08\/Screen-Shot-2021-05-24-at-15.06.52-1-126x64.png 126w, https:\/\/blog.pickfu.com\/wp-content\/uploads\/2022\/08\/Screen-Shot-2021-05-24-at-15.06.52-1-129x66.png 129w, https:\/\/blog.pickfu.com\/wp-content\/uploads\/2022\/08\/Screen-Shot-2021-05-24-at-15.06.52-1.png 1151w\" sizes=\"(max-width: 970px) 100vw, 970px\" \/><\/a><\/figure><\/div>\n\n\n<p>With a final tally of 32 votes after two rounds of vote counting, respondents agreed that Option A was the clear winner. Here&#8217;s what some of them had to say:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\">\n<p>\u201cIt&#8217;s very clear what this app does from the description and title in [Option] A.\u201d&nbsp;<\/p>\n\n\n\n<p>\u201cI like the app in Option A the best. I like how it uses the image of a broom as a metaphor for deleting and freeing storage space on my phone. I also like the shade of blue it uses because it looks visually attractive.\u201d<\/p>\n\n\n\n<p>\u201cI liked choice A since the images complement each other and flow well together. Choice C looks okay but isn&#8217;t as appealing and the logo looks very simple.\u201d<\/p>\n\n\n\n<p>\u201cNot only does [Option] A have my favorite color, but the description is also easy to understand so I picked it first. I decided on [Option] C over [Option] B because I prefer dark blue over pink and I wasn&#8217;t a big fan of [Option] B&#8217;s name too.\u201d<\/p>\n<\/blockquote>\n\n\n\n<p>Their comments mention everything from the icon design and color to the description and layout. It&#8217;s easy to see how such detailed feedback can help app and website developers refine and validate their mockups. <\/p>\n\n\n\n<p>By building and testing wireframes, you can feel confident you&#8217;re investing resources in a product that will work and users will like. <\/p>\n\n\n\n<p>Want to learn more about testing apps? Read our <a aria-label=\"mobile app testing checklist (opens in a new tab)\" href=\"https:\/\/www.pickfu.com\/blog\/mobile-app-testing-checklist\/\" target=\"_blank\" rel=\"noreferrer noopener\" class=\"ek-link\">mobile app testing checklist<\/a>.<\/p>\n","protected":""},"excerpt":{"rendered":"<p>Wireframes are similar in purpose to a blueprint. At their core, they are stories about the future. Also known as a skeleton, a wireframe is a static, low-fidelity representation of &#8230;<\/p>\n","protected":""},"author":"29","featured_media":"8871","comment_status":"open","ping_status":"open","sticky":"","template":"","format":"standard","meta":{"_editorskit_title_hidden":"","_editorskit_reading_time":"0","_editorskit_is_block_options_detached":"","_editorskit_block_options_position":"{}","advgb_blocks_editor_width":"","advgb_blocks_columns_visual_guide":"","footnotes":""},"categories":["12","27","16"],"tags":["98","63","69","215","214"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>The basics of wireframes and wireframe testing - The PickFu blog<\/title>\n<meta name=\"description\" content=\"Before building a website or app, you need a wireframe. This article will discuss the basics of wireframes and the wireframe testing process.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blog.pickfu.com\/wireframes-wireframe-testing-basics\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The basics of wireframes and wireframe testing - The PickFu blog\" \/>\n<meta property=\"og:description\" content=\"Before building a website or app, you need a wireframe. This article will discuss the basics of wireframes and the wireframe testing process.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blog.pickfu.com\/wireframes-wireframe-testing-basics\/\" \/>\n<meta property=\"og:site_name\" content=\"The PickFu blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/pickfu\" \/>\n<meta property=\"article:published_time\" content=\"2021-07-05T14:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-25T00:08:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blog.pickfu.com\/wp-content\/uploads\/2021\/06\/alvaro-reyes-qWwpHwip31M-unsplash-scaled.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1707\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Lauren Gilmore\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@pickfu\" \/>\n<meta name=\"twitter:site\" content=\"@pickfu\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Lauren Gilmore\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/blog.pickfu.com\/wireframes-wireframe-testing-basics\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/blog.pickfu.com\/wireframes-wireframe-testing-basics\/\"},\"author\":{\"name\":\"Lauren Gilmore\",\"@id\":\"https:\/\/blog.pickfu.com\/#\/schema\/person\/79542998087197f3b9fb80f8080ba417\"},\"headline\":\"The basics of wireframes and wireframe testing\",\"datePublished\":\"2021-07-05T14:00:00+00:00\",\"dateModified\":\"2024-01-25T00:08:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/blog.pickfu.com\/wireframes-wireframe-testing-basics\/\"},\"wordCount\":1061,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/blog.pickfu.com\/#organization\"},\"keywords\":[\"mobile app development\",\"mobile app testing\",\"usability testing\",\"wireframe testing\",\"wireframes\"],\"articleSection\":[\"Guides and how-tos\",\"Ideation\",\"Mobile apps\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/blog.pickfu.com\/wireframes-wireframe-testing-basics\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/blog.pickfu.com\/wireframes-wireframe-testing-basics\/\",\"url\":\"https:\/\/blog.pickfu.com\/wireframes-wireframe-testing-basics\/\",\"name\":\"The basics of wireframes and wireframe testing - The PickFu blog\",\"isPartOf\":{\"@id\":\"https:\/\/blog.pickfu.com\/#website\"},\"datePublished\":\"2021-07-05T14:00:00+00:00\",\"dateModified\":\"2024-01-25T00:08:47+00:00\",\"description\":\"Before building a website or app, you need a wireframe. This article will discuss the basics of wireframes and the wireframe testing process.\",\"breadcrumb\":{\"@id\":\"https:\/\/blog.pickfu.com\/wireframes-wireframe-testing-basics\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/blog.pickfu.com\/wireframes-wireframe-testing-basics\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/blog.pickfu.com\/wireframes-wireframe-testing-basics\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/blog.pickfu.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"The basics of wireframes and wireframe testing\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/blog.pickfu.com\/#website\",\"url\":\"https:\/\/blog.pickfu.com\/\",\"name\":\"The PickFu blog\",\"description\":\"How-to guides, customer success stories, and news about PickFu\",\"publisher\":{\"@id\":\"https:\/\/blog.pickfu.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/blog.pickfu.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/blog.pickfu.com\/#organization\",\"name\":\"PickFu\",\"url\":\"https:\/\/blog.pickfu.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blog.pickfu.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/blog.pickfu.com\/wp-content\/uploads\/2020\/08\/logo-large-transparent-1.png\",\"contentUrl\":\"https:\/\/blog.pickfu.com\/wp-content\/uploads\/2020\/08\/logo-large-transparent-1.png\",\"width\":1800,\"height\":600,\"caption\":\"PickFu\"},\"image\":{\"@id\":\"https:\/\/blog.pickfu.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/pickfu\",\"https:\/\/twitter.com\/pickfu\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/blog.pickfu.com\/#\/schema\/person\/79542998087197f3b9fb80f8080ba417\",\"name\":\"Lauren Gilmore\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/blog.pickfu.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/blog.pickfu.com\/wp-content\/uploads\/2021\/07\/LMG-hat-copy-96x96.jpg\",\"contentUrl\":\"https:\/\/blog.pickfu.com\/wp-content\/uploads\/2021\/07\/LMG-hat-copy-96x96.jpg\",\"caption\":\"Lauren Gilmore\"},\"description\":\"Dog owner, gym rat, gin lover (she\/her). Allegedly wise to the ways of PR and digital marketing. Helping brands build awareness and thought leadership. Currently waging a war on mediocrity in communication.\",\"sameAs\":[\"http:\/\/www.prandprose.com\",\"https:\/\/www.linkedin.com\/in\/lmgilmore80\/\"],\"url\":\"https:\/\/blog.pickfu.com\/author\/laurengilmore\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"The basics of wireframes and wireframe testing - The PickFu blog","description":"Before building a website or app, you need a wireframe. This article will discuss the basics of wireframes and the wireframe testing process.","robots":"Array","canonical":"https:\/\/blog.pickfu.com\/wireframes-wireframe-testing-basics\/","og_locale":"en_US","og_type":"article","og_title":"The basics of wireframes and wireframe testing - The PickFu blog","og_description":"Before building a website or app, you need a wireframe. This article will discuss the basics of wireframes and the wireframe testing process.","og_url":"https:\/\/blog.pickfu.com\/wireframes-wireframe-testing-basics\/","og_site_name":"The PickFu blog","article_publisher":"https:\/\/www.facebook.com\/pickfu","article_published_time":"2021-07-05T14:00:00+00:00","article_modified_time":"2024-01-25T00:08:47+00:00","og_image":"Array","author":"Lauren Gilmore","twitter_card":"summary_large_image","twitter_creator":"@pickfu","twitter_site":"@pickfu","twitter_misc":"Array","schema":"Array"},"author_meta":{"display_name":"Lauren Gilmore","author_link":"https:\/\/blog.pickfu.com\/author\/laurengilmore\/"},"featured_img":"https:\/\/blog.pickfu.com\/wp-content\/uploads\/2021\/06\/alvaro-reyes-qWwpHwip31M-unsplash-450x300.jpg","coauthors":[],"tax_additional":{"categories":"Array","tags":"Array"},"comment_count":"0","relative_dates":{"created":"Posted 5 years ago","modified":"Updated 2 years ago"},"absolute_dates":{"created":"Posted on July 5, 2021","modified":"Updated on January 24, 2024"},"absolute_dates_time":{"created":"Posted on July 5, 2021 7:00 am","modified":"Updated on January 24, 2024 4:08 pm"},"featured_img_caption":"","series_order":"","_links":{"self":[{"href":"https:\/\/blog.pickfu.com\/wp-json\/wp\/v2\/posts\/8120"}],"collection":[{"href":"https:\/\/blog.pickfu.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.pickfu.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.pickfu.com\/wp-json\/wp\/v2\/users\/29"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.pickfu.com\/wp-json\/wp\/v2\/comments?post=8120"}],"version-history":[{"count":10,"href":"https:\/\/blog.pickfu.com\/wp-json\/wp\/v2\/posts\/8120\/revisions"}],"predecessor-version":[{"id":13882,"href":"https:\/\/blog.pickfu.com\/wp-json\/wp\/v2\/posts\/8120\/revisions\/13882"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.pickfu.com\/wp-json\/wp\/v2\/media\/8871"}],"wp:attachment":[{"href":"https:\/\/blog.pickfu.com\/wp-json\/wp\/v2\/media?parent=8120"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.pickfu.com\/wp-json\/wp\/v2\/categories?post=8120"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.pickfu.com\/wp-json\/wp\/v2\/tags?post=8120"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}