{"id":4588,"date":"2021-06-04T17:35:20","date_gmt":"2021-06-04T22:35:20","guid":{"rendered":"https:\/\/www.marketerosagencia.com\/?p=4588"},"modified":"2025-06-05T07:20:54","modified_gmt":"2025-06-05T12:20:54","slug":"mockup-web-que-es","status":"publish","type":"post","link":"https:\/\/www.marketerosagencia.com\/blog\/diseno-web\/mockup-web-que-es\/","title":{"rendered":"Mockup web: \u00bfQu\u00e9 es y c\u00f3mo dise\u00f1arlo?"},"content":{"rendered":"<p>Si est\u00e1s comenzando a dise\u00f1ar tu web en estos momentos te va a venir muy bien tener amplios conocimientos en todo lo que ata\u00f1e al mockup web. Te podr\u00e1 ser de gran ayuda para que armes un estilo con el que se identifique a tu marca y al mismo tiempo poder estructurar y organizar los objetivos de navegaci\u00f3n que entiendas son m\u00e1s convenientes de cara a la experiencia de usuario.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_83 counter-hierarchy ez-toc-counter ez-toc-white ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Indice de Contenido<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6a34016cae4a9\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6a34016cae4a9\"  aria-label=\"Alternar\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.marketerosagencia.com\/blog\/diseno-web\/mockup-web-que-es\/#%C2%BFQue_significa_este_concepto\" >\u00bfQu\u00e9 significa este concepto?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.marketerosagencia.com\/blog\/diseno-web\/mockup-web-que-es\/#%C2%BFCual_es_el_uso_de_un_buen_mockup_para_una_pagina\" >\u00bfCu\u00e1l es el uso de un buen mockup para una p\u00e1gina?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.marketerosagencia.com\/blog\/diseno-web\/mockup-web-que-es\/#Diferencia_con_wireframe\" >Diferencia con wireframe<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.marketerosagencia.com\/blog\/diseno-web\/mockup-web-que-es\/#Despues_de_ver_el_mockup_de_tu_sitio\" >Despu\u00e9s de ver el mockup de tu sitio<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.marketerosagencia.com\/blog\/diseno-web\/mockup-web-que-es\/#Mas_informacion_sobre_el_mockup\" >M\u00e1s informaci\u00f3n sobre el mockup<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%C2%BFQue_significa_este_concepto\"><\/span>\u00bfQu\u00e9 significa este concepto?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>B\u00e1sicamente, cuando hablamos de un <em>mockup<\/em> a escala general, a lo que hacemos referencia es a una especie de fotomontaje que permite que los dise\u00f1adores gr\u00e1ficos puedan mostrar un prototipo sobre el producto final. En este caso, una imagen sobre el dise\u00f1o que acabar\u00e1 teniendo el producto.<\/p>\n<p>Estos montajes se pueden ver en muchas industrias: logotipos, animaciones, ediciones de v\u00eddeo, efectos de sonido y, por supuesto, tambi\u00e9n en el mundo de las p\u00e1ginas web. Por eso, puede ser una excelente oportunidad para que corrijas sobre la marcha algunas de las especificaciones que necesitas para tu sitio web.<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-4593 size-full\" src=\"https:\/\/cdn.marketerosagencia.com\/wp-content\/uploads\/2021\/06\/04172756\/que-es-un-Mockup-web.jpg\" alt=\"que es un Mockup web\" width=\"750\" height=\"606\" srcset=\"https:\/\/cdn.marketerosagencia.com\/wp-content\/uploads\/2021\/06\/04172756\/que-es-un-Mockup-web.jpg 750w, https:\/\/cdn.marketerosagencia.com\/wp-content\/uploads\/2021\/06\/04172756\/que-es-un-Mockup-web-300x242.jpg 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"%C2%BFCual_es_el_uso_de_un_buen_mockup_para_una_pagina\"><\/span>\u00bfCu\u00e1l es el uso de un buen <em>mockup<\/em> para una p\u00e1gina?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Cabe destacar que tener listo un <em>mockup<\/em> puede ser de utilidad para facilitar el trabajo del dise\u00f1ador, pero tambi\u00e9n para que el cliente est\u00e9 m\u00e1s conforme con el producto final. Es muy com\u00fan que, si esta instancia no se respeta y no se muestran posibles prototipos, el resultado no acabe siendo del agrado del usuario.<\/p>\n<p>Esto es debido a que las indicaciones pueden ser muy generales e incluso los usuarios hayan tenido una idea que, al materializarse, no resulta como se esperaba. Por eso, si el dise\u00f1o tiene distintas maquetas con diferentes formatos disponibles en los cuales trabajar, la marca tendr\u00e1 una aproximaci\u00f3n sobre c\u00f3mo finalmente quedar\u00e1 el proyecto, por lo que el <strong><em><u><a href=\"https:\/\/www.marketerosagencia.com\/blog\/diseno-web\/brief-creacion-sitio-web\/\" target=\"_blank\" rel=\"noopener\">brief del sitio web<\/a><\/u><\/em><\/strong> podr\u00e1 ser m\u00e1s preciso.<\/p>\n<p>Al mismo tiempo, al trabajar sobre estos arquetipos, el cliente tendr\u00e1 mayor facilidad para aclarar cu\u00e1les son las modificaciones espec\u00edficas que solicita para que el trabajo sea personalizado.<\/p>\n<p>Igualmente, un buen <em>website<\/em> debe seguir ciertos par\u00e1metros seg\u00fan el sector del mercado. Por ejemplo, una tienda de comidas r\u00e1pidas tendr\u00e1 la siguiente estructura:<\/p>\n<ul>\n<li>Categor\u00edas donde se muestran y se especifican los productos.<\/li>\n<li>Im\u00e1genes de los pedidos que pueden realizar los clientes.<\/li>\n<li>Preguntas frecuentes.<\/li>\n<li>Un apartado corporativo que explique los objetivos de la empresa.<\/li>\n<\/ul>\n<p>Estos <em>mockups<\/em> comparten un estilo en todas las marcas, pero no todas son id\u00e9nticas. Cada una tiene sus propias caracter\u00edsticas.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-4592 size-full\" src=\"https:\/\/cdn.marketerosagencia.com\/wp-content\/uploads\/2021\/06\/04172753\/Como-hacer-un-mockup-de-una-web.jpg\" alt=\"Como hacer un mockup de una web\" width=\"750\" height=\"596\" srcset=\"https:\/\/cdn.marketerosagencia.com\/wp-content\/uploads\/2021\/06\/04172753\/Como-hacer-un-mockup-de-una-web.jpg 750w, https:\/\/cdn.marketerosagencia.com\/wp-content\/uploads\/2021\/06\/04172753\/Como-hacer-un-mockup-de-una-web-300x238.jpg 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Diferencia_con_wireframe\"><\/span>Diferencia con <em>wireframe<\/em><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Conviene resaltar que hay diferencias con este t\u00e9rmino, y nos encontramos en muchas ocasiones con que se confunden, pero no son lo mismo. Diferenciemos ambos conceptos:<\/p>\n<ul>\n<li>Un <em>wireframe<\/em> sirve para generar una conexi\u00f3n del concepto que tiene el cliente con las caracter\u00edsticas m\u00e1s generales del producto final, sin necesidad de que sea un dise\u00f1o espec\u00edfico. Es decir, un <em>wireframe<\/em> es un arquetipo inicial de baja calidad del producto, similar a los bocetos de los artistas a la hora de crear un personaje, por poner un ejemplo. Generalmente est\u00e1n desarrollados en forma de cuadros grises, con el objetivo de organizar la informaci\u00f3n y comprender c\u00f3mo podr\u00eda dividirse cada secci\u00f3n o categor\u00eda de la p\u00e1gina web o tienda <em>e-commerce<\/em>.<\/li>\n<li>En cambio, un buen <em>mockup<\/em> servir\u00e1 como un posible dise\u00f1o final, que tendr\u00e1 una calidad de trabajo alta. Por ejemplo, podr\u00e1s apreciar las posibles paletas de colores que tendr\u00e1 el sitio, el estilo de las tipograf\u00edas, las im\u00e1genes de dise\u00f1o, las animaciones, entre otras cuestiones. Sin embargo, casi en ning\u00fan caso acabar\u00e1 siendo el trabajo final que se otorgar\u00e1 al sitio web. Es decir, que la diferencia entre ambos conceptos, b\u00e1sicamente, radica en el uso que se les da.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-4591 size-full\" src=\"https:\/\/cdn.marketerosagencia.com\/wp-content\/uploads\/2021\/06\/04172749\/Diferencia-entre-Mockup-y-un-Wireframe.jpg\" alt=\"Diferencia entre Mockup y un Wireframe\" width=\"750\" height=\"552\" srcset=\"https:\/\/cdn.marketerosagencia.com\/wp-content\/uploads\/2021\/06\/04172749\/Diferencia-entre-Mockup-y-un-Wireframe.jpg 750w, https:\/\/cdn.marketerosagencia.com\/wp-content\/uploads\/2021\/06\/04172749\/Diferencia-entre-Mockup-y-un-Wireframe-300x221.jpg 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Despues_de_ver_el_mockup_de_tu_sitio\"><\/span>Despu\u00e9s de ver el <em>mockup<\/em> de tu sitio<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Si entendemos al <em>mockup <\/em>como un posible dise\u00f1o, lo que va a continuaci\u00f3n es una simulaci\u00f3n real del prototipo que permitir\u00e1 interactuar al usuario con todas las caracter\u00edsticas del men\u00fa y ver c\u00f3mo funciona todo. Es decir, se pasa de la simple est\u00e9tica a la funcionalidad, pues una web no solamente debe tener un buen look and fell, tambi\u00e9n debe ser funcional e intuitiva.<\/p>\n<p>Si se planificaron bien los mapas conceptuales en el <a href=\"https:\/\/www.marketerosagencia.com\/blog\/diseno-web\/fases-etapas-diseno-web\/\" target=\"_blank\" rel=\"noopener\">desarrollo web<\/a>, ver\u00e1s c\u00f3mo todas las p\u00e1ginas HTML estar\u00e1n bien conectadas. Por eso, un buen trabajo y planificaci\u00f3n del <em><u><a href=\"https:\/\/www.marketerosagencia.com\/blog\/diseno-web\/que-es-sitemap-para-que-sirve\/\" target=\"_blank\" rel=\"noopener\">sitemap<\/a><\/u><\/em> de Google permitir\u00e1 que todo el contenido que puedas desarrollar comience a ser rastreado por el buscador y pueda posicionar eficientemente. Mientras m\u00e1s sencillas les pongamos las cosas a los buscadores m\u00e1s nos premiar\u00e1n.<\/p>\n<p>Sin embargo, en esta etapa empezar\u00e1s a tener dudas o sugerencias para las opciones del men\u00fa. Puede que, si tienes una tienda online, quieras colocar distintos submen\u00fas para cada uno de los productos que puedes llegar a ofrecer. Es importante que el contenido est\u00e9 bien diagramado para que la jerarqu\u00eda de las relaciones pueda percibirse de forma clara.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Mas_informacion_sobre_el_mockup\"><\/span>M\u00e1s informaci\u00f3n sobre el <em>mockup<\/em><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>En Internet encontrar\u00e1s distintos mockups que podr\u00e1s editar f\u00e1cilmente, pero lo cierto es que un buen dise\u00f1ador web deber\u00eda crear los suyos propios. En primer lugar, eso ayudar\u00e1 a definir tu propia identidad visual en funci\u00f3n del tipo de clientes al que nos dirijamos. Y a su vez podemos conseguir darle una mayor dosis de profesionalismo a nuestro proyecto web: si la plantilla es muy gen\u00e9rica, dif\u00edcilmente pueda encajar en grandes empresas.<\/p>\n<p>Si los archivos tienen una capa editable se podr\u00e1n crear distintas bases personalizadas que podr\u00e1s armar seg\u00fan el rubro al que pueda pertenecer un determinado negocio. Por ejemplo, la est\u00e9tica general de una cl\u00ednica m\u00e9dica no ser\u00e1 igual a la de una agencia de <em>marketing<\/em>. La primera debe tener una imagen m\u00e1s seria, mientras que en la segunda debemos de mostrar una imagen bastante m\u00e1s creativa que hable bien de nuestras facetas creativas.<\/p>\n<p>Por lo tanto, todas estas maquetas surgir\u00e1n con el objetivo de que cualquier cliente pueda demostrar lo que quiere en su p\u00e1gina o tienda web sin necesidad de tener demasiados conocimientos. Es una relaci\u00f3n win to win: por un lado, los dise\u00f1adores se ahorrar\u00e1n trabajo y fases de correcci\u00f3n; por el otro, los clientes obtendr\u00e1n mejores resultados y podr\u00e1n dar indicaciones precisas.<\/p>\n<p>Recuerda que la creaci\u00f3n de un buen mockup deber\u00e1 contemplar no solamente la est\u00e9tica posterior dell proyecto web, sino tambi\u00e9n las posibles funcionalidades que el usuario finalmente dar\u00e1 a sus URLs. O lo que es lo mismo, si es una web con un buen look and feel, agradable a la vista, pero poco accesible a nivel de experiencia de usuario, nos encontraremos con serios problemas de visibilidad en los buscadores. Definitivamente, nuestro sitio web, deber\u00e1 reunir las dos condiciones: ser atractiva a los ojos de nuestros potenciales clientes e incentivar la navegaci\u00f3n en la misma. Todo esto ser\u00e1 el resultado de haber hecho un buen trabajo en el dise\u00f1o del mockup web.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Si est\u00e1s comenzando a dise\u00f1ar tu web en estos momentos te va a venir muy bien tener amplios conocimientos en todo lo que ata\u00f1e al mockup web. Te podr\u00e1 ser de gran ayuda para que armes un estilo con el que se identifique a tu marca y al mismo tiempo poder estructurar y organizar los [&hellip;]<\/p>\n","protected":false},"author":26,"featured_media":4594,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[9],"tags":[],"class_list":["post-4588","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.marketerosagencia.com\/blog\/wp-json\/wp\/v2\/posts\/4588"}],"collection":[{"href":"https:\/\/www.marketerosagencia.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.marketerosagencia.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.marketerosagencia.com\/blog\/wp-json\/wp\/v2\/users\/26"}],"replies":[{"embeddable":true,"href":"https:\/\/www.marketerosagencia.com\/blog\/wp-json\/wp\/v2\/comments?post=4588"}],"version-history":[{"count":3,"href":"https:\/\/www.marketerosagencia.com\/blog\/wp-json\/wp\/v2\/posts\/4588\/revisions"}],"predecessor-version":[{"id":5474,"href":"https:\/\/www.marketerosagencia.com\/blog\/wp-json\/wp\/v2\/posts\/4588\/revisions\/5474"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.marketerosagencia.com\/blog\/wp-json\/wp\/v2\/media\/4594"}],"wp:attachment":[{"href":"https:\/\/www.marketerosagencia.com\/blog\/wp-json\/wp\/v2\/media?parent=4588"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.marketerosagencia.com\/blog\/wp-json\/wp\/v2\/categories?post=4588"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.marketerosagencia.com\/blog\/wp-json\/wp\/v2\/tags?post=4588"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}