{"id":27728,"date":"2024-10-08T08:08:00","date_gmt":"2024-10-08T06:08:00","guid":{"rendered":"https:\/\/acumbamail.com\/blog\/?p=27728"},"modified":"2024-10-07T13:25:05","modified_gmt":"2024-10-07T11:25:05","slug":"diferencias-wireframes-mockups-prototipos","status":"publish","type":"post","link":"https:\/\/acumbamail.com\/blog\/diferencias-wireframes-mockups-prototipos\/","title":{"rendered":"Dise\u00f1o UX\/UI: diferencias entre wireframes, mockups y prototipos"},"content":{"rendered":"\n

Si est\u00e1s relacionado con el dise\u00f1o de interfaz y experiencia de usuario<\/a> te sonar\u00e1n los t\u00e9rminos \u201cwireframes\u201d, \u201cprototipos\u201d y \u201cmockups\u201d, ya que son partes esenciales de este tipo de proyectos. A menudo, estos t\u00e9rminos se confunden o se utilizan indistintamente, y aunque puedan presentar similitudes, cada uno cumple una funci\u00f3n espec\u00edfica. <\/p>\n\n\n\n

Hoy vamos a aclarar las diferencias clave entre los tres elementos y su importancia en cada etapa.<\/p>\n\n\n\n\n\n

\u00bfQu\u00e9 son los wireframes?<\/h2>\n\n\n\n

Los wireframes son la primera estructura b\u00e1sica para esbozar una interfaz de usuario. Es una forma r\u00e1pida y simplificada de la idea inicial del dise\u00f1o. Por ello se usa durante las primeras etapas. Nos da un punto de partida y una referencia sobre el layout<\/em> sin entrar en detalles como colores, im\u00e1genes, tipograf\u00eda, look and feel… En esta fase, son los dise\u00f1adores UX o los Product Managers los que trabajan en los wireframes que posteriormente entregar\u00e1n a los dise\u00f1adores UI y programadores.<\/p>\n\n\n\n

La idea de los wireframes es usar su sencillez y esquematizaci\u00f3n para poder tener un primer feedback r\u00e1pido sobre las ideas que se han propuesto, as\u00ed que lo que m\u00e1s sentido tiene es usarlos como primeros pasos del proyecto.<\/p>\n\n\n

\n
\"wireframes\"<\/figure>\n<\/div>\n\n\n

Algunas de sus caracter\u00edsticas claves son:<\/p>\n\n\n\n

    \n
  • Esqueleto del dise\u00f1o<\/strong>: Los wireframes son el esqueleto de la interfaz, presentando una visi\u00f3n general de c\u00f3mo los elementos estar\u00e1n organizados en la p\u00e1gina.<\/li>\n<\/ul>\n\n\n\n
      \n
    • Simplicidad visual<\/strong>: Normalmente est\u00e1n compuestos por cajas, l\u00edneas y formas b\u00e1sicas que indican d\u00f3nde se colocar\u00e1n los distintos componentes (botones, men\u00fas, campos de texto, etc.).<\/li>\n<\/ul>\n\n\n\n
        \n
      • Foco en la funcionalidad<\/strong>: Los wireframes se centran en c\u00f3mo se estructurar\u00e1 la informaci\u00f3n, c\u00f3mo interactuar\u00e1n los usuarios con la interfaz y c\u00f3mo responder\u00e1.<\/li>\n<\/ul>\n\n\n\n
          \n
        • Utilizados en la fase de ideaci\u00f3n<\/strong>: Son los primeros bocetos que se crean para explorar diferentes disposiciones y flujos de usuario.<\/li>\n<\/ul>\n\n\n\n

          Entre sus beneficios podemos encontrar:<\/p>\n\n\n\n

            \n
          • Rapidez y bajo costo<\/strong>: Al ser simples y sin detalles gr\u00e1ficos, los wireframes pueden desarrollarse r\u00e1pidamente, lo que facilita la iteraci\u00f3n y retroalimentaci\u00f3n temprana.<\/li>\n<\/ul>\n\n\n\n
              \n
            • Enfoque en la experiencia de usuario (UX)<\/strong>: Al evitar distracciones visuales, nos podemos centrar en la funcionalidad y el recorrido que realizar\u00e1 el usuario.<\/li>\n<\/ul>\n\n\n\n
                \n
              • Facilita la comunicaci\u00f3n<\/strong>: Son una herramienta eficaz para comunicar ideas y flujos a equipos de desarrollo y clientes, sin complicaciones visuales.<\/li>\n<\/ul>\n\n\n\n

                Los wireframes se pueden llevar a cabo de diferentes maneras. Puedes esbozarlos sobre una hoja de papel, o usar softwares como Figma, Miro, Photoshop o Illustrator. Usa lo que m\u00e1s c\u00f3modo te resulte, ya que los wireframes suelen tener muchas iteraciones. Por esta misma raz\u00f3n es por lo que no nos centramos en la est\u00e9tica, ya que cuanto m\u00e1s complicado y “acabado” est\u00e9 el dise\u00f1o m\u00e1s tedioso es realizar cambios.<\/p>\n\n\n

                \n
                \"diferencias<\/figure>\n<\/div>\n\n\n

                Por \u00faltimo me gustar\u00eda se\u00f1alar que tenemos diferentes “niveles” de wireframes que se dividen seg\u00fan el grado de fidelidad. Cuanto m\u00e1s baja sea la fidelidad, m\u00e1s esquem\u00e1tico ser\u00e1 y cuanto m\u00e1s alta sea la fidelidad m\u00e1s se parecer\u00e1 al producto final, llegando al nivel de mockup, del que hablaremos a continuaci\u00f3n. Seg\u00fan vayamos haciendo iteraciones de los wireframes, m\u00e1s los iremos puliendo y m\u00e1s nos iremos acercando al dise\u00f1o definitivo.<\/p>\n\n\n\n

                \u00bfQu\u00e9 son los mockup?<\/h2>\n\n\n\n

                Los mockups son las representaciones est\u00e1ticas que m\u00e1s se acercan a lo que ser\u00e1 el dise\u00f1o definitivo en su entorno real. Los mockups, a diferencia de los wireframes, s\u00ed incluyen todos los elementos visuales necesarios para obtener una visi\u00f3n realista de la interfaz.<\/p>\n\n\n\n

                Tambi\u00e9n son muy usados en otras disciplinas de dise\u00f1o gr\u00e1fico, como en el branding, donde es muy normal encontrar mockups para tarjetas de visita, marchandising, papeler\u00eda…<\/p>\n\n\n

                \n
                \"mockups\"<\/figure>\n<\/div>\n\n\n

                Una vez que los wireframes determinen la estructura b\u00e1sica del dise\u00f1o podemos empezar a “rellenar” la interfaz con todos los detalles visuales que hemos mencionado. En este momento es en el que ajustaremos todos los aspectos est\u00e9ticos, asegur\u00e1ndonos de que se cumplen las directrices de nuestra marca.<\/p>\n\n\n\n

                Algunas de sus caracter\u00edsticas son:<\/p>\n\n\n\n

                  \n
                • Dise\u00f1o visual detallado<\/strong>: Los mockups presentan la interfaz en su estado final o casi final, con todos los elementos visuales definidos, incluidos colores, fuentes y estilos.<\/li>\n<\/ul>\n\n\n\n
                    \n
                  • Sin interactividad<\/strong>: A pesar de ser muy detallados en lo visual, los mockups no son interactivos.<\/li>\n<\/ul>\n\n\n\n
                      \n
                    • Fidelidad alta<\/strong>: Son una representaci\u00f3n exacta de c\u00f3mo se ver\u00e1 el producto cuando est\u00e9 terminado, lo que los hace ideales para mostrar a los stakeholders antes de programar.<\/li>\n<\/ul>\n\n\n
                      \n
                      \"diferencias<\/figure>\n<\/div>\n\n\n

                      Entre sus beneficiones tenemos:<\/p>\n\n\n\n

                        \n
                      • Claridad visual<\/strong>: Los mockups permiten que se vea el dise\u00f1o exactamente como se ver\u00e1 el producto antes de comenzar el desarrollo. Esto ayuda a detectar problemas de dise\u00f1o que podr\u00edan no haber sido evidentes en los wireframes.<\/li>\n<\/ul>\n\n\n\n
                          \n
                        • Feedback<\/strong>: Los detalles visuales permiten recibir comentarios m\u00e1s espec\u00edficos sobre elementos como el uso del color, la legibilidad, o la jerarqu\u00eda visual, lo que puede ser crucial para realizar ajustes antes de la fase de prototipo o desarrollo.<\/li>\n<\/ul>\n\n\n\n
                            \n
                          • Aprobaci\u00f3n de dise\u00f1o<\/strong>: Dado que los mockups representan fielmente la apariencia final del producto, son una herramienta eficaz para obtener la aprobaci\u00f3n final del dise\u00f1o por parte de los clientes o partes interesadas.<\/mark><\/li>\n<\/ul>\n\n\n\n

                            \u00bfQu\u00e9 son los Prototipos?<\/strong><\/h2>\n\n\n\n

                            Ya hemos dado alguna pista sobre cu\u00e1l es la principal cualidad de los prototipos y lo que los diferencia de los wireframes y los mockups: la interactividad. Los wireframes y los mockups son representaciones est\u00e1ticas y no incluyen elementos interactivos propios de algunos productos digitales. Los prototipos<\/strong> son representaciones interactivas que permiten a los usuarios interactuar con la interfaz de forma limitada y controlada para probar la funcionalidad y el flujo de trabajo y as\u00ed identificar errores y \u00e1reas de mejora.<\/strong><\/p>\n\n\n

                            \n
                            \"prototipos\"<\/figure>\n<\/div>\n\n\n

                            Es el paso m\u00e1s avanzado antes de empezar con la etapa de desarrollo. Es la herramienta perfecta para comprobar c\u00f3mo reaccionar\u00e1n los usuarios ante la interfaz o si buscas realizar pruebas de usabilidad.<\/p>\n\n\n\n

                            Algunas de sus caracter\u00edsticas son:<\/p>\n\n\n\n

                              \n
                            • Interactividad<\/strong>: Los prototipos ofrecen un nivel de funcionalidad que permite a los usuarios hacer clic en botones, navegar entre pantallas, y simular el uso real del producto.<\/li>\n<\/ul>\n\n\n\n
                                \n
                              • Experiencia cercana al producto final<\/strong>: Aunque no incluyen todas las funciones de la versi\u00f3n final, los prototipos proporcionan una experiencia de usuario muy cercana a c\u00f3mo funcionar\u00e1 el producto.<\/li>\n<\/ul>\n\n\n\n
                                  \n
                                • Puede variar en fidelidad<\/strong>: Al igual que los wireframes, los prototipos pueden ser de baja, media o alta fidelidad, dependiendo de cu\u00e1nto se acerquen al producto final. Pueden ir desde un simple flujo de navegaci\u00f3n hasta un modelo interactivo completamente funcional.<\/li>\n<\/ul>\n\n\n\n
                                    \n
                                  • Testeo de usabilidad<\/strong>: Los prototipos son ideales para realizar pruebas de usabilidad con usuarios, ya que permiten observar c\u00f3mo interact\u00faan con la interfaz antes de que el producto est\u00e9 completamente desarrollado.<\/li>\n<\/ul>\n\n\n\n

                                    Entre sus beneficios podemos encontrar:<\/p>\n\n\n\n

                                      \n
                                    • Validaci\u00f3n temprana<\/strong>: Permiten probar el flujo y la interacci\u00f3n del usuario, lo que ayuda a identificar problemas de usabilidad o posibles confusiones antes de que se invierta tiempo y recursos en el desarrollo.<\/li>\n<\/ul>\n\n\n\n
                                        \n
                                      • Retroalimentaci\u00f3n valiosa<\/strong>: Al proporcionar una experiencia casi real, los prototipos son \u00fatiles para recoger feedback de usuarios reales, lo que es esencial para mejorar la funcionalidad y la experiencia.<\/li>\n<\/ul>\n\n\n\n
                                          \n
                                        • Ahorro de costos en desarrollo<\/strong>: Al probar con prototipos antes de comenzar con la codificaci\u00f3n, se pueden corregir errores o hacer ajustes sin necesidad de reescribir c\u00f3digo, lo que reduce significativamente los costos.<\/li>\n<\/ul>\n\n\n
                                          \n
                                          \"prototipos\"<\/figure>\n<\/div>\n\n\n

                                          Hay programas como Figma<\/strong>, en los que puedes crear prototipos a partir de un mockups sin tener que entrar a tocar c\u00f3digo.<\/p>\n\n\n\n

                                          Herramientas populares<\/strong><\/h2>\n\n\n\n

                                          Wireframes:<\/p>\n\n\n\n

                                            \n
                                          • Balsamiq<\/strong>: Popular por su simplicidad y enfoque en wireframes de baja fidelidad.<\/li>\n\n\n\n
                                          • Sketch<\/strong>: Herramienta vers\u00e1til que permite crear wireframes b\u00e1sicos y luego evolucionarlos a mockups o prototipos.<\/li>\n\n\n\n
                                          • Figma<\/strong>: Con colaboraci\u00f3n en tiempo real.<\/li>\n<\/ul>\n\n\n\n

                                            Mockups:<\/p>\n\n\n\n

                                            \n
                                              \n
                                            • Adobe XD<\/strong>: Excelente para crear mockups de alta fidelidad.<\/li>\n\n\n\n
                                            • Figma<\/strong>: Adem\u00e1s de ser \u00fatil para wireframes, Figma permite dise\u00f1ar mockups con gran precisi\u00f3n visual.<\/li>\n\n\n\n
                                            • InVision<\/strong>: Permite crear mockups detallados y recibir comentarios en tiempo real.<\/li>\n<\/ul>\n<\/blockquote>\n\n\n\n

                                              Prototipos:<\/p>\n\n\n\n

                                                \n
                                              • Figma<\/strong>: Herramienta todo-en-uno que permite crear prototipos interactivos junto con wireframes y mockups.<\/li>\n\n\n\n
                                              • InVision<\/strong>: Conocido por sus potentes herramientas de prototipado y pruebas de usuario.<\/li>\n\n\n\n
                                              • Axure<\/strong>: Ideal para prototipos de alta fidelidad con funcionalidad compleja y pruebas de usabilidad.<\/li>\n<\/ul>\n\n\n
                                                \n
                                                \"Figma\"<\/figure>\n<\/div>\n\n\n

                                                Conclusi\u00f3n<\/h2>\n\n\n\n

                                                Como ves, aunque cada uno de ellos tengan elementos similares, hay diferencias que los hacen m\u00e1s o menos aptos seg\u00fan en qu\u00e9 fase del desarrollo del proyecto estemos. Entender cu\u00e1ndo y c\u00f3mo utilizarlos adecuadamente puede marcar la diferencia entre un producto bien dise\u00f1ado y uno que no satisface las expectativas del usuario o del cliente.<\/p>\n","protected":false},"excerpt":{"rendered":"

                                                Si est\u00e1s relacionado con el dise\u00f1o de interfaz y experiencia de usuario te sonar\u00e1n los t\u00e9rminos \u201cwireframes\u201d, \u201cprototipos\u201d y \u201cmockups\u201d, ya que son partes esenciales de este tipo de proyectos. A menudo, estos t\u00e9rminos se confunden o se utilizan indistintamente, y aunque puedan presentar similitudes, cada uno cumple una funci\u00f3n espec\u00edfica. Hoy vamos a aclarar […]<\/p>\n","protected":false},"author":32,"featured_media":27746,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1632],"tags":[],"class_list":["post-27728","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno"],"yoast_head":"\nDise\u00f1o UX\/UI: diferencias entre wireframes, mockups y prototipos<\/title>\n<meta name=\"description\" content=\"\u00bfQu\u00e9 diferencia hay entre los t\u00e9rminos \u201cwireframes\u201d, \u201cprototipos\u201d y \u201cmockup\u201d cuando hablamos de dise\u00f1o de interfaz y experiencia de usuario?\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/acumbamail.com\/blog\/diferencias-wireframes-mockups-prototipos\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Dise\u00f1o UX\/UI: diferencias entre wireframes, mockups y prototipos\" \/>\n<meta property=\"og:description\" content=\"\u00bfQu\u00e9 diferencia hay entre los t\u00e9rminos \u201cwireframes\u201d, \u201cprototipos\u201d y \u201cmockup\u201d cuando hablamos de dise\u00f1o de interfaz y experiencia de usuario?\" \/>\n<meta property=\"og:url\" content=\"https:\/\/acumbamail.com\/blog\/diferencias-wireframes-mockups-prototipos\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog de Acumbamail\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Acumbamail\" \/>\n<meta property=\"article:published_time\" content=\"2024-10-08T06:08:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/acumbamail.com\/blog\/wp-content\/uploads\/2024\/10\/wireframes-mockups-prototipos.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"941\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Roc\u00edo Cort\u00e1zar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/acumbamail.com\/blog\/wp-content\/uploads\/2024\/10\/wireframes-mockups-prototipos.png\" \/>\n<meta name=\"twitter:creator\" content=\"@acumbamail\" \/>\n<meta name=\"twitter:site\" content=\"@acumbamail\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Roc\u00edo Cort\u00e1zar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/acumbamail.com\/blog\/diferencias-wireframes-mockups-prototipos\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/acumbamail.com\/blog\/diferencias-wireframes-mockups-prototipos\/\"},\"author\":{\"name\":\"Roc\u00edo Cort\u00e1zar\",\"@id\":\"https:\/\/acumbamail.com\/blog\/#\/schema\/person\/682b13d7094fed4668a0be2afa123190\"},\"headline\":\"Dise\u00f1o UX\/UI: diferencias entre wireframes, mockups y prototipos\",\"datePublished\":\"2024-10-08T06:08:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/acumbamail.com\/blog\/diferencias-wireframes-mockups-prototipos\/\"},\"wordCount\":1482,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/acumbamail.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/acumbamail.com\/blog\/diferencias-wireframes-mockups-prototipos\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/acumbamail.com\/blog\/wp-content\/uploads\/2024\/10\/wireframes-mockups-prototipos.svg\",\"articleSection\":[\"Dise\u00f1o Gr\u00e1fico\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/acumbamail.com\/blog\/diferencias-wireframes-mockups-prototipos\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/acumbamail.com\/blog\/diferencias-wireframes-mockups-prototipos\/\",\"url\":\"https:\/\/acumbamail.com\/blog\/diferencias-wireframes-mockups-prototipos\/\",\"name\":\"Dise\u00f1o UX\/UI: diferencias entre wireframes, mockups y prototipos\",\"isPartOf\":{\"@id\":\"https:\/\/acumbamail.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/acumbamail.com\/blog\/diferencias-wireframes-mockups-prototipos\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/acumbamail.com\/blog\/diferencias-wireframes-mockups-prototipos\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/acumbamail.com\/blog\/wp-content\/uploads\/2024\/10\/wireframes-mockups-prototipos.svg\",\"datePublished\":\"2024-10-08T06:08:00+00:00\",\"description\":\"\u00bfQu\u00e9 diferencia hay entre los t\u00e9rminos \u201cwireframes\u201d, \u201cprototipos\u201d y \u201cmockup\u201d cuando hablamos de dise\u00f1o de interfaz y experiencia de usuario?\",\"breadcrumb\":{\"@id\":\"https:\/\/acumbamail.com\/blog\/diferencias-wireframes-mockups-prototipos\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/acumbamail.com\/blog\/diferencias-wireframes-mockups-prototipos\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/acumbamail.com\/blog\/diferencias-wireframes-mockups-prototipos\/#primaryimage\",\"url\":\"https:\/\/acumbamail.com\/blog\/wp-content\/uploads\/2024\/10\/wireframes-mockups-prototipos.svg\",\"contentUrl\":\"https:\/\/acumbamail.com\/blog\/wp-content\/uploads\/2024\/10\/wireframes-mockups-prototipos.svg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/acumbamail.com\/blog\/diferencias-wireframes-mockups-prototipos\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog Acumbamail\",\"item\":\"https:\/\/acumbamail.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Dise\u00f1o Gr\u00e1fico\",\"item\":\"https:\/\/acumbamail.com\/blog\/category\/diseno\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Dise\u00f1o UX\/UI: diferencias entre wireframes, mockups y prototipos\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/acumbamail.com\/blog\/#website\",\"url\":\"https:\/\/acumbamail.com\/blog\/\",\"name\":\"Blog de Acumbamail\",\"description\":\"Blog sobre email marketing y marketing online\",\"publisher\":{\"@id\":\"https:\/\/acumbamail.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/acumbamail.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/acumbamail.com\/blog\/#organization\",\"name\":\"Acumbamail\",\"url\":\"https:\/\/acumbamail.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/acumbamail.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/acumbamail.com\/blog\/wp-content\/uploads\/2022\/05\/acumbamail-black-logo.9f7ef42753fc.svg\",\"contentUrl\":\"https:\/\/acumbamail.com\/blog\/wp-content\/uploads\/2022\/05\/acumbamail-black-logo.9f7ef42753fc.svg\",\"width\":1,\"height\":1,\"caption\":\"Acumbamail\"},\"image\":{\"@id\":\"https:\/\/acumbamail.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Acumbamail\",\"https:\/\/x.com\/acumbamail\",\"https:\/\/es.linkedin.com\/company\/acumbamail\",\"https:\/\/www.youtube.com\/channel\/UCTBXceaOBLUqC0bdUXc2PDA\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/acumbamail.com\/blog\/#\/schema\/person\/682b13d7094fed4668a0be2afa123190\",\"name\":\"Roc\u00edo Cort\u00e1zar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/acumbamail.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/acumbamail.com\/blog\/wp-content\/uploads\/2022\/04\/rocio.svg\",\"contentUrl\":\"https:\/\/acumbamail.com\/blog\/wp-content\/uploads\/2022\/04\/rocio.svg\",\"caption\":\"Roc\u00edo Cort\u00e1zar\"},\"description\":\"Dise\u00f1adora gr\u00e1fica en Acumbamail y creo que tu logo sigue siendo demasiado peque\u00f1o (es broma).\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/rociocortazar\"],\"url\":\"https:\/\/acumbamail.com\/blog\/author\/rocio-cortazar\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Dise\u00f1o UX\/UI: diferencias entre wireframes, mockups y prototipos","description":"\u00bfQu\u00e9 diferencia hay entre los t\u00e9rminos \u201cwireframes\u201d, \u201cprototipos\u201d y \u201cmockup\u201d cuando hablamos de dise\u00f1o de interfaz y experiencia de usuario?","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:\/\/acumbamail.com\/blog\/diferencias-wireframes-mockups-prototipos\/","og_locale":"es_ES","og_type":"article","og_title":"Dise\u00f1o UX\/UI: diferencias entre wireframes, mockups y prototipos","og_description":"\u00bfQu\u00e9 diferencia hay entre los t\u00e9rminos \u201cwireframes\u201d, \u201cprototipos\u201d y \u201cmockup\u201d cuando hablamos de dise\u00f1o de interfaz y experiencia de usuario?","og_url":"https:\/\/acumbamail.com\/blog\/diferencias-wireframes-mockups-prototipos\/","og_site_name":"Blog de Acumbamail","article_publisher":"https:\/\/www.facebook.com\/Acumbamail","article_published_time":"2024-10-08T06:08:00+00:00","og_image":[{"width":1200,"height":941,"url":"https:\/\/acumbamail.com\/blog\/wp-content\/uploads\/2024\/10\/wireframes-mockups-prototipos.png","type":"image\/png"}],"author":"Roc\u00edo Cort\u00e1zar","twitter_card":"summary_large_image","twitter_image":"https:\/\/acumbamail.com\/blog\/wp-content\/uploads\/2024\/10\/wireframes-mockups-prototipos.png","twitter_creator":"@acumbamail","twitter_site":"@acumbamail","twitter_misc":{"Escrito por":"Roc\u00edo Cort\u00e1zar","Tiempo de lectura":"8 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/acumbamail.com\/blog\/diferencias-wireframes-mockups-prototipos\/#article","isPartOf":{"@id":"https:\/\/acumbamail.com\/blog\/diferencias-wireframes-mockups-prototipos\/"},"author":{"name":"Roc\u00edo Cort\u00e1zar","@id":"https:\/\/acumbamail.com\/blog\/#\/schema\/person\/682b13d7094fed4668a0be2afa123190"},"headline":"Dise\u00f1o UX\/UI: diferencias entre wireframes, mockups y prototipos","datePublished":"2024-10-08T06:08:00+00:00","mainEntityOfPage":{"@id":"https:\/\/acumbamail.com\/blog\/diferencias-wireframes-mockups-prototipos\/"},"wordCount":1482,"commentCount":0,"publisher":{"@id":"https:\/\/acumbamail.com\/blog\/#organization"},"image":{"@id":"https:\/\/acumbamail.com\/blog\/diferencias-wireframes-mockups-prototipos\/#primaryimage"},"thumbnailUrl":"https:\/\/acumbamail.com\/blog\/wp-content\/uploads\/2024\/10\/wireframes-mockups-prototipos.svg","articleSection":["Dise\u00f1o Gr\u00e1fico"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/acumbamail.com\/blog\/diferencias-wireframes-mockups-prototipos\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/acumbamail.com\/blog\/diferencias-wireframes-mockups-prototipos\/","url":"https:\/\/acumbamail.com\/blog\/diferencias-wireframes-mockups-prototipos\/","name":"Dise\u00f1o UX\/UI: diferencias entre wireframes, mockups y prototipos","isPartOf":{"@id":"https:\/\/acumbamail.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/acumbamail.com\/blog\/diferencias-wireframes-mockups-prototipos\/#primaryimage"},"image":{"@id":"https:\/\/acumbamail.com\/blog\/diferencias-wireframes-mockups-prototipos\/#primaryimage"},"thumbnailUrl":"https:\/\/acumbamail.com\/blog\/wp-content\/uploads\/2024\/10\/wireframes-mockups-prototipos.svg","datePublished":"2024-10-08T06:08:00+00:00","description":"\u00bfQu\u00e9 diferencia hay entre los t\u00e9rminos \u201cwireframes\u201d, \u201cprototipos\u201d y \u201cmockup\u201d cuando hablamos de dise\u00f1o de interfaz y experiencia de usuario?","breadcrumb":{"@id":"https:\/\/acumbamail.com\/blog\/diferencias-wireframes-mockups-prototipos\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/acumbamail.com\/blog\/diferencias-wireframes-mockups-prototipos\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/acumbamail.com\/blog\/diferencias-wireframes-mockups-prototipos\/#primaryimage","url":"https:\/\/acumbamail.com\/blog\/wp-content\/uploads\/2024\/10\/wireframes-mockups-prototipos.svg","contentUrl":"https:\/\/acumbamail.com\/blog\/wp-content\/uploads\/2024\/10\/wireframes-mockups-prototipos.svg"},{"@type":"BreadcrumbList","@id":"https:\/\/acumbamail.com\/blog\/diferencias-wireframes-mockups-prototipos\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog Acumbamail","item":"https:\/\/acumbamail.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Dise\u00f1o Gr\u00e1fico","item":"https:\/\/acumbamail.com\/blog\/category\/diseno\/"},{"@type":"ListItem","position":3,"name":"Dise\u00f1o UX\/UI: diferencias entre wireframes, mockups y prototipos"}]},{"@type":"WebSite","@id":"https:\/\/acumbamail.com\/blog\/#website","url":"https:\/\/acumbamail.com\/blog\/","name":"Blog de Acumbamail","description":"Blog sobre email marketing y marketing online","publisher":{"@id":"https:\/\/acumbamail.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/acumbamail.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/acumbamail.com\/blog\/#organization","name":"Acumbamail","url":"https:\/\/acumbamail.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/acumbamail.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/acumbamail.com\/blog\/wp-content\/uploads\/2022\/05\/acumbamail-black-logo.9f7ef42753fc.svg","contentUrl":"https:\/\/acumbamail.com\/blog\/wp-content\/uploads\/2022\/05\/acumbamail-black-logo.9f7ef42753fc.svg","width":1,"height":1,"caption":"Acumbamail"},"image":{"@id":"https:\/\/acumbamail.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Acumbamail","https:\/\/x.com\/acumbamail","https:\/\/es.linkedin.com\/company\/acumbamail","https:\/\/www.youtube.com\/channel\/UCTBXceaOBLUqC0bdUXc2PDA"]},{"@type":"Person","@id":"https:\/\/acumbamail.com\/blog\/#\/schema\/person\/682b13d7094fed4668a0be2afa123190","name":"Roc\u00edo Cort\u00e1zar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/acumbamail.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/acumbamail.com\/blog\/wp-content\/uploads\/2022\/04\/rocio.svg","contentUrl":"https:\/\/acumbamail.com\/blog\/wp-content\/uploads\/2022\/04\/rocio.svg","caption":"Roc\u00edo Cort\u00e1zar"},"description":"Dise\u00f1adora gr\u00e1fica en Acumbamail y creo que tu logo sigue siendo demasiado peque\u00f1o (es broma).","sameAs":["https:\/\/www.linkedin.com\/in\/rociocortazar"],"url":"https:\/\/acumbamail.com\/blog\/author\/rocio-cortazar\/"}]}},"lang":"es","translations":{"es":27728,"en":29834},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/acumbamail.com\/blog\/wp-json\/wp\/v2\/posts\/27728","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/acumbamail.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/acumbamail.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/acumbamail.com\/blog\/wp-json\/wp\/v2\/users\/32"}],"replies":[{"embeddable":true,"href":"https:\/\/acumbamail.com\/blog\/wp-json\/wp\/v2\/comments?post=27728"}],"version-history":[{"count":13,"href":"https:\/\/acumbamail.com\/blog\/wp-json\/wp\/v2\/posts\/27728\/revisions"}],"predecessor-version":[{"id":27762,"href":"https:\/\/acumbamail.com\/blog\/wp-json\/wp\/v2\/posts\/27728\/revisions\/27762"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/acumbamail.com\/blog\/wp-json\/wp\/v2\/media\/27746"}],"wp:attachment":[{"href":"https:\/\/acumbamail.com\/blog\/wp-json\/wp\/v2\/media?parent=27728"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/acumbamail.com\/blog\/wp-json\/wp\/v2\/categories?post=27728"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/acumbamail.com\/blog\/wp-json\/wp\/v2\/tags?post=27728"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}