{"id":21658,"date":"2020-01-28T14:44:03","date_gmt":"2020-01-28T14:44:03","guid":{"rendered":"https:\/\/www.arimetrics.com\/glosario-digital\/wireframe"},"modified":"2026-09-15T09:32:07","modified_gmt":"2026-09-15T09:32:07","slug":"wireframe","status":"publish","type":"encyclopedia","link":"https:\/\/www.arimetrics.com\/en\/digital-glossary\/wireframe","title":{"rendered":"Wireframe"},"content":{"rendered":"<p><img decoding=\"async\" class=\"boxpad alignright wp-image-15110 size-full\" src=\"https:\/\/www.arimetrics.com\/wp-content\/uploads\/2020\/01\/wireframe-1.png\" alt=\"Wireframe\" width=\"300\" height=\"300\" style=\"margin-top:0;\" srcset=\"https:\/\/www.arimetrics.com\/wp-content\/uploads\/2020\/01\/wireframe-1.png 300w, https:\/\/www.arimetrics.com\/wp-content\/uploads\/2020\/01\/wireframe-1-150x150.png 150w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><strong>Definition:<\/strong><\/p>\n<p>A <strong>wireframe<\/strong> is a schematic representation of the structure and basic operation of an interface. It shows how content, navigation, and controls are arranged on a page or screen before its visual appearance is defined in detail.<\/p>\n<p>It can be created by hand or with a digital tool and applied to websites, applications, and other interactive products. <strong>Its level of detail depends on the project stage and the decision it needs to support<\/strong>, so not all wireframes have the same finish or purpose.<\/p>\n<p>A wireframe is not the final design. It usually leaves out final colors, typography, and finished images so that the review can focus on hierarchy, flows, and interface functions.<\/p>\n\n<h2>What a wireframe represents<\/h2>\n<p>A wireframe turns requirements and content into a visible structure. <strong>These five elements describe what it represents:<\/strong><\/p>\n<ul>\n<li><strong>Content hierarchy:<\/strong> indicates which information appears first, which elements have greater relevance, and how blocks are grouped.<\/li>\n<li><strong>Layout:<\/strong> defines the approximate position of headers, columns, forms, buttons, images, and other areas of the screen.<\/li>\n<li><strong>Navigation:<\/strong> shows menus, links, and relationships between screens to explain the main flows.<\/li>\n<li><strong>Functions and states:<\/strong> indicates what each control can do and how the interface responds to actions, errors, or empty states.<\/li>\n<li><strong>Annotations:<\/strong> adds explanations about behavior, content, or rules that the drawing cannot express by itself.<\/li>\n<\/ul>\n<p>Fidelity can be low, medium, or high. A low-fidelity sketch makes it possible to explore alternatives quickly, while a more detailed wireframe can specify dimensions, content, and states. <strong>Higher fidelity does not necessarily mean greater validity<\/strong>: the appropriate level is the one that answers the design question without introducing premature detail.<\/p>\n<p>A wireframe should not be confused with a <a href=\"https:\/\/www.arimetrics.com\/en\/digital-glossary\/mockup\">mockup<\/a>, which represents the visual appearance in greater detail, or with a prototype, which simulates interactions to test a flow. The same project can use all three resources at different stages.<\/p>\n<h2>How a wireframe is created and used<\/h2>\n<p>The work begins with the objectives, content, and tasks that the interface must support. <strong>A common process can be organized into six phases:<\/strong><\/p>\n<ol>\n<li><strong>Define the scope:<\/strong> specify the page, screen, or flow to represent and which decisions remain outside it.<\/li>\n<li><strong>Gather requirements and content:<\/strong> identify tasks, information, constraints, and necessary states without relying on placeholder copy when real content affects the design.<\/li>\n<li><strong>Organize the information:<\/strong> establish the hierarchy and group elements according to their relationship and sequence of use.<\/li>\n<li><strong>Draw alternatives:<\/strong> represent several layouts before developing one solution in greater detail.<\/li>\n<li><strong>Review flows and sizes:<\/strong> check navigation, errors, and <a href=\"https:\/\/www.arimetrics.com\/en\/digital-glossary\/responsive\">responsive design<\/a> variants when the product will be used on different screens.<\/li>\n<li><strong>Document and share:<\/strong> add annotations, identify the version, and record decisions so that design, content, and development interpret the layout in the same way.<\/li>\n<\/ol>\n<p>A wireframe can be created with paper, a whiteboard, a diagramming tool, or an interface design application. <strong>The tool does not determine the quality of the result<\/strong>; what matters is a clear problem, correspondence with the content, and the ability to review decisions.<\/p>\n<p>It can serve as a reference during copywriting, visual design, and development. However, it should not be treated as a complete specification if it does not document behaviors, data, accessibility, and exceptions that affect implementation.<\/p>\n<h2>Current tools for creating wireframes<\/h2>\n<p>Wireframes can be produced with specialized tools or with design applications and collaborative whiteboards that include components and templates. <strong>Five currently available options are:<\/strong><\/p>\n<ul>\n<li><strong>Figma:<\/strong> supports wireframes, component systems, and prototypes within shared collaborative files.<\/li>\n<li><strong>Balsamiq:<\/strong> focuses on low-fidelity wireframing and uses sketch-like components to keep the review centered on structure.<\/li>\n<li><strong>Axure RP:<\/strong> combines diagrams, wireframes, and prototypes with interactions, variables, and documentation for more complex flows.<\/li>\n<li><strong>Sketch:<\/strong> supports interface design, reusable components, and the development of layouts into more detailed proposals and prototypes.<\/li>\n<li><strong>Miro:<\/strong> provides a collaborative whiteboard with templates and components for presenting wireframes alongside flows, notes, and other project materials.<\/li>\n<\/ul>\n<p>The choice depends on the required fidelity, interaction complexity, collaboration, and delivery format. <strong>Using a tool with more features does not automatically improve a wireframe<\/strong> if its scope and represented decisions are unclear.<\/p>\n<h2>Advantages and limitations of wireframes<\/h2>\n<p>Wireframes make it possible to discuss structure before investing work in visual or technical details. <strong>They help different participants compare alternatives and detect omissions<\/strong>, such as an action with no way forward, content with no allocated space, or a flow that does not account for errors.<\/p>\n<p>They also help separate conversations. Hierarchy and functions can be reviewed without color or typography displacing the analysis. This separation is useful within a <a href=\"https:\/\/www.arimetrics.com\/en\/digital-glossary\/user-experience\">user experience<\/a> process, but it does not guarantee that the proposal addresses real needs.<\/p>\n<p>A simplified layout can hide problems involving content length, translation, variable data, empty states, or use with assistive technologies. <strong>Representative copy and components should be included when they affect space, comprehension, or accessibility<\/strong>, even in a low-fidelity wireframe.<\/p>\n<p>The document also does not prove that a flow is easy to use. Expert reviews, user testing, and interactive prototypes answer questions that a static wireframe cannot resolve by itself.<\/p>\n<p>The value of a wireframe depends on keeping it connected to project decisions. <strong>An outdated or unannotated version can lead to contradictory interpretations<\/strong>, so its scope, date, and status should be identified before it is used as a reference.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>What a wireframe is, what it represents, how it is created, which current tools are available, and its advantages and limitations.<\/p>\n","protected":false},"author":7,"featured_media":79649,"template":"","encyclopedia-tag":[1285],"class_list":["post-21658","encyclopedia","type-encyclopedia","status-publish","has-post-thumbnail","hentry","encyclopedia-tag-prototyping"],"_links":{"self":[{"href":"https:\/\/www.arimetrics.com\/en\/wp-json\/wp\/v2\/encyclopedia\/21658","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.arimetrics.com\/en\/wp-json\/wp\/v2\/encyclopedia"}],"about":[{"href":"https:\/\/www.arimetrics.com\/en\/wp-json\/wp\/v2\/types\/encyclopedia"}],"author":[{"embeddable":true,"href":"https:\/\/www.arimetrics.com\/en\/wp-json\/wp\/v2\/users\/7"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.arimetrics.com\/en\/wp-json\/wp\/v2\/media\/79649"}],"wp:attachment":[{"href":"https:\/\/www.arimetrics.com\/en\/wp-json\/wp\/v2\/media?parent=21658"}],"wp:term":[{"taxonomy":"encyclopedia-tag","embeddable":true,"href":"https:\/\/www.arimetrics.com\/en\/wp-json\/wp\/v2\/encyclopedia-tag?post=21658"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}