{"id":54357,"date":"2017-07-10T10:45:09","date_gmt":"2017-07-10T13:45:09","guid":{"rendered":"https:\/\/www.jumabu.com\/es\/?p=54357"},"modified":"2018-01-22T05:02:15","modified_gmt":"2018-01-22T08:02:15","slug":"que-son-los-mockups-y-para-que-sirven","status":"publish","type":"post","link":"https:\/\/www.jumabu.com\/es\/que-son-los-mockups-y-para-que-sirven\/","title":{"rendered":"Qu\u00e9 son los MockUps? y Para qu\u00e9 Sirven?"},"content":{"rendered":"<h2>Conoce que son los mockups, para que se utilizan y varios ejemplos de este pr\u00e1ctico recurso<\/h2>\n<p>Los <strong>MockUps<\/strong> son una <strong>maqueta<\/strong>, una <strong>plantilla<\/strong> un modelo utilizado para la presentaci\u00f3n de nuestro dise\u00f1o de manera realista (en la mayor\u00eda de los casos).<\/p>\n<h3>Ok, aqu\u00ed la explicaci\u00f3n t\u00e9cnica, casi de diccionario, pero vamos a entender un poco m\u00e1s sobre este maravilloso recurso.<\/h3>\n<p><ins class=\"adsbygoogle\"\n     style=\"display:block; text-align:center;\"\n     data-ad-format=\"fluid\"\n     data-ad-layout=\"in-article\"\n     data-ad-client=\"ca-pub-2830165240554969\"\n     data-ad-slot=\"9481447398\"><\/ins><br \/>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script><br \/>\nSupongamos que estuvimos dise\u00f1ando un sitio web y queremos present\u00e1rselo a nuestros clientes, normalmente presentar\u00edamos un JPG donde se visualiza nuestro dise\u00f1o, pero el cliente quiere saber m\u00e1s, y entonces surgen preguntas como estas:<\/p>\n<h3>C\u00f3mo se ve en la pantalla?<\/h3>\n<h3>Y este borde se estira o siempre queda as\u00ed?<\/h3>\n<h3>En una tablet o iPad c\u00f3mo se visualizar\u00eda? y en un tel\u00e9fono?<\/h3>\n<h3>Es alineada a la izquierda mi web? o est\u00e1 centrada?<\/h3>\n<p>En lugar de dar explicaciones para que el cliente entienda o imagine la visualizaci\u00f3n de sus preguntas, lo que hacemos es encontrar un <strong>MockUp<\/strong> que nos permita <strong>presentar nuestro dise\u00f1o<\/strong> en las distintas pantallas con un alto grado de realismo.<\/p>\n<p><b>Veamos un ejemplo<\/b>:<\/p>\n<p>Vamos a imaginarnos que presentar\u00edamos la vieja web de jumabu a un cliente.<\/p>\n<p>Para que nuestro cliente vea un poco m\u00e1s realizado nuestro dise\u00f1o lo que hacemos es descargarnos un lindo <strong>mockup para presentar dise\u00f1os webs<\/strong>, aqu\u00ed les dejo el enlace de uno de mis preferidos:\u00a0<a href=\"http:\/\/wp.me\/p211Nr-cNj\">http:\/\/wp.me\/p211Nr-cNj<\/a><br \/>\ny comenzamos a aplicar nuestro dise\u00f1o.<br \/>\nEl <strong>mockup que descargamos es un PSD<\/strong>, por lo tanto lo podremos editar con <strong>Photoshop<\/strong>.<\/p>\n<p>Veamos el primer paso:<br \/>\nAbrimos el PSD que descargamos&#8230;<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"https:\/\/i0.wp.com\/www.jumabu.com\/es\/wp-content\/images\/mock-up-web.jpg?resize=500%2C286\" alt=\"\" width=\"500\" height=\"286\" \/><\/p>\n<p>Luego lo que haremos es copiar la imagen que tenemos ya dise\u00f1ada de nuestro sitio web y la fotomontamos sobre el <strong>mockup<\/strong>&#8230;<br \/>\nPrimero la pegamos sobre el mockup y luego con la herramienta Edici\u00f3n &gt; Transformaci\u00f3n Libre (para Mac manzanita + T, para Windows Shift + T)<br \/>\nacomodamos nuestro dise\u00f1o para que coincida con la <strong>perspectiva del mockup<\/strong>.<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"https:\/\/i0.wp.com\/www.jumabu.com\/es\/wp-content\/images\/mock-up-fotomontaje.jpg?resize=500%2C286\" alt=\"\" width=\"500\" height=\"286\" \/><\/p>\n<p>tocamos un poco y listo! nuestra primer <strong>vista del mockup en un ordenador de mesa<\/strong>&#8230;<\/p>\n<p>Tambi\u00e9n los mockups pueden editarse trabajando con objetos inteligentes, aqu\u00ed te dejo un post para que veas como editarlos: <a href=\"https:\/\/wp.me\/p211Nr-dIt\" target=\"_blank\">Como editar un mockup usando objetos inteligentes<\/a><\/p>\n<p>Ahora vamos a hacer lo mismo con nuestros dise\u00f1os de Ipad o tablets y de tel\u00e9fonos!<\/p>\n<h3>Mockup para Ipad o Tablets:<\/h3>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"https:\/\/i0.wp.com\/www.jumabu.com\/es\/wp-content\/images\/iPad-Template.jpg?resize=500%2C281\" alt=\"\" width=\"500\" height=\"281\" \/><\/p>\n<h3>Mockup para Tel\u00e9fonos:<\/h3>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"https:\/\/i0.wp.com\/www.jumabu.com\/es\/wp-content\/images\/iPhone-Template.jpg?resize=500%2C281\" alt=\"\" width=\"500\" height=\"281\" \/><\/p>\n<p>Este mismo ejemplo se aplica a los diferentes dise\u00f1os que realicemos.<br \/>\nMuchas veces encontramos <strong>mockups de botellas de vino<\/strong> para que podamos presentar nuestras etiquetas de botellas, o bien nos toca dise\u00f1ar una tarjeta personal y queremos presentarla de manera m\u00e1s realista, entonces <strong>descargamos un mockup como este<\/strong>:\u00a0<a href=\"http:\/\/wp.me\/p211Nr-cLI\">http:\/\/wp.me\/p211Nr-cLI<\/a><\/p>\n<p>Recuerden, <strong>los mockups nos permiten presentar nuestros dise\u00f1os de manera m\u00e1s realista<\/strong>.<br \/>\nCuanto m\u00e1s realista sea el mockup, mejor quedar\u00e1 presentado nuestro dise\u00f1o.<br \/>\nLos mockups pueden ser archivos para editar con Photoshop, Illustrator o Corel, In Design, etc, etc&#8230;<\/p>\n<p>Espero que este mini tutorial les haya servido y que de ahora en m\u00e1s cuando vean un mockup sepan a \u00a0que se hace referencia.<br \/>\nSaludos y si quieren dejar su comentario para evaluar nuestra explicaci\u00f3n&#8230; Bienvenido Sea!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Conoce que son los mockups, para que se utilizan y varios ejemplos de este pr\u00e1ctico recurso Los MockUps son una maqueta, una plantilla un&#8230;<\/p>\n","protected":false},"author":1,"featured_media":54356,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"Qu\u00e9 son los MockUps? y Para qu\u00e9 Sirven?","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[411],"tags":[2399,2292,793,2298,412],"class_list":["post-54357","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutoriales","tag-mockups","tag-modelos","tag-plantillas","tag-templates","tag-tutoriales-2","article","has-excerpt","has-avatar","has-author","has-date","has-comment-count","has-category-meta","has-read-more","thumbnail-"],"acf":[],"aioseo_notices":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.jumabu.com\/es\/wp-content\/images\/que-son-los-mockups.png?fit=1384%2C1384&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/p211Nr-e8J","jetpack_sharing_enabled":true,"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.jumabu.com\/es\/wp-json\/wp\/v2\/posts\/54357","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jumabu.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jumabu.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jumabu.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jumabu.com\/es\/wp-json\/wp\/v2\/comments?post=54357"}],"version-history":[{"count":0,"href":"https:\/\/www.jumabu.com\/es\/wp-json\/wp\/v2\/posts\/54357\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jumabu.com\/es\/wp-json\/wp\/v2\/media\/54356"}],"wp:attachment":[{"href":"https:\/\/www.jumabu.com\/es\/wp-json\/wp\/v2\/media?parent=54357"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jumabu.com\/es\/wp-json\/wp\/v2\/categories?post=54357"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jumabu.com\/es\/wp-json\/wp\/v2\/tags?post=54357"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}