Prototipos perfectos y diseños de mano con Marvel

Sep 13, 2025
Cómo
A person sat in a cafe using Marvel on their laptop and displaying a finished prototype on their smartphone.
[dieciséis]

Con una curva de aprendizaje más corta que la aplicación de INVISION y las nuevas herramientas de diseño de diseño para equipos empresariales, no hay mejor momento para explorar cómo se puede Marvel puede ser una solución rápida y sin esfuerzo para prototipos web y aplicaciones móviles en equipos.

Marvel ayuda a los equipos a tomar sus diseños (realizados en boceto o marvel en sí) desde la idea esbozada hasta la inicial hasta el concepto probado. Sus herramientas de colaboración alientan a las partes interesadas, no solo para tener su opinión, sino para ser parte del flujo de trabajo de diseño.

01. Crea tu primer proyecto de Marvel.

Marvel's new design screen, indicating the locations of the buttons to create new designs.

[dieciséis] Una vez que haya elegido su proyecto, haga clic en uno de los dos botones para iniciar el proceso de diseño

Regístrese en Marvel para comenzar, donde solo se requiere su nombre y dirección de correo electrónico. Elija cualquier proyecto de diseño o proyecto prototipo. Un proyecto de prototipo es cuando sube las pantallas que ya ha diseñado (generalmente en boceto). Un proyecto de diseño es cuando está a partir de cero y le gustaría usar las herramientas de diseño propias de Marvel para crear una maqueta de baja fidelidad (esta es una opción increíble para la iteración rápida y la lluvia de ideas).

Elija el proyecto de diseño, luego déle un nombre, luego elija iPhone X y haga clic en el botón Crear proyecto. Desde aquí (llamaremos a este tablero del proyecto desde aquí en adelante), haga clic en el botón de diseño en el lado izquierdo, o el botón Iniciar diseño en el centro de la ventana.

02. Diseño de prototipos de baja fidelidad.

Marvel's protoyping screen, showing how easy it is to add mocked up components, include smartphone camera screens.

[dieciséis] Puedes usar y adaptar los componentes listosizados, como esta pantalla de cámara.

Nuestro objetivo principal aquí es visualizar nuestras ideas rápidamente sin perder demasiado tiempo preocupándose por cómo se verá el resultado final. Desde aquí, podemos crear formas, imágenes, texto, componentes listos, como barras de pestañas, e incluso componentes completos de pantalla completa como esta pantalla de cámara (que se seleccionó de la barra lateral izquierda y se restómetro usando la mano derecha barra lateral).

Las formas de dibujo, creando capas de texto y la fabricación de cambios visuales simples son bastante fáciles incluso para un no diseñador, aunque los diseñadores experimentados les encantará la rapidez con la que pueden lanzar una idea y hacer clic en el botón Agregar al proyecto.

Aunque no puede esperar dibujo vectorial, enmascaramiento y otras herramientas de diseño complejas, esta interfaz no se sentirá bastante familiar si es un bosquejo, Adobe XD o usuario de FIGMA (de hecho, analizaremos los diseños de fidelidad más altos del bosquejo en un momento). Lo que puede esperar es hacer zoom, alineando, agrupando, herramientas de diseño visual básicas, controles de ratón, como arrastrar, cambiar el tamaño y la rotación y un poco de accesos directos de teclado útiles.

03. Recibir retroalimentación

Sin embargo, Marvel no es solo para diseñadores. Si bien puede requerir que un diseñador cree el diseño final en una aplicación de diseño estándar de la industria, las ideas deben (y hacer) provienen de todo tipo de partes interesadas (gerentes, clientes, desarrolladores, etc.).

No importa cuál sea su rol principal en un equipo, debe ser super-fácil decir: "Oye, ¿podría ser una idea?", Y luego demostrar eso visualmente. Marvel's MÚSICA POP La aplicación móvil reduce aún más la barrera de entrada aún más al traer estas herramientas de diseño simplificado a dispositivos móviles porque, vamos a enfrentarlo, las ideas pueden venir a nosotros a los tiempos más extraños. Las ideas esbozadas en papel se pueden convertir en una pantalla de maravilla interactiva con la cámara del dispositivo. El diseño debe ser democratizado, donde cualquiera puede tener una opinión sin estar restringida a utilizar aplicaciones de diseño complejas.

04. Integrar Marvel con boceto.

Después de intercambiar de manera productiva ideas de baja fidelidad con su equipo, querrá burlarse de la primera iteración en su aplicación de diseño de elección. Si bien puede cargar totalmente las pantallas PNG exportadas desde cualquier aplicación de diseño, el boceto es la aplicación recomendada porque hay un complemento de boceto dedicado que automatiza el proceso (e incluso prepara el diseño para que pueda ser inspeccionado por los desarrolladores más adelante). Sin embargo, el soporte de Photoshop para el diseño vendrá más tarde, sin embargo, Adobe no está promocionando Photoshop para el diseño de la interfaz de usuario ya, ya que creó Adobe XD.

Desde el tablero, haga clic en Configuración y GT; Integraciones & gt; Plugin de boceto, luego descargar complemento. Una vez que lo tenga instalado, y su archivo de diseño se abre, presione los botones SYNC seleccionados o Sincronizar todos los botones en la barra de Marvel (aparece sobre la lista de capas) para comenzar a elegir un proyecto de Marvel para sincronizar las pantallas.

05. Interacciones prototipo

Marvel screen showing how you can create interactions, for example placing your thumb on the thumbprint scanner to progress to the next screen.

[dieciséis] Arrastre, seleccione las regiones para crear puntos de acceso para enlazar desde una pantalla a otra

Pero, por supuesto, no podemos probar prototipos si no hemos agregado ninguna interacción, así que hagamos eso ahora. Regrese al Panel de Marvel, donde verá las pantallas que sincronizamos, haga clic en Ver en cualquiera de las pantallas para ingresar al modo de pantalla.

A partir de aquí, podemos navegar por las pantallas utilizando las flechas izquierda y derecha a cada lado de la ventana, haga clic en Temporizador para tener un ciclo de Marvel a través de las pantallas después de un cierto número de segundos (¡útil para las presentaciones!), O haga clic en No hay comentarios para agregar Su primer comentario o anotación en la pantalla.

Probablemente lo primero que notará es el encabezado fijo y los botones de pie fijo que aparecen cerca de las esquinas de la pantalla de la pantalla hacia la parte superior izquierda e inferior izquierda de la pantalla. Estos botones son arrastrables y también se pueden mover para marcar la región de corte de una sección de encabezado, que debe permanecer fijada a la parte superior de una ventana de desplazamiento. También puede usar los campos de texto en la esquina superior derecha e inferior derecha para especificar este valor manualmente.

Pero, ¿cómo en realidad vinculamos una pantalla a otra? Simple: con el mouse, arrastre, seleccione una región en la pantalla que es para enlazar a otra pantalla (esto se llama 'hotspot'). Una vez que haya hecho eso, una interfaz aparecerá en la parte inferior de la ventana que le permite personalizar a dónde se lleva a los usuarios, cualquier transición que ocurra durante la interacción y qué gesto se requiere para activar esa interacción (Toque, Swipe, etc. ).

Y, por supuesto, podemos usar estas herramientas de prototipos incluso en maquetas de baja fidelidad. De hecho, se recomienda que lo haga, todo el tiempo utilizando las características de comentarios para discutir y reiterar.

06. Entrega de diseños a los desarrolladores.

A screen grab of Marvel showing how easy it is for developers to access detailed information from handed off designs, such as the positions and sizes of each element.

[dieciséis] El diseño de diseño facilita el diseño y el desarrollador para trabajar entre sí.

Cuando su equipo retiene la plena confianza en el diseño final, validado utilizando las herramientas de comentarios y pruebas de usuario, es hora de entregarlo a los desarrolladores que luego pueden inspeccionar y codificar. Es importante recordar que un diseñador no está "hecho" una vez que se entrega el diseño y que los diseñadores y desarrolladores siempre deben comunicarse en armonía para supervisar el desarrollo hasta su finalización. El desarrollador también puede tener algunas preguntas, por lo que las características de comentarios aún deben estar muy activas.

Pulse el botón de reproducción, luego haga clic en la manufactura en la esquina inferior izquierda para abrir la interfaz de diseño de diseño. Desde aquí, los desarrolladores podrán hacer clic en los elementos de diseño e inspeccionar los estilos individuales que los convierten en lo que son, usando la barra lateral en el lado derecho (al igual que la interfaz del inspector en Sketch, Figma o Adobe XD). La única diferencia aquí es que los desarrolladores pueden hacer clic en el botón Copiar para copiar los estilos como código al portapapeles.

Este artículo se publicó originalmente en el número 301 de Net, la revista más vendida del mundo para diseñadores web y desarrolladores. Comprar Número 301 o suscribirse a la red .

Obtenga más información sobre el prototipado iterativo

Generate NYC 2018 runs from the 25th-27th April 2018

[dieciséis] Marisa Morby le está dando a su conversación, descubra cómo las pruebas de prototipo iterativas lo ayudarán a crear un diseño ganador, cada vez que generan Nueva York del 25 al 27 de abril de 2018

Cuando la mayoría de las empresas necesitan crear un nuevo diseño web, el proceso generalmente comienza con las ideas de lanzamiento, se mueve para diseñar, luego el desarrollo y luego se va a vivir. Pero, ¿y si no funciona? Eso es mucho tiempo, esfuerzo y dinero para pasar solo para descubrir que una idea se desempeñó mal.

Afortunadamente, en su charla en Generar Nueva York del 25 al 27 de abril de 2018. , Marisa Morby, jefe de investigación en Clearhead, le mostrará una mejor manera de crear y validar nuevos diseños que sean más rápidos, más fáciles y menos costosos que el proceso de diseño tradicional utilizando prototipos iterativos y pruebas.

Generar Nueva York tiene lugar del 25 al 27 de abril de 2018. Obtenga su boleto ahora .

Artículos relacionados:

  • 10 herramientas principales de prototipos
  • Las 18 mejores herramientas de estructura de alambre.
  • Cómo evitar los trampos de prototipos.

Cómo - Artículos más populares

Cómo limpiar los pinceles: la guía definitiva

Cómo Sep 13, 2025

(Crédito de la imagen: Sonny Flanaghan) Aprender a limpiar los pinceles correctamente es una habilidad importante. C..

Gestiona el estado del formulario de reacción con Formik

Cómo Sep 13, 2025

[dieciséis] (Crédito de la imagen: Matt Crouch) Bienvenido a nuestra guía sobre cómo administrar el estado del formulario ..

Cómo crear pinturas aéreas de Plein Digital

Cómo Sep 13, 2025

[dieciséis] Evita al aire libre para crear un gran arte. (Crédito de la imagen: Mike MC Cain) Hay tantas formas exc..

Cómo dibujar un elefante

Cómo Sep 13, 2025

Como el mamífero terrestre vivo más grande de la Tierra, los elefantes tienen una presencia innegable. Al nacer, los elefantes ya pesan hasta 200 libras ..

Cómo resolver una cara para la animación

Cómo Sep 13, 2025

[dieciséis] Cuando estaba aprendiendo primero a crear plataformas de personajes en Maya, en 2002 mientras trabajaba en el título de P..

Anatomía MasterClass: perfecciona tus figuras

Cómo Sep 13, 2025

[dieciséis] En esta clase magistral, revelaré los pasos básicos que debes seguir para aprender. Cómo dibujar figuras . E..

Pintura de trazos controlados y suaves con bosquejo

Cómo Sep 13, 2025

Bosquejo es una aplicación de pintura para Windows 10. Te permite pintar trazos grandes en imágenes grandes sin retraso. Las imágenes se crean en 'revistas', de las cuales pued..

Pinte un retrato de estilo Munch en Photoshop CC

Cómo Sep 13, 2025

[dieciséis] Como parte de su Tesoros ocultos de la creatividad. Proyecto, Adobe transformó los pinceles centenarios usados..

Categorías