{"id":34063,"date":"2016-05-09T12:04:12","date_gmt":"2016-05-09T19:04:12","guid":{"rendered":"https:\/\/creativemarket.com\/blog\/?p=34063"},"modified":"2024-04-11T00:20:02","modified_gmt":"2024-04-11T07:20:02","slug":"how-to-get-started-with-wireframe-design","status":"publish","type":"post","link":"https:\/\/creativemarket.com\/blog\/how-to-get-started-with-wireframe-design","title":{"rendered":"How to Get Started With Wireframe Design"},"content":{"rendered":"<p>Wireframes are low-fidelity outlines of a product, showing screen layouts page by page. Their goal, and advantage, is allowing designers to make crucial decisions about navigation, layouts, visual hierarchies, content priority, and information architecture early on.<br \/>\nLater on in the design process, changing these factors requires uprooting of the entire design, so the sooner they&acirc;&euro;&trade;re solidified, the better. Wireframing answers these questions before designers have to tackle more complex issues like visuals or advanced usability.<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2016\/05\/11001520\/image01.jpg.webp\" alt=\"image01\" width=\"680\" height=\"453\" class=\"alignnone size-full wp-image-34879\"><br \/>\nPhoto credit: &#8220;<a href=\"https:\/\/www.flickr.com\/photos\/baldiri\/5734993652\/in\/photolist-8GEJTc-ozdF2-4HbfVW-7wGsJA-9JMoL5-8W2G6H-9PEb4c-9JMkNU-9JMogL-hNGVb-aJdb1i-2S9bQ-aJdba8-7h5y9W-9JJyxZ-7gPy6J-5yMeUS-9PH2ZC-9PEbdZ-7K1ERj-9f7nJR-PrpAA-5yMeUN-9JMmD3-DZ9am-9nzuZU-6umBzF-6Ar85f-6K4Dnu-aEXRn-5zshjf-dPgyT2-5UxUSc-3N8VK7-65ZT8L-7F3ejv-89qQcz-LkAzZ-8raxbT-9nzA3G-6LYd6X-5zshkN-5zshgW-5uMeoZ-4ZXcH1-7fvYVE-55tLvH-55tHcM-6iK1g8-9eT6sb\">Wireframe<\/a>&#8220;. Baldiri. <a href=\"https:\/\/creativecommons.org\/licenses\/by\/2.0\/\">Creative Commons<\/a>.<br \/>\nWireframes are typically one of the first phases of design (if not the first), usually following a brainstorming or rough-sketching session.<br \/>\n<a href=\"https:\/\/www.uxpin.com\/wireframing-hands-on-guide?section=intro\">Wireframes<\/a> use placeholders for the actual content to come later. This means no actual text and boxes with Xs to denote images. Their point is to organize content, not to fill in the details.<br \/>\nIn this piece, we&acirc;&euro;&trade;ll explore:<\/p>\n<ul>\n<li> Why wireframes are useful <\/li>\n<li> Helpful wireframing tools <\/li>\n<li> An efficient wireframing process <\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Why_Create_a_Wireframe\"><\/span> Why Create a Wireframe <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\nHere&acirc;&euro;&trade;s a practical overview of why wireframes are still useful:\n<\/p>\n<ul>\n<li> Structured outlines &acirc;&euro;&rdquo; You know what goes where in your design early on, so you don&acirc;&euro;&trade;t have to go back and undo designs later in a hi-fi mockup (or worse, in code). <\/li>\n<li> Encourages creativity and experimentation &acirc;&euro;&rdquo; Wireframes are faster to sketch (or create in a digital tool) than a complete mockup. You free yourself to explore 5-10 different concepts before diving deep into one. <\/li>\n<li> Promote content-first design &acirc;&euro;&rdquo; It can be easy to get lost in designing the details and losing focus on what&acirc;&euro;&trade;s really important: the content. Wireframing optimizes the placement of content because there are no distractions at the beginning stages. <\/li>\n<\/ul>\n<p>\nTo sum it up, think of wireframes as the skeleton of your site. Having it in place first makes it easier to add the real meat.\n<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Wireframing_Tools\"><\/span> Wireframing Tools <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\nThere&acirc;&euro;&trade;s a lot of different options for creating a wireframe, so choose the one you feel the most comfortable with. Below are some of the most popular choices:\n<\/p>\n<ul>\n<li> Paper &acirc;&euro;&rdquo; Basically more advanced sketches, paper wireframes can be good for brainstorming ideas, and can be done in minutes. The price is visual accuracy, though, and creating prototypes from these is problematic. <\/li>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2016\/05\/11001525\/image04.jpg.webp\" alt=\"image04\" width=\"680\" height=\"907\" class=\"alignnone size-full wp-image-34880\"><br \/>\n<em><em>Photo credit:<\/em> <a href=\"https:\/\/studio.uxpin.com\/ebooks\/ux-design-in-action-yelp-website\/\"><em>UXPin<\/em><\/a><\/em><\/p>\n<li> Specialized Tools&acirc;&euro;&rdquo; Tools like UXPin are designed especially for wireframing and prototyping, with designers as the target users. All elements you need are readily available and easy to use, and you can add interactions to your wireframe (turning them into a prototype). <\/li>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2016\/05\/11001536\/image06.png.webp\" alt=\"image06\" width=\"680\" height=\"556\" class=\"alignnone size-full wp-image-34881\"><br \/>\n<em>Photo credit:<\/em> <a href=\"http:\/\/www.uxpin.com\"><em>UXPin<\/em><\/a><\/p>\n<li> Presentation Software &acirc;&euro;&rdquo; Keynote, Powerpoint, and other presentation software are also equipped to handle the shapes needed for wireframes, and are often already accessible to most companies and freelancers. The tradeoff, of course, is that it&acirc;&euro;&trade;s not as easy to build interactions on top of the wireframe (certainly doable, but takes some extra work). <\/li>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2016\/05\/11001547\/image03.png.webp\" alt=\"image03\" width=\"680\" height=\"383\" class=\"alignnone size-full wp-image-34882\"><br \/>\n<em>Photo credit: <a href=\"https:\/\/www.apple.com\/mac\/keynote\/\">Keynote<\/a><\/em><\/p>\n<li> Image editors &acirc;&euro;&rdquo; If you&acirc;&euro;&trade;re a wiz at tools like Sketch, Photoshop, or Illustrator, you can easily create the basic shapes needed for wireframes. Keep in mind that you&acirc;&euro;&trade;ll still need to rebuild the whole design in higher fidelity. <\/li>\n<\/ul>\n<p>\nOnce you choose your tool of choice, it&acirc;&euro;&trade;s time to get started on the process.\n<\/p>\n<h2><span class=\"ez-toc-section\" id=\"How_to_Make_a_Wireframe_Step-by-Step\"><\/span> How to Make a Wireframe (Step-by-Step) <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\nWireframes can come in different forms, but in general you can follow this 5-step process and personalize your choices as you wish:<br \/>\n1. Content Inventory<br \/>\n2. Visual Hierarchy<br \/>\n3. Content Wireframe<br \/>\n4. Lo-fi Wireframe<br \/>\n5. Lo-fi Prototype<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2016\/05\/11001556\/image07.png.webp\" alt=\"image07\" width=\"680\" height=\"204\" class=\"alignnone size-full wp-image-34884\"><br \/>\n<em>Photo credit: <a href=\"https:\/\/www.uxpin.com\/\">UXPin<\/a> <\/em><br \/>\nWe&acirc;&euro;&trade;ll explain the best practices for each now.\n<\/p>\n<h2><span class=\"ez-toc-section\" id=\"1_Create_a_Content_Inventory\"><\/span> 1. Create a Content Inventory <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\nThe first step should always be creating a content inventory, which is mostly a spreadsheet or graph listing out all the content elements you&acirc;&euro;&trade;d like to include.<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2016\/05\/11001607\/image09.png.webp\" alt=\"Content Inventory\" width=\"680\" height=\"292\" class=\"alignnone size-full wp-image-34885\"><br \/>\n<em>Photo credit:<\/em> <a href=\"http:\/\/maadmob.com.au\/resources\/content_inventory\" target=\"_blank\" rel=\"noopener\"><em>Maadmob<\/em><\/a><br \/>\nThe content inventory is just one way a wireframe can help put content first. You can build one by:\n<\/p>\n<ul>\n<li> Auditing and listing all the content you want, often with URLs and brief descriptions. <\/li>\n<li> Organize content items by topic (optional). <\/li>\n<li> Decide which content goes on which page and reorganize the list. <\/li>\n<li> Look for redundancies &acirc;&euro;&rdquo; Now is the best time to eliminate unnecessary content, before you waste time designing around it. The less content you have, the more potent the remaining content. <\/li>\n<li> Assign people to work on certain pages or topics (optional). <\/li>\n<\/ul>\n<p>\nOnce all the items are listed, you then prioritize them. This is essential for forming the visual hierarchy (the next step), as well as the success of your product overall.\n<\/p>\n<h2><span class=\"ez-toc-section\" id=\"2_Assign_Visual_Hierarchies\"><\/span> 2. Assign Visual Hierarchies <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\nOnce you know which content appears on each page, you can start to structure how those pages should look. As explained in the free guide <a href=\"https:\/\/studio.uxpin.com\/ebooks\/web-ui-design-principles-psychology-ebook-bundle\/\" target=\"_blank\" rel=\"noopener\">Web UI Design for the Human Eye<\/a>, this is when the true design work starts &acirc;&euro;&rdquo; you&acirc;&euro;&trade;ll need to understand <a href=\"https:\/\/studio.uxpin.com\/blog\/creating-perfect-user-flows-for-smooth-ux\/\" target=\"_blank\" rel=\"noopener\">user flows<\/a> to know <em>what<\/em> content should be prioritized, and visual principles to understand <em>how<\/em>.<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2016\/05\/11001616\/image10.png.webp\" alt=\"Visual Hierarchies\" width=\"680\" height=\"204\" class=\"alignnone size-full wp-image-34886\"><br \/>\nAt this stage, organization is important. Color-coding by content can help, although it&acirc;&euro;&trade;s not necessary.<br \/>\nThe important part is that you understand where your user wants to go and how they&acirc;&euro;&trade;ll likely try to get there (plus where you want them to go). Then you can start threading pages together.\n<\/p>\n<h2><span class=\"ez-toc-section\" id=\"3_Wireframe_with_Content_Blocks\"><\/span> 3. Wireframe with Content Blocks <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\nThe first phase of actual wireframing involves broad, vague &acirc;&euro;&oelig;content blocks.&acirc;&euro; These are sectioned off by the type of content with almost no details.<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2016\/05\/11001625\/image031.png.webp\" alt=\"Content Block Wireframe\" width=\"680\" height=\"383\" class=\"alignnone size-full wp-image-34887\"><br \/>\nAs you can see in the above <a href=\"http:\/\/www.uxpin.com\">UXPin<\/a> example, you&acirc;&euro;&trade;re mostly concerned with figuring out where your content will go, and less about how it&acirc;&euro;&trade;s presented. Working with broad blocks makes it easier to focus on the big-picture goals.<br \/>\nTry implementing a grid-system if your tool allows it. This does wonder for organization and planning, especially if elements are repeated across multiple pages.<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2016\/05\/11001631\/image08.jpg.webp\" alt=\"image08\" width=\"680\" height=\"352\" class=\"alignnone size-full wp-image-34888\"><br \/>\nTry starting with the mobile viewport first:\n<\/p>\n<ul>\n<li> You force yourself to prioritize content. <\/li>\n<li> You add content as you work with larger viewports . The alternative is subtracting content, which degrades the experience with each smaller viewport. <\/li>\n<p>Once you have your content wireframe, you&acirc;&euro;&trade;ll able to add more details.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"4_Sculpt_Down_Content_Blocks\"><\/span> 4. Sculpt Down Content Blocks <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>With the content blocks in place, you&acirc;&euro;&trade;re able to start considering details. Don&acirc;&euro;&trade;t go overboard &acirc;&euro;&rdquo; remember that wireframes are supposed to be simplistic. By &acirc;&euro;&oelig;details,&acirc;&euro; we mean boxes with Xs for images, ambiguous lines for text, and smaller boxes or symbols for buttons.<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2016\/05\/11001637\/image00.jpg.webp\" alt=\"image00\" width=\"1418\" height=\"950\" class=\"alignnone size-full wp-image-34889\"><br \/>\n<em>Photo credit: <a href=\"https:\/\/www.uxpin.com\/\">UXPin<\/a><\/em><br \/>\nAgain, pay attention to user flows and visual hierarchy. Don&acirc;&euro;&trade;t forget scanning patterns and remember that certain images may attract more attention than others.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"5_Add_Interactivity\"><\/span> 5. Add Interactivity <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Arguably the most important aspect, adding interactivity turns your wireframe into a lo-fi prototype. Here is where most of the criticism about wireframes falls apart. This possibility is relatively new (thanks to technology and a better understanding of design), so not all designers know it&acirc;&euro;&trade;s even possible.<br \/>\nIn the rapid prototyping ideology, you create prototypes quickly, test them, then implement the feedback into the next one. Repeating this cycle over and over refines your design along the lines of what users want, ultimately building a better product.<br \/>\nAdding interactivity to your wireframe allows you to start this process early on, improving your product even more. Testing an early-stage wireframe\/lo-fi prototype gives you vital feedback on the basics like whether users can find what they&acirc;&euro;&trade;re looking for, or even if the product idea is workable.<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2016\/05\/11001649\/image02.png.webp\" alt=\"Wireframe Prototype\" width=\"680\" height=\"741\" class=\"alignnone size-full wp-image-34890\"><br \/>\n<em>Photo credit: <a href=\"https:\/\/uxpin.com\/\">UXPin<\/a><\/em><br \/>\nIf you&acirc;&euro;&trade;re using specialized tools, adding interactions can be as simple as dragging and dropping.<br \/>\nOnce your lo-fi prototype is finished, you&acirc;&euro;&trade;re free to test it for early feedback with users. Good luck!<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Further_Reading\"><\/span> Further Reading <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>To learn more about the best practices for wireframing, including more thorough advice, additional best practices, and real company examples, check out these two free e-books:<br \/>\n<a href=\"https:\/\/studio.uxpin.com\/ebooks\/guide-to-wireframing\/\" target=\"_blank\" rel=\"noopener\">The Guide to Wireframing<\/a> &acirc;&euro;&rdquo; A cover-all guidebook explaining everything you need to know about wireframing.<br \/>\n<a href=\"https:\/\/studio.uxpin.com\/ebooks\/guide-to-interactive-wireframing\/\" target=\"_blank\" rel=\"noopener\">The Guide to Interactive Wireframing<\/a> &acirc;&euro;&rdquo; A step-by-step manual on how to build a wireframe and turn it into a lo-fi prototype for the best results. <\/ul><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Wireframes are low-fidelity outlines of a product, showing screen layouts page by page. Their goal, and advantage, is allowing designers to make crucial decisions about navigation, layouts, visual hierarchies, content priority, and information architecture early on. Later on in the design process, changing these factors requires uprooting of the entire design, so the sooner they&acirc;&euro;&trade;re [&hellip;]<\/p>\n","protected":false},"author":127,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[74],"tags":[95,305,1248],"topics":[],"class_list":["post-34063","post","type-post","status-publish","format-standard","hentry","category-tutorials","tag-how-to-2","tag-web-design","tag-wireframes"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v28.6 (Yoast SEO v28.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Get Started With Wireframe Design - Creative Market Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/creativemarket.com\/blog\/how-to-get-started-with-wireframe-design\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Get Started With Wireframe Design\" \/>\n<meta property=\"og:description\" content=\"Wireframes are low-fidelity outlines of a product, showing screen layouts page by page. Their goal, and advantage, is allowing designers to make crucial\" \/>\n<meta property=\"og:url\" content=\"https:\/\/creativemarket.com\/blog\/how-to-get-started-with-wireframe-design\" \/>\n<meta property=\"og:site_name\" content=\"Creative Market Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/crtvmrkt\" \/>\n<meta property=\"article:published_time\" content=\"2016-05-09T19:04:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-11T07:20:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2016\/05\/11001520\/image01.jpg.webp\" \/>\n<meta name=\"author\" content=\"Jerry Cao\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@creativemarket\" \/>\n<meta name=\"twitter:site\" content=\"@creativemarket\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jerry Cao\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/how-to-get-started-with-wireframe-design\",\"url\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/how-to-get-started-with-wireframe-design\",\"name\":\"How to Get Started With Wireframe Design - Creative Market Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/how-to-get-started-with-wireframe-design#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/how-to-get-started-with-wireframe-design#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/d3ui957tjb5bqd.cloudfront.net\\\/uploads\\\/2016\\\/05\\\/11001520\\\/image01.jpg.webp\",\"datePublished\":\"2016-05-09T19:04:12+00:00\",\"dateModified\":\"2024-04-11T07:20:02+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/#\\\/schema\\\/person\\\/d86b9ef1cdda39d39627b885c3705cfb\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/how-to-get-started-with-wireframe-design#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/creativemarket.com\\\/blog\\\/how-to-get-started-with-wireframe-design\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/how-to-get-started-with-wireframe-design#primaryimage\",\"url\":\"https:\\\/\\\/d3ui957tjb5bqd.cloudfront.net\\\/uploads\\\/2016\\\/05\\\/11001520\\\/image01.jpg.webp\",\"contentUrl\":\"https:\\\/\\\/d3ui957tjb5bqd.cloudfront.net\\\/uploads\\\/2016\\\/05\\\/11001520\\\/image01.jpg.webp\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/how-to-get-started-with-wireframe-design#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Get Started With Wireframe Design\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/\",\"name\":\"Creative Market Blog\",\"description\":\"Creative Market Blog\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/creativemarket.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Get Started With Wireframe Design - Creative Market Blog","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:\/\/creativemarket.com\/blog\/how-to-get-started-with-wireframe-design","og_locale":"en_US","og_type":"article","og_title":"How to Get Started With Wireframe Design","og_description":"Wireframes are low-fidelity outlines of a product, showing screen layouts page by page. Their goal, and advantage, is allowing designers to make crucial","og_url":"https:\/\/creativemarket.com\/blog\/how-to-get-started-with-wireframe-design","og_site_name":"Creative Market Blog","article_publisher":"https:\/\/www.facebook.com\/crtvmrkt","article_published_time":"2016-05-09T19:04:12+00:00","article_modified_time":"2024-04-11T07:20:02+00:00","og_image":[{"url":"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2016\/05\/11001520\/image01.jpg.webp","type":"","width":"","height":""}],"author":"Jerry Cao","twitter_card":"summary_large_image","twitter_creator":"@creativemarket","twitter_site":"@creativemarket","twitter_misc":{"Written by":"Jerry Cao","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/creativemarket.com\/blog\/how-to-get-started-with-wireframe-design","url":"https:\/\/creativemarket.com\/blog\/how-to-get-started-with-wireframe-design","name":"How to Get Started With Wireframe Design - Creative Market Blog","isPartOf":{"@id":"https:\/\/creativemarket.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/creativemarket.com\/blog\/how-to-get-started-with-wireframe-design#primaryimage"},"image":{"@id":"https:\/\/creativemarket.com\/blog\/how-to-get-started-with-wireframe-design#primaryimage"},"thumbnailUrl":"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2016\/05\/11001520\/image01.jpg.webp","datePublished":"2016-05-09T19:04:12+00:00","dateModified":"2024-04-11T07:20:02+00:00","author":{"@id":"https:\/\/creativemarket.com\/blog\/#\/schema\/person\/d86b9ef1cdda39d39627b885c3705cfb"},"breadcrumb":{"@id":"https:\/\/creativemarket.com\/blog\/how-to-get-started-with-wireframe-design#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/creativemarket.com\/blog\/how-to-get-started-with-wireframe-design"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/creativemarket.com\/blog\/how-to-get-started-with-wireframe-design#primaryimage","url":"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2016\/05\/11001520\/image01.jpg.webp","contentUrl":"https:\/\/d3ui957tjb5bqd.cloudfront.net\/uploads\/2016\/05\/11001520\/image01.jpg.webp"},{"@type":"BreadcrumbList","@id":"https:\/\/creativemarket.com\/blog\/how-to-get-started-with-wireframe-design#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/creativemarket.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Get Started With Wireframe Design"}]},{"@type":"WebSite","@id":"https:\/\/creativemarket.com\/blog\/#website","url":"https:\/\/creativemarket.com\/blog\/","name":"Creative Market Blog","description":"Creative Market Blog","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/creativemarket.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/posts\/34063","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/users\/127"}],"replies":[{"embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/comments?post=34063"}],"version-history":[{"count":0,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/posts\/34063\/revisions"}],"wp:attachment":[{"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/media?parent=34063"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/categories?post=34063"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/tags?post=34063"},{"taxonomy":"topics","embeddable":true,"href":"https:\/\/creativemarket.com\/blog\/wp-json\/wp\/v2\/topics?post=34063"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}