Maquetas, prototipos, wireframes, mockup, interfaz gr\u00e1fica…<\/h3>\n
A los profesionales web les gustan los t\u00e9rminos creativos y los anglicismos. Hay casi una decena de t\u00e9rminos para designar los prototipos web que creamos antes crear los dise\u00f1os del sitio web en lenguaje de programaci\u00f3n. Gran parte de esta riqueza l\u00e9xica se debe a que el prototipo web engloba dos aspectos bien diferenciados.<\/p>\n
La maqueta funcional (wireframe o prototipo)<\/h4>\n
![\"Crear](\"\/es\/wp-content\/uploads\/sites\/2\/2019\/09\/Maqueta-funcional-1024x543.png\")
<\/p>\n
Consiste en esquematizar la disposici\u00f3n de la p\u00e1gina web en blanco y negro: la organizaci\u00f3n de los distintos elementos, incluso los textos principales. Este tipo de maquetas se conocen como wireframes o prototipos. El t\u00e9rmino ingl\u00e9s mockup, tambi\u00e9n muy utilizado, hace referencia a una maqueta funcional de la p\u00e1gina web a escala 1:1. La zonificaci\u00f3n se refiere a una maqueta funcional formada por bloques y es la primera fase de la elaboraci\u00f3n de prototipos.<\/p>\n
El prototipo que mostramos como ejemplo se cre\u00f3 con la aplicaci\u00f3n Balsamiq.<\/p>\n
Maqueta web visual (Photoshop)<\/h4>\n
![\"Crear](\"\/es\/wp-content\/uploads\/sites\/2\/2019\/09\/Maqueta-grafica.jpg\")
<\/p>\n
A partir de la maqueta funcional, la maqueta visual integra los colores y la identidad corporativa. Es una representaci\u00f3n bastante precisa de la futura p\u00e1gina web, aunque los textos a\u00fan suelen ser mudos (lorem ipsum). En general, las maquetas visuales se crean con la aplicaci\u00f3n Adobe Photoshop o Adobe Illustrator.<\/p>\n
\u00bfPor qu\u00e9 es importante preparar bien las maquetas de tu p\u00e1gina web?<\/h3>\n
Cambiar el dise\u00f1o o la identidad visual de un sitio web a posteriori no es f\u00e1cil. Aunque utilices un programa para crear p\u00e1ginas web, es un trabajo dif\u00edcil de todos modos. Por ejemplo, con Wix, es necesario volver a crear el sitio web desde cero si decides cambiar de plantilla.<\/p>\n
Por tanto, es importante disponer de prototipos web profesionales y eficaces desde el principio. Para eso, es importante tomarse el tiempo de elaborar maquetas web funcionales para todas las p\u00e1ginas web importantes del sitio web. Lo ideal es ir cambiando estas maquetas web funcionales: elaborar una primera versi\u00f3n, recabar distintos puntos de vista, redise\u00f1ar el prototipo, pedir m\u00e1s opiniones y as\u00ed sucesivamente.<\/p>\n
Este proceso se desarrollar\u00e1 de forma diferente seg\u00fan la manera en la que se desarrolle el sitio web.<\/p>\n
- \n
- Si has contratado a un proveedor para crear un p\u00e1gina web<\/strong>, tendr\u00e1s que prever con la agencia web o el desarrollador una primera fase para compartir maquetas funcionales y evaluarlas. Al contrario de lo que pudiera parecer, las agencias web pueden apresurarse en acelerar los proyectos para no trabajar sobre muchos sitios web de forma simult\u00e1nea. Es bastante com\u00fan que crear prototipos web sea una fase de trabajo r\u00e1pida con un solo intercambio con el cliente.<\/li>\n
- Si decides desarrollar el sitio web por cuenta propia<\/strong>, una de las dificultades radica en la necesidad de motivarte a crear (y evaluar) las maquetas funcionales antes de adentrarte en la construcci\u00f3n de la p\u00e1gina utilizando la interfaz de tu CMS (o incluso un bloc de notas tradicional, para aquellos que prefieren el enfoque m\u00e1s cl\u00e1sico). A veces, tendemos a pensar que nuestras ideas est\u00e1n lo suficientemente claras como para pasar por alto el proceso de crear prototipos web. Sin embargo, a menos que seas un experto en dise\u00f1os de interfaces, los comentarios que puedas obtener mediante una maqueta funcional simple poseen un valor considerable, especialmente cuando se trata de ajustar las caracter\u00edsticas de tu sitio web.<\/li>\n<\/ul>\n
<\/a>Elegir las mejores herramientas para crear prototipos web<\/h2>\n
Hoja en blanco, Visio, Powerpoint, Balsamiq o Photoshop: \u00bfqu\u00e9 herramienta elegir para elaborar los prototipos\/maquetas de una p\u00e1gina web?<\/p>\n
Los m\u00e9todos tradicionales<\/h3>\n
Para crear prototipos web, numerosas agencias web contin\u00faan utilizando m\u00e9todos que se pueden considerar \u00abtradicionales\u00bb en la \u00e9poca del software SaaS. El principal inconveniente de usar estos m\u00e9todos es que no facilitan la gesti\u00f3n de las proporciones, lo que supone un inconveniente a la hora de prever la disposici\u00f3n para diferentes formatos y dispositivos.<\/p>\n
- \n
- El papel<\/b>: Aunque parezca parad\u00f3jico en el mundo de los profesionales web, sigue habiendo muchos defensores convencidos de crear prototipos web en papel. El r\u00e1pido, accesible, flexible… El papel tiene numerosas ventajas para la creaci\u00f3n de esquemas.<\/li>\n
- Microsoft Visio<\/b>: Este programa integrado en Office Pro permite elaborar diagramas profesionales complejos. Algunas agencias web lo utilizan para realizar el \u00e1rbol web<\/a><\/strong> de los sitios que crear y tambi\u00e9n las maquetas funcionales. Personalmente, no es nuestra herramienta preferida, ya que no est\u00e1 muy adaptada a este uso.<\/li>\n
- Microsoft Powerpoint<\/b>: El famoso programa de Office tambi\u00e9n puede servir para crear prototipos web funcionales, sobre todo porque dispone de bibliotecas de componentes adicionales pensados para la creaci\u00f3n de esquemas; por ejemplo, PowerMockup<\/strong><\/a>. Aunque Powerpoint (o Keynote) no se dise\u00f1\u00f3 para este objetivo, la flexibilidad y la simplicidad del programa, sobre todo para manipular formas simples, lo convierten en una herramienta adaptada para la creaci\u00f3n de esquemas simples.<\/li>\n<\/ul>\n
Las aplicaciones de mockups \/ esquemas<\/h3>\n
Las app de mockups, diagramas o esquemas son generalmente herramientas SaaS que se pueden usar desde un navegador web y est\u00e1n dise\u00f1adas para elaborar maquetas funcionales de p\u00e1ginas web. En la mayor\u00eda de los casos, una aplicaci\u00f3n de este tipo ofrece recursos para gestionar la escala de la representaci\u00f3n y las proporciones entre los distintos componentes, y lo mejor de todo es que suelen ser programas colaborativos donde todos los miembros del equipo pueden realizar sus aportaciones.<\/p>\n
Existen numerosas aplicaciones de mockups en el mercado: herramientas m\u00e1s sencillas y m\u00e1s completas, app gratuitas y de pago… En este art\u00edculo no vamos a entrar en detalle de lo que ofrece cada una de ellas. Vamos a presentarte en pocas palabras una muestra de 10 aplicaciones diferentes que permiten trabajar con enfoques diversos, sobre todo en lo que respecta el nivel de detalle.<\/p>\n
Tabla comparativa: 10 aplicaciones para crear prototipos web<\/h4>\n
\n\n
\n \n\n \n \n <\/colgroup>\n \n \n\nNombre<\/th> Presentaci\u00f3n<\/th> Tarifas<\/th><\/tr>\n<\/thead>\n \n ![\"Cacoo\"](\"https:\/\/www.webolto.com\/es\/wp-content\/uploads\/sites\/2\/2021\/10\/cacoo-logo.png\")
<\/a><\/td>Cacoo es un programa SaaS con un enfoque claramente colaborativo, cuya versi\u00f3n gratuita es suficiente para un uso sencillo. Es muy sencillo de utilizar y permite elaborar todo tipo de prototipos y esquemas.<\/td> - \n
- Dispone de versi\u00f3n gratuita<\/li>\n
- Versi\u00f3n pro: 5 $ \/mes<\/li>\n<\/ul><\/td> <\/tr>\n
\n ![\"Balsamiq\"](\"https:\/\/www.webolto.com\/es\/wp-content\/uploads\/sites\/2\/2021\/10\/balsamiq-logo.png\")
<\/a><\/td>Balsamiq es un programa disponible en versi\u00f3n de escritorio o versi\u00f3n web que se ha convertido en una referencia para la creaci\u00f3n de p\u00e1ginas web. Es simple y eficaz al mismo tiempo, y permite que cualquier persona cree maquetas web funcionales bastante complejas.<\/td> - \n
- Por 2 proyectos: 9 $\/mes<\/li>\n
- Por 20 proyectos: 49 $\/mes<\/li>\n
- Por 200 proyectos: 199 $\/mes<\/li>\n<\/ul><\/td> <\/tr>\n
\n ![\"Axure\"](\"https:\/\/www.webolto.com\/es\/wp-content\/uploads\/sites\/2\/2021\/10\/axure-logo.png\")
<\/a><\/td>Axure RP es posiblemente el programa m\u00e1s completo y potente del mercado en el prototipado y la realizaci\u00f3n de esquemas de interfaces web. En general, lo utilizan las agencias o los dise\u00f1adores freelance de un cierto nivel.<\/td> - \n
- Versi\u00f3n Pro: 25 $\/mes por usuario<\/li>\n
- Versi\u00f3n Team: 42 $\/mes por usuario<\/li>\n
- Version Entreprise con funcionalidades m\u00e1s avanzadas con presupuesto a medida<\/li>\n<\/ul><\/td> <\/tr>\n
\n ![\"Wireframe](\"https:\/\/www.webolto.com\/es\/wp-content\/uploads\/sites\/2\/2021\/10\/wireframe-logo.png\")
<\/a><\/td>Esta herramienta es particularmente intuitiva y f\u00e1cil de usar. Resulta ideal para crear sitios web simples. El wireframe que ofrece este programa se puede usar de forma completamente intuitiva, sin conocimientos t\u00e9cnicos previos. Puedes crear una maqueta b\u00e1sica sin ninguna dificultad.<\/td> - \n
- Dispone de versi\u00f3n gratuita<\/li>\n
- Versi\u00f3n premium: 16 $\/mes<\/li>\n<\/ul><\/td> <\/tr>\n
\n ![\"Figma\"](\"https:\/\/www.webolto.com\/es\/wp-content\/uploads\/sites\/2\/2021\/10\/figma-logo.png\")
<\/a><\/td>Con Figma, podr\u00e1s crear una maqueta de sitio web en la nube. Te ofrece la posibilidad de crear varios dise\u00f1os para un mismo proyecto. Esta herramienta es f\u00e1cil de manejar y muy intuitiva.<\/td> - \n
- Versi\u00f3n Starter gratuita para 2 usuarios y 3 proyectos<\/li>\n
- Versi\u00f3n Professional: 12 $\/mes por usuario<\/li>\n
- Versi\u00f3n Professional: 45 $\/mes por usuario<\/li>\n<\/ul><\/td> <\/tr>\n
\n Pencil Project es una herramienta de prototipado gratuita que posee todas las funcionalidades b\u00e1sicas para crear esquemas de p\u00e1ginas web a partir de modelos predefinidos. Tambi\u00e9n puedes descargar bibliotecas de formas de internet si necesitas personalizar a fondo tus maquetas.<\/td> Completamente gratuito<\/td> <\/tr>\n \n ![\"NinjaMock\"](\"https:\/\/www.webolto.com\/es\/wp-content\/uploads\/sites\/2\/2021\/10\/NinjaMock-logo.png\")
<\/a><\/td>NinjaMock es una herramienta eficaz para para crear prototipos web en equipo. La interfaz es f\u00e1cil de manejar y la navegaci\u00f3n es fluida. Se puede usar en distintos soportes (iOS, Android, Windows...).<\/td> - \n
- Dispone de versi\u00f3n gratuita para 1 proyecto<\/li>\n
- Versi\u00f3n Pro: 5 $\/mes por usuario<\/li>\n<\/ul><\/td> <\/tr>\n
\n ![\"Pidoco\"](\"https:\/\/www.webolto.com\/es\/wp-content\/uploads\/sites\/2\/2021\/10\/pidoco-logo.png\")
<\/a><\/td>Pidoco est\u00e1 disponible en l\u00ednea y ofrece varias plantillas para facilitar para crear prototipos web. Esta herramienta permite crear con rapidez maquetas listas para usar.<\/td> - \n
- Dispone de versi\u00f3n gratuita para la edici\u00f3n de un solo proyecto.<\/li>\n
- Versi\u00f3n Basic: 9,99 $\/mes por usuario (19 $ sin oferta)<\/li>\n
- Versi\u00f3n Pro: 29 $\/mes por usuario<\/li>\n
- Versi\u00f3n Unlimited: 199 $\/mes por usuario<\/li>\n<\/ul><\/td> <\/tr>\n
\n ![\"MockFlow\"](\"https:\/\/www.webolto.com\/es\/wp-content\/uploads\/sites\/2\/2021\/10\/mockflow-logo.png\")
<\/a><\/td>MockFlow est\u00e1 disponible en l\u00ednea y dispone de numerosas plantillas personalizables. Esta herramienta es colaborativa y se puede aprender r\u00e1pidamente usarla.<\/td> - \n
- Dispone de versi\u00f3n gratuita<\/li>\n
- Versiones avanzadas a partir de 14 $\/mes por usuario<\/li>\n<\/ul><\/td> <\/tr>\n
\n ![\"FluidUI\"](\"https:\/\/www.webolto.com\/es\/wp-content\/uploads\/sites\/2\/2021\/10\/fluid-logo.png\")
<\/a><\/td>FluidUI se puede usar en varias plataformas, como Android o iOS. Esta herramienta posee numerosos elementos que permiten crear maquetas web personalizadas.<\/td> - \n
- Dispone de versi\u00f3n gratuita limitada para 1 proyecto<\/li>\n
- Versi\u00f3n Pro: 19 $\/mes<\/li>\n
- Versi\u00f3n Team: 41 $\/mes<\/li>\n<\/ul><\/td> <\/tr>\n <\/tbody>\n <\/table>\n
- Microsoft Visio<\/b>: Este programa integrado en Office Pro permite elaborar diagramas profesionales complejos. Algunas agencias web lo utilizan para realizar el \u00e1rbol web<\/a><\/strong> de los sitios que crear y tambi\u00e9n las maquetas funcionales. Personalmente, no es nuestra herramienta preferida, ya que no est\u00e1 muy adaptada a este uso.<\/li>\n
- Si decides desarrollar el sitio web por cuenta propia<\/strong>, una de las dificultades radica en la necesidad de motivarte a crear (y evaluar) las maquetas funcionales antes de adentrarte en la construcci\u00f3n de la p\u00e1gina utilizando la interfaz de tu CMS (o incluso un bloc de notas tradicional, para aquellos que prefieren el enfoque m\u00e1s cl\u00e1sico). A veces, tendemos a pensar que nuestras ideas est\u00e1n lo suficientemente claras como para pasar por alto el proceso de crear prototipos web. Sin embargo, a menos que seas un experto en dise\u00f1os de interfaces, los comentarios que puedas obtener mediante una maqueta funcional simple poseen un valor considerable, especialmente cuando se trata de ajustar las caracter\u00edsticas de tu sitio web.<\/li>\n<\/ul>\n
![\"Pencil](\"https:\/\/www.webolto.com\/es\/wp-content\/uploads\/sites\/2\/2021\/10\/PencilProject-logo.png\"){kind=logo}
<\/a><\/p><\/td>