{"id":1188,"date":"2015-08-05T08:00:43","date_gmt":"2015-08-05T07:00:43","guid":{"rendered":"https:\/\/uxstudioteam.com\/website\/?p=1188"},"modified":"2022-05-19T14:35:03","modified_gmt":"2022-05-19T13:35:03","slug":"sketching-techniques-from-idea-to-final-design","status":"publish","type":"post","link":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/sketching-techniques-from-idea-to-final-design\/","title":{"rendered":"Sketching Techniques: From Idea to Final Design"},"content":{"rendered":"<p><strong><img decoding=\"async\" loading=\"lazy\" class=\"size-medium wp-image-6211 aligncenter\" src=\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2015\/08\/sketching_techniques_from_idea_to_final_design-720x480.jpg\" alt=\"\" width=\"720\" height=\"480\" srcset=\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2015\/08\/sketching_techniques_from_idea_to_final_design-720x480.jpg 720w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2015\/08\/sketching_techniques_from_idea_to_final_design-768x512.jpg 768w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2015\/08\/sketching_techniques_from_idea_to_final_design-1024x683.jpg 1024w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2015\/08\/sketching_techniques_from_idea_to_final_design-1080x720.jpg 1080w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/>Sketching on paper is a good way to quickly lay out multiple possibilities, whereas high-fidelity wireframes are better for modelling the final design. When to use one and when the other? When do we apply exact measurements and colors, and when do we not?<\/strong><br \/>\n<!--more--><\/p>\n<h2><strong>Sketching On Paper<\/strong><\/h2>\n<p>The reason for using hand-drawn sketches is to find a better way to quickly lay out multiple possibilities. In this phase, we can try radically different ideas and unusual concepts as well. Most commonly, these sketches are intended to bring focus to the introduction of an idea and hence they are made up from lines and contain only rough text.<\/p>\n<p><strong>What\u2019s in it:<\/strong><\/p>\n<ul>\n<li>visual hierarchy (which elements are more emphasized?)<\/li>\n<li>layout<\/li>\n<li>main processes<\/li>\n<\/ul>\n<p><strong>What\u2019s not in it:<\/strong><\/p>\n<ul>\n<li>exact ratios, measurements<\/li>\n<li>branding<\/li>\n<li>colors<\/li>\n<li>colored\u00a0surfaces (only lines)<\/li>\n<li>intervals<\/li>\n<li>exact text<\/li>\n<\/ul>\n<p><strong>Examples<\/strong><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-103\" src=\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2014\/05\/99-675x720.jpg\" alt=\"sketching techniques on paper\" width=\"500\" height=\"533\" srcset=\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2014\/05\/99-675x720.jpg 675w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2014\/05\/99-961x1024.jpg 961w\" sizes=\"(max-width: 500px) 100vw, 500px\" \/><\/p>\n<p>Sketches on paper for the Buzzdrive highway radar mobile interface<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"size-medium wp-image-101 aligncenter\" src=\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2014\/05\/01-paper_sketch-720x272.jpg\" alt=\"01-paper_sketch\" width=\"720\" height=\"272\" srcset=\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2014\/05\/01-paper_sketch-720x272.jpg 720w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2014\/05\/01-paper_sketch-1024x387.jpg 1024w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/><\/p>\n<p>Sketches for the Utinform route planner mobile interface<\/p>\n<h2><strong>Low-Fidelity Wireframe<\/strong><\/h2>\n<p>This kind of sketching technique is digital, made with a wireframing tool. Its primary purpose is to make the concept testable, even functioning as a clickable prototype. On this level, it is useful to come up with some alternative sketches: by testing, we can decide how viable our ideas are.<\/p>\n<p>The use of this tool needs better planning regarding processes: a navigation structure has to be worked out, and the functioning of the screens needs better forethought. The concepts only need elaboration to an extent where they can be tested, no more. This means we only need to think in lines and a few shades of grey. There is no point in using colors yet, only if it is absolutely necessary for conveying meaning. Texts, i.e. labels of buttons and tags on the page are useful, because they can influence the tester during testing.<\/p>\n<p><strong>What\u2019s in it:<\/strong><\/p>\n<ul>\n<li>exact ratios (but not exact measurements)<\/li>\n<li>maximum 2-3 shades of grey (still, the best is to only use lines)<\/li>\n<li>copywriting<\/li>\n<li>basic functions are clickable<\/li>\n<\/ul>\n<p><strong>What\u2019s not in it:<\/strong><\/p>\n<ul>\n<li>exact intervals, pixel accuracy<\/li>\n<li>profile, branding colors<\/li>\n<li>grid<\/li>\n<\/ul>\n<p><strong>Examples<\/strong><\/p>\n<p><a href=\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2014\/07\/demo-wireframe.png\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-287 size-medium\" src=\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2014\/07\/demo-wireframe-573x720.png\" alt=\"\" width=\"573\" height=\"720\" srcset=\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2014\/07\/demo-wireframe-573x720.png 573w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2014\/07\/demo-wireframe-815x1024.png 815w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2014\/07\/demo-wireframe.png 1420w\" sizes=\"(max-width: 573px) 100vw, 573px\" \/><\/a><\/p>\n<p>Low-fidelity wireframe<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-105\" src=\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2014\/05\/02-low_fidelity_wf-720x450.jpg\" alt=\"02-low_fidelity_wf\" width=\"600\" height=\"375\" srcset=\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2014\/05\/02-low_fidelity_wf-720x450.jpg 720w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2014\/05\/02-low_fidelity_wf-1024x640.jpg 1024w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2014\/05\/02-low_fidelity_wf.jpg 1280w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/p>\n<p>Low-fidelity wireframe for the of Utinform route planner<\/p>\n<h2><strong>High-Fidelity Wireframe<\/strong><\/h2>\n<p>A more elaborated version of the previous technique, both in function and layout. This is usually a clickable prototype, in which most of the screens are fully developed. It aims at showing closer resemblance to the final design, yet still not showing <em>complete<\/em> resemblance. Measurements are accurate, and more shades of grey are allowed. We should only use other colors if it is really necessary (e.g. provided they have considerable significance), because unfounded use of extra colors can mislead the testers during testing. Greater refinement leads to a more vivid imagination regarding future layout; besides, we can receive a more reliable feedback.<\/p>\n<p><strong>What\u2019s in it:<\/strong><\/p>\n<ul>\n<li>grid<\/li>\n<li>exact measurements<\/li>\n<li>shades of grey<\/li>\n<li>basic color concept<\/li>\n<\/ul>\n<p><strong>What\u2019s not in it:<\/strong><\/p>\n<ul>\n<li>pixel accuracy<\/li>\n<li>fonts<\/li>\n<li>final icons<\/li>\n<\/ul>\n<p><strong>Examples<\/strong> <a href=\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2014\/07\/f2a1e0d83bf17a615c918de49abe94dd.jpg\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-309 size-large\" src=\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2014\/07\/f2a1e0d83bf17a615c918de49abe94dd-501x1024.jpg\" alt=\"\" width=\"501\" height=\"1024\" srcset=\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2014\/07\/f2a1e0d83bf17a615c918de49abe94dd-501x1024.jpg 501w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2014\/07\/f2a1e0d83bf17a615c918de49abe94dd-352x720.jpg 352w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2014\/07\/f2a1e0d83bf17a615c918de49abe94dd.jpg 600w\" sizes=\"(max-width: 501px) 100vw, 501px\" \/><\/a><\/p>\n<p>High-fidelity wireframe<\/p>\n<p><a href=\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2014\/07\/03-high_fidelity_wf_grid1.jpg\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-313\" src=\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2014\/07\/03-high_fidelity_wf_grid1-720x449.jpg\" alt=\"\" width=\"600\" height=\"375\" srcset=\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2014\/07\/03-high_fidelity_wf_grid1-720x449.jpg 720w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2014\/07\/03-high_fidelity_wf_grid1-1024x639.jpg 1024w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2014\/07\/03-high_fidelity_wf_grid1.jpg 1281w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p>High-fidelity wireframe for the interface of Utinform route planner<\/p>\n<h2><strong>Detailed Design<\/strong><\/h2>\n<p>Detailed design is not a sketching technique, yet it is an important phase for clarifying the difference between a high-fidelity wireframe and a detailed design.<\/p>\n<p>In this phase, functioning is worked out and tested as well, and layout is thoroughly elaborated; i.e. measurements, colors, fonts, icons and every other detail.<\/p>\n<p><strong>Examples<\/strong><\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-107\" src=\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2014\/05\/04-detailed_design-720x450.jpg\" alt=\"04-detailed_design\" width=\"600\" height=\"375\" srcset=\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2014\/05\/04-detailed_design-720x450.jpg 720w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2014\/05\/04-detailed_design-1024x640.jpg 1024w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2014\/05\/04-detailed_design.jpg 1280w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/p>\n<p>Detailed design for the main page of Utinform<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-110\" src=\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2014\/05\/hibridlevel_vp_v9-720x664.jpg\" alt=\"hibridlevel_vp_v9\" width=\"600\" height=\"553\" srcset=\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2014\/05\/hibridlevel_vp_v9-720x664.jpg 720w, https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2014\/05\/hibridlevel_vp_v9.jpg 800w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/p>\n<p>Detailed design for one of the pages of Hibridlevel virtual printer<\/p>\n<h2><strong>Sketching techniques step-by-step<\/strong><\/h2>\n<p>Ideally, in each and every case we go through all techniques from the beginning to the end, constantly testing and cross-checking with the participants of the project. We only proceed if all the critical issues of the preceding phase have been resolved. The more we proceed forward the less possibility we have for radical changes, as a result of more accurate interfaces. In the beginning it is easy to change the plans, whereas in later phases it takes a lot of time to change something.<\/p>\n<p>You can find more about design techniques on our <strong><strong><a href=\"http:\/\/bit.ly\/UXstudio\">Facebook page<\/a>.<\/strong><\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Sketching on paper is a good way to quickly lay out multiple possibilities, whereas high-fidelity wireframes are better for modelling the final design. When to use one and when the other? When do we apply exact measurements and colors, and when do we not?<\/p>\n","protected":false},"author":53,"featured_media":6211,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"content-type":"","footnotes":""},"categories":[25,26],"tags":[],"table_tags":[],"coauthors":[119],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Sketching Techniques: From Idea to Final Design<\/title>\n<meta name=\"description\" content=\"Sketching on paper is a good way to quickly lay out multiple possibilities, whereas high-fidelity wireframes are better for modelling the final design.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/uxstudioteam.com\/ux-blog\/sketching-techniques-from-idea-to-final-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Sketching Techniques: From Idea to Final Design\" \/>\n<meta property=\"og:description\" content=\"Sketching on paper is a good way to quickly lay out multiple possibilities, whereas high-fidelity wireframes are better for modelling the final design.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/uxstudioteam.com\/ux-blog\/sketching-techniques-from-idea-to-final-design\/\" \/>\n<meta property=\"og:site_name\" content=\"UX Studio\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/uxstudio.hu\/\" \/>\n<meta property=\"article:published_time\" content=\"2015-08-05T07:00:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-05-19T13:35:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2014\/05\/01-paper_sketch.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2880\" \/>\n\t<meta property=\"og:image:height\" content=\"1089\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Bence Vass\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Sketching Techniques: From Idea to Final Design\" \/>\n<meta name=\"twitter:description\" content=\"Sketching on paper is a good way to quickly lay out multiple possibilities, whereas high-fidelity wireframes are better for modelling the final design.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/uxstudioteam.com\/website\/wp-content\/uploads\/2014\/05\/01-paper_sketch.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@UXstudio\" \/>\n<meta name=\"twitter:site\" content=\"@UXstudio\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Bence Vass\" \/>\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\":\"Article\",\"@id\":\"https:\/\/uxstudioteam.com\/ux-blog\/sketching-techniques-from-idea-to-final-design\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/sketching-techniques-from-idea-to-final-design\/\"},\"author\":{\"name\":\"Bence Vass\",\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/person\/cae0fc84cd6e15b484c78ce0902027e2\"},\"headline\":\"Sketching Techniques: From Idea to Final Design\",\"datePublished\":\"2015-08-05T07:00:43+00:00\",\"dateModified\":\"2022-05-19T13:35:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/sketching-techniques-from-idea-to-final-design\/\"},\"wordCount\":675,\"publisher\":{\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#organization\"},\"articleSection\":[\"Mobile UX\",\"Web App UX\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/sketching-techniques-from-idea-to-final-design\/\",\"url\":\"https:\/\/uxstudioteam.com\/ux-blog\/sketching-techniques-from-idea-to-final-design\/\",\"name\":\"Sketching Techniques: From Idea to Final Design\",\"isPartOf\":{\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#website\"},\"datePublished\":\"2015-08-05T07:00:43+00:00\",\"dateModified\":\"2022-05-19T13:35:03+00:00\",\"description\":\"Sketching on paper is a good way to quickly lay out multiple possibilities, whereas high-fidelity wireframes are better for modelling the final design.\",\"breadcrumb\":{\"@id\":\"https:\/\/uxstudioteam.com\/ux-blog\/sketching-techniques-from-idea-to-final-design\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/uxstudioteam.com\/ux-blog\/sketching-techniques-from-idea-to-final-design\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/uxstudioteam.com\/ux-blog\/sketching-techniques-from-idea-to-final-design\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Sketching Techniques: From Idea to Final Design\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#website\",\"url\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/\",\"name\":\"UX Studio\",\"description\":\"UX design blog about designing user experience for web and mobile apps with UX research and focus on usability and ergonomics\",\"publisher\":{\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#organization\",\"name\":\"UX studio\",\"url\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/05\/logo_emblem_online_green_on_white.png\",\"contentUrl\":\"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/05\/logo_emblem_online_green_on_white.png\",\"width\":1000,\"height\":1000,\"caption\":\"UX studio\"},\"image\":{\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/uxstudio.hu\/\",\"https:\/\/twitter.com\/UXstudio\",\"https:\/\/www.instagram.com\/uxstudioteam\/\",\"https:\/\/www.linkedin.com\/company\/uxstudio\/\",\"https:\/\/nl.pinterest.com\/uxstudiohu\/pins\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/person\/cae0fc84cd6e15b484c78ce0902027e2\",\"name\":\"Bence Vass\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/person\/image\/50e85014de2e51ec79abe419cd0588da\",\"url\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/02\/DSC03409-e1519222927819-150x150.jpg\",\"contentUrl\":\"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/02\/DSC03409-e1519222927819-150x150.jpg\",\"caption\":\"Bence Vass\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Sketching Techniques: From Idea to Final Design","description":"Sketching on paper is a good way to quickly lay out multiple possibilities, whereas high-fidelity wireframes are better for modelling the final design.","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:\/\/uxstudioteam.com\/ux-blog\/sketching-techniques-from-idea-to-final-design\/","og_locale":"en_US","og_type":"article","og_title":"Sketching Techniques: From Idea to Final Design","og_description":"Sketching on paper is a good way to quickly lay out multiple possibilities, whereas high-fidelity wireframes are better for modelling the final design.","og_url":"https:\/\/uxstudioteam.com\/ux-blog\/sketching-techniques-from-idea-to-final-design\/","og_site_name":"UX Studio","article_publisher":"https:\/\/www.facebook.com\/uxstudio.hu\/","article_published_time":"2015-08-05T07:00:43+00:00","article_modified_time":"2022-05-19T13:35:03+00:00","og_image":[{"width":2880,"height":1089,"url":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2014\/05\/01-paper_sketch.jpg","type":"image\/jpeg"}],"author":"Bence Vass","twitter_card":"summary_large_image","twitter_title":"Sketching Techniques: From Idea to Final Design","twitter_description":"Sketching on paper is a good way to quickly lay out multiple possibilities, whereas high-fidelity wireframes are better for modelling the final design.","twitter_image":"https:\/\/uxstudioteam.com\/website\/wp-content\/uploads\/2014\/05\/01-paper_sketch.jpg","twitter_creator":"@UXstudio","twitter_site":"@UXstudio","twitter_misc":{"Written by":"Bence Vass","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/uxstudioteam.com\/ux-blog\/sketching-techniques-from-idea-to-final-design\/#article","isPartOf":{"@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/sketching-techniques-from-idea-to-final-design\/"},"author":{"name":"Bence Vass","@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/person\/cae0fc84cd6e15b484c78ce0902027e2"},"headline":"Sketching Techniques: From Idea to Final Design","datePublished":"2015-08-05T07:00:43+00:00","dateModified":"2022-05-19T13:35:03+00:00","mainEntityOfPage":{"@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/sketching-techniques-from-idea-to-final-design\/"},"wordCount":675,"publisher":{"@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#organization"},"articleSection":["Mobile UX","Web App UX"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/sketching-techniques-from-idea-to-final-design\/","url":"https:\/\/uxstudioteam.com\/ux-blog\/sketching-techniques-from-idea-to-final-design\/","name":"Sketching Techniques: From Idea to Final Design","isPartOf":{"@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#website"},"datePublished":"2015-08-05T07:00:43+00:00","dateModified":"2022-05-19T13:35:03+00:00","description":"Sketching on paper is a good way to quickly lay out multiple possibilities, whereas high-fidelity wireframes are better for modelling the final design.","breadcrumb":{"@id":"https:\/\/uxstudioteam.com\/ux-blog\/sketching-techniques-from-idea-to-final-design\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/uxstudioteam.com\/ux-blog\/sketching-techniques-from-idea-to-final-design\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/uxstudioteam.com\/ux-blog\/sketching-techniques-from-idea-to-final-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/"},{"@type":"ListItem","position":2,"name":"Sketching Techniques: From Idea to Final Design"}]},{"@type":"WebSite","@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#website","url":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/","name":"UX Studio","description":"UX design blog about designing user experience for web and mobile apps with UX research and focus on usability and ergonomics","publisher":{"@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#organization","name":"UX studio","url":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/logo\/image\/","url":"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/05\/logo_emblem_online_green_on_white.png","contentUrl":"https:\/\/uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/05\/logo_emblem_online_green_on_white.png","width":1000,"height":1000,"caption":"UX studio"},"image":{"@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/uxstudio.hu\/","https:\/\/twitter.com\/UXstudio","https:\/\/www.instagram.com\/uxstudioteam\/","https:\/\/www.linkedin.com\/company\/uxstudio\/","https:\/\/nl.pinterest.com\/uxstudiohu\/pins\/"]},{"@type":"Person","@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/person\/cae0fc84cd6e15b484c78ce0902027e2","name":"Bence Vass","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/#\/schema\/person\/image\/50e85014de2e51ec79abe419cd0588da","url":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/02\/DSC03409-e1519222927819-150x150.jpg","contentUrl":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-content\/uploads\/2018\/02\/DSC03409-e1519222927819-150x150.jpg","caption":"Bence Vass"}}]}},"_links":{"self":[{"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/posts\/1188"}],"collection":[{"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/users\/53"}],"replies":[{"embeddable":true,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/comments?post=1188"}],"version-history":[{"count":3,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/posts\/1188\/revisions"}],"predecessor-version":[{"id":9869,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/posts\/1188\/revisions\/9869"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/media\/6211"}],"wp:attachment":[{"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/media?parent=1188"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/categories?post=1188"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/tags?post=1188"},{"taxonomy":"table_tags","embeddable":true,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/table_tags?post=1188"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/timemachine.uxstudioteam.com\/ux-blog\/wp-json\/wp\/v2\/coauthors?post=1188"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}