{"id":7341,"date":"2022-11-28T08:23:00","date_gmt":"2022-11-28T08:23:00","guid":{"rendered":"https:\/\/or-design.org\/?p=7341"},"modified":"2022-11-28T12:46:39","modified_gmt":"2022-11-28T12:46:39","slug":"wireframe","status":"publish","type":"post","link":"https:\/\/or-design.org\/en\/wireframe\/","title":{"rendered":"Wireframe: \u00bfQu\u00e9 es y cu\u00e1les son sus intereses?"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Wireframe: \u00bfQu\u00e9 es y cu\u00e1les son sus intereses?<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"wireframe\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Este art\u00edculo se centra en el wireframe<\/strong>. \u00bfQuiz\u00e1s no est\u00e9s familiarizado con esta palabra inglesa conocida por dise\u00f1adores y desarrolladores? No te preocupes, te explicamos todo sobre este concepto tan pr\u00e1ctico y popular.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

\u00bfQu\u00e9 es un wireframe?<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Un wireframe<\/strong> es muy \u00fatil en todos los proyectos web. Es simplemente un esquema de la estructura y funcionalidad<\/strong> de la aplicaci\u00f3n m\u00f3vil que se est\u00e1 creando o del sitio web que se est\u00e1 construyendo.<\/p>

Este esquema que muestra la disposici\u00f3n de las partes que componen una p\u00e1gina web<\/strong>, por ejemplo, permite visualizar las zonas de texto, la ubicaci\u00f3n de las im\u00e1genes, los v\u00eddeos y los enlaces, as\u00ed como los distintos elementos gr\u00e1ficos.<\/p>

Pueden estar en papel o en formato digital<\/strong> y se utilizan antes de crear cualquier modelo gr\u00e1fico. Se necesita un plan para construir una casa. Aqu\u00ed es lo mismo: es necesario un plan antes de crear una aplicaci\u00f3n o web para evitar cualquier defecto de construcci\u00f3n.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

Wireframe VS Mock up<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

La principal diferencia entre un wireframe y un mock up<\/strong> es que este \u00faltimo es mucho m\u00e1s est\u00e9tica que el wireframe<\/strong>. Es una maqueta con gr\u00e1ficos simplificados y el mock up toma la estructura esbozada en el wireframe, pero muestra el aspecto que debe tener el producto final.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

Wireframe VS Prototipo<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

\u00bfSabes la diferencia entre este concepto y un prototipo<\/strong>? Ahora te lo explicamos. Un prototipo es un modelo de dise\u00f1o de fidelidad media a alta de la interfaz de usuario final de tu sitio web o producto m\u00f3vil. Es una representaci\u00f3n interactiva m\u00e1s detallada del producto final, que incluye atributos visuales e interacciones.<\/p>

La idea general de un prototipo de alta fidelidad es representar un producto lo m\u00e1s parecido posible al producto final.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

\u00bfCu\u00e1les son los intereses de este esquema?<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Es muy pr\u00e1ctico para facilitar la comunicaci\u00f3n<\/strong> entre todas las partes implicadas en un proyecto de web o app. Es un lenguaje sin ambig\u00fcedades, claro y preciso, para que todos puedan participar en el proyecto. Esto facilita el trabajo en equipo.\u00a0<\/p>

Esta herramienta tambi\u00e9n te permitir\u00e1 ahorrar tiempo<\/strong> al detectar errores o problemas desde el principio, incluso antes de empezar. Es barato y r\u00e1pido de hacer.<\/p>

Das vida a tus ideas mostrando la futura interfaz de la herramienta<\/strong>, a escala real. Es un medio ideal para formalizar las expectativas, necesidades y objetivos del proyecto. Pero tambi\u00e9n para obtener la opini\u00f3n del cliente y las posibles modificaciones necesarias antes de empezar.<\/p>

Por \u00faltimo, ayudan a las distintas partes implicadas a calcular mejor el tiempo de ejecuci\u00f3n del proyecto y, por tanto, a calcular mejor el coste.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Tipos de wireframes<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Wireframe de baja fidelidad<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Son representaciones visuales b\u00e1sicas de la p\u00e1gina web y suelen servir como punto de partida del dise\u00f1o. Como tales, suelen ser bastante toscos, creados sin ning\u00fan sentido de la escala, la cuadr\u00edcula o la precisi\u00f3n de los p\u00edxeles.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

Wireframe de media fidelidad<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Son los m\u00e1s utilizados de los tres, los de fidelidad media, presentan representaciones m\u00e1s precisas del dise\u00f1o. Aunque siguen evitando distracciones como las im\u00e1genes o la tipograf\u00eda, se asignan m\u00e1s detalles a componentes espec\u00edficos y las caracter\u00edsticas se diferencian claramente unas de otras.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

Wireframe de alta fidelidad<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Por \u00faltimo, los de alta fidelidad cuentan con dise\u00f1os espec\u00edficos para cada p\u00edxel. Mientras que un esquema de baja fidelidad puede incluir rellenos de texto en pseudo-latino y cuadros grises rellenados con una “X” para indicar una imagen, los wireframes de alta fidelidad pueden incluir im\u00e1genes reales y contenido escrito relevante.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Si trabajas en el mundo del dise\u00f1o UX \/ UI<\/a> o perteneces al \u00e1rea de desarrollo, sabr\u00e1s lo que son los wireframes\u2026 pero este art\u00edculo puede ser utilizado como ejemplo y argumento cuando empieces un proyecto con un cliente para explicar el papel de un wireframe.<\/p>

Si eres un novato, esperamos que nuestro art\u00edculo haya sido lo suficientemente claro. Cont\u00e1ctanos para m\u00e1s detalles.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"

Este art\u00edculo se centra en el wireframe. \u00bfQuiz\u00e1s no est\u00e9s familiarizado con esta palabra inglesa conocida por dise\u00f1adores y desarrolladores? No te preocupes, te explicamos todo sobre este concepto tan pr\u00e1ctico y popular. \u00bfQu\u00e9 es un wireframe? Un wireframe es muy \u00fatil en todos los proyectos web. Es simplemente un esquema de la estructura y […]<\/p>\n","protected":false},"author":1,"featured_media":7342,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[6],"tags":[],"class_list":["post-7341","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno"],"_links":{"self":[{"href":"https:\/\/or-design.org\/en\/wp-json\/wp\/v2\/posts\/7341","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/or-design.org\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/or-design.org\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/or-design.org\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/or-design.org\/en\/wp-json\/wp\/v2\/comments?post=7341"}],"version-history":[{"count":0,"href":"https:\/\/or-design.org\/en\/wp-json\/wp\/v2\/posts\/7341\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/or-design.org\/en\/wp-json\/wp\/v2\/media\/7342"}],"wp:attachment":[{"href":"https:\/\/or-design.org\/en\/wp-json\/wp\/v2\/media?parent=7341"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/or-design.org\/en\/wp-json\/wp\/v2\/categories?post=7341"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/or-design.org\/en\/wp-json\/wp\/v2\/tags?post=7341"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}