{"id":51040,"date":"2023-11-06T10:14:42","date_gmt":"2023-11-06T18:14:42","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=51040"},"modified":"2023-11-20T08:37:11","modified_gmt":"2023-11-20T16:37:11","slug":"uxpin-wireframe-tutorial","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/uxpin-wireframe-tutorial\/","title":{"rendered":"UXPin Wireframe 101 \u2013 A Short Guide for Product Teams"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/11\/uxpin-wireframe-1024x512.png\" alt=\"uxpin wireframe\" class=\"wp-image-51041\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/11\/uxpin-wireframe-1024x512.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/11\/uxpin-wireframe-600x300.png 600w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/11\/uxpin-wireframe-768x384.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/11\/uxpin-wireframe.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Creating wireframes is a critical step in the UX design process, serving as the blueprint for the final product. This guide offers an in-depth look at how to build effective wireframes using UXPin, an end-to-end design tool that stands out for its code-based technology and built-in features.&nbsp;<\/p>\n\n\n\n<p>The article provides a detailed, step-by-step approach, from assembling basic UI elements to incorporating user feedback. Learn how UXPin&#8217;s unique features, like interactive form elements and code-to-design capabilities, can streamline your design process, improve collaboration, and contribute to a more intuitive user experience.<\/p>\n\n\n\n<p><strong>Key takeaways:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>UXPin offers code-based wireframing capabilities that enable designers to create fully interactive and functional wireframes.<\/li>\n\n\n\n<li>UXPin stands apart from other design tools by offering built-in features like design libraries and advanced prototyping capabilities.<\/li>\n\n\n\n<li>UXPin facilitates a seamless transition from wireframing to high-fidelity prototyping, allowing for complex interactions and even API integrations, making it a comprehensive full-stack design solution.<\/li>\n<\/ul>\n\n\n\n<p>Streamline your design process and build wireframes faster with UXPin. <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noreferrer noopener\">Sign up for a free trial<\/a> to explore UXPin&#8217;s full-stack design solution.<\/p>\n\n\n\n<section class=\"try-uxpin-banner\">\n    <div class=\"try-uxpin__container\">\n        <div class=\"try-uxpin__left\">\n            <p class=\"try-uxpin__heading\">Build advanced prototypes<\/p>\n            <p class=\"try-uxpin__text\">Design better products with States, Variables, Auto Layout and more.<\/p>\n            <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noopener\">\n                <button class=\"try-uxpin__button\">Try UXPin<\/button>\n            <\/a>\n        <\/div>\n        <div>\n            <img decoding=\"async\" src=\"https:\/\/uxpin.com\/studio\/wp-content\/themes\/uxpin-juggernaut\/img\/cta-banner-signup.png\" class=\"try-uxpin__image\" alt=\"Try UXPin\">\n        <\/div>\n    <\/div>\n<\/section>\n\n<style>\n.try-uxpin-banner {\n    margin: 40px 0px;\n}\n\n.try-uxpin__container {\n    display: flex;\n    max-width: 689px;\n    height: 210px;\n    padding: 20px;\n    padding-left: 24px;\n    border: 2px solid black;\n    border-radius: 4px;\n    align-items: center;\n    justify-content: space-between;\n    background-color: white;\n    box-shadow: 10px 10px black;\n}\n\n.try-uxpin__left {\n    width: 54%;\n}\n\n\n.try-uxpin__heading {\n    font-size: 28px !important;\n    font-weight: bold;\n}\n\n.try-uxpin__left p {\n    margin: 10px 0px !important;\n    color: black !important;\n}\n\n.try-uxpin__text {\n    margin: 0 !important;\n    font-size: 18px !important;\n    line-height: 22px !important;\n}\n\n.try-uxpin__button {\n    width: 135px;\n    height: 44px;\n    background: black;\n    margin: 10px 0px;\n    padding: 10px 20px;\n    border: none;\n    border-radius: 2px;\n    color: white;\n    font-size: 16px;\n    text-align: center;\n}\n\n.try-uxpin__button:hover {\n    cursor: pointer;\n}\n\n.try-uxpin__image {\n    max-width: 320px !important;\n    height: 200px;\n    margin-right: -21px;\n    margin-bottom: -6px;\n}\n\n@media (max-width: 760px) {\n    .try-uxpin__container {\n        height: auto;\n        margin: 10px;\n        align-items: left;\n    }\n}\n\n@media (max-width: 500px) {\n    .try-uxpin__container {\n        flex-direction: column;\n    }\n\n    .try-uxpin__left {\n        width: 100%;\n        align-items: normal;\n    }\n}\n\n<\/style>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-what-is-a-ux-wireframe\">What is a UX Wireframe?<\/h2>\n\n\n\n<p>A <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/creating-a-wireframe\/\" target=\"_blank\" rel=\"noreferrer noopener\">UX wireframe<\/a> is a low-fidelity visual blueprint representing a user interface&#8217;s underlying framework. Typically devoid of color, graphics, and intricate details, it primarily focuses on space allocation, content prioritization, and intended functionalities.&nbsp;<\/p>\n\n\n\n<p>Designers craft wireframes in the early stages of the design process to communicate the structure of a webpage, app, or system. Their primary purpose is to establish the basic layout and interaction patterns before diving into detailed mockups and hi-fi prototypes.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-what-are-the-benefits-of-wireframing\">What are the Benefits of Wireframing?<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"301\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/01\/mobile-screens.png\" alt=\"mobile screens\" class=\"wp-image-32988\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/01\/mobile-screens.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/01\/mobile-screens-700x281.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p>Wireframing offers a range of benefits that streamline the design process and foster effective communication among team members. Here&#8217;s a rundown of its advantages:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Clarity:<\/strong> Wireframes remove ambiguity by visually representing the layout, providing a clear roadmap for everyone involved.<\/li>\n\n\n\n<li><strong>Efficiency:<\/strong> By resolving issues early, wireframes save time and resources in the later stages of development.<\/li>\n\n\n\n<li><strong>Alignment:<\/strong> Wireframes help <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/cross-functional-collaboration\/\" target=\"_blank\" rel=\"noreferrer noopener\">align stakeholders and team members<\/a> on the project&#8217;s goals and functionalities.<\/li>\n\n\n\n<li><strong>Usability:<\/strong> They provide an opportunity to assess the user experience, ensuring intuitive <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/navigation-ui\/\" target=\"_blank\" rel=\"noreferrer noopener\">navigation<\/a> and <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/web-layout-best-practices-12-timeless-ui-patterns-explained\/\" target=\"_blank\" rel=\"noreferrer noopener\">layout<\/a>.<\/li>\n\n\n\n<li><strong>Collaboration:<\/strong> Wireframes serve as a tool for discussion, allowing designers, developers, and stakeholders to offer early <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/how-do-you-incorporate-feedback-into-your-designs\/\" target=\"_blank\" rel=\"noreferrer noopener\">design feedback<\/a>.<\/li>\n\n\n\n<li><strong>Prioritization:<\/strong> They help identify the most crucial elements of a design, allowing for effective content hierarchy.<\/li>\n\n\n\n<li><strong>Flexibility:<\/strong> Wireframes make it easier to iterate and make changes, serving as a lo-fi model for experimentation.<\/li>\n\n\n\n<li><strong>Architecture: <\/strong>Wireframes provide the foundation for a digital product&#8217;s <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/organizing-information\/\" target=\"_blank\" rel=\"noreferrer noopener\">information architecture<\/a>.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-is-uxpin-the-right-tool-for-wireframing\">Is UXPin the Right Tool for Wireframing?<\/h2>\n\n\n\n<p>UXPin is an end-to-end design tool with excellent wireframing capabilities. Designers have several features to create <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/a-practical-overview-of-interactive-wireframes\/\" target=\"_blank\" rel=\"noreferrer noopener\">interactive wireframes<\/a> effortlessly:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.uxpin.com\/docs\/editor\/elements\/#box\" target=\"_blank\" rel=\"noreferrer noopener\">Box<\/a>: a flexible UI element that allows you to add text<\/li>\n\n\n\n<li><a href=\"https:\/\/www.uxpin.com\/docs\/editor\/elements\/#shapes\" target=\"_blank\" rel=\"noreferrer noopener\">Shapes<\/a>: rectangle, oval, circle, rounded, line, arrow, polygon, and star<\/li>\n\n\n\n<li><a href=\"https:\/\/www.uxpin.com\/docs\/editor\/elements\/#text\" target=\"_blank\" rel=\"noreferrer noopener\">Text<\/a>: basic text block<\/li>\n\n\n\n<li><a href=\"https:\/\/www.uxpin.com\/docs\/editor\/elements\/#forms\" target=\"_blank\" rel=\"noreferrer noopener\">Forms<\/a>: a set of foundational unstyled form elements, including a button, textarea, select\/multi-select, checkbox, and radio button<\/li>\n\n\n\n<li><a href=\"https:\/\/www.uxpin.com\/docs\/editor\/elements\/#hotspot\" target=\"_blank\" rel=\"noreferrer noopener\">Hotspot<\/a>: make any element or a specific location on a UI interactive<\/li>\n\n\n\n<li><a href=\"https:\/\/www.uxpin.com\/docs\/editor\/elements\/#icons\" target=\"_blank\" rel=\"noreferrer noopener\">Icons<\/a>: choose from several icon sets, including Material Design, Fonts Awesome, Retina Icons, and more.<\/li>\n<\/ul>\n\n\n\n<p>Unlike other design tools, UXPin&#8217;s UI elements are interactive by default. For example, all UXPin&#8217;s Form elements are fully functional. You can drag a checkbox or radio onto the canvas, and it already has clickable on\/off interactivity.<\/p>\n\n\n\n<p>These interactive elements allow design teams to gather more data and feedback during the wireframing process before moving to the design process&#8217;s more costly, high-fidelity phase.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-what-is-the-difference-between-uxpin-and-other-wireframing-tools\">What is the Difference Between UXPin and Other Wireframing Tools?<\/h2>\n\n\n\n<p>UXPin&#8217;s most significant differentiating factor is that the platform uses code-based technology. Rather than generating vector graphics like <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/bring-sketch-files-life-iteration-iteration\/\" target=\"_blank\" rel=\"noreferrer noopener\">Sketch<\/a> or <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/components-in-figma-vs-uxpin\/\" target=\"_blank\" rel=\"noreferrer noopener\">Figma<\/a>, UXPin renders HTML, CSS, and Javascript behind the scenes.&nbsp;<\/p>\n\n\n\n<p>This code-based approach gives design teams enhanced functionality to build fully interactive wireframes and prototypes. For example, in image-based tools, an input field is a graphical representation, whereas, in UXPin, it&#8217;s a functional input capable of capturing, storing, and sharing user data.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-built-in-features-vs-plugins\">Built-in features vs. plugins<\/h3>\n\n\n\n<p>Another differentiator is that UXPin offers more features as standard than other wireframing tools, eliminating the need for plugins and extensions. UXPin plans come with <a href=\"https:\/\/www.uxpin.com\/docs\/design-systems\/design-systems\/\" target=\"_blank\" rel=\"noreferrer noopener\">Design Systems<\/a>, built-in design libraries, <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/data-and-content\" target=\"_blank\" rel=\"noreferrer noopener\">Content and Data<\/a>, Fonts (Google and custom), <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/accessibility-features\/\" target=\"_blank\" rel=\"noreferrer noopener\">Accessibility Features<\/a>, and much more\u2013<em>many of which would need plugins with other design tools<\/em>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-code-to-design\">Code-to-design<\/h3>\n\n\n\n<p>UXPin&#8217;s Merge technology allows design teams to import <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/code-to-design-guide\/\" target=\"_blank\" rel=\"noreferrer noopener\">code components into the design process for prototyping<\/a>. Designers can create fully functioning interactive prototypes using the same UI library devs use for the final product.<\/p>\n\n\n\n<p>If your engineering team uses a specific wireframe component library, you can import this into UXPin using Merge. There are also several built-in Merge libraries, including <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/ui-component-library\/\" target=\"_blank\" rel=\"noreferrer noopener\">Material UI, MUI, Ant Design, Fluent UI<\/a>, and UXPin Boilerplate, which you can use to build interactive prototypes\u2013<em>allowing you to go from wireframing to high-fidelity prototyping to test concepts and ideas fast<\/em>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-how-to-build-a-wireframe-in-uxpin\">How to Build a Wireframe in UXPin<\/h2>\n\n\n\n<p>Here are ten steps for building a wireframe in UXPin, including gathering feedback and collaborating with stakeholders.<\/p>\n\n\n\n<p>You will need a UXPin account to follow this step-by-step tutorial. <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noreferrer noopener\">Sign up for a free 14-day trial<\/a> if you don&#8217;t have one.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-1-open-uxpin-and-create-a-new-project\">Step 1: Open UXPin and create a new project<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Open UXPin and click the blue <strong>+ New project<\/strong> button.<\/li>\n\n\n\n<li>Enter a project name and click <strong>Create New Project<\/strong>.<\/li>\n\n\n\n<li>The next screen asks, &#8220;<em>What do you want to start with today?&#8221;<\/em> Click <strong>New prototype<\/strong>.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-2-choose-the-wireframe-s-canvas-size\">Step 2: Choose the wireframe&#8217;s canvas size<\/h3>\n\n\n\n<p>Choose your wireframe&#8217;s <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/canvas\/\" target=\"_blank\" rel=\"noreferrer noopener\">canvas<\/a> size in the <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/interface\/#properties-panel\" target=\"_blank\" rel=\"noreferrer noopener\">Properties Panel<\/a> on the right. UXPin provides a wide selection of standard viewports, including TVs, desktops, tablets, mobile, and wearables, to name a few. Use <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/grid\/\" target=\"_blank\" rel=\"noreferrer noopener\">Grids<\/a> and <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/interface\/#guides\" target=\"_blank\" rel=\"noreferrer noopener\">Guides<\/a> to help maintain horizontal and vertical consistency.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-3-create-pages-for-each-screen\">Step 3: Create pages for each screen<\/h3>\n\n\n\n<p>Unlike Figma or Sketch, which use artboards and frames, UXPin uses a separate <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/interface\/#pages\" target=\"_blank\" rel=\"noreferrer noopener\">page<\/a> for each screen.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Select <strong>Pages &amp; Layers<\/strong> at the bottom of the left sidebar,<\/li>\n\n\n\n<li>Click the <strong>+<\/strong> icon at the top of the sidebar to create a new page. You can also use the <strong>OPTION+N<\/strong> keyboard shortcut.<\/li>\n\n\n\n<li>Double-click on the page name to change it\u2013we&#8217;ve created two pages: Login and Welcome.<\/li>\n<\/ul>\n\n\n\n<p><strong><em>Pro tip:<\/em><\/strong><em> Use the built-in User Flows library to design your user journeys and information architecture to determine the number of screens and navigational layouts for your project.<\/em><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-4-create-wireframe-ui-elements\">Step 4: Create wireframe UI elements<\/h3>\n\n\n\n<p>You can assemble wireframe patterns and layouts using UXPin&#8217;s Shapes, Forms, Boxes, etc. <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/auto-layout\/\" target=\"_blank\" rel=\"noreferrer noopener\">Auto-Layout<\/a> lets you manage group elements effectively, including size, gap, alignment, distribution, and more. Use UXPin&#8217;s <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/components\" target=\"_blank\" rel=\"noreferrer noopener\">Components<\/a> feature to create reusable wireframe elements for faster iterating and maximum consistency.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-5-define-interactions\">Step 5: Define interactions<\/h3>\n\n\n\n<p>We will add a basic navigation interaction from the Login to the Welcome screen for this demonstration.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Click on an element to select it and click <strong>Interactions<\/strong> in the <strong>Properties Panel<\/strong>.<\/li>\n\n\n\n<li>Create a navigation interaction as follows:\n<ul class=\"wp-block-list\">\n<li>Trigger: <strong>Click (Tap)<\/strong><\/li>\n\n\n\n<li>Action: <strong>Go to Page<\/strong><\/li>\n\n\n\n<li>Page: Select <strong>Welcome<\/strong> from the dropdown<\/li>\n\n\n\n<li>Click Add to complete the interaction<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p><em>Learn how to set up <\/em><a href=\"https:\/\/www.uxpin.com\/docs\/editor\/interactions\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em>Interactions<\/em><\/a><em>, including Triggers, Actions, Animations, and Conditions<\/em>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-6-collaborate-and-gather-feedback\">Step 6: Collaborate and gather feedback<\/h3>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-how-to-go-from-wireframe-to-prototype-in-uxpin\">How to go From Wireframe to Prototype in UXPin<\/h2>\n\n\n\n<p>Going from wireframing to prototyping is easy in UXPin. You can design your components from scratch to build mockups or use a design system to generate high-fidelity interactive prototypes quickly.<\/p>\n\n\n\n<p>UXPin provides four key features to enhance your prototyping capability:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.uxpin.com\/docs\/editor\/states\" target=\"_blank\" rel=\"noreferrer noopener\">States<\/a>: allow you to create multiple states for a single UI element and design complex interactive components like menus, drawers, <a href=\"https:\/\/www.uxpin.com\/examples#section-interactive-ui-patterns\" target=\"_blank\" rel=\"noreferrer noopener\">and more<\/a>.<\/li>\n\n\n\n<li><a href=\"https:\/\/www.uxpin.com\/docs\/editor\/variables\/\" target=\"_blank\" rel=\"noreferrer noopener\">Variables<\/a>: capture data from user inputs and create personalized, dynamic user experiences\u2013like a custom welcome message after signing up.<\/li>\n\n\n\n<li><a href=\"https:\/\/www.uxpin.com\/docs\/editor\/expressions\/\" target=\"_blank\" rel=\"noreferrer noopener\">Expressions<\/a>: Javascript-like functions to create complex components and advanced functionality\u2013no code required!<\/li>\n\n\n\n<li><a href=\"https:\/\/www.uxpin.com\/docs\/editor\/interactions\/#conditional-interactions\" target=\"_blank\" rel=\"noreferrer noopener\">Conditional Interactions<\/a>: create if-then and if-else conditions based on user interactions to create dynamic prototypes with multiple outcomes to replicate the final product experience accurately.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-increase-prototyping-complexity-with-apis\">Increase prototyping complexity with APIs<\/h3>\n\n\n\n<p><a href=\"https:\/\/www.uxpin.com\/docs\/how-to\/google-calendar-events\/#connect-your-ifttt-account\" target=\"_blank\" rel=\"noreferrer noopener\">UXPin&#8217;s IFTTT integration<\/a> allows you to connect external products and services through an API connection. For example, adding an appointment to a user&#8217;s calendar or sending an email, like a welcome message.<\/p>\n\n\n\n<p>With UXPin&#8217;s Design Systems, advanced prototyping features, and API capabilities, you can create complex product replicas without technical expertise or input from engineers. These sophisticated prototypes enable you to get meaningful feedback from users and stakeholders to improve product user experiences.<\/p>\n\n\n\n<p>Build wireframes and prototypes faster using the world&#8217;s most advanced product design tool. <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noreferrer noopener\">Sign up for a free trial<\/a> to create your first interactive wireframe with UXPin.<\/p>\n\n\n\n<div class=\"wp-block-button is-style-fill\"><center><a class=\"btn btn-flat btn-large btn-content-width\" href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noopener\">Try UXPin for free<\/a><\/center><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Creating wireframes is a critical step in the UX design process, serving as the blueprint for the final product. This guide offers an in-depth look at how to build effective wireframes using UXPin, an end-to-end design tool that stands out for its code-based technology and built-in features.&nbsp; The article provides a detailed, step-by-step approach, from<\/p>\n","protected":false},"author":3,"featured_media":51041,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,18,11],"tags":[],"class_list":["post-51040","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-process","category-tutorials"],"yoast_title":"","yoast_metadesc":"Learn how to create a wireframe in UXPin, one of the top design tools. Build wireframe without design skills with UXPin.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v18.2.1 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>UXPin Wireframe 101 \u2013 A Short Guide for Product Teams | UXPin<\/title>\n<meta name=\"description\" content=\"Learn how to create a wireframe in UXPin, one of the top design tools. Build wireframe without design skills with UXPin.\" \/>\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.uxpin.com\/studio\/blog\/uxpin-wireframe-tutorial\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"UXPin Wireframe 101 \u2013 A Short Guide for Product Teams\" \/>\n<meta property=\"og:description\" content=\"Learn how to create a wireframe in UXPin, one of the top design tools. Build wireframe without design skills with UXPin.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/uxpin-wireframe-tutorial\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2023-11-06T18:14:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-20T16:37:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/11\/uxpin-wireframe.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"UXPin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@uxpin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"UXPin\" \/>\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\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/uxpin-wireframe-tutorial\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/uxpin-wireframe-tutorial\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"headline\":\"UXPin Wireframe 101 \u2013 A Short Guide for Product Teams\",\"datePublished\":\"2023-11-06T18:14:42+00:00\",\"dateModified\":\"2023-11-20T16:37:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/uxpin-wireframe-tutorial\\\/\"},\"wordCount\":1422,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/uxpin-wireframe-tutorial\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/11\\\/uxpin-wireframe.png\",\"articleSection\":[\"Blog\",\"Process\",\"Tutorials\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/uxpin-wireframe-tutorial\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/uxpin-wireframe-tutorial\\\/\",\"name\":\"UXPin Wireframe 101 \u2013 A Short Guide for Product Teams | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/uxpin-wireframe-tutorial\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/uxpin-wireframe-tutorial\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/11\\\/uxpin-wireframe.png\",\"datePublished\":\"2023-11-06T18:14:42+00:00\",\"dateModified\":\"2023-11-20T16:37:11+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"description\":\"Learn how to create a wireframe in UXPin, one of the top design tools. Build wireframe without design skills with UXPin.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/uxpin-wireframe-tutorial\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/uxpin-wireframe-tutorial\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/uxpin-wireframe-tutorial\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/11\\\/uxpin-wireframe.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/11\\\/uxpin-wireframe.png\",\"width\":1200,\"height\":600,\"caption\":\"uxpin wireframe\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/uxpin-wireframe-tutorial\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"UXPin Wireframe 101 \u2013 A Short Guide for Product Teams\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\",\"name\":\"UXPin\",\"description\":\"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.\",\"sameAs\":[\"http:\\\/\\\/www.uxpin.com\",\"https:\\\/\\\/x.com\\\/@uxpin\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/hello\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"UXPin Wireframe 101 \u2013 A Short Guide for Product Teams | UXPin","description":"Learn how to create a wireframe in UXPin, one of the top design tools. Build wireframe without design skills with UXPin.","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.uxpin.com\/studio\/blog\/uxpin-wireframe-tutorial\/","og_locale":"en_US","og_type":"article","og_title":"UXPin Wireframe 101 \u2013 A Short Guide for Product Teams","og_description":"Learn how to create a wireframe in UXPin, one of the top design tools. Build wireframe without design skills with UXPin.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/uxpin-wireframe-tutorial\/","og_site_name":"Studio by UXPin","article_published_time":"2023-11-06T18:14:42+00:00","article_modified_time":"2023-11-20T16:37:11+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/11\/uxpin-wireframe.png","type":"image\/png"}],"author":"UXPin","twitter_card":"summary_large_image","twitter_creator":"@uxpin","twitter_misc":{"Written by":"UXPin","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/uxpin-wireframe-tutorial\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/uxpin-wireframe-tutorial\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"headline":"UXPin Wireframe 101 \u2013 A Short Guide for Product Teams","datePublished":"2023-11-06T18:14:42+00:00","dateModified":"2023-11-20T16:37:11+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/uxpin-wireframe-tutorial\/"},"wordCount":1422,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/uxpin-wireframe-tutorial\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/11\/uxpin-wireframe.png","articleSection":["Blog","Process","Tutorials"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/uxpin-wireframe-tutorial\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/uxpin-wireframe-tutorial\/","name":"UXPin Wireframe 101 \u2013 A Short Guide for Product Teams | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/uxpin-wireframe-tutorial\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/uxpin-wireframe-tutorial\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/11\/uxpin-wireframe.png","datePublished":"2023-11-06T18:14:42+00:00","dateModified":"2023-11-20T16:37:11+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"description":"Learn how to create a wireframe in UXPin, one of the top design tools. Build wireframe without design skills with UXPin.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/uxpin-wireframe-tutorial\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/uxpin-wireframe-tutorial\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/uxpin-wireframe-tutorial\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/11\/uxpin-wireframe.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/11\/uxpin-wireframe.png","width":1200,"height":600,"caption":"uxpin wireframe"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/uxpin-wireframe-tutorial\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"UXPin Wireframe 101 \u2013 A Short Guide for Product Teams"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e","name":"UXPin","description":"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.","sameAs":["http:\/\/www.uxpin.com","https:\/\/x.com\/@uxpin"],"url":"https:\/\/www.uxpin.com\/studio\/author\/hello\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/51040","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=51040"}],"version-history":[{"count":3,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/51040\/revisions"}],"predecessor-version":[{"id":51119,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/51040\/revisions\/51119"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/51041"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=51040"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=51040"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=51040"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}