{"id":31592,"date":"2024-11-12T12:39:33","date_gmt":"2024-11-12T12:39:33","guid":{"rendered":"https:\/\/www.seobility.net\/?post_type=wiki&p=31592"},"modified":"2025-03-18T14:06:43","modified_gmt":"2025-03-18T14:06:43","slug":"Mockup","status":"publish","type":"wiki","link":"https:\/\/www.seobility.net\/es\/wiki\/Mockup","title":{"rendered":"Mockup"},"content":{"rendered":"

\u00bfQu\u00e9 es un mockup?<\/span><\/h2>\n

El mockup es una maqueta conceptual que se utiliza en el desarrollo web para mostrar un primer borrador o prototipo de un sitio web o una aplicaci\u00f3n. Principalmente, ayuda a convertir ideas y conceptos en dise\u00f1os concretos, por lo que incluyen la estructura de navegaci\u00f3n final y los elementos de dise\u00f1o detallados de manera que su estructura se asemeje lo m\u00e1s posible a la representaci\u00f3n final del website.\n<\/p>\n

Por lo tanto, los mockups pueden ser simples plantillas<\/a> sin ninguna funcionalidad hasta prototipos interactivos creados con un software especializado. Sin embargo, cuando se trata de proyectos peque\u00f1os, generalmente no se utilizan los mockups sino que directamente se crean plantillas en HTML y CSS o se utilizan plantillas terminadas que se adaptan a los requisitos individuales de cada proyecto.\n<\/p>\n

Diferencias entre un wireframe y un prototipo<\/span><\/h2>\n

A menudo los t\u00e9rminos wireframe, prototipo y mockup se emplean como sin\u00f3nimos, pero en realidad son 3 herramientas conceptuales independientes que constituyen 3 etapas diferentes del dise\u00f1o y que se realizan antes de pasar a la fase de programaci\u00f3n.\n<\/p>\n

En principio, un wireframe o esquema de p\u00e1gina representa la primera versi\u00f3n de la plantilla en el desarrollo web y, a diferencia de los mockups, no contiene colores, textos (tipograf\u00eda) o contenido visual (fotos, gr\u00e1ficos).\n<\/p>\n

Por lo general, este boceto se genera en una computadora usando un software especializado en wireframes o mediante un dibujo hecho a mano. As\u00ed pues, como son el primer borrador del dise\u00f1o, carecen de funcionalidad y se consideran dibujos conceptuales de baja fidelidad.\n<\/p>\n

Por otro lado, los mockups est\u00e1n basados en un wireframe existente y, por lo tanto, se los sit\u00faa en la siguiente etapa del dise\u00f1o. Un mockup representa una vista previa de lo que podr\u00eda ser el dise\u00f1o final, agregando elementos visuales y textuales, raz\u00f3n por la que generalmente son el formato m\u00e1s popular a la hora de hacer una presentaci\u00f3n para una o un cliente.\n<\/p>\n

De hecho, inicialmente los mockups eran est\u00e1ticos, pero en la actualidad, los software especializados los han vuelto m\u00e1s interactivos y capaces de mostrar funciones simples como la visualizaci\u00f3n de enlaces internos<\/a>. Por ello, dependiendo de su complejidad y alcance, los mockups pueden acercarse mucho a lo que ser\u00eda el \u00abprototipo\u00bb del dise\u00f1o final.\n<\/p>\n

De esta manera, los mockups dise\u00f1ados con mayor complejidad son considerados como conceptos de media o alta fidelidad y se utilizan como la base del prototipo.\n<\/p>\n

El \u00faltimo eslab\u00f3n de la cadena son los prototipos, es decir, maquetas casi id\u00e9nticas al producto final. A diferencia de los mockups est\u00e1ticos o b\u00e1sicos, los prototipos son interactivos e incluyen todas las caracter\u00edsticas planificadas para sitio web o la aplicaci\u00f3n.\n<\/p>\n

Aplicaciones de los mockups<\/span><\/h2>\n

El desarrollo web actual utiliza los mockups para desarrollar aplicaciones o sitios web que ser\u00e1n presentadas frente a un p\u00fablico o a una audiencia de prueba para verificar la calidad y proporcionar demostraciones de uso.\n<\/p>\n

En la mayor\u00eda de los casos, estas maquetas representan la versi\u00f3n final de una aplicaci\u00f3n o sitio web en toda su funcionalidad, lo que permite evaluar el trabajo de desarrollo previo.\n<\/p>\n

As\u00ed pues, durante esta evaluaci\u00f3n se analizan las ideas, los requisitos y los deseos de las y los clientes y usuarias\/os con respecto al dise\u00f1o, la interfaz de uso, la estructura de la aplicaci\u00f3n y el alcance de sus funciones.\n<\/p>\n

Como la representaci\u00f3n del mockup final es tan precisa, se puede eliminar con rapidez y eficiencia cualquier problema e inexactitud en el dise\u00f1o, el alcance funcional o la estructura del contenido para que no forme parte del prototipo final.\n<\/p>\n

Beneficios de los mockups<\/span><\/h2>\n

Los mockups ofrecen muchas ventajas en el desarrollo web, pues dado que su creaci\u00f3n requiere poco esfuerzo y brindan una impresi\u00f3n realista del producto final, se emplean para testear la usabilidad<\/a> e identificar posibles errores o fuentes de errores antes de dedicar muchas horas de esfuerzo al desarrollo final.\n<\/p>\n

De este modo, se consigue identificar previamente los posibles problemas que haya antes de crear el prototipo, minimizando el riesgo de tener que redise\u00f1ar completamente el producto durante la etapa de desarrollo. Por lo tanto, el uso de mockups en el desarrollo web puede ahorrar mucho tiempo y dinero.\n<\/p>\n

Software para crear mockups<\/span><\/h2>\n

Existen decenas de software de edici\u00f3n de im\u00e1genes para crear mockups simples como Microsoft PowerPoint o Adobe Illustrator. Sin embargo, en comparaci\u00f3n con software especializados en la realizaci\u00f3n de mockups, estos son bastante dif\u00edciles de usar y ofrecen menos funciones.\n<\/p>\n

En contraste, las tools especializadas brindan numerosos elementos y plantillas, adem\u00e1s de la capacidad de crear dise\u00f1os de mockups modulares, as\u00ed como secuencias de interacci\u00f3n simple, r\u00e1pida y f\u00e1ciles.\n<\/p>\n

\"Herramienta\n<\/p>\n

Captura de pantalla de una herramienta de mockup de moqups.com<\/a>.\n<\/p>\n

Estas son algunas de las herramientas para la creaci\u00f3n de mockups m\u00e1s conocidas para sitios web y aplicaciones:\n<\/p>\n