{"id":21383,"date":"2017-08-07T15:40:50","date_gmt":"2017-08-07T14:40:50","guid":{"rendered":"https:\/\/fifteen-staging.fifteen.dev\/blog\/wireframing-why-you-should-wireframe-before-design\/"},"modified":"2017-08-07T15:40:50","modified_gmt":"2017-08-07T14:40:50","slug":"wireframing-why-you-should-wireframe-before-design","status":"publish","type":"post","link":"https:\/\/www.fifteendesign.co.uk\/blog\/wireframing-why-you-should-wireframe-before-design\/","title":{"rendered":"Wireframing &#8211; Why You Should Wireframe Before Design"},"content":{"rendered":"<div class=\"entry-content\"><h2><strong>What is a wireframe?<\/strong><\/h2>\n<p>Essentially it is a blueprint or skeleton for a website, it may look very basic from a visual point of view, but the purpose of a wireframe is to develop the layout of content on a page and to determine how elements of functionality can be integrated. A wireframe should look almost like a sketch (in some forms it may only be a sketch!), made up of outlines, basic icons and placeholder elements.<\/p>\n<h2><strong>What are the benefits of wireframing?<\/strong><\/h2>\n<p>The idea behind a wireframe is to demonstrate to the client\/stakeholder\/user what elements will exist on the page and how those elements will interact with other areas of the website.<\/p>\n<p>Before we go ahead with a visual design, it\u2019s incredibly important to get the structure and user journey correct first, so a wireframe can help us achieve this at an early stage. It saves us time too because when we begin the wireframing process, it\u2019s so easy to make changes to the page structure. Doing this at the visual design stage is a hugely time-consuming process so we strive to get the wireframe correct and approved before we continue to visual design.<\/p>\n<p>Wireframes also allow our clients to not be clouded by visuals and focus initially on the user experience and functionality of the site. It allows the viewer to take a step back to assess why we have chosen to lay the page out as such, instead of being distracted by an image they might not think is right.<\/p>\n<p>As well as this, wireframes allow us to design for responsive websites a lot more efficiently too as we can visualise how the site will flow across a range of devices and how elements will shift and adapt. Fifteen doesn&#8217;t do websites that aren\u2019t responsive, so it\u2019s a pretty key element of our design process.<\/p>\n<h2><strong>What cons come with wireframing?<\/strong><\/h2>\n<p>Although we would always advocate wireframing within a website design project, there are some cons involved.<\/p>\n<p>Firstly, if the wireframes are too \u2018designed\u2019, you can run the risk of disappointing certain stakeholders who may view it as a final design. However, as long as you make sure that the client is fully aware of what a wireframe is and why you wireframe this shouldn\u2019t be a problem. Just make sure your wireframes are devoid of elements like logos, images, iconography and too much colour \u2013 in fact, we\u2019d recommend sticking to black and white.<\/p>\n<p>Second, wireframing does create another step within website design, although we would argue that it\u2019s an incredibly important step. While it may seem a time-consuming exercise initially, it can save you a great deal of time further down the line. For example, when structural changes are pointed out at the wireframing stage, they\u2019re very easy to rectify, if they are pointed out at design stage it can take a much longer amount of time to put right. So while it may seem tiresome initially, it will be a time saver in the end!<\/p>\n<h2><strong>How to wireframe?<\/strong><\/h2>\n<p>Wireframing doesn\u2019t require fancy tools, although it can be enhanced by using them. You could begin with good old fashioned pencil and paper, sketching our your initial wireframe by hand. Once you want to move onto a digital format there are a number of ways you can create your wireframes, choose which one works for you! There is software that can facilitate this, like the Adobe Creative Suite, Balsamiq and Axure. There are also some web based apps such as Wireframe.cc, \u00a0Moqups and UXPin. This is not a definitive list as there are lots of options out there!<\/p>\n<h2><strong>When to wireframe?<\/strong><\/h2>\n<p>At Fifteen, almost all of our digital projects will go through a wireframing process, whether it\u2019s a brand new website, an app design, or a landing page \u2013 all will require a level of wireframe design. We view it as an essential part of digital design, when done well it can help ensure that a page\u2019s content structure and functionality hits the mark and delivers what the client and their users will want.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"What is a wireframe? Essentially it is a blueprint or skeleton for a website, it may look very basic from a visual point of view, but the purpose of a wireframe is to develop the layout of content on a page and to determine how elements of functionality can be integrated. A wireframe should look [&hellip;]","protected":false},"author":84,"featured_media":21384,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[],"tags":[],"class_list":["post-21383","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.8 (Yoast SEO v27.8) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Wireframing - Why You Should Wireframe Before Design - Fifteen<\/title>\n<meta name=\"description\" content=\"Wireframing is a crucial part of creating a website and should be done before design even begins. Find out why you should wireframe before design here.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.fifteendesign.co.uk\/blog\/wireframing-why-you-should-wireframe-before-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Wireframing - Why You Should Wireframe Before Design\" \/>\n<meta property=\"og:description\" content=\"Wireframing is a crucial part of creating a website and should be done before design even begins. Find out why you should wireframe before design here.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.fifteendesign.co.uk\/blog\/wireframing-why-you-should-wireframe-before-design\/\" \/>\n<meta property=\"og:site_name\" content=\"Fifteen\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/FifteenDesign\" \/>\n<meta property=\"article:published_time\" content=\"2017-08-07T14:40:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.fifteendesign.co.uk\/wp-content\/uploads\/2022\/12\/WireframeHeader.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1442\" \/>\n\t<meta property=\"og:image:height\" content=\"795\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Kyle Lindsay\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kyle Lindsay\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Wireframing - Why You Should Wireframe Before Design - Fifteen","description":"Wireframing is a crucial part of creating a website and should be done before design even begins. Find out why you should wireframe before design here.","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:\/\/www.fifteendesign.co.uk\/blog\/wireframing-why-you-should-wireframe-before-design\/","og_locale":"en_GB","og_type":"article","og_title":"Wireframing - Why You Should Wireframe Before Design","og_description":"Wireframing is a crucial part of creating a website and should be done before design even begins. Find out why you should wireframe before design here.","og_url":"https:\/\/www.fifteendesign.co.uk\/blog\/wireframing-why-you-should-wireframe-before-design\/","og_site_name":"Fifteen","article_publisher":"https:\/\/www.facebook.com\/FifteenDesign","article_published_time":"2017-08-07T14:40:50+00:00","og_image":[{"width":1442,"height":795,"url":"https:\/\/www.fifteendesign.co.uk\/wp-content\/uploads\/2022\/12\/WireframeHeader.jpg","type":"image\/jpeg"}],"author":"Kyle Lindsay","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kyle Lindsay","Estimated reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.fifteendesign.co.uk\/blog\/wireframing-why-you-should-wireframe-before-design\/#article","isPartOf":{"@id":"https:\/\/www.fifteendesign.co.uk\/blog\/wireframing-why-you-should-wireframe-before-design\/"},"author":{"name":"Kyle Lindsay","@id":"https:\/\/www.fifteendesign.co.uk\/#\/schema\/person\/7ed95bc67f5f57b732bf2a5870cb4714"},"headline":"Wireframing &#8211; Why You Should Wireframe Before Design","datePublished":"2017-08-07T14:40:50+00:00","mainEntityOfPage":{"@id":"https:\/\/www.fifteendesign.co.uk\/blog\/wireframing-why-you-should-wireframe-before-design\/"},"wordCount":698,"commentCount":0,"image":{"@id":"https:\/\/www.fifteendesign.co.uk\/blog\/wireframing-why-you-should-wireframe-before-design\/#primaryimage"},"thumbnailUrl":"https:\/\/www.fifteendesign.co.uk\/wp-content\/uploads\/2022\/12\/WireframeHeader.jpg","inLanguage":"en-GB"},{"@type":"WebPage","@id":"https:\/\/www.fifteendesign.co.uk\/blog\/wireframing-why-you-should-wireframe-before-design\/","url":"https:\/\/www.fifteendesign.co.uk\/blog\/wireframing-why-you-should-wireframe-before-design\/","name":"Wireframing - Why You Should Wireframe Before Design - Fifteen","isPartOf":{"@id":"https:\/\/www.fifteendesign.co.uk\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.fifteendesign.co.uk\/blog\/wireframing-why-you-should-wireframe-before-design\/#primaryimage"},"image":{"@id":"https:\/\/www.fifteendesign.co.uk\/blog\/wireframing-why-you-should-wireframe-before-design\/#primaryimage"},"thumbnailUrl":"https:\/\/www.fifteendesign.co.uk\/wp-content\/uploads\/2022\/12\/WireframeHeader.jpg","datePublished":"2017-08-07T14:40:50+00:00","author":{"@id":"https:\/\/www.fifteendesign.co.uk\/#\/schema\/person\/7ed95bc67f5f57b732bf2a5870cb4714"},"description":"Wireframing is a crucial part of creating a website and should be done before design even begins. Find out why you should wireframe before design here.","breadcrumb":{"@id":"https:\/\/www.fifteendesign.co.uk\/blog\/wireframing-why-you-should-wireframe-before-design\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.fifteendesign.co.uk\/blog\/wireframing-why-you-should-wireframe-before-design\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.fifteendesign.co.uk\/blog\/wireframing-why-you-should-wireframe-before-design\/#primaryimage","url":"https:\/\/www.fifteendesign.co.uk\/wp-content\/uploads\/2022\/12\/WireframeHeader.jpg","contentUrl":"https:\/\/www.fifteendesign.co.uk\/wp-content\/uploads\/2022\/12\/WireframeHeader.jpg","width":1442,"height":795},{"@type":"BreadcrumbList","@id":"https:\/\/www.fifteendesign.co.uk\/blog\/wireframing-why-you-should-wireframe-before-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.fifteendesign.co.uk\/"},{"@type":"ListItem","position":2,"name":"Wireframing &#8211; Why You Should Wireframe Before Design"}]},{"@type":"WebSite","@id":"https:\/\/www.fifteendesign.co.uk\/#website","url":"https:\/\/www.fifteendesign.co.uk\/","name":"Fifteen","description":"Creative. Digital. Marketing.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.fifteendesign.co.uk\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Person","@id":"https:\/\/www.fifteendesign.co.uk\/#\/schema\/person\/7ed95bc67f5f57b732bf2a5870cb4714","name":"Kyle Lindsay","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/secure.gravatar.com\/avatar\/5ff545c843da22e360dda49e4548bb9eed66d8b0c5f8b1a89afb5ee6ba4d44f3?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5ff545c843da22e360dda49e4548bb9eed66d8b0c5f8b1a89afb5ee6ba4d44f3?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5ff545c843da22e360dda49e4548bb9eed66d8b0c5f8b1a89afb5ee6ba4d44f3?s=96&d=mm&r=g","caption":"Kyle Lindsay"},"url":"https:\/\/www.fifteendesign.co.uk\/blog\/author\/kyle\/"}]}},"_links":{"self":[{"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/posts\/21383","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/users\/84"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/comments?post=21383"}],"version-history":[{"count":0,"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/posts\/21383\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/media\/21384"}],"wp:attachment":[{"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/media?parent=21383"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/categories?post=21383"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fifteendesign.co.uk\/wp-json\/wp\/v2\/tags?post=21383"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}