Una maqueta es como vestirse bien, tomar algunas selfies y luego pasar el resto de la noche en el sofá sin hacer nada. El objetivo de crear uno, generalmente en sitios web o software de maquetas, es mostrar a las partes interesadas cómo se verán las imágenes finales, pero no es necesario que funcionen . Su maqueta no necesita ser interactiva o incluso moverse; es una vista previa que hará que su proyecto parezca real.
A diferencia de los prototipos que realmente tienen que funcionar, las maquetas son elementos visuales estáticos destinados a mostrar los diseños, la atmósfera, los colores y la estética general. Algunos diseñadores prefieren crear cada botón e ícono desde cero, pero si desea adelantarse, o jugar en busca de inspiración, los sitios web y el software de maquetas vienen precargados con estos elementos y pueden ser más fáciles de usar que el software de diseño gráfico.
Los sitios a continuación lo ayudan a crear maquetas de pantallas de sitios web, maquetas de pantallas de aplicaciones, maquetas de productos y más. La mayoría viene con plantillas de maquetas de sitios web o kits de interfaz de usuario, que le permiten diseñar con elementos prefabricados como botones. Son excelentes para ahorrar tiempo si alguna vez está en apuros y necesita entregar una maqueta rápidamente. Para cada uno, desglosaremos el precio, los pros y los contras, y para quién se recomiendan.
Aquí está nuestra lista de los 9 mejores sitios web de maquetas y lo que pueden hacer:
AdobeXD
Adobe XD es la respuesta de la familia Adobe al software de diseño digital. Tiene todos los detalles y matices que podría esperar de la compañía detrás de Photoshop e Illustrator, pero también ofrece el mismo precio elevado.
Aún así, si está buscando maquetas de nivel profesional con todos los adornos, Adobe XD ofrece. Maneja todo el proceso de diseño, incluidos los prototipos interactivos, e incluso se integra con otro software de Adobe si desea crear o modificar elementos en Photoshop o Illustrator.
También es bastante sofisticado en sus características, con efectos 3D, animaciones y la opción de crear una biblioteca de componentes, un lugar para almacenar todos sus elementos como botones e íconos para que su equipo pueda usarlos nuevamente en otro proyecto (ayuda a los clientes leales si ven los mismos controles en un nuevo producto). También hay funciones especiales como Repetir cuadrícula, que ahorra tiempo cuando necesita copiar y pegar un patrón una y otra vez, y Relleno, que protege el tamaño de los píxeles al editar diferentes capas de los mismos elementos.
Precios:
- $9.99/mes
- $99.99/año (prepago)
Ventajas:
- se adapta a todo el proceso de diseño, incluidos los prototipos interactivos
- características sofisticadas: efectos 3D, animaciones y biblioteca de componentes
- funciones fáciles de usar para ahorrar tiempo: relleno, patrones repetidos y edición fácil
- se integra con otro software de Adobe
Contras:
- exagerar si solo quieres una maqueta simple y rápida
Recomendado para…
- personas lo suficientemente serias sobre el diseño digital como para querer un software de primer nivel
- diseño regular , no para proyectos únicos o individuales
Interfaz de usuario fluida
Aunque técnicamente para la creación de prototipos, la interfaz de usuario fluida es lo suficientemente robusta como para hacer magníficas maquetas, que luego puede convertir en prototipos interactivos. Es una excelente opción para diseñadores prácticos y equipos de diseño que trabajan con todo el alcance del proyecto en mente.
La interfaz de usuario fluida no es tan fácil de usar como los otros sitios web de maquetas principales, lo que le da una curva de aprendizaje que a los principiantes no les gustará. Sin embargo, tiene todas las características de nivel profesional que necesita para el diseño web y de aplicaciones, incluidos los esquemas y una biblioteca de componentes e íconos de interfaz de usuario prediseñados. Uno de sus aspectos más destacados son sus herramientas de colaboración, que permiten a los usuarios ver, comentar y editar los mismos archivos desde cualquier lugar del mundo.
Precios:
- Plan gratuito (1 proyecto)
- $8.25/mes (facturado anualmente) [Solo]
- $19.08/mes (facturado anualmente) [Pro]
- $41.58/mes (facturado anualmente) [Equipo]
Ventajas:
- funciones avanzadas aptas para profesionales
- un poco más barato que los sitios web de maquetas comparables
- colaboración de primer nivel
- gran biblioteca de componentes integrada
- las aplicaciones móviles y el cambio de dispositivo facilitan la creación de maquetas para dispositivos móviles
Contras:
- curva de aprendizaje
Recomendado para…
- personas que quieren una herramienta de diseño completa, pero están cuidando su presupuesto
InVision
También vale la pena señalar que InVision es principalmente una herramienta de creación de prototipos, por lo que muchas de sus funciones están orientadas a la interactividad y los efectos en lugar de imágenes estáticas. Aún así, tiene todo lo que necesita para obtener excelentes maquetas con píxeles perfectos, incluida la integración con Photoshop y Sketch, y con el complemento Inspect gratuito puede convertir cualquier diseño sin problemas en código de desarrollador. Y para colmo, hay una versión gratuita para siempre.
Precios:
- Versión gratuita
- $7.95/mes (facturado anualmente)
Ventajas:
- se adapta a todo el proceso de diseño, incluidos los prototipos interactivos
- características avanzadas como animaciones y efectos interactivos
- se integra con Photoshop y Sketch
- versión gratuita
Contras:
- la usabilidad es un poco más torpe que Adobe XD
Recomendado para…
- personas que principalmente quieren una herramienta de creación de prototipos, pero con capacidades de maqueta
Modificador de medios
Alejémonos de los sitios web de maquetas de nivel profesional… muy lejos. Mediamodifier está en el otro extremo del espectro: muy limitado en características y profundidad, pero extremadamente conveniente. Puede descargar maquetas directamente desde el sitio de forma gratuita, pero debe pagar para eliminar la marca de agua y obtener versiones de alta calidad.
Mediamodifier es como un editor de fotos en línea, pero precargado con plantillas de maquetas de aplicaciones y sitios web. También tienen miles de plantillas para más que solo maquetas digitales: camisetas, tazas de café, portadas de libros, etc. Todo lo que tienes que hacer es encontrar una plantilla que te guste, agregar tu propia imagen y… bueno, eso es todo lo que puedes hacer. Este es un sitio web de maquetas básico para cuando necesita algo rápido y fácil, pero no para cuando necesita impresionar a alguien con imágenes de alta calidad.
Precios:
- Plan gratuito
- $9/mes (facturado anualmente)
Ventajas:
- fácil de usar
- puede crear maquetas en segundos
- muchas plantillas para elegir
Contras:
- características básicas
- hay que pagar por una resolución de alta calidad
- hay que pagar para quitar marcas de agua
Recomendado para…
- cuando solo necesitas algo básico y rápido
- ya ha diseñado la imagen, pero necesita colocarla en un fondo de escritorio/teléfono
- una buena selección de fondos
Flujo simulado
Cuando hablamos de maquetas de sitios web que se adaptan a todo el proceso de diseño, no mencionamos mucho los wireframes. MockFlow es una de las verdaderas herramientas de diseño todo en uno que lo lleva desde estructuras alámbricas, a través de maquetas y hasta prototipos.
Además de sus capacidades de creación de tramas, MockFlow también ofrece mucha flexibilidad con los complementos adicionales en su MockStore. Allí puede encontrar «accesorios» como paquetes de interfaz de usuario adicionales, más plantillas de maquetas de sitios web y funciones especiales como personajes de usuario , sistemas de diseño o traductores. MockFlow también es conocido por su facilidad para colaborar y compartir, lo que lo hace ideal para equipos.
Precios:
- Plan gratuito
- $14/mes (facturado anualmente) [Premium]
- $30/mes (facturado anualmente) [TeamPack con 3 usuarios]
Ventajas:
- excelentes capacidades de creación de tramas
- MockStore proporciona funciones adicionales
- amplia selección de paquetes y plantillas de interfaz de usuario a través de MockStore
Contras:
- El plan premium cuesta más que otro software de maquetas pero hace menos
Recomendado para…
- personas que quieren herramientas adicionales como sistemas de diseño o guiones gráficos
- grandes equipos que necesitan funciones colaborativas avanzadas
- proyectos simples y únicos que pueden aprovechar el plan gratuito
6. Ruiseñor
Mockingbird es una buena solución intermedia entre funciones amplias y facilidad de uso optimizada (aunque tiene el precio de una herramienta de gama alta). Su característica más atractiva es el sencillo editor WYSIWYG, en el que simplemente arrastras y sueltas los elementos donde quieras que vayan. Otros sitios web de maquetas importantes tienen editores de arrastrar y soltar, pero la interfaz de usuario de Mockingbird es tan simple y directa que está claramente diseñada para principiantes y novatos.
Sin embargo, el precio no es tan conveniente. Con un mínimo de $ 11 / mes, es uno de los sitios web de maquetas más caros, a pesar de que en realidad no ofrece nada adicional. En el lado positivo, es el mismo precio para cualquier cantidad de colaboradores, por lo que si tiene un equipo lo suficientemente grande, puede justificar el costo.
Precios:
- $11/mensual (facturado anualmente): 3 proyectos
- $17//mensual (facturado anualmente): 10 proyectos
- $32/mensual (facturado anualmente): 25 proyectos
- $68//mensual (facturado anualmente): proyectos ilimitados
Ventajas:
- extremadamente fácil de usar
- Interfaz WYSIWYG
- prueba gratuita en línea
Contras:
- caro
- conjunto de características no tan sólidas como las de los otros sitios web de maquetas principales
Recomendado para…
- principiantes que se sienten intimidados por interfaces más complicadas
- equipos grandes que no pueden pagar membresías individuales con otros sitios web de maquetas
7. MockupsJar
MockupsJar es el mismo tipo de sitio web gratuito de maquetas que Mediamodifier: eliges tu plantilla y superpones tu propia imagen encima. Al igual que Mediamodifier, ofrecen una selección de fotos de archivo, desde computadoras portátiles hasta tazas y camisetas, pero a diferencia de Mediamodifier, puede descargar una versión de alta calidad de forma gratuita.
Es posible que MockupsJar no tenga tantas plantillas de maquetas de sitios web como Mediamodifier, pero poder descargar una imagen de alta calidad sin pagar lo compensa. Sin embargo, solo puedes descargar 20 imágenes en alta resolución; después de eso, debe pagar o descargarlos en baja resolución. También hay anuncios en la versión gratuita, pero en general no es tan malo para un sitio web de maquetas gratuito.
Precios:
- Plan gratuito
- 5€/mes (facturación mensual)
Ventajas:
- sin esfuerzo simple
- plan gratuito ofrece 20 imágenes de alta resolución
- sin marcas de agua
Contras:
- características básicas
- necesita diseñar imágenes en otro lugar
Recomendado para…
- personas a las que les gusta la plataforma de Mediamodifier, pero no quieren pagar para que se eliminen las marcas de agua
8. Moqups
Moqups es otro diseñador digital todo en uno para wireframes, prototipos y, por supuesto, maquetas. Su editor es una gran combinación de funciones avanzadas y controles WYSIWYG, una combinación adecuada tanto para principiantes como para diseñadores expertos. Sin embargo, solo tienen dos planes de precios, según la cantidad de usuarios que tenga, por lo que los equipos de más de tres tienen que pagar más.
Los usuarios elogian la capacidad de Moqups para crear diagramas de flujo, lo que no es exactamente útil para las maquetas, pero es bueno para el proceso de diseño en general. Aunque parte de la usabilidad puede ser torpe, en general es una alternativa viable a los otros sitios web de maquetas todo en uno, especialmente si está igualmente interesado en la creación de prototipos y la estructuración de cables.
Precios:
- $16/mes (facturado anualmente) [Pro – 3 editores]
- $49/mes (facturado anualmente) [Ilimitado – editores ilimitados]
Ventajas:
- herramienta de diseño bien equilibrada para wireframes, prototipos y maquetas
- lo suficientemente fácil de usar para principiantes, lo suficientemente avanzado para expertos
- Excelentes funciones de planificación, como diagramas de flujo, mapas del sitio y guiones gráficos.
Contras:
- en el lado más caro
Recomendado para…
- personas que priorizan wireframes y prototipos al mismo nivel que las maquetas
9. Maquetas inteligentes
Smartmockups está en la misma categoría que Mediamodifier y MockupsJar, pero con mejores integraciones. Eso es un gran problema si ha diseñado una captura de pantalla de vista previa de alta definición en la aplicación Marvel y solo quiere ponerla en un fondo de escritorio de muestra. Smartmockups también tiene más funciones de personalización que los otros sitios web gratuitos de maquetas, como cambiar los colores, pero esa función solo está disponible con el plan pago.
Al igual que con los otros sitios web gratuitos de maquetas, no espere mucho más allá de superponer su imagen en un fondo de plantilla. La versión paga tiene acceso a más de 6000 imágenes de plantilla para una variedad de imágenes de fondo, incluidas camisetas, tarjetas de presentación y dispositivos digitales. El plan gratuito aún ofrece alrededor de 800 plantillas de maquetas, pero tendrá que lidiar con las marcas de agua.
Precios:
- Versión gratuita
- $9/mes
Ventajas:
- se integra con la aplicación Marvel, Dropbox, Figma, Unsplash y Canva
- el plan pago te permite personalizar la imagen
- rápido y fácil
Contras:
- El plan gratuito tiene marcas de agua
- necesita diseñar imágenes en otro lugar
Recomendado para…
- trabajas principalmente en Marvel App, Canva o Figma
¿Por qué no ser profesional?
Como dijimos arriba, el único trabajo de las maquetas es verse bien. Si hay mucho en juego en el éxito de su maqueta, tal vez tenga que ganarse a una parte interesada insatisfecha o comprar la idea para obtener más fondos, entonces definitivamente necesita que su maqueta luzca de la mejor manera posible. En ese caso, por qué no dejarlo en manos de un profesional.
Cuando contratas a un diseñador independiente a través de 99designs, pones tu maqueta en manos de un experto que comprende todos los matices del diseño. No necesita preocuparse por los precios del software o la curva de aprendizaje porque el diseñador se encarga de todo por usted. ¡Y con nuestra comunidad de diseñadores de todo el mundo, seguramente encontrará uno con el estilo particular que está buscando!
