{"id":3691,"date":"2026-09-17T08:09:13","date_gmt":"2026-09-17T11:09:13","guid":{"rendered":"https:\/\/aleare.com.ar\/blog\/?p=3691"},"modified":"2026-09-28T01:10:10","modified_gmt":"2026-09-28T04:10:10","slug":"mockup-como-ver-tu-web-antes-de-programarla","status":"publish","type":"post","link":"https:\/\/aleare.com.ar\/blog\/mockup-como-ver-tu-web-antes-de-programarla\/","title":{"rendered":"Mockup: c\u00f3mo ver tu web antes de programarla"},"content":{"rendered":"<div class='booster-block booster-read-block'><\/div><p dir=\"ltr\">Cuando empec\u00e9 en este noble oficio, hace m\u00e1s de 20 a\u00f1os (\u00a1cu\u00e1nto tiempo!) sol\u00eda lanzarme a programar el sitio web completo luego de hablar con el cliente, muy segura de que hab\u00eda interpretado todo correctamente. Y m\u00e1s de una vez me encontr\u00e9 con un \u00abah, me lo imagin\u00e9 distinto\u00bb o el tan temido \u00abno me gusta\u00bb. Esto implicaba tener que tirar d\u00edas de trabajo por la borda, llorar y empezar de nuevo. Me preguntaba, \u00bfc\u00f3mo hacen otros dise\u00f1adores para no errarla tan fiero?<\/p>\n<p dir=\"ltr\">Un par de a\u00f1os despu\u00e9s, ya trabajando para una agencia como programadora, entend\u00ed d\u00f3nde estaba el secreto: los dise\u00f1adores preparaban el dise\u00f1o previo para mostrarle al cliente, en donde se hac\u00edan los cambios y ajustes, antes de que la versi\u00f3n final llegara al equipo de desarrollo. Este proceso agilizaba todo el flujo de trabajo, y el cliente siempre quedaba contento con el resultado.<\/p>\n<p dir=\"ltr\">Ese trabajo de dise\u00f1o previo ten\u00eda un nombre espec\u00edfico: <strong>mockup<\/strong>.<\/p>\n<p dir=\"ltr\"><span style=\"color: #ffffff;\">.<\/span><\/p><div class=\"alear-contenido_2 alear-entity-placement\" id=\"alear-1232817554\"><div id=\"alear-3794676745\"><a href=\"https:\/\/www.publisuites.com\/publishers\/aff\/2e896c13b2a89a738593ef13a6c19511ff2ae4c8\/\"><img decoding=\"async\" src=\"https:\/\/www.publisuites.com\/static\/img\/affiliates\/publisuites-728x90.jpg\"><\/a><\/div><\/div>\n<h2 dir=\"ltr\">\u00bfQu\u00e9 es un mockup?<\/h2>\n<p dir=\"ltr\">Un mockup es una representaci\u00f3n visual est\u00e1tica, de alta fidelidad y a escala real, de c\u00f3mo se ver\u00e1 un dise\u00f1o (ya sea un sitio web, app, o producto) antes de que se programe o se fabrique. Tiene los colores reales, las tipograf\u00edas definidas, im\u00e1genes, botones, \u00edconos&#8230; en fin, todo lo que el usuario final va a ver, pero todav\u00eda no est\u00e1 funcional. Es la maqueta digital del \u00abas\u00ed va a quedar\u00bb.<\/p>\n<p dir=\"ltr\">La clave est\u00e1 en la palabra \u00abfidelidad\u00bb. Un mockup es m\u00e1s que un boceto o una idea: es pr\u00e1cticamente el dise\u00f1o terminado, listo para que el cliente lo apruebe (o le haga cambios) antes de empezar a desarrollar una l\u00ednea de c\u00f3digo.<\/p>\n<p dir=\"ltr\"><span style=\"color: #ffffff;\">.<\/span><\/p>\n<h3 dir=\"ltr\">Wireframe, mockup y prototipo: \u00bfno son lo mismo?<\/h3>\n<p dir=\"ltr\">No, nada que ver. Van en este orden dentro del proceso de dise\u00f1o:<\/p>\n<ul dir=\"ltr\">\n<li><strong>Wireframe:<\/strong> es el esqueleto. Cajas grises, sin color ni tipograf\u00eda, solo la distribuci\u00f3n de los elementos. Responde al \u00ab\u00bfd\u00f3nde va cada cosa?\u00bb.<\/li>\n<li><strong>Mockup:<\/strong> es la piel. Ya tiene la est\u00e9tica final \u2014colores, fotos, textos, botones\u2014, pero sigue siendo una imagen est\u00e1tica. Responde al \u00ab\u00bfc\u00f3mo se va a ver?\u00bb.<\/li>\n<li><strong>Prototipo:<\/strong> es el simulacro. Pod\u00e9s clickear, navegar entre pantallas, ver transiciones. Responde al \u00ab\u00bfc\u00f3mo se va a sentir usarlo?\u00bb.<\/li>\n<\/ul>\n<p dir=\"ltr\">Si trabajaste conmigo en alg\u00fan wireframe, ya ten\u00e9s medio camino recorrido: el mockup es el paso siguiente, cuando esa estructura gris se viste de gala.<\/p>\n<p dir=\"ltr\"><span style=\"color: #ffffff;\">.<\/span><\/p>\n<h3 dir=\"ltr\">\u00bfPara qu\u00e9 sirve un mockup en un proyecto real?<\/h3>\n<p dir=\"ltr\">M\u00e1s all\u00e1 de la definici\u00f3n de manual, en el d\u00eda a d\u00eda el mockup sirve para tres cosas concretas:<\/p>\n<ul dir=\"ltr\">\n<li><strong>Vender la idea antes de construirla.<\/strong> Un cliente indeciso aprueba mucho m\u00e1s r\u00e1pido algo que ya puede ver, que algo que se lo tiene que imaginar.<\/li>\n<li><strong>Detectar problemas.<\/strong> Cambiar un color o mover un bot\u00f3n en un mockup lleva unos minutos. Hacerlo sobre una web ya maquetada, dependiendo c\u00f3mo la hayas armado, te puede llevar horas.<\/li>\n<li><strong>Alinear expectativas.<\/strong> Evita el cl\u00e1sico \u00abyo pens\u00e9 que iba a ser distinto\u00bb despu\u00e9s de la entrega.<\/li>\n<\/ul>\n<p dir=\"ltr\">En dise\u00f1o web, el mockup es como el plano antes de empezar a construir la casa: si el cliente aprueba, le damos para adelante.<\/p>\n<p dir=\"ltr\"><span style=\"color: #ffffff;\">.<\/span><\/p>\n<h3 dir=\"ltr\">Preguntas frecuentes<\/h3>\n<p dir=\"ltr\"><strong>\u00bfUn mockup es lo mismo que el dise\u00f1o final?<\/strong><br \/>\nNo exactamente. El mockup muestra visualmente c\u00f3mo va a quedar el dise\u00f1o, con la est\u00e9tica definitiva, pero todav\u00eda no est\u00e1 programado ni es funcional. El dise\u00f1o final es el resultado ya desarrollado y en producci\u00f3n.<\/p>\n<p dir=\"ltr\"><strong>\u00bfNecesito saber programar para hacer un mockup?<\/strong><br \/>\nNop. Los mockups se crean con herramientas de dise\u00f1o gr\u00e1fico como Figma, Photoshop o generadores online, sin necesidad de escribir c\u00f3digo.<\/p>\n<p dir=\"ltr\"><strong>\u00bfEl mockup y el wireframe son lo mismo?<\/strong><br \/>\nYa dije m\u00e1s arriba que no. El wireframe es la estructura b\u00e1sica sin estilo (colores, tipograf\u00edas ni im\u00e1genes), mientras que el mockup ya tiene la apariencia visual final. El wireframe va primero, y el mockup va despu\u00e9s.<\/p>\n<p dir=\"ltr\"><strong>\u00bfEntonces, para qu\u00e9 sirve un mockup si despu\u00e9s voy a mostrar el prototipo?<\/strong><br \/>\nSirve para aprobar la est\u00e9tica antes de invertir tiempo en programar la interacci\u00f3n. El mockup te muestra c\u00f3mo se va a ver est\u00e9ticamente. El prototipo te muestra c\u00f3mo va a funcionar.<\/p>\n<p dir=\"ltr\"><span style=\"color: #ffffff;\">.<\/span><\/p>\n<h2 dir=\"ltr\">Mockups gratuitos para arrancar ya<\/h2>\n<p dir=\"ltr\">Si no quer\u00e9s armar el mockup desde cero, o est\u00e1s corto\/a de tiempos, estos son algunos de los mejores sitios para conseguir uno gratis y editarlo con tu dise\u00f1o:<\/p>\n<ul dir=\"ltr\">\n<li><strong><a href=\"https:\/\/www.figma.com\/templates\/website-mockups\/\">Figma Community \u2013 Website Mockups<\/a>:<\/strong> decenas de plantillas gratuitas de laptop, mobile y landing pages, listas para arrastrar tu dise\u00f1o y editar en el momento.<\/li>\n<li><strong><a href=\"https:\/\/www.figma.com\/community\/tag\/website%20mockup\/files\">Figma Community \u2013 Free Device Mockups<\/a>:<\/strong> m\u00e1s de 4.700 mockups de dispositivos (laptop, celular, PC) totalmente editables dentro de Figma.<\/li>\n<li><strong><a href=\"https:\/\/dribbble.com\/tags\/website-mockup\">Dribbble \u2013 Website Mockup<\/a>:<\/strong> inspiraci\u00f3n y algunos freebies descargables directos de la comunidad de dise\u00f1adores.<\/li>\n<li><strong><a href=\"https:\/\/dribbble.com\/tags\/free-website-mockup\">Dribbble \u2013 Free Website Mockup<\/a>:<\/strong> el filtro espec\u00edfico para piezas marcadas como gratuitas.<\/li>\n<li><strong><a href=\"https:\/\/www.behance.net\/gallery\/62791309\/Free-Website-Mockup-PSD-Mock-Up\">Behance \u2013 Free Website Mockup \/ PSD Mock Up<\/a>:<\/strong> un mockup PSD gratis en perspectiva, ideal para presentar una landing en 3 pantallas.<\/li>\n<li><strong><a href=\"https:\/\/www.behance.net\/search\/projects\/free%20website%20mockup\">Behance \u2013 Beautiful Perspective Website Mockup<\/a>:<\/strong> b\u00fasqueda curada de mockups de sitios web con descarga libre, con miles de descargas y buena calidad.<\/li>\n<li><strong><a href=\"https:\/\/mockuuups.studio\/\">Mockuuups Studio<\/a>:<\/strong> generador online gratuito con m\u00e1s de 5.000 escenas (laptop, celular, tablet); sub\u00eds tu captura y en segundos ten\u00e9s el mockup listo.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<div style=\"background-color: mistyrose; padding: 1em; border-radius: 5px; display: block; margin: 2em 0 2.5em;\"><em>Te puede interesar:<\/em><br \/>\n<em><strong><a href=\"https:\/\/aleare.com.ar\/blog\/wireframe-que-es-y-para-que-sirve\/\">Wireframe: qu\u00e9 es y para qu\u00e9 sirve<\/a><\/strong><\/em><\/div>\n<p dir=\"ltr\">El mockup no es un capricho est\u00e9tico ni un paso que se pueda saltear \u00abpara ganar tiempo\u00bb. Es el seguro de tu proyecto: la instancia donde resolv\u00e9s c\u00f3mo va a quedar el sitio web antes de que empiece el trabajo pesado. Nunca lo subestimes, aunque el cliente est\u00e9 impaciente por ver \u00abalgo funcionando\u00bb. El mockup es el paso que te evita rehacer (o tirar \ud83d\ude29 como le pas\u00f3 a la Alejandra del pasado) un sitio web cuando ya casi estaba terminado.<\/p>\n<p dir=\"ltr\"><span style=\"color: #ffffff;\">.<\/span><\/p>\n<div id=\"alear-3258017543\" class=\"alear-despues-del-contenido alear-entity-placement\" style=\"margin-top: 30px;margin-bottom: 30px;\"><script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-5464693981010234\" crossorigin=\"anonymous\"><\/script><ins class=\"adsbygoogle\" style=\"display:block;\" data-ad-client=\"ca-pub-5464693981010234\" \ndata-ad-slot=\"2927777050\" \ndata-ad-format=\"auto\" data-full-width-responsive=\"true\"><\/ins>\n<script> \n(adsbygoogle = window.adsbygoogle || []).push({}); \n<\/script>\n<\/div><div class=\"alear-despues-del-contenido-2 alear-entity-placement\" id=\"alear-3852365901\"><div id=\"alear-3794676745\"><a href=\"https:\/\/www.publisuites.com\/publishers\/aff\/2e896c13b2a89a738593ef13a6c19511ff2ae4c8\/\"><img decoding=\"async\" src=\"https:\/\/www.publisuites.com\/static\/img\/affiliates\/publisuites-728x90.jpg\"><\/a><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>\u00bfC\u00f3mo ver un sitio web antes de programar? El secreto est\u00e1 en el mockup, y aqu\u00ed te cuento por qu\u00e9 es tan importante.<\/p>\n","protected":false},"author":3,"featured_media":3693,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17],"tags":[],"class_list":["post-3691","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Mockup: c\u00f3mo ver tu web antes de programarla - El blog de Aleare Design<\/title>\n<meta name=\"description\" content=\"Un mockup es la maqueta visual de alta fidelidad que muestra c\u00f3mo va a quedar el dise\u00f1o de un sitio web antes de programarlo.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/aleare.com.ar\/blog\/mockup-como-ver-tu-web-antes-de-programarla\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mockup: c\u00f3mo ver tu web antes de programarla - El blog de Aleare Design\" \/>\n<meta property=\"og:description\" content=\"Un mockup es la maqueta visual de alta fidelidad que muestra c\u00f3mo va a quedar el dise\u00f1o de un sitio web antes de programarlo.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/aleare.com.ar\/blog\/mockup-como-ver-tu-web-antes-de-programarla\/\" \/>\n<meta property=\"og:site_name\" content=\"El blog de Aleare Design\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/facebook.com\/aleare.design\" \/>\n<meta property=\"article:published_time\" content=\"2026-09-17T11:09:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-09-28T04:10:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/aleare.com.ar\/blog\/wp-content\/uploads\/2026\/09\/mockup-como-ver-tu-web-antes-de-programar-el-blog-de-aleare-design.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1400\" \/>\n\t<meta property=\"og:image:height\" content=\"640\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Alejandra Arellano\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@alearedesign\" \/>\n<meta name=\"twitter:site\" content=\"@alearedesign\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alejandra Arellano\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/mockup-como-ver-tu-web-antes-de-programarla\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/mockup-como-ver-tu-web-antes-de-programarla\\\/\"},\"author\":{\"name\":\"Alejandra Arellano\",\"@id\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/#\\\/schema\\\/person\\\/27a45eff37314009fd06aa7775650f0e\"},\"headline\":\"Mockup: c\u00f3mo ver tu web antes de programarla\",\"datePublished\":\"2026-09-17T11:09:13+00:00\",\"dateModified\":\"2026-09-28T04:10:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/mockup-como-ver-tu-web-antes-de-programarla\\\/\"},\"wordCount\":1028,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/mockup-como-ver-tu-web-antes-de-programarla\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/mockup-como-ver-tu-web-antes-de-programar-el-blog-de-aleare-design.jpg\",\"articleSection\":[\"Dise\u00f1o web\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/mockup-como-ver-tu-web-antes-de-programarla\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/mockup-como-ver-tu-web-antes-de-programarla\\\/\",\"url\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/mockup-como-ver-tu-web-antes-de-programarla\\\/\",\"name\":\"Mockup: c\u00f3mo ver tu web antes de programarla - El blog de Aleare Design\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/mockup-como-ver-tu-web-antes-de-programarla\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/mockup-como-ver-tu-web-antes-de-programarla\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/mockup-como-ver-tu-web-antes-de-programar-el-blog-de-aleare-design.jpg\",\"datePublished\":\"2026-09-17T11:09:13+00:00\",\"dateModified\":\"2026-09-28T04:10:10+00:00\",\"description\":\"Un mockup es la maqueta visual de alta fidelidad que muestra c\u00f3mo va a quedar el dise\u00f1o de un sitio web antes de programarlo.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/mockup-como-ver-tu-web-antes-de-programarla\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/mockup-como-ver-tu-web-antes-de-programarla\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/mockup-como-ver-tu-web-antes-de-programarla\\\/#primaryimage\",\"url\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/mockup-como-ver-tu-web-antes-de-programar-el-blog-de-aleare-design.jpg\",\"contentUrl\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/mockup-como-ver-tu-web-antes-de-programar-el-blog-de-aleare-design.jpg\",\"width\":1400,\"height\":640,\"caption\":\"Mockup: c\u00f3mo ver un sitio web antes de programar -- El Blog de Aleare Design\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/mockup-como-ver-tu-web-antes-de-programarla\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Mockup: c\u00f3mo ver tu web antes de programarla\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/\",\"name\":\"El Blog de Aleare Design\",\"description\":\"El blog de Aleare Design: novedades en dise\u00f1o gr\u00e1fico y web, tendencias, herramientas, IA y tips para profesionales creativos y emprendedores\",\"publisher\":{\"@id\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/#organization\"},\"alternateName\":\"El Blog de Aleare Design\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/#organization\",\"name\":\"Aleare Design Estudio Creativo\",\"alternateName\":\"Aleare Design\",\"url\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/06\\\/aleare-design-estudio-creativo.jpg\",\"contentUrl\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/06\\\/aleare-design-estudio-creativo.jpg\",\"width\":840,\"height\":600,\"caption\":\"Aleare Design Estudio Creativo\"},\"image\":{\"@id\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/facebook.com\\\/aleare.design\",\"https:\\\/\\\/x.com\\\/alearedesign\",\"https:\\\/\\\/instagram.com\\\/aleare.design\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/#\\\/schema\\\/person\\\/27a45eff37314009fd06aa7775650f0e\",\"name\":\"Alejandra Arellano\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d958e05f7413bcdb38a469ad3c97abaeaf779735a05792a6b3e3e41df4406516?s=96&d=wp_user_avatar&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d958e05f7413bcdb38a469ad3c97abaeaf779735a05792a6b3e3e41df4406516?s=96&d=wp_user_avatar&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d958e05f7413bcdb38a469ad3c97abaeaf779735a05792a6b3e3e41df4406516?s=96&d=wp_user_avatar&r=g\",\"caption\":\"Alejandra Arellano\"},\"description\":\"\u00a1Hola Mundo! Soy dise\u00f1adora gr\u00e1fica y web, programadora HTML\\\/CSS, ilustradora, community manager, curadora de contenidos, escritora, mentora. Fundadora y directora de Aleare Design Estudio Creativo y Comunicaci\u00f3n Digital.\",\"sameAs\":[\"https:\\\/\\\/aleare.com.ar\\\/\"],\"url\":\"https:\\\/\\\/aleare.com.ar\\\/blog\\\/author\\\/aleare\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Mockup: c\u00f3mo ver tu web antes de programarla - El blog de Aleare Design","description":"Un mockup es la maqueta visual de alta fidelidad que muestra c\u00f3mo va a quedar el dise\u00f1o de un sitio web antes de programarlo.","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:\/\/aleare.com.ar\/blog\/mockup-como-ver-tu-web-antes-de-programarla\/","og_locale":"es_ES","og_type":"article","og_title":"Mockup: c\u00f3mo ver tu web antes de programarla - El blog de Aleare Design","og_description":"Un mockup es la maqueta visual de alta fidelidad que muestra c\u00f3mo va a quedar el dise\u00f1o de un sitio web antes de programarlo.","og_url":"https:\/\/aleare.com.ar\/blog\/mockup-como-ver-tu-web-antes-de-programarla\/","og_site_name":"El blog de Aleare Design","article_publisher":"https:\/\/facebook.com\/aleare.design","article_published_time":"2026-09-17T11:09:13+00:00","article_modified_time":"2026-09-28T04:10:10+00:00","og_image":[{"width":1400,"height":640,"url":"https:\/\/aleare.com.ar\/blog\/wp-content\/uploads\/2026\/09\/mockup-como-ver-tu-web-antes-de-programar-el-blog-de-aleare-design.jpg","type":"image\/jpeg"}],"author":"Alejandra Arellano","twitter_card":"summary_large_image","twitter_creator":"@alearedesign","twitter_site":"@alearedesign","twitter_misc":{"Escrito por":"Alejandra Arellano","Tiempo de lectura":"5 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/aleare.com.ar\/blog\/mockup-como-ver-tu-web-antes-de-programarla\/#article","isPartOf":{"@id":"https:\/\/aleare.com.ar\/blog\/mockup-como-ver-tu-web-antes-de-programarla\/"},"author":{"name":"Alejandra Arellano","@id":"https:\/\/aleare.com.ar\/blog\/#\/schema\/person\/27a45eff37314009fd06aa7775650f0e"},"headline":"Mockup: c\u00f3mo ver tu web antes de programarla","datePublished":"2026-09-17T11:09:13+00:00","dateModified":"2026-09-28T04:10:10+00:00","mainEntityOfPage":{"@id":"https:\/\/aleare.com.ar\/blog\/mockup-como-ver-tu-web-antes-de-programarla\/"},"wordCount":1028,"commentCount":0,"publisher":{"@id":"https:\/\/aleare.com.ar\/blog\/#organization"},"image":{"@id":"https:\/\/aleare.com.ar\/blog\/mockup-como-ver-tu-web-antes-de-programarla\/#primaryimage"},"thumbnailUrl":"https:\/\/aleare.com.ar\/blog\/wp-content\/uploads\/2026\/09\/mockup-como-ver-tu-web-antes-de-programar-el-blog-de-aleare-design.jpg","articleSection":["Dise\u00f1o web"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/aleare.com.ar\/blog\/mockup-como-ver-tu-web-antes-de-programarla\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/aleare.com.ar\/blog\/mockup-como-ver-tu-web-antes-de-programarla\/","url":"https:\/\/aleare.com.ar\/blog\/mockup-como-ver-tu-web-antes-de-programarla\/","name":"Mockup: c\u00f3mo ver tu web antes de programarla - El blog de Aleare Design","isPartOf":{"@id":"https:\/\/aleare.com.ar\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/aleare.com.ar\/blog\/mockup-como-ver-tu-web-antes-de-programarla\/#primaryimage"},"image":{"@id":"https:\/\/aleare.com.ar\/blog\/mockup-como-ver-tu-web-antes-de-programarla\/#primaryimage"},"thumbnailUrl":"https:\/\/aleare.com.ar\/blog\/wp-content\/uploads\/2026\/09\/mockup-como-ver-tu-web-antes-de-programar-el-blog-de-aleare-design.jpg","datePublished":"2026-09-17T11:09:13+00:00","dateModified":"2026-09-28T04:10:10+00:00","description":"Un mockup es la maqueta visual de alta fidelidad que muestra c\u00f3mo va a quedar el dise\u00f1o de un sitio web antes de programarlo.","breadcrumb":{"@id":"https:\/\/aleare.com.ar\/blog\/mockup-como-ver-tu-web-antes-de-programarla\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/aleare.com.ar\/blog\/mockup-como-ver-tu-web-antes-de-programarla\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/aleare.com.ar\/blog\/mockup-como-ver-tu-web-antes-de-programarla\/#primaryimage","url":"https:\/\/aleare.com.ar\/blog\/wp-content\/uploads\/2026\/09\/mockup-como-ver-tu-web-antes-de-programar-el-blog-de-aleare-design.jpg","contentUrl":"https:\/\/aleare.com.ar\/blog\/wp-content\/uploads\/2026\/09\/mockup-como-ver-tu-web-antes-de-programar-el-blog-de-aleare-design.jpg","width":1400,"height":640,"caption":"Mockup: c\u00f3mo ver un sitio web antes de programar -- El Blog de Aleare Design"},{"@type":"BreadcrumbList","@id":"https:\/\/aleare.com.ar\/blog\/mockup-como-ver-tu-web-antes-de-programarla\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/aleare.com.ar\/blog\/"},{"@type":"ListItem","position":2,"name":"Mockup: c\u00f3mo ver tu web antes de programarla"}]},{"@type":"WebSite","@id":"https:\/\/aleare.com.ar\/blog\/#website","url":"https:\/\/aleare.com.ar\/blog\/","name":"El Blog de Aleare Design","description":"El blog de Aleare Design: novedades en dise\u00f1o gr\u00e1fico y web, tendencias, herramientas, IA y tips para profesionales creativos y emprendedores","publisher":{"@id":"https:\/\/aleare.com.ar\/blog\/#organization"},"alternateName":"El Blog de Aleare Design","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/aleare.com.ar\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/aleare.com.ar\/blog\/#organization","name":"Aleare Design Estudio Creativo","alternateName":"Aleare Design","url":"https:\/\/aleare.com.ar\/blog\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/aleare.com.ar\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/aleare.com.ar\/blog\/wp-content\/uploads\/2021\/06\/aleare-design-estudio-creativo.jpg","contentUrl":"https:\/\/aleare.com.ar\/blog\/wp-content\/uploads\/2021\/06\/aleare-design-estudio-creativo.jpg","width":840,"height":600,"caption":"Aleare Design Estudio Creativo"},"image":{"@id":"https:\/\/aleare.com.ar\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/facebook.com\/aleare.design","https:\/\/x.com\/alearedesign","https:\/\/instagram.com\/aleare.design"]},{"@type":"Person","@id":"https:\/\/aleare.com.ar\/blog\/#\/schema\/person\/27a45eff37314009fd06aa7775650f0e","name":"Alejandra Arellano","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/secure.gravatar.com\/avatar\/d958e05f7413bcdb38a469ad3c97abaeaf779735a05792a6b3e3e41df4406516?s=96&d=wp_user_avatar&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/d958e05f7413bcdb38a469ad3c97abaeaf779735a05792a6b3e3e41df4406516?s=96&d=wp_user_avatar&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d958e05f7413bcdb38a469ad3c97abaeaf779735a05792a6b3e3e41df4406516?s=96&d=wp_user_avatar&r=g","caption":"Alejandra Arellano"},"description":"\u00a1Hola Mundo! Soy dise\u00f1adora gr\u00e1fica y web, programadora HTML\/CSS, ilustradora, community manager, curadora de contenidos, escritora, mentora. Fundadora y directora de Aleare Design Estudio Creativo y Comunicaci\u00f3n Digital.","sameAs":["https:\/\/aleare.com.ar\/"],"url":"https:\/\/aleare.com.ar\/blog\/author\/aleare\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/aleare.com.ar\/blog\/wp-json\/wp\/v2\/posts\/3691","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aleare.com.ar\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/aleare.com.ar\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/aleare.com.ar\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/aleare.com.ar\/blog\/wp-json\/wp\/v2\/comments?post=3691"}],"version-history":[{"count":2,"href":"https:\/\/aleare.com.ar\/blog\/wp-json\/wp\/v2\/posts\/3691\/revisions"}],"predecessor-version":[{"id":3695,"href":"https:\/\/aleare.com.ar\/blog\/wp-json\/wp\/v2\/posts\/3691\/revisions\/3695"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/aleare.com.ar\/blog\/wp-json\/wp\/v2\/media\/3693"}],"wp:attachment":[{"href":"https:\/\/aleare.com.ar\/blog\/wp-json\/wp\/v2\/media?parent=3691"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/aleare.com.ar\/blog\/wp-json\/wp\/v2\/categories?post=3691"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/aleare.com.ar\/blog\/wp-json\/wp\/v2\/tags?post=3691"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}