{"id":11896,"date":"2023-04-03T13:00:00","date_gmt":"2023-04-03T11:00:00","guid":{"rendered":"https:\/\/immune.institute\/?p=11896"},"modified":"2023-04-03T13:00:00","modified_gmt":"2023-04-03T11:00:00","slug":"que-es-un-wireframe-diseno-ux","status":"publish","type":"post","link":"https:\/\/immune.institute\/en\/blog\/que-es-un-wireframe-diseno-ux\/","title":{"rendered":"What is a Wireframe and how is it applied in UX design?"},"content":{"rendered":"<p class=\"wp-block-paragraph\">In the user experience (UX) design industry, one of the most widely used tools for planning and visualising the structure and design of a website or application is the wireframe. If you are new and are just starting to <a href=\"https:\/\/immune.institute\/en\/blog\/estudiar-diseno-ux-ui\/\">discover the world of UX design<\/a> or you are looking to improve your skills, it is important that you understand what a wireframe is and how it can help you to create <strong>more effective interfaces<\/strong> and attractive to your users.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this article, we will explore the basics of wireframing, its benefits and best practices for creating effective wireframes for your UX design projects.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What is a wireframe in UX design?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A wireframe in UX design is a <strong>visual representation <\/strong>simplified structure and design of a web page or application, which is used to plan and communicate the <a href=\"https:\/\/immune.institute\/en\/blog\/rol-ux-ui-interfaces-digitales\/\">layout of the interface elements<\/a>The hierarchy of information and user navigation.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To further elaborate on what a wireframe is, they are usually created at an early stage of the design process and focus on functionality and overall design, without including visual or content details. They can be of <strong>low fidelity<\/strong>i.e. simple sketches that are created by hand or in basic drawing software,<strong> or high fidelity<\/strong>which are more detailed and are created with graphic design tools.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In summary, for those who wonder what a wireframe is, it should be assumed that they are a fundamental tool in UX design, as they allow designers and development teams to work on the same page, avoiding future problems or rework, and guaranteeing an efficient and effective design for the user experience.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">What is a low fidelity, medium fidelity and high fidelity wireframe?<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Low fidelity<\/strong>wireframe: this is the most basic and simplified type of wireframe. It is used to represent the general structure of the design and the layout of the interface elements. They are usually hand-drawn sketches or created with basic drawing software tools. They do not include visual or content details, but focus on functionality and hierarchy of information.<\/li><li><strong>Medium fidelity<\/strong>Medium fidelity wireframes are more detailed and accurate than low fidelity wireframes. They include more visual and content details, such as icons, text, colours and fonts. They are used for <strong>represent the overall design <\/strong>The aim is to define the interface and the location of the most important elements, as well as to define the functionalities and navigation.<\/li><li><strong>High fidelity<\/strong>High fidelity wireframes are the most detailed and accurate. They include all the visual and content elements of the final design, and are used for <strong>represent the final design<\/strong> of the interface. They are very useful for usability testing and for communicating to the <a href=\"https:\/\/immune.institute\/en\/programas\/bootcamp-desarrollo-web\/\">web developers<\/a> the exact design specifications.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">5 differences between mockup and wireframe<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Level of detail<\/strong>wireframes are usually more basic and simplified than mockups. Mockups are more detailed and show a more accurate representation of the final design.<\/li><li><strong>Approach<\/strong>wireframes focus primarily on the functionality and structure of the design, while mockups focus on the visual appearance of the design.<\/li><li><strong>Content<\/strong>Wireframes usually contain generic content and do not include visual details such as images and colours. Mockups, on the other hand, usually include actual content and specific visual elements.<\/li><li><strong>Use<\/strong>wireframes are mainly used to define the structure and flow of the interface, while mockups are used to present the visual design to stakeholders and for usability testing.<\/li><li><strong>Project stage<\/strong>Wireframes are created at the beginning of the UX project, before the final visual design is defined. Mockups are created after the structure and flow of the design has been defined in the wireframe, and are ready to be given a visual appearance.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">What role do wireframes play in the collaboration between designers and developers?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">In order to determine what a wireframe is, it is necessary to internalise that they play a fundamental role in the <strong>collaboration between designers and developers<\/strong> as they provide a clear and detailed visual representation of the interface design, allowing both teams to work on the same page.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Wireframes serve as a reference point for developers, who can use them to better understand the functionalities and structure of the interface. In addition, designers can share them with developers so that they can work together on the implementation of the design and ensure that the final product meets the user's expectations.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Do you want to train in UX Design? IMMUNE is your place<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">In an increasingly digital world, the <a href=\"https:\/\/immune.institute\/en\/programas\/\">training in new technologies<\/a> and UX design is essential for those who want to develop a career in technology and innovation. <a href=\"https:\/\/immune.institute\/en\/\">IMMUNE Technology Institute<\/a> offers training in <strong>cutting-edge in the area of UX\/UI Design<\/strong>with programmes that cover everything from the basics to the latest trends and technologies in the sector, adapted to the needs of the market.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>If you are looking for technology training fill in the form for more information.<\/strong> <\/p>\n\n\n\n<script charset=\"utf-8\" type=\"text\/javascript\" src=\"\/\/js.hsforms.net\/forms\/v2.js\"><\/script>\n<script>\n  hbspt.forms.create({\n    region: \"na1\",\n    portalId: \"6604339\",\n    formId: \"f1916fdf-4d92-44f0-9d0a-ada8ad8b4ea9\"\n  });\n<\/script>","protected":false},"excerpt":{"rendered":"<p>En el sector del dise\u00f1o de experiencia de usuario (UX), una de las herramientas m\u00e1s utilizadas para planificar y visualizar la estructura y el dise\u00f1o de un sitio web o aplicaci\u00f3n es el wireframe. Si eres nuevo y est\u00e1s empezado a descubrir el mundo del dise\u00f1o UX o est\u00e1s buscando mejorar tus habilidades, es importante [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":11900,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_crdt_document":"","footnotes":""},"categories":[1],"tags":[105,68,69],"class_list":["post-11896","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-desarrollo-web","tag-diseno-web","tag-ux-ui"],"acf":[],"_links":{"self":[{"href":"https:\/\/immune.institute\/en\/wp-json\/wp\/v2\/posts\/11896","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/immune.institute\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/immune.institute\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/immune.institute\/en\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/immune.institute\/en\/wp-json\/wp\/v2\/comments?post=11896"}],"version-history":[{"count":0,"href":"https:\/\/immune.institute\/en\/wp-json\/wp\/v2\/posts\/11896\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/immune.institute\/en\/wp-json\/wp\/v2\/media\/11900"}],"wp:attachment":[{"href":"https:\/\/immune.institute\/en\/wp-json\/wp\/v2\/media?parent=11896"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/immune.institute\/en\/wp-json\/wp\/v2\/categories?post=11896"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/immune.institute\/en\/wp-json\/wp\/v2\/tags?post=11896"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}