What Is a Wireframe?<\/h2>\n\n\n\n![\"What](\"https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2021\/08\/shutterstock_164413979-scaled.jpg\")
<\/figure>\n\n\n\n\u201cA wireframe is, ostensibly, a simplified view of a screen, devoid of any aesthetic beyond the barest minimum and the most neutral.\u201d<\/em> \u2014 Daniel M. Brown, in his book Communicating Design<\/a><\/p>\n\n\n\nWireframing is one of the first steps in user interface or user experience design<\/a>. Designers do it primarily to outline the features on each screen. Let\u2019s say you\u2019re building a website for your local baking company. You\u2019ll use a wireframe<\/a> to visually arrange the features\u2014the banner, search bar, sign-up form, product carousel, demo videos, and so on. Depending on how quickly you need it, how detailed it needs to be, etc. you can draw your wireframes on paper or use a digital tool.<\/p>\n\n\n\n![\"how](\"https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2021\/08\/how-to-create-a-wireframe-illustration.png\")
<\/figure>\n\n\n\nWhat Does a Wireframe Include?<\/strong><\/h3>\n\n\n\nThe primary goal of a wireframe is to visually represent the layout of the screen. So, a wireframe would show the arrangement of content, interface elements, navigation, etc. A typical wireframe includes: <\/p>\n\n\n\n
\n- Page layout.<\/strong> Arrangement of visual elements in relation to one another<\/li>\n\n\n\n
- Functions of the site.<\/strong> Video, images, links, etc. (The functionality itself is not yet designed\/developed. It\u2019s simply assigned a place on the wireframe)<\/li>\n\n\n\n
- Relative importance of features.<\/strong> For instance, how big is the banner as compared to the subscription form or the announcements section<\/li>\n\n\n\n
- User journey.<\/strong> What happens when a user clicks on something or fills a form<\/li>\n<\/ul>\n\n\n
Get To Know Other\tDesign Students<\/h4>![\"Jeffrey](\"https:\/\/res.cloudinary.com\/springboard-images\/image\/upload\/v1629203191\/Student%20Success\/Jeffrey_Surban_125x125.png\")
<\/a>Jeffrey Surban<\/p>
UX Designer at Citi<\/p><\/div>
<\/div>Read Story<\/a><\/p><\/div><\/div>![\"Mireya](\"https:\/\/res.cloudinary.com\/springboard-images\/image\/upload\/v1704210902\/Mireya_Luna_headshot.jpg\")
<\/a>Mireya Luna<\/p>
Student at Springboard UI\/UX Design Bootcamp<\/p><\/div>
Read Story<\/a><\/p><\/div><\/div>![\"Parker](\"https:\/\/res.cloudinary.com\/springboard-images\/image\/upload\/v1635255723\/Student%20Success\/Parker_Konz_125x125.png\")
<\/a>Parker Konz<\/p>
Visual Designer at Gorilla Group<\/p><\/div>
Read Story<\/a><\/p><\/div><\/div><\/div><\/div>\n\n\n\nWhat Does a Wireframe Not Include?<\/strong><\/h3>\n\n\n\nIn the website or apps, user interface designers also use mockups, prototypes, high\/low-fidelity designs<\/a>, etc. A wireframe is none of that. So, it does not contain:<\/p>\n\n\n\n\n- Visual design.<\/strong> Fonts, colors, images, branding elements, etc.<\/li>\n\n\n\n
- Interactions.<\/strong> Drop-downs, clickthroughs, hover animation, etc.<\/li>\n\n\n\n
- Content.<\/strong> Designers may sometimes use placeholder text to show how much text can be accommodated, but it\u2019s never the final copy<\/li>\n<\/ul>\n\n\n\n
Why Do Designers Use Wireframes?<\/h2>\n\n\n\n![\"Why](\"https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2021\/08\/Why-Do-Designers-Use-Wireframes.jpg\")
<\/figure>\n\n\n\nA wireframe is the simplest and easiest way to create a design, review with stakeholders, iterate and build a consensus. Designers use it to:<\/p>\n\n\n\n
Make skeletal designs<\/strong>. UI designers quickly draw (on paper or digitally) versions of what might go on the screen. For instance, a business user might say, \u201cI need a large auto-playing video on the home page.\u201d A UI designer will use the wireframe to show what that might look like.<\/p>\n\n\n\nReview the idea<\/strong>. When multiple stakeholders are involved in developing a website\/app, wireframes are used to bring them all on the same page. It also helps answer questions proactively. For instance, in the above example, a developer might want to know if the video is full-width, will the header remain, are there items below the video, etc. A wireframe would already have answered them all.<\/p>\n\n\n\nIterate<\/strong>. Given that a wireframe is skeletal, it lends itself to quick-and-dirty iterations. Designers often bring business\/development teams into the same room and iterate. They move around elements, remove some, add some, etc. in real-time (either on a whiteboard or digitally) to explore options.<\/p>\n\n\n\nBuild consensus<\/strong>. Designers sometimes use wireframes to elicit votes. For instance, they might do two iterations of the same screen, offer two placement options for the same feature, etc. <\/p>\n\n\n\nThe most significant advantage of a wireframe is that it is and looks like a draft. This makes it easy to edit and inexpensive to iterate without additional effort into adjusting visual design or recoding. The scrappy nature of the wireframe makes it easy for people to give feedback. As a result, stakeholders feel more comfortable iterating on a wireframe than they would be on a fully functional mockup or prototype. <\/p>\n\n\n\n
It can be done on paper or digitally. As a result, one needs no design skills to make wireframes. It is common to have business users create a rough wireframe on a piece of paper and bring it to designers to prototype from.<\/p>\n\n\n\n
Wireframing allows designers to set clear boundaries around the website\/app\u2019s features. At the end of the wireframe stage, they will have a precise estimate of the time and effort the project might need.<\/p>\n\n\n\n
What Makes a Good Wireframe?<\/h2>\n\n\n\n![\"Good](\"https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2021\/08\/What-Makes-A-Good-Wireframe-scaled.jpg\")
<\/figure>\n\n\n\nA wireframe\u2019s primary purpose is to bring all stakeholders on the same page to agree on the design. A good wireframe facilitates collaboration and iteration. This means that a good wireframe will not include anything that can distract stakeholders from making decisions about the website\u2019s structure. <\/p>\n\n\n\n
Here\u2019s what it will have instead:<\/p>\n\n\n\n
\n- A focus on the website\/app\u2019s functional purpose and not the visual design<\/li>\n\n\n\n
- Simple, clear, monochrome representation of the website\u2019s features<\/li>\n\n\n\n
- Consistency of features across pages\/screens<\/li>\n\n\n\n
- Annotations to explain\/elaborate on features<\/li>\n\n\n\n
- Map of the user journey from one page to another<\/li>\n<\/ul>\n\n\n\n
How To Create a Wireframe<\/h2>\n\n\n\n![\"How](\"https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2021\/08\/How-To-Create-A-Wireframe-scaled.jpg\")
<\/figure>\n\n\n\n\n\n<\/div>\n\n\n- \n
Do your UX research<\/p>\n
<\/div>\n<\/li>\n- \n
Map the user flow<\/p>\n
<\/div>\n<\/li>\n- \n
Sketch the layout and features<\/p>\n
<\/div>\n<\/li>\n- \n
Review and iterate<\/p>\n
<\/div>\n<\/li>\n- \n
Build on it<\/p>\n
<\/div>\n<\/li>\n<\/ol>\n<\/div>\n\n\n\n\n\n\nIn a UI\/UX designer\u2019s career, wireframing is among the fundamental skills they need to master. With a thorough wireframe design process, you can build a strong foundation for the website or app you\u2019re building. <\/p>\n\n\n\n
Here is the step-by-step guide on how to create good wireframes.<\/p>\n\n\n\n
Step 1: Do your UX research<\/strong><\/h3>\n\n\n\nA wireframe converts an idea for a website\/app into something tangible. Therefore, before designing, you need to know who you\u2019re designing for, what problems it solves, why yours is the best solution. So, begin by conducting thorough research about your users<\/a> and the business. Understand who your user is, what their needs\/wants are, what their fears are, what products they currently use, etc. Designers typically use methods like user persona<\/a> or jobs-to-be-done (JTBD) to create this.<\/p>\n\n\n\nOn the other hand, understand the business you\u2019re building for, the products they offer, the goals they want to achieve, etc. Your wireframe must include features that reconcile the two seamlessly.<\/p>\n\n\n\n
Step 2: Map the user flow<\/strong><\/h3>\n\n\n\n![\"Map](\"https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2021\/08\/Map-the-user-flow-scaled.jpg\")
<\/figure>\n\n\n\nUser flow is the journey of the customer through the app or website. For instance, let us consider a simple e-commerce shopping journey. The user lands on the homepage > uses the search functionality to look for a product > clicks on the first link > lands on the product page > clicks on the \u2018buy now\u2019 button > adds credit card details > order is confirmed > user leaves the website.<\/p>\n\n\n\n
An understanding of a journey like this will help you identify the features you need to add to your pages.<\/p>\n\n\n\n
Step 3: Sketch the layout and features<\/strong><\/h3>\n\n\n\n![\"Sketch](\"https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2021\/08\/Sketch-the-layout-and-features-scaled.jpg\")
<\/figure>\n\n\n\nChoose the right canvas size based on what you\u2019re designing. Then, bring all the elements you want to add to the wireframe and place them on the canvas. Move them around to find the perfect arrangement.<\/p>\n\n\n\n
\n- Organize the information you\u2019re presenting<\/li>\n\n\n\n
- Consider the hierarchy of information\u2014decide what should be more prominent<\/li>\n\n\n\n
- Indicate buttons, links, and other interactive elements<\/li>\n\n\n\n
- Include the static elements like the menu, header, footer, etc.<\/li>\n<\/ul>\n\n\n\n
Typically, designers decide on the fidelity of their wireframe design at this stage. A low-fidelity design is used at the earliest stage and contains very few details. Most often, these are drawn on paper or hand-sketched on a device. A high-fidelity design has a pixel-specific layout and consistent placeholders for images\/text. It is often developed and a low-fidelity design is approved. Of course, there is also a grey area of fidelity in between\u2014commonly known as medium-fidelity designs.<\/p>\n\n\n\n
![\"Create](\"https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2021\/08\/How-To-Create-A-Wireframe-Sketch.gif\")
<\/figure>\n<\/p>\n<\/div><\/div>\n\n\n\n
Source: Jon Moore on Medium<\/a><\/p>\n\n\n\nDepending on the product you\u2019re building, the maturity of your organization\u2019s UX design practice, the scope of work, levels of iterations, etc., choose the fidelity that\u2019s right for you.<\/p>\n\n\n\n
Step 4: Review and iterate<\/strong><\/h3>\n\n\n\nTake your wireframes to the stakeholders: Business users and development teams. You can also perform guerilla usability tests<\/a> with potential users. While collecting feedback, ask pointed questions to collect qualitative and quantitative feedback. If you have multiple variations of the wireframe, invite them to choose the ones they prefer. Bring key stakeholders together to iterate low-fidelity wireframes in real-time.<\/p>\n\n\n\n![\"Guerilla](\"https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2021\/08\/guerilla-usability-tests.png\")
<\/figure>\n\n\n\nRemember that as the user experience designer, your priority is to advocate for the user. Business teams are driven by the company\u2019s goals. Development teams are considering the programming prerogatives. You, as the UX designer<\/a>, must prioritize the end user\u2019s needs and goals.<\/p>\n\n\n\nStep 5: Build on it<\/strong><\/h3>\n\n\n\nOnce the stakeholders agree on the wireframe, build mockups and then prototypes for each screen. <\/p>\n\n\n\n![\"how](\"https:\/\/www.springboard.com\/blog\/wp-content\/uploads\/2021\/08\/how-to-create-a-wireframe-ui-ux-flowchart.png\")
<\/figure>\n\n\n\nWhat Tools Do Designers Use to Create Wireframes?<\/h2>\n\n\n\n
The best part about wireframing is that you can do it on paper with a pen. Many business users also use spreadsheets\u2014merging cells and drawing boxes\u2014to create low-fidelity wireframes. Designers also use visual design tools such as Adobe Photoshop or Illustrator to get the work done. However, none of these tools were made for wireframing and have their limitations. For instance, you might not be able to move features around on a spreadsheet. Or replicate sections automatically.<\/p>\n\n\n\n
It\u2019s for reasons of convenience and efficiency that professional UX designers use wireframing tools. Some of the most popular ones are:<\/p>\n\n\n\n
Sketch<\/strong>: A digital design platform, Sketch is an end-to-end design tool. It allows you to create your own toolkit to design wireframes quickly. It also has a large community of users contributing to the tool\u2019s knowledge base. However, Sketch is a paid app available for the Mac environment only.<\/p>\n\n\n\nFigma<\/strong>: A cross-platform tool, Figma offers a simple UI to create wireframes. It includes collaboration features, third-party plugins, and a range of wireframe templates too. It is available for Mac, Windows, and Web. There is a free version too. <\/p>\n\n\n\nAdobe XD<\/strong>: A newer app on the block, Adobe XD is perfect for designers who are comfortable with the Adobe Suite of products such as Photoshop or Illustrator. It offers a simple and fast interface, pre-built elements, tools for object groups, etc. It is available for Mac and Windows. <\/p>\n\n\n\nBalsamiq<\/strong>: A web-based app with a simple interface, Balsamiq is an exclusive wireframing tool. It comes pre-built with icons and features, reusable symbols, offers drag-and-drop of elements, and prides itself on speed. It\u2019s also available as Windows and Mac desktop apps.<\/p>\n\n\n\nSeveral other tools<\/a> such as Invision Studio, UXPin, Moqups, etc., offer a wide range of functionalities. You can also try some of the best wireframe tools for free before you pick the right one for yourself.<\/p>\n\n\n\nLearn UI\/UX Design With Springboard\u2019s UI\/UX Design Bootcamp<\/h2>\n\n\n\n
Sketching and wireframing is an important module within the Springboard UI\/UX Design Bootcamp<\/a>. Here, you\u2019ll bring your designs to life, first as sketches and then through wireframes. You\u2019ll work with top design tools such as Sketch, Adobe XD, and Figma and learn how to conduct a guerilla usability test to validate your sketches. <\/p>\n\n\n\nIn addition, you\u2019ll learn design thinking, research, ideating, UI, heuristics, interaction design, prototyping, and more. This mentor-led, project-driven program will help you make a seamless transition from a design aspirant to a professional UX designer.<\/p>\n\n\n\n
Since you’re here…
<\/strong>Interested in a career in UX design? Rise to the top of the CV pile when you enroll in our UX Bootcamp<\/a>. Or, take a look at our student reviews<\/a> and test out our free UX course<\/a> to get a feel for our style and results. TL;DR: average starting salaries for our students = $85,440. Let\u2019s do this.<\/p>\n","protected":false},"excerpt":{"rendered":"A wireframe of a website or mobile app is like the blueprint of a building\u2014a clear and simple visual representation of its structure. As a monochrome, two-dimensional rendering, the wireframe is used by user experience (UX) designers as the first step in website or app design. They use it to create the basic structure, collaborate […]<\/p>\n","protected":false},"author":100,"featured_media":12407,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_eb_attr":"","_eb_data_table":"","footnotes":""},"categories":[123],"tags":[],"marketing_tags":[],"class_list":{"0":"post-12370","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-design"},"acf":[],"_links":{"self":[{"href":"https:\/\/www.springboard.com\/blog\/wp-json\/wp\/v2\/posts\/12370"}],"collection":[{"href":"https:\/\/www.springboard.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.springboard.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.springboard.com\/blog\/wp-json\/wp\/v2\/users\/100"}],"replies":[{"embeddable":true,"href":"https:\/\/www.springboard.com\/blog\/wp-json\/wp\/v2\/comments?post=12370"}],"version-history":[{"count":4,"href":"https:\/\/www.springboard.com\/blog\/wp-json\/wp\/v2\/posts\/12370\/revisions"}],"predecessor-version":[{"id":56173,"href":"https:\/\/www.springboard.com\/blog\/wp-json\/wp\/v2\/posts\/12370\/revisions\/56173"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.springboard.com\/blog\/wp-json\/wp\/v2\/media\/12407"}],"wp:attachment":[{"href":"https:\/\/www.springboard.com\/blog\/wp-json\/wp\/v2\/media?parent=12370"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.springboard.com\/blog\/wp-json\/wp\/v2\/categories?post=12370"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.springboard.com\/blog\/wp-json\/wp\/v2\/tags?post=12370"},{"taxonomy":"marketing_tags","embeddable":true,"href":"https:\/\/www.springboard.com\/blog\/wp-json\/wp\/v2\/marketing_tags?post=12370"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<\/figure>\n\n\n\n\u201cA wireframe is, ostensibly, a simplified view of a screen, devoid of any aesthetic beyond the barest minimum and the most neutral.\u201d<\/em> \u2014 Daniel M. Brown, in his book Communicating Design<\/a><\/p>\n\n\n\n Wireframing is one of the first steps in user interface or user experience design<\/a>. Designers do it primarily to outline the features on each screen. Let\u2019s say you\u2019re building a website for your local baking company. You\u2019ll use a wireframe<\/a> to visually arrange the features\u2014the banner, search bar, sign-up form, product carousel, demo videos, and so on. Depending on how quickly you need it, how detailed it needs to be, etc. you can draw your wireframes on paper or use a digital tool.<\/p>\n\n\n\n The primary goal of a wireframe is to visually represent the layout of the screen. So, a wireframe would show the arrangement of content, interface elements, navigation, etc. A typical wireframe includes: <\/p>\n\n\n\n Jeffrey Surban<\/p> UX Designer at Citi<\/p><\/div> Read Story<\/a><\/p><\/div><\/div> Mireya Luna<\/p> Student at Springboard UI\/UX Design Bootcamp<\/p><\/div> Read Story<\/a><\/p><\/div><\/div> Parker Konz<\/p> Visual Designer at Gorilla Group<\/p><\/div> Read Story<\/a><\/p><\/div><\/div><\/div><\/div>\n\n\n\n In the website or apps, user interface designers also use mockups, prototypes, high\/low-fidelity designs<\/a>, etc. A wireframe is none of that. So, it does not contain:<\/p>\n\n\n\n A wireframe is the simplest and easiest way to create a design, review with stakeholders, iterate and build a consensus. Designers use it to:<\/p>\n\n\n\n Make skeletal designs<\/strong>. UI designers quickly draw (on paper or digitally) versions of what might go on the screen. For instance, a business user might say, \u201cI need a large auto-playing video on the home page.\u201d A UI designer will use the wireframe to show what that might look like.<\/p>\n\n\n\n Review the idea<\/strong>. When multiple stakeholders are involved in developing a website\/app, wireframes are used to bring them all on the same page. It also helps answer questions proactively. For instance, in the above example, a developer might want to know if the video is full-width, will the header remain, are there items below the video, etc. A wireframe would already have answered them all.<\/p>\n\n\n\n Iterate<\/strong>. Given that a wireframe is skeletal, it lends itself to quick-and-dirty iterations. Designers often bring business\/development teams into the same room and iterate. They move around elements, remove some, add some, etc. in real-time (either on a whiteboard or digitally) to explore options.<\/p>\n\n\n\n Build consensus<\/strong>. Designers sometimes use wireframes to elicit votes. For instance, they might do two iterations of the same screen, offer two placement options for the same feature, etc. <\/p>\n\n\n\n The most significant advantage of a wireframe is that it is and looks like a draft. This makes it easy to edit and inexpensive to iterate without additional effort into adjusting visual design or recoding. The scrappy nature of the wireframe makes it easy for people to give feedback. As a result, stakeholders feel more comfortable iterating on a wireframe than they would be on a fully functional mockup or prototype. <\/p>\n\n\n\n It can be done on paper or digitally. As a result, one needs no design skills to make wireframes. It is common to have business users create a rough wireframe on a piece of paper and bring it to designers to prototype from.<\/p>\n\n\n\n Wireframing allows designers to set clear boundaries around the website\/app\u2019s features. At the end of the wireframe stage, they will have a precise estimate of the time and effort the project might need.<\/p>\n\n\n\n A wireframe\u2019s primary purpose is to bring all stakeholders on the same page to agree on the design. A good wireframe facilitates collaboration and iteration. This means that a good wireframe will not include anything that can distract stakeholders from making decisions about the website\u2019s structure. <\/p>\n\n\n\n Here\u2019s what it will have instead:<\/p>\n\n\n\n Do your UX research<\/p>\n Map the user flow<\/p>\n Sketch the layout and features<\/p>\n Review and iterate<\/p>\n Build on it<\/p>\n In a UI\/UX designer\u2019s career, wireframing is among the fundamental skills they need to master. With a thorough wireframe design process, you can build a strong foundation for the website or app you\u2019re building. <\/p>\n\n\n\n Here is the step-by-step guide on how to create good wireframes.<\/p>\n\n\n\n A wireframe converts an idea for a website\/app into something tangible. Therefore, before designing, you need to know who you\u2019re designing for, what problems it solves, why yours is the best solution. So, begin by conducting thorough research about your users<\/a> and the business. Understand who your user is, what their needs\/wants are, what their fears are, what products they currently use, etc. Designers typically use methods like user persona<\/a> or jobs-to-be-done (JTBD) to create this.<\/p>\n\n\n\n On the other hand, understand the business you\u2019re building for, the products they offer, the goals they want to achieve, etc. Your wireframe must include features that reconcile the two seamlessly.<\/p>\n\n\n\n User flow is the journey of the customer through the app or website. For instance, let us consider a simple e-commerce shopping journey. The user lands on the homepage > uses the search functionality to look for a product > clicks on the first link > lands on the product page > clicks on the \u2018buy now\u2019 button > adds credit card details > order is confirmed > user leaves the website.<\/p>\n\n\n\n An understanding of a journey like this will help you identify the features you need to add to your pages.<\/p>\n\n\n\n Choose the right canvas size based on what you\u2019re designing. Then, bring all the elements you want to add to the wireframe and place them on the canvas. Move them around to find the perfect arrangement.<\/p>\n\n\n\n Typically, designers decide on the fidelity of their wireframe design at this stage. A low-fidelity design is used at the earliest stage and contains very few details. Most often, these are drawn on paper or hand-sketched on a device. A high-fidelity design has a pixel-specific layout and consistent placeholders for images\/text. It is often developed and a low-fidelity design is approved. Of course, there is also a grey area of fidelity in between\u2014commonly known as medium-fidelity designs.<\/p>\n\n\n\n <\/p>\n<\/div><\/div>\n\n\n\n Source: Jon Moore on Medium<\/a><\/p>\n\n\n\n Depending on the product you\u2019re building, the maturity of your organization\u2019s UX design practice, the scope of work, levels of iterations, etc., choose the fidelity that\u2019s right for you.<\/p>\n\n\n\n Take your wireframes to the stakeholders: Business users and development teams. You can also perform guerilla usability tests<\/a> with potential users. While collecting feedback, ask pointed questions to collect qualitative and quantitative feedback. If you have multiple variations of the wireframe, invite them to choose the ones they prefer. Bring key stakeholders together to iterate low-fidelity wireframes in real-time.<\/p>\n\n\n\n Remember that as the user experience designer, your priority is to advocate for the user. Business teams are driven by the company\u2019s goals. Development teams are considering the programming prerogatives. You, as the UX designer<\/a>, must prioritize the end user\u2019s needs and goals.<\/p>\n\n\n\n Once the stakeholders agree on the wireframe, build mockups and then prototypes for each screen. <\/p>\n\n\n\n The best part about wireframing is that you can do it on paper with a pen. Many business users also use spreadsheets\u2014merging cells and drawing boxes\u2014to create low-fidelity wireframes. Designers also use visual design tools such as Adobe Photoshop or Illustrator to get the work done. However, none of these tools were made for wireframing and have their limitations. For instance, you might not be able to move features around on a spreadsheet. Or replicate sections automatically.<\/p>\n\n\n\n It\u2019s for reasons of convenience and efficiency that professional UX designers use wireframing tools. Some of the most popular ones are:<\/p>\n\n\n\n Sketch<\/strong>: A digital design platform, Sketch is an end-to-end design tool. It allows you to create your own toolkit to design wireframes quickly. It also has a large community of users contributing to the tool\u2019s knowledge base. However, Sketch is a paid app available for the Mac environment only.<\/p>\n\n\n\n Figma<\/strong>: A cross-platform tool, Figma offers a simple UI to create wireframes. It includes collaboration features, third-party plugins, and a range of wireframe templates too. It is available for Mac, Windows, and Web. There is a free version too. <\/p>\n\n\n\n Adobe XD<\/strong>: A newer app on the block, Adobe XD is perfect for designers who are comfortable with the Adobe Suite of products such as Photoshop or Illustrator. It offers a simple and fast interface, pre-built elements, tools for object groups, etc. It is available for Mac and Windows. <\/p>\n\n\n\n Balsamiq<\/strong>: A web-based app with a simple interface, Balsamiq is an exclusive wireframing tool. It comes pre-built with icons and features, reusable symbols, offers drag-and-drop of elements, and prides itself on speed. It\u2019s also available as Windows and Mac desktop apps.<\/p>\n\n\n\n Several other tools<\/a> such as Invision Studio, UXPin, Moqups, etc., offer a wide range of functionalities. You can also try some of the best wireframe tools for free before you pick the right one for yourself.<\/p>\n\n\n\n Sketching and wireframing is an important module within the Springboard UI\/UX Design Bootcamp<\/a>. Here, you\u2019ll bring your designs to life, first as sketches and then through wireframes. You\u2019ll work with top design tools such as Sketch, Adobe XD, and Figma and learn how to conduct a guerilla usability test to validate your sketches. <\/p>\n\n\n\n In addition, you\u2019ll learn design thinking, research, ideating, UI, heuristics, interaction design, prototyping, and more. This mentor-led, project-driven program will help you make a seamless transition from a design aspirant to a professional UX designer.<\/p>\n\n\n\n Since you’re here… A wireframe of a website or mobile app is like the blueprint of a building\u2014a clear and simple visual representation of its structure. As a monochrome, two-dimensional rendering, the wireframe is used by user experience (UX) designers as the first step in website or app design. They use it to create the basic structure, collaborate […]<\/p>\n","protected":false},"author":100,"featured_media":12407,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_eb_attr":"","_eb_data_table":"","footnotes":""},"categories":[123],"tags":[],"marketing_tags":[],"class_list":{"0":"post-12370","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-design"},"acf":[],"_links":{"self":[{"href":"https:\/\/www.springboard.com\/blog\/wp-json\/wp\/v2\/posts\/12370"}],"collection":[{"href":"https:\/\/www.springboard.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.springboard.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.springboard.com\/blog\/wp-json\/wp\/v2\/users\/100"}],"replies":[{"embeddable":true,"href":"https:\/\/www.springboard.com\/blog\/wp-json\/wp\/v2\/comments?post=12370"}],"version-history":[{"count":4,"href":"https:\/\/www.springboard.com\/blog\/wp-json\/wp\/v2\/posts\/12370\/revisions"}],"predecessor-version":[{"id":56173,"href":"https:\/\/www.springboard.com\/blog\/wp-json\/wp\/v2\/posts\/12370\/revisions\/56173"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.springboard.com\/blog\/wp-json\/wp\/v2\/media\/12407"}],"wp:attachment":[{"href":"https:\/\/www.springboard.com\/blog\/wp-json\/wp\/v2\/media?parent=12370"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.springboard.com\/blog\/wp-json\/wp\/v2\/categories?post=12370"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.springboard.com\/blog\/wp-json\/wp\/v2\/tags?post=12370"},{"taxonomy":"marketing_tags","embeddable":true,"href":"https:\/\/www.springboard.com\/blog\/wp-json\/wp\/v2\/marketing_tags?post=12370"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<\/figure>\n\n\n\nWhat Does a Wireframe Include?<\/strong><\/h3>\n\n\n\n
\n
Get To Know Other\tDesign Students<\/h4>
<\/a><\/a><\/a>What Does a Wireframe Not Include?<\/strong><\/h3>\n\n\n\n
\n
Why Do Designers Use Wireframes?<\/h2>\n\n\n\n
<\/figure>\n\n\n\nWhat Makes a Good Wireframe?<\/h2>\n\n\n\n
<\/figure>\n\n\n\n\n
How To Create a Wireframe<\/h2>\n\n\n\n
<\/figure>\n\n\n\n
Step 1: Do your UX research<\/strong><\/h3>\n\n\n\n
Step 2: Map the user flow<\/strong><\/h3>\n\n\n\n
<\/figure>\n\n\n\nStep 3: Sketch the layout and features<\/strong><\/h3>\n\n\n\n
<\/figure>\n\n\n\n\n
<\/figure>Step 4: Review and iterate<\/strong><\/h3>\n\n\n\n
<\/figure>\n\n\n\nStep 5: Build on it<\/strong><\/h3>\n\n\n\n
<\/figure>\n\n\n\nWhat Tools Do Designers Use to Create Wireframes?<\/h2>\n\n\n\n
Learn UI\/UX Design With Springboard\u2019s UI\/UX Design Bootcamp<\/h2>\n\n\n\n
<\/strong>Interested in a career in UX design? Rise to the top of the CV pile when you enroll in our UX Bootcamp<\/a>. Or, take a look at our student reviews<\/a> and test out our free UX course<\/a> to get a feel for our style and results. TL;DR: average starting salaries for our students = $85,440. Let\u2019s do this.<\/p>\n","protected":false},"excerpt":{"rendered":"