{"id":5842,"date":"2016-10-10T07:29:17","date_gmt":"2016-10-10T06:29:17","guid":{"rendered":"http:\/\/www.4webs.es\/blog\/?p=5842"},"modified":"2016-09-15T21:43:51","modified_gmt":"2016-09-15T20:43:51","slug":"mockups-mejorar-trabajo-diseno-web-2","status":"publish","type":"post","link":"https:\/\/www.4webs.es\/blog\/mockups-mejorar-trabajo-diseno-web-2","title":{"rendered":"Mockups para mejorar el trabajo de dise\u00f1o web"},"content":{"rendered":"

El trabajo de un dise\u00f1ador web pasa por intentar mejorar constantemente el proceso de creaci\u00f3n, intentando trabajar con herramientas que puedan ayudar a optimizar sus tareas. Experimentar con herramientas de dise\u00f1o con interfaces de usuario que evolucionen constantemente para apoyar al creador es esencial para conseguir un buen flujo de trabajo que permita mantener la efectividad del dise\u00f1ador en sus tareas diarias. En este sentido, los mockups se han convertido en un excelente aliado para mejorar el trabajo de un dise\u00f1ador o un desarrollador web<\/strong>.<\/p>\n

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

En esencia, son un modelo o maqueta que nos puede ayudar a presentar de manera realista la presentaci\u00f3n del dise\u00f1o<\/strong> que hayamos hecho para una tienda online cara a su aprobaci\u00f3n definitiva. Esto resulta especialmente pr\u00e1ctico si se trabaja para un cliente, ya que es habitual que tenga dudas acerca de la visualizaci\u00f3n real del proyecto en el que trabajamos.<\/p>\n

Con la visualizaci\u00f3n de esta maqueta, podremos presentarles el dise\u00f1o con el realismo necesario para que pueda verlo en todas sus dimensiones.<\/p>\n

Hay que tener en cuenta que existen mockups editables en la mayor\u00eda de programas de dise\u00f1o y edici\u00f3n gr\u00e1fica, como Photoshop, Corel o In Design, entre otros.<\/p>\n

\u00bfPor qu\u00e9 nos ayudan los mockups en el dise\u00f1o?<\/h2>\n

La verdad es que los mockups no son solo una buena herramienta de visualizaci\u00f3n previa de un dise\u00f1o web. Tambi\u00e9n resultan especialmente \u00fatiles a la hora de mejorar todo el proceso de dise\u00f1o en general<\/strong>, ya que ofrecen numerosas ventajas para el trabajo del dise\u00f1ador en cuanto a eficacia y rapidez, ya que son una maqueta previa al dise\u00f1o, una visualizaci\u00f3n funcional de toda la web antes que se lance el dise\u00f1o.<\/p>\n

Para empezar, la interfaz y mesas de trabajo de los mockups son extremadamente sencillos y limpios<\/strong>, por lo que el dise\u00f1ador puede adaptar su mesa de trabajo a sus necesidades espec\u00edficas. Adem\u00e1s, la posibilidad de crear mesas de trabajo separadas en un solo lienzo permite un trabajo mucho m\u00e1s espec\u00edfico de los sites m\u00e1s sensibles.<\/p>\n

\"Mockup
Mockup o Wireframe<\/figcaption><\/figure>\n

Igualmente, los mockups nos ofrecen la ventaja de poder crear s\u00edmbolos a la hora de trabajar con ellos, el cliente solo ve los s\u00edmbolos y se centra en la funcionalidad y no en el aspecto visual<\/strong> que va a tener la web. Si los usamos, podremos ahorrar mucho tiempo en la creaci\u00f3n del dise\u00f1o final.<\/p>\n

Si necesitamos trabajar con mockups para crear modelos de nuestros dise\u00f1os web, debemos tener en cuenta que necesitaremos la instalaci\u00f3n de diversos plugins que nos facilitar\u00e1n nuestra tarea, en funci\u00f3n de la herramienta que usemos necesitaremos unos u otros.<\/p>\n

Los programas que nos ayudan a la creaci\u00f3n de mockups tambi\u00e9n est\u00e1n preparados para permitir la exportaci\u00f3n de tama\u00f1os y formatos de todo tipo, o bien exportar a HTML para que sea una maqueta totalmente funcional como si de una web se tratase<\/strong>.<\/p>\n

\"Ejemplo
Ejemplo de mockup<\/figcaption><\/figure>\n

Finalmente, merece la pena destacar la posibilidad de incorporar plugins a los programas de edici\u00f3n y creaci\u00f3n de mockups que nos permitan colaborar en la distancia para culminar el trabajo, simplemente clicando en la capa que nos interesa para ver toda la informaci\u00f3n.<\/p>\n

En definitiva, el trabajo de un dise\u00f1ador en el mockup de su proyecto es mucho m\u00e1s f\u00e1cil de lo que puede parecer a priori, gracias a los numerosos recursos t\u00e9cnicos que tiene a su disposici\u00f3n. La optimizaci\u00f3n relativamente simple del trabajo y la eficacia de los mockups como herramienta para visualizar la esencia de un proyecto web antes de su edici\u00f3n definitiva convierten estos elementos en los mejores aliados para los desarrolladores y dise\u00f1adores web. Esto es especialmente importante a la hora de presentar el dise\u00f1o de un site para su aprobaci\u00f3n a un cliente, que seguro tendr\u00e1 muchas dudas acerca de su resultado final.<\/p>\n<\/div><\/div>","protected":false},"excerpt":{"rendered":"

Los mockups o wireframes son la herramienta perfecta para previsualizar el trabajo final de una p\u00e1gina web, son un modelo o maqueta que nos ayudan a presentar de manera realista una web<\/p>\n","protected":false},"author":1,"featured_media":5851,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":{"0":"post-5842","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-diseno-web"},"yoast_head":"\nMockups para mejorar el trabajo de dise\u00f1o web | 4webs.es<\/title>\n<meta name=\"description\" content=\"Los mockups o wireframes son la herramienta perfecta para previsualizar el trabajo final de una p\u00e1gina web, son un modelo o maqueta que nos ayudan a presentar de manera realista una web\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.4webs.es\/blog\/mockups-mejorar-trabajo-diseno-web-2\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mockups para mejorar el trabajo de dise\u00f1o web | 4webs.es\" \/>\n<meta property=\"og:description\" content=\"Los mockups o wireframes son la herramienta perfecta para previsualizar el trabajo final de una p\u00e1gina web, son un modelo o maqueta que nos ayudan a presentar de manera realista una web\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.4webs.es\/blog\/mockups-mejorar-trabajo-diseno-web-2\" \/>\n<meta property=\"og:site_name\" content=\"4webs\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/4webs\" \/>\n<meta property=\"article:published_time\" content=\"2016-10-10T06:29:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.4webs.es\/blog\/wp-content\/uploads\/2016\/10\/mockups-wireframes.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"852\" \/>\n\t<meta property=\"og:image:height\" content=\"447\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Pablo Risue\u00f1o\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@4webs\" \/>\n<meta name=\"twitter:site\" content=\"@4webs\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Pablo Risue\u00f1o\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/mockups-mejorar-trabajo-diseno-web-2#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/mockups-mejorar-trabajo-diseno-web-2\"},\"author\":{\"name\":\"Pablo Risue\u00f1o\",\"@id\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/#\\\/schema\\\/person\\\/fc07e8cecb1e51ce56b131a1eb0b3048\"},\"headline\":\"Mockups para mejorar el trabajo de dise\u00f1o web\",\"datePublished\":\"2016-10-10T06:29:17+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/mockups-mejorar-trabajo-diseno-web-2\"},\"wordCount\":705,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/mockups-mejorar-trabajo-diseno-web-2#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/wp-content\\\/uploads\\\/2016\\\/10\\\/mockups-wireframes.jpg\",\"articleSection\":[\"Dise\u00f1o web\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.4webs.es\\\/blog\\\/mockups-mejorar-trabajo-diseno-web-2#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/mockups-mejorar-trabajo-diseno-web-2\",\"url\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/mockups-mejorar-trabajo-diseno-web-2\",\"name\":\"Mockups para mejorar el trabajo de dise\u00f1o web | 4webs.es\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/mockups-mejorar-trabajo-diseno-web-2#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/mockups-mejorar-trabajo-diseno-web-2#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/wp-content\\\/uploads\\\/2016\\\/10\\\/mockups-wireframes.jpg\",\"datePublished\":\"2016-10-10T06:29:17+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/#\\\/schema\\\/person\\\/fc07e8cecb1e51ce56b131a1eb0b3048\"},\"description\":\"Los mockups o wireframes son la herramienta perfecta para previsualizar el trabajo final de una p\u00e1gina web, son un modelo o maqueta que nos ayudan a presentar de manera realista una web\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/mockups-mejorar-trabajo-diseno-web-2#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.4webs.es\\\/blog\\\/mockups-mejorar-trabajo-diseno-web-2\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/mockups-mejorar-trabajo-diseno-web-2#primaryimage\",\"url\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/wp-content\\\/uploads\\\/2016\\\/10\\\/mockups-wireframes.jpg\",\"contentUrl\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/wp-content\\\/uploads\\\/2016\\\/10\\\/mockups-wireframes.jpg\",\"width\":852,\"height\":447},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/mockups-mejorar-trabajo-diseno-web-2#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.4webs.es\\\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Mockups para mejorar el trabajo de dise\u00f1o web\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/\",\"name\":\"4webs\",\"description\":\"Desarrollo con Prestashop, gesti\u00f3n de proyectos ecommerce\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/#\\\/schema\\\/person\\\/fc07e8cecb1e51ce56b131a1eb0b3048\",\"name\":\"Pablo Risue\u00f1o\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/6938f7637a533914c144759f6249310d5f8fdef83738a4641b2d151a17c19f97?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/6938f7637a533914c144759f6249310d5f8fdef83738a4641b2d151a17c19f97?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/6938f7637a533914c144759f6249310d5f8fdef83738a4641b2d151a17c19f97?s=96&d=mm&r=g\",\"caption\":\"Pablo Risue\u00f1o\"},\"sameAs\":[\"http:\\\/\\\/www.4webs.es\"],\"url\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/author\\\/admin\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Mockups para mejorar el trabajo de dise\u00f1o web | 4webs.es","description":"Los mockups o wireframes son la herramienta perfecta para previsualizar el trabajo final de una p\u00e1gina web, son un modelo o maqueta que nos ayudan a presentar de manera realista una web","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:\/\/www.4webs.es\/blog\/mockups-mejorar-trabajo-diseno-web-2","og_locale":"es_ES","og_type":"article","og_title":"Mockups para mejorar el trabajo de dise\u00f1o web | 4webs.es","og_description":"Los mockups o wireframes son la herramienta perfecta para previsualizar el trabajo final de una p\u00e1gina web, son un modelo o maqueta que nos ayudan a presentar de manera realista una web","og_url":"https:\/\/www.4webs.es\/blog\/mockups-mejorar-trabajo-diseno-web-2","og_site_name":"4webs","article_publisher":"https:\/\/www.facebook.com\/4webs","article_published_time":"2016-10-10T06:29:17+00:00","og_image":[{"width":852,"height":447,"url":"https:\/\/www.4webs.es\/blog\/wp-content\/uploads\/2016\/10\/mockups-wireframes.jpg","type":"image\/jpeg"}],"author":"Pablo Risue\u00f1o","twitter_card":"summary_large_image","twitter_creator":"@4webs","twitter_site":"@4webs","twitter_misc":{"Escrito por":"Pablo Risue\u00f1o","Tiempo de lectura":"3 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.4webs.es\/blog\/mockups-mejorar-trabajo-diseno-web-2#article","isPartOf":{"@id":"https:\/\/www.4webs.es\/blog\/mockups-mejorar-trabajo-diseno-web-2"},"author":{"name":"Pablo Risue\u00f1o","@id":"https:\/\/www.4webs.es\/blog\/#\/schema\/person\/fc07e8cecb1e51ce56b131a1eb0b3048"},"headline":"Mockups para mejorar el trabajo de dise\u00f1o web","datePublished":"2016-10-10T06:29:17+00:00","mainEntityOfPage":{"@id":"https:\/\/www.4webs.es\/blog\/mockups-mejorar-trabajo-diseno-web-2"},"wordCount":705,"commentCount":0,"image":{"@id":"https:\/\/www.4webs.es\/blog\/mockups-mejorar-trabajo-diseno-web-2#primaryimage"},"thumbnailUrl":"https:\/\/www.4webs.es\/blog\/wp-content\/uploads\/2016\/10\/mockups-wireframes.jpg","articleSection":["Dise\u00f1o web"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.4webs.es\/blog\/mockups-mejorar-trabajo-diseno-web-2#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.4webs.es\/blog\/mockups-mejorar-trabajo-diseno-web-2","url":"https:\/\/www.4webs.es\/blog\/mockups-mejorar-trabajo-diseno-web-2","name":"Mockups para mejorar el trabajo de dise\u00f1o web | 4webs.es","isPartOf":{"@id":"https:\/\/www.4webs.es\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.4webs.es\/blog\/mockups-mejorar-trabajo-diseno-web-2#primaryimage"},"image":{"@id":"https:\/\/www.4webs.es\/blog\/mockups-mejorar-trabajo-diseno-web-2#primaryimage"},"thumbnailUrl":"https:\/\/www.4webs.es\/blog\/wp-content\/uploads\/2016\/10\/mockups-wireframes.jpg","datePublished":"2016-10-10T06:29:17+00:00","author":{"@id":"https:\/\/www.4webs.es\/blog\/#\/schema\/person\/fc07e8cecb1e51ce56b131a1eb0b3048"},"description":"Los mockups o wireframes son la herramienta perfecta para previsualizar el trabajo final de una p\u00e1gina web, son un modelo o maqueta que nos ayudan a presentar de manera realista una web","breadcrumb":{"@id":"https:\/\/www.4webs.es\/blog\/mockups-mejorar-trabajo-diseno-web-2#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.4webs.es\/blog\/mockups-mejorar-trabajo-diseno-web-2"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.4webs.es\/blog\/mockups-mejorar-trabajo-diseno-web-2#primaryimage","url":"https:\/\/www.4webs.es\/blog\/wp-content\/uploads\/2016\/10\/mockups-wireframes.jpg","contentUrl":"https:\/\/www.4webs.es\/blog\/wp-content\/uploads\/2016\/10\/mockups-wireframes.jpg","width":852,"height":447},{"@type":"BreadcrumbList","@id":"https:\/\/www.4webs.es\/blog\/mockups-mejorar-trabajo-diseno-web-2#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.4webs.es\/blog"},{"@type":"ListItem","position":2,"name":"Mockups para mejorar el trabajo de dise\u00f1o web"}]},{"@type":"WebSite","@id":"https:\/\/www.4webs.es\/blog\/#website","url":"https:\/\/www.4webs.es\/blog\/","name":"4webs","description":"Desarrollo con Prestashop, gesti\u00f3n de proyectos ecommerce","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.4webs.es\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.4webs.es\/blog\/#\/schema\/person\/fc07e8cecb1e51ce56b131a1eb0b3048","name":"Pablo Risue\u00f1o","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/secure.gravatar.com\/avatar\/6938f7637a533914c144759f6249310d5f8fdef83738a4641b2d151a17c19f97?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/6938f7637a533914c144759f6249310d5f8fdef83738a4641b2d151a17c19f97?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6938f7637a533914c144759f6249310d5f8fdef83738a4641b2d151a17c19f97?s=96&d=mm&r=g","caption":"Pablo Risue\u00f1o"},"sameAs":["http:\/\/www.4webs.es"],"url":"https:\/\/www.4webs.es\/blog\/author\/admin"}]}},"_links":{"self":[{"href":"https:\/\/www.4webs.es\/blog\/wp-json\/wp\/v2\/posts\/5842","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.4webs.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.4webs.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.4webs.es\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.4webs.es\/blog\/wp-json\/wp\/v2\/comments?post=5842"}],"version-history":[{"count":6,"href":"https:\/\/www.4webs.es\/blog\/wp-json\/wp\/v2\/posts\/5842\/revisions"}],"predecessor-version":[{"id":5850,"href":"https:\/\/www.4webs.es\/blog\/wp-json\/wp\/v2\/posts\/5842\/revisions\/5850"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.4webs.es\/blog\/wp-json\/wp\/v2\/media\/5851"}],"wp:attachment":[{"href":"https:\/\/www.4webs.es\/blog\/wp-json\/wp\/v2\/media?parent=5842"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.4webs.es\/blog\/wp-json\/wp\/v2\/categories?post=5842"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.4webs.es\/blog\/wp-json\/wp\/v2\/tags?post=5842"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}