{"id":5785,"date":"2016-09-28T09:31:16","date_gmt":"2016-09-28T08:31:16","guid":{"rendered":"http:\/\/www.4webs.es\/blog\/?p=5785"},"modified":"2016-09-02T22:44:50","modified_gmt":"2016-09-02T21:44:50","slug":"mockups-mejorar-trabajo-diseno-web","status":"publish","type":"post","link":"https:\/\/www.4webs.es\/blog\/mockups-mejorar-trabajo-diseno-web","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<\/strong> 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 o web corporativa de 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. Con la visualizaci\u00f3n de esta maqueta, podremos presentarles el dise\u00f1o con el realismo necesario<\/strong> 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, ya que ofrecen numerosas ventajas para el trabajo del dise\u00f1ador en cuanto a eficacia y rapidez.<\/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

Asimismo, trabajar con mockups nos permite un control total de la escalabilidad y la funcionalidad total sin que el cliente tenga acceso al dise\u00f1o, con lo que en esta parte del proyecto nos centramos exclusivamente en la estructura y \u00a0funcionalidad\u00a0sin tener que mirar dise\u00f1o. Igualmente, los mockups nos ofrecen la ventaja de poder crear s\u00edmbolos a la hora de trabajar con ellos. 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.<\/p>\n

\"axure-wireframe\"<\/p>\n

Los botones din\u00e1micos son un plugin pensado para que podamos crear botones con acolchados fijos que se expandan autom\u00e1ticamente para mostrar su texto. Tambi\u00e9n es indispensable plugins de arte, que nos permitan duplicar elementos de dise\u00f1o a un nivel de precisi\u00f3n perfecta de p\u00edxeles. Incluso son la opci\u00f3n perfecta para que podamos tener nuestra biblioteca de dise\u00f1o vinculada con la nube.<\/p>\n

Tambi\u00e9n se trabaja con un plugin que permite la composici\u00f3n de capas de los mockups, para conseguir una imagen muy rica y completa. Algo parecido ocurre con el sistema de gesti\u00f3n del color en la creaci\u00f3n de mockups, ya que existe un plugin que permite crear una paleta de colores propia, y guardarla tanto a nivel de colores globales o de documento.<\/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, si aplicamos el plugin espec\u00edfico para ello. De esta manera, se nos facilita el dise\u00f1o de modelos en diversos sistemas operativos.<\/p>\n

Algunos de estos programas para wireframes que solemos usar<\/strong>, hay que decir que muchos de ellos son de pago, aunque estamos seguros que lo amortizar\u00e1s desde el primer proyecto:<\/p>\n