{"id":891,"date":"2020-01-15T11:57:48","date_gmt":"2020-01-15T19:57:48","guid":{"rendered":"https:\/\/websitemuscle.com\/?p=891"},"modified":"2021-02-02T08:47:14","modified_gmt":"2021-02-02T16:47:14","slug":"whats-a-wireframe","status":"publish","type":"post","link":"https:\/\/websitemuscle.com\/whats-a-wireframe\/","title":{"rendered":"What&#8217;s a Wireframe?"},"content":{"rendered":"<p>At the start of every web design project with Website Muscle, you&#8217;ll hear us refer to the wireframe. But you may not be 100% certain what a wireframe is. (Don&#8217;t worry &#8211; you&#8217;re not alone!) Or perhaps what <em>we<\/em> call a wireframe could be different than what you were expecting or have previous experience with.<\/p>\n<p>So we&#8217;d like to explain what a Website Muscle wireframe is, and how we will use it for your project.<\/p>\n<p>According to a well-known online encyclopedia, a website wireframe is &#8220;is a visual guide that represents the skeletal framework of a website.&#8221; Spot on, Wikipedia. Spot on.<\/p>\n<p><iframe title=\"Wikipedia\" width=\"800\" height=\"600\" src=\"https:\/\/www.youtube.com\/embed\/kFBDn5PiL00?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<p>We&#8217;re not as fancy as Wikipedia, so we call our wireframes &#8220;stick figure drawings&#8221;. We&#8217;ll definitely wireframe the home page of your new site, and in the case of larger or more complex sites, sometimes one or two more &#8220;key pages&#8221; as well.<\/p>\n<h3>When do we create a wireframe?<\/h3>\n<p>We create the wireframe after we&#8217;ve gone through our Discovery and Strategy process with you and the sitemap has been confirmed. Essentially it&#8217;s time to wireframe when we feel we have a good handle on what elements or sections are going to be the most important for 1) telling your story and 2) reaching your target audience.<\/p>\n<h3>What&#8217;s the point of a wireframe?<\/h3>\n<p>We consider a wireframe to be the first step in website design. We want you to see bare-bones, without any fonts, images, or colors, what will be included on the home page. That&#8217;s because the content and messaging of your website is more important than the particular shade of blue or whether the font is serif or sans serif. (I know, how dare us. We&#8217;ll get into all that later.)<\/p>\n<p>We want your initial impression of the home page to be solely based on:<\/p>\n<p>1) what&#8217;s there and<br \/>\n2) in what order.<\/p>\n<p>Once you approve the wireframe, we&#8217;ll start designing and add in the fun stuff &#8211; design elements like your logo, images, fonts, and colors.<\/p>\n<h3>What feedback do we need?<\/h3>\n<p>We&#8217;ll present the wireframe to you accompanied by a handy dandy screenshare video, where we walk you through our thought process and intent behind each section and its placement on the page. That should help you understand what we&#8217;ve done and why. Ideally nothing should come as a complete surprise, although pleasant surprises are always appreciated. \ud83d\ude09<\/p>\n<p>We will ask for your feedback so we can either make adjustments to the wireframe or proceed to design. To help you give us the most useful feedback, try to answer these questions when you view your wireframe:<\/p>\n<ul>\n<li>Is there anything on the wireframe that shouldn&#8217;t be there?<\/li>\n<li>Is there anything missing from the wireframe that should be there?<\/li>\n<li>Is the order of sections appropriate? In other words, does it flow well for you?<\/li>\n<\/ul>\n<p>Again, keep in mind that the page will look much prettier when it&#8217;s designed. We&#8217;ll add lovely images and other nice touches to break up the sections, evoke some emotion, and so forth. The wireframe&#8217;s job is to make sure everything&#8217;s there that needs to be there, and nothing&#8217;s there that shouldn&#8217;t be there.<\/p>\n<h3>Here&#8217;s an example of a wireframe and designed home page.<\/h3>\n<p><img fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/websitemuscle.com\/wp-content\/uploads\/2020\/01\/Homepage.png\" sizes=\"(max-width: 1024px) 100vw, 1024px\" srcset=\"https:\/\/websitemuscle.com\/wp-content\/uploads\/2020\/01\/Homepage.png 1024w, https:\/\/websitemuscle.com\/wp-content\/uploads\/2020\/01\/Homepage-125x300.png 125w, https:\/\/websitemuscle.com\/wp-content\/uploads\/2020\/01\/Homepage-426x1024.png 426w, https:\/\/websitemuscle.com\/wp-content\/uploads\/2020\/01\/Homepage-768x1844.png 768w, https:\/\/websitemuscle.com\/wp-content\/uploads\/2020\/01\/Homepage-640x1536.png 640w, https:\/\/websitemuscle.com\/wp-content\/uploads\/2020\/01\/Homepage-853x2048.png 853w\" alt=\"\" width=\"1024\" height=\"2459\" \/><br \/>\n<img decoding=\"async\" src=\"https:\/\/websitemuscle.com\/wp-content\/uploads\/2020\/01\/1-min-scaled.jpeg\" sizes=\"(max-width: 1000px) 100vw, 1000px\" srcset=\"https:\/\/websitemuscle.com\/wp-content\/uploads\/2020\/01\/1-min-scaled.jpeg 1000w, https:\/\/websitemuscle.com\/wp-content\/uploads\/2020\/01\/1-min-117x300.jpeg 117w, https:\/\/websitemuscle.com\/wp-content\/uploads\/2020\/01\/1-min-400x1024.jpeg 400w, https:\/\/websitemuscle.com\/wp-content\/uploads\/2020\/01\/1-min-768x1967.jpeg 768w, https:\/\/websitemuscle.com\/wp-content\/uploads\/2020\/01\/1-min-600x1536.jpeg 600w, https:\/\/websitemuscle.com\/wp-content\/uploads\/2020\/01\/1-min-800x2048.jpeg 800w\" alt=\"\" width=\"1000\" height=\"2560\" \/><\/p>\n<p>So that&#8217;s the 411 on wireframes. Hope this helps, and if not feel free to reach out with any questions. We&#8217;re here for you!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>At the start of every web design project with Website Muscle, you&#8217;ll hear us refer to the wireframe. But you may not be 100% certain what a wireframe is. (Don&#8217;t worry &#8211; you&#8217;re not alone!) Or perhaps what we call a wireframe could be different than what you were expecting or have previous experience with. [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":893,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[127],"tags":[],"class_list":["post-891","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-design"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>What&#039;s a Wireframe? - Website Muscle<\/title>\n<meta name=\"description\" content=\"What&#039;s a wireframe? At the start of every project with Website Muscle, you&#039;ll hear us refer to the wireframe. If you&#039;re not sure what that is, read on.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/websitemuscle.com\/whats-a-wireframe\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What&#039;s a Wireframe? - Website Muscle\" \/>\n<meta property=\"og:description\" content=\"What&#039;s a wireframe? At the start of every project with Website Muscle, you&#039;ll hear us refer to the wireframe. If you&#039;re not sure what that is, read on.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/websitemuscle.com\/whats-a-wireframe\/\" \/>\n<meta property=\"og:site_name\" content=\"Website Muscle\" \/>\n<meta property=\"article:published_time\" content=\"2020-01-15T19:57:48+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-02-02T16:47:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/websitemuscle.com\/wp-content\/uploads\/2020\/01\/iStock-1170723985.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1254\" \/>\n\t<meta property=\"og:image:height\" content=\"836\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Tyree Nelson\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Tyree Nelson\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/websitemuscle.com\/whats-a-wireframe\/\",\"url\":\"https:\/\/websitemuscle.com\/whats-a-wireframe\/\",\"name\":\"What's a Wireframe? - Website Muscle\",\"isPartOf\":{\"@id\":\"https:\/\/websitemuscle.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/websitemuscle.com\/whats-a-wireframe\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/websitemuscle.com\/whats-a-wireframe\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/websitemuscle.com\/wp-content\/uploads\/2020\/01\/iStock-1170723985.jpg\",\"datePublished\":\"2020-01-15T19:57:48+00:00\",\"dateModified\":\"2021-02-02T16:47:14+00:00\",\"author\":{\"@id\":\"https:\/\/websitemuscle.com\/#\/schema\/person\/ff745496675e4bc73d58e79b96362f5e\"},\"description\":\"What's a wireframe? At the start of every project with Website Muscle, you'll hear us refer to the wireframe. If you're not sure what that is, read on.\",\"breadcrumb\":{\"@id\":\"https:\/\/websitemuscle.com\/whats-a-wireframe\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/websitemuscle.com\/whats-a-wireframe\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/websitemuscle.com\/whats-a-wireframe\/#primaryimage\",\"url\":\"https:\/\/websitemuscle.com\/wp-content\/uploads\/2020\/01\/iStock-1170723985.jpg\",\"contentUrl\":\"https:\/\/websitemuscle.com\/wp-content\/uploads\/2020\/01\/iStock-1170723985.jpg\",\"width\":1254,\"height\":836,\"caption\":\"What's a wireframe?\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/websitemuscle.com\/whats-a-wireframe\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/websitemuscle.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"What&#8217;s a Wireframe?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/websitemuscle.com\/#website\",\"url\":\"https:\/\/websitemuscle.com\/\",\"name\":\"Website Muscle\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/websitemuscle.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/websitemuscle.com\/#\/schema\/person\/ff745496675e4bc73d58e79b96362f5e\",\"name\":\"Tyree Nelson\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/websitemuscle.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c5621b41d27f40f070515410dfaa0600a4a8040df7f5b0612cfb23277aee778f?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c5621b41d27f40f070515410dfaa0600a4a8040df7f5b0612cfb23277aee778f?s=96&d=mm&r=g\",\"caption\":\"Tyree Nelson\"},\"url\":\"https:\/\/websitemuscle.com\/author\/tyreewebsitemuscle-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"What's a Wireframe? - Website Muscle","description":"What's a wireframe? At the start of every project with Website Muscle, you'll hear us refer to the wireframe. If you're not sure what that is, read on.","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:\/\/websitemuscle.com\/whats-a-wireframe\/","og_locale":"en_US","og_type":"article","og_title":"What's a Wireframe? - Website Muscle","og_description":"What's a wireframe? At the start of every project with Website Muscle, you'll hear us refer to the wireframe. If you're not sure what that is, read on.","og_url":"https:\/\/websitemuscle.com\/whats-a-wireframe\/","og_site_name":"Website Muscle","article_published_time":"2020-01-15T19:57:48+00:00","article_modified_time":"2021-02-02T16:47:14+00:00","og_image":[{"width":1254,"height":836,"url":"https:\/\/websitemuscle.com\/wp-content\/uploads\/2020\/01\/iStock-1170723985.jpg","type":"image\/jpeg"}],"author":"Tyree Nelson","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Tyree Nelson","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/websitemuscle.com\/whats-a-wireframe\/","url":"https:\/\/websitemuscle.com\/whats-a-wireframe\/","name":"What's a Wireframe? - Website Muscle","isPartOf":{"@id":"https:\/\/websitemuscle.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/websitemuscle.com\/whats-a-wireframe\/#primaryimage"},"image":{"@id":"https:\/\/websitemuscle.com\/whats-a-wireframe\/#primaryimage"},"thumbnailUrl":"https:\/\/websitemuscle.com\/wp-content\/uploads\/2020\/01\/iStock-1170723985.jpg","datePublished":"2020-01-15T19:57:48+00:00","dateModified":"2021-02-02T16:47:14+00:00","author":{"@id":"https:\/\/websitemuscle.com\/#\/schema\/person\/ff745496675e4bc73d58e79b96362f5e"},"description":"What's a wireframe? At the start of every project with Website Muscle, you'll hear us refer to the wireframe. If you're not sure what that is, read on.","breadcrumb":{"@id":"https:\/\/websitemuscle.com\/whats-a-wireframe\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/websitemuscle.com\/whats-a-wireframe\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/websitemuscle.com\/whats-a-wireframe\/#primaryimage","url":"https:\/\/websitemuscle.com\/wp-content\/uploads\/2020\/01\/iStock-1170723985.jpg","contentUrl":"https:\/\/websitemuscle.com\/wp-content\/uploads\/2020\/01\/iStock-1170723985.jpg","width":1254,"height":836,"caption":"What's a wireframe?"},{"@type":"BreadcrumbList","@id":"https:\/\/websitemuscle.com\/whats-a-wireframe\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/websitemuscle.com\/"},{"@type":"ListItem","position":2,"name":"What&#8217;s a Wireframe?"}]},{"@type":"WebSite","@id":"https:\/\/websitemuscle.com\/#website","url":"https:\/\/websitemuscle.com\/","name":"Website Muscle","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/websitemuscle.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/websitemuscle.com\/#\/schema\/person\/ff745496675e4bc73d58e79b96362f5e","name":"Tyree Nelson","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/websitemuscle.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/c5621b41d27f40f070515410dfaa0600a4a8040df7f5b0612cfb23277aee778f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c5621b41d27f40f070515410dfaa0600a4a8040df7f5b0612cfb23277aee778f?s=96&d=mm&r=g","caption":"Tyree Nelson"},"url":"https:\/\/websitemuscle.com\/author\/tyreewebsitemuscle-com\/"}]}},"_links":{"self":[{"href":"https:\/\/websitemuscle.com\/wp-json\/wp\/v2\/posts\/891","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/websitemuscle.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/websitemuscle.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/websitemuscle.com\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/websitemuscle.com\/wp-json\/wp\/v2\/comments?post=891"}],"version-history":[{"count":0,"href":"https:\/\/websitemuscle.com\/wp-json\/wp\/v2\/posts\/891\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/websitemuscle.com\/wp-json\/wp\/v2\/media\/893"}],"wp:attachment":[{"href":"https:\/\/websitemuscle.com\/wp-json\/wp\/v2\/media?parent=891"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/websitemuscle.com\/wp-json\/wp\/v2\/categories?post=891"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/websitemuscle.com\/wp-json\/wp\/v2\/tags?post=891"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}