6.5 : Prototipos para aplicaciones móviles
DESIGN THINKING
[/et_pb_text][et_pb_text admin_label=”Text” _builder_version=”3.29.3″ text_font=”PT Sans||||||||” text_text_color=”#010659″ text_font_size=”72″ text_line_height=”1.1em” background_size=”initial” background_position=”top_left” background_repeat=”repeat” text_orientation=”center” max_width=”660px” module_alignment=”center” custom_margin=”18px||80px|” text_font_size_tablet=”52″ text_font_size_phone=”” text_font_size_last_edited=”on|desktop” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]No lo construyas, hazlo falso: prototipos para aplicaciones móviles
[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section fb_built=”1″ admin_label=”Section” _builder_version=”3.27.4″ background_enable_color=”off” custom_padding=”0px|||” custom_padding_tablet=”0px|||” transparent_background=”off” padding_mobile=”on” make_fullwidth=”off” use_custom_width=”off” width_unit=”on”][et_pb_row padding_mobile=”on” column_padding_mobile=”on” admin_label=”row” _builder_version=”3.25″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”620px” custom_padding=”0px|||” make_fullwidth=”off” use_custom_width=”on” width_unit=”on” custom_width_px=”620px”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_image src=”https://usercontent.one/wp/www.interactemos.com/wp-content/uploads/2019/09/logo-circular-nuevo.png?media=1669990493” show_bottom_space=”off” align=”center” align_tablet=”center” align_phone=”” align_last_edited=”on|desktop” admin_label=”Image” _builder_version=”3.27.4″ width=”20%” custom_margin=”-48px|||” use_border_color=”off” border_color=”#ffffff” border_style=”solid” animation=”off” sticky=”on” always_center_on_mobile=”on”][/et_pb_image][/et_pb_column][/et_pb_row][et_pb_row use_custom_gutter=”on” gutter_width=”2″ padding_mobile=”on” column_padding_mobile=”on” custom_padding_last_edited=”on|tablet” admin_label=”Row” _builder_version=”3.27.4″ background_color=”#01065″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” custom_padding=”50px|||” custom_padding_tablet=”17px|||” custom_padding_phone=”” make_fullwidth=”off” use_custom_width=”off” width_unit=”on” custom_width_px=”830px”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_image src=”https://usercontent.one/wp/www.interactemos.com/wp-content/uploads/2019/11/56dee06cf41c6.jpg?media=1669990493” show_bottom_space=”off” align_tablet=”center” align_phone=”” align_last_edited=”on|desktop” admin_label=”Image” _builder_version=”3.29.3″ animation_style=”fade” animation_duration=”500ms” use_border_color=”off” border_color=”#ffffff” border_style=”solid” animation=”fade_in” sticky=”on” always_center_on_mobile=”on”][/et_pb_image][/et_pb_column][/et_pb_row][et_pb_row padding_mobile=”on” column_padding_mobile=”on” admin_label=”row” _builder_version=”3.25″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”620px” custom_padding=”17px|||” make_fullwidth=”off” use_custom_width=”on” width_unit=”on” custom_width_px=”620px”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_text admin_label=”Text” _builder_version=”3.29.3″ text_font=”PT Serif||||” text_text_color=”#363636″ text_font_size=”20″ text_line_height=”1.6em” background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”620px” custom_margin=”30px||0px|” text_font_size_tablet=”” text_font_size_phone=”” text_font_size_last_edited=”on|tablet” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]La fase de diseño para aplicaciones móviles debe incluir una etapa de creación de prototipos. Es en este punto que los usuarios pueden “jugar” con sus ideas y conceptos y brindarle información valiosa que le da forma a los diseños finales antes de comenzar el desarrollo. Esto puede ahorrar tiempo y dinero en el desarrollo y crear productos que ofrezcan experiencias de usuario significativamente mejores que las que pasan del concepto a la producción sin etapas evaluativas intermedias.
La creación de prototipos es el acto de crear un modelo de un producto para que pueda ser probado por los usuarios antes de que dedique un tiempo de desarrollo valioso a la creación del producto real. En el sentido en el que lo estamos utilizando, los prototipos abarcan todo, desde simples bocetos de la interfaz del producto hasta modelos dinámicos interactivos del producto y deteniéndose en los esquemas de conexión como prototipos provisionales.
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row padding_mobile=”on” column_padding_mobile=”on” admin_label=”Row” _builder_version=”3.25″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”620px” custom_padding=”50px||8px|||” make_fullwidth=”off” use_custom_width=”on” width_unit=”on” custom_width_px=”620px”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_text admin_label=”Text” _builder_version=”3.29.3″ text_font=”PT Serif||||” text_text_color=”#363636″ text_font_size=”40px” text_line_height=”1.3em” background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”900px” custom_margin=”16px||30px|” text_font_size_tablet=”” text_font_size_phone=”” text_font_size_last_edited=”on|tablet” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]Las buenas noticias
[/et_pb_text][et_pb_text admin_label=”Text” _builder_version=”3.29.3″ text_font=”PT Serif||||” text_text_color=”#363636″ text_font_size=”20″ text_line_height=”1.6em” background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”620px” custom_margin=”30px||0px|” text_font_size_tablet=”” text_font_size_phone=”” text_font_size_last_edited=”on|tablet” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]Prototipado para aplicaciones móviles nunca ha sido tan fácil como lo es hoy. Existen numerosas herramientas de software en el mercado que permiten a los diseñadores crear prototipos rápida y fácilmente. De hecho, algunos de estos paquetes son tan fáciles de usar que pueden eliminar el uso de bocetos en sus procedimientos de creación de prototipos. ¿Por qué dibujar a mano cuando puede crear pantallas, con un solo clic, que reflejan la plataforma móvil en la que está trabajando y luego simplemente arrastran y sueltan la funcionalidad en ellas?
Con eso en mente, vamos a echar un vistazo rápido a 5 de las herramientas más populares, hoy, para crear prototipos para el diseño de aplicaciones móviles.
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row padding_mobile=”on” column_padding_mobile=”on” admin_label=”Row” _builder_version=”3.25″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”620px” custom_padding=”50px||8px|||” make_fullwidth=”off” use_custom_width=”on” width_unit=”on” custom_width_px=”620px”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_text admin_label=”Text” _builder_version=”3.29.3″ text_font=”PT Serif||||” text_text_color=”#363636″ text_font_size=”40px” text_line_height=”1.3em” background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”900px” custom_margin=”16px||30px|” text_font_size_tablet=”” text_font_size_phone=”” text_font_size_last_edited=”on|tablet” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]5 grandes herramientas para crear prototipos móviles
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row use_custom_gutter=”on” gutter_width=”2″ padding_mobile=”on” column_padding_mobile=”on” custom_padding_last_edited=”on|tablet” admin_label=”Row” _builder_version=”3.29.3″ background_color=”#7ebec5″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” custom_padding=”50px|||” custom_padding_tablet=”17px|||” custom_padding_phone=”” make_fullwidth=”off” use_custom_width=”off” width_unit=”on” custom_width_px=”830px”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_image src=”https://usercontent.one/wp/www.interactemos.com/wp-content/uploads/2019/11/d602f4285cb60074aac07f8f93925ecf.jpg?media=1669990493” show_bottom_space=”off” align=”center” align_tablet=”center” align_phone=”” align_last_edited=”on|desktop” admin_label=”Image” _builder_version=”3.29.3″ animation_style=”fade” animation_duration=”500ms” use_border_color=”off” border_color=”#ffffff” border_style=”solid” animation=”fade_in” sticky=”on” always_center_on_mobile=”on”][/et_pb_image][/et_pb_column][/et_pb_row][et_pb_row padding_mobile=”on” column_padding_mobile=”on” admin_label=”row” _builder_version=”3.25″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”620px” custom_padding=”17px|||” make_fullwidth=”off” use_custom_width=”on” width_unit=”on” custom_width_px=”620px”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_text admin_label=”Text” _builder_version=”3.29.3″ text_font=”PT Serif||||” text_text_color=”#363636″ text_font_size=”20″ text_line_height=”1.6em” background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”620px” custom_margin=”30px||0px|” text_font_size_tablet=”” text_font_size_phone=”” text_font_size_last_edited=”on|tablet” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]Balsamiq
https://balsamiq.com/ pero hay un proceso mediante el cual se pueden crear https://www.interaction-design.org/literature/topics/interactive-prototypes simples (llamados “enlaces”) para demostraciones y pruebas.
Para aquellos que aman dibujar, Balsamiq es la utilidad para usted, ya que se asemeja a un simple área de dibujo de pizarra. Sin embargo, hay un montón de contenido generado por la comunidad que puedes importar para mejorar rápidamente la velocidad a la que creas tu contenido. También puedes tomar algunas plantillas para iOS, Android y Blackberry, lo que es muy útil.
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row padding_mobile=”on” column_padding_mobile=”on” admin_label=”Row” _builder_version=”3.25″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”620px” custom_padding=”50px||8px|||” make_fullwidth=”off” use_custom_width=”on” width_unit=”on” custom_width_px=”620px”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_text admin_label=”Text” _builder_version=”3.29.3″ text_font=”PT Serif||||” text_text_color=”#363636″ text_font_size=”20″ text_line_height=”1.6em” ul_font=”PT Serif||||||||” ul_line_height=”1.6em” background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”620px” custom_margin=”30px||0px|” custom_padding=”||50px|||” text_font_size_tablet=”” text_font_size_phone=”” text_font_size_last_edited=”on|tablet” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]Justinmind
https://www.justinmind.com/ que también incluye simulaciones para cosas como el control de gestos, mantener pulsado, deslizar, etc.
A medida que construyes tus wireframes, Justinmind crea el prototipo, cuando cambias un modelo de wireframe, el prototipo refleja esto inmediatamente.
También es compatible con una de las gamas más amplias de entornos operativos móviles de todas las herramientas de creación de prototipos móviles. Hay “widgets” pre-construidos para estos que son generados por el usuario y usted puede diseñar el suyo propio si no puede encontrar lo que está buscando en su biblioteca.
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row use_custom_gutter=”on” gutter_width=”2″ padding_mobile=”on” column_padding_mobile=”on” custom_padding_last_edited=”on|tablet” admin_label=”Row” _builder_version=”3.29.3″ background_color=”#7ebec5″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” custom_padding=”50px|||” custom_padding_tablet=”17px|||” custom_padding_phone=”” make_fullwidth=”off” use_custom_width=”off” width_unit=”on” custom_width_px=”830px”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_image src=”https://usercontent.one/wp/www.interactemos.com/wp-content/uploads/2019/11/6d5ff54d42037e67e11fd4e69129ddb9.jpg?media=1669990493” show_bottom_space=”off” align=”center” align_tablet=”center” align_phone=”” align_last_edited=”on|desktop” admin_label=”Image” _builder_version=”3.29.3″ animation_style=”fade” animation_duration=”500ms” use_border_color=”off” border_color=”#ffffff” border_style=”solid” animation=”fade_in” sticky=”on” always_center_on_mobile=”on”][/et_pb_image][/et_pb_column][/et_pb_row][et_pb_row padding_mobile=”on” column_padding_mobile=”on” admin_label=”row” _builder_version=”3.25″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”620px” custom_padding=”17px|||” make_fullwidth=”off” use_custom_width=”on” width_unit=”on” custom_width_px=”620px”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_text admin_label=”Text” _builder_version=”3.29.3″ text_font=”PT Serif||||” text_text_color=”#363636″ text_font_size=”20″ text_line_height=”1.6em” background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”620px” custom_margin=”30px||0px|” text_font_size_tablet=”” text_font_size_phone=”” text_font_size_last_edited=”on|tablet” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]https://moqups.com/ Es una de las herramientas más fáciles para comenzar de inmediato. La interfaz es fácil de entender y han producido una tonelada de material precompilado para llenar sus diseños (incluidos marcadores de posición de imágenes, controles deslizantes, etc.)
También hay plantillas para teléfonos y tabletas que vienen con elementos de UI asociados con esas plataformas.
Sin embargo, Moqups solo produce wireframes; Si desea interactividad, deberá elegir una plataforma diferente para sus prototipos.
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row padding_mobile=”on” column_padding_mobile=”on” admin_label=”Row” _builder_version=”3.25″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”620px” custom_padding=”50px||8px|||” make_fullwidth=”off” use_custom_width=”on” width_unit=”on” custom_width_px=”620px”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_text admin_label=”Text” _builder_version=”3.29.3″ text_font=”PT Serif||||” text_text_color=”#363636″ text_font_size=”20″ text_line_height=”1.6em” ul_font=”PT Serif||||||||” ul_line_height=”1.6em” background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”620px” custom_margin=”30px||0px|” custom_padding=”||50px|||” text_font_size_tablet=”” text_font_size_phone=”” text_font_size_last_edited=”on|tablet” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]Proto
https://proto.io/ Es una plataforma de prototipos puramente móvil. Le permite desarrollar rápidamente prototipos (y simulaciones) que reflejan el producto final. No se requiere codificación y se puede acceder a ella en casi cualquier navegador.
Crea proyectos y los gestiona desde una sola pantalla. Utiliza un editor para construir las pantallas de prototipo y las interacciones entre esas pantallas y un jugador para entregar el prototipo. También puede crear comentarios cuando el jugador está en uso y anotar pantallas al contenido de su corazón.
También puede ejecutar estos prototipos en los propios dispositivos siempre que ejecuten iOS o Android utilizando una aplicación de navegador (sin costo).
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row use_custom_gutter=”on” gutter_width=”2″ padding_mobile=”on” column_padding_mobile=”on” custom_padding_last_edited=”on|tablet” admin_label=”Row” _builder_version=”3.29.3″ background_color=”#7ebec5″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” custom_padding=”50px|||” custom_padding_tablet=”17px|||” custom_padding_phone=”” make_fullwidth=”off” use_custom_width=”off” width_unit=”on” custom_width_px=”830px”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_image src=”https://usercontent.one/wp/www.interactemos.com/wp-content/uploads/2019/11/106017bc999116b408ca2f7efdc6fb3a.png?media=1669990493” show_bottom_space=”off” align=”center” align_tablet=”center” align_phone=”” align_last_edited=”on|desktop” admin_label=”Image” _builder_version=”3.29.3″ animation_style=”fade” animation_duration=”500ms” use_border_color=”off” border_color=”#ffffff” border_style=”solid” animation=”fade_in” sticky=”on” always_center_on_mobile=”on”][/et_pb_image][/et_pb_column][/et_pb_row][et_pb_row padding_mobile=”on” column_padding_mobile=”on” admin_label=”Row” _builder_version=”3.25″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”620px” custom_padding=”50px||8px|||” make_fullwidth=”off” use_custom_width=”on” width_unit=”on” custom_width_px=”620px”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_text admin_label=”Text” _builder_version=”3.29.3″ text_font=”PT Serif||||” text_text_color=”#363636″ text_font_size=”20″ text_line_height=”1.6em” ul_font=”PT Serif||||||||” ul_line_height=”1.6em” background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”620px” custom_margin=”30px||0px|” text_font_size_tablet=”” text_font_size_phone=”” text_font_size_last_edited=”on|tablet” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]UXPin
https://www.uxpin.com/ Es una herramienta muy fácil de aprender y hay un buen uso de los principios de diseño de UX aplicados a la forma en que funciona el software.
Los prototipos creados en UXPin se pueden usar en múltiples dispositivos y se muestran en un rango de resoluciones.
El software ofrece un fuerte control de versiones para iterar sus diseños. También proporciona comentarios, ediciones, etc. en tiempo real.
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row padding_mobile=”on” column_padding_mobile=”on” admin_label=”Row” _builder_version=”3.25″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”620px” custom_padding=”50px||8px|||” make_fullwidth=”off” use_custom_width=”on” width_unit=”on” custom_width_px=”620px”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_text admin_label=”Text” _builder_version=”3.29.3″ text_font=”PT Serif||||” text_text_color=”#363636″ text_font_size=”40px” text_line_height=”1.3em” background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”900px” custom_margin=”16px||30px|” text_font_size_tablet=”” text_font_size_phone=”” text_font_size_last_edited=”on|tablet” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]15 herramientas de creación de prototipos de aplicaciones móviles más populares
[/et_pb_text][et_pb_text admin_label=”Text” _builder_version=”3.29.3″ text_font=”PT Serif||||” text_text_color=”#363636″ text_font_size=”20″ text_line_height=”1.6em” ul_font=”PT Serif||||||||” ul_line_height=”1.6em” background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”620px” custom_margin=”30px||0px|” text_font_size_tablet=”” text_font_size_phone=”” text_font_size_last_edited=”on|tablet” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]Si ninguna de las opciones anteriores se ajusta a sus necesidades, siempre puede probar:
- Axure: el abuelo de las herramientas de creación de prototipos para entornos corporativos con un excelente soporte móvil.
- FlairBuilder: su fuerza es la velocidad a la que puede iterar desde prototipos de baja fidelidad a alta fidelidad usando una conversión de un solo clic.
- Fluid: con soporte para Android, iOS y Windows y un montón de contenido pre-construido para sus prototipos.
- HotGloo: creador de prototipos muy flexible y fácil de usar con plantillas de Apple pre-construidas para ti.
- Invision: no es una plataforma móvil especializada, pero ofrece muchas herramientas para hacer el trabajo.
- Maqueta del iPhone: como puede haber adivinado, esta herramienta es solo para la creación de prototipos del iPhone, pero es muy fácil de usar y es excelente para el trabajo en proyectos de colaboración
- iPlotz – herramienta de creación simple para maquetas y wireframes interactivos. Gran soporte para plantillas de Android y iOS.
- Mockflow: una herramienta rápida para aprender pero sofisticada para construir wireframes y prototipos móviles interactivos.
- Mokk.me: una plataforma fácil de usar pero aún en Beta, tendrás que ser paciente si las cosas van mal.
- Omnigraffle: ideal para estructuras alámbricas y también para crear diagramas. Es muy similar a los productos de Adobe en la forma en que funciona.
- Pencil Project: una herramienta de creación de prototipos de código abierto con buena funcionalidad, pero ha pasado un tiempo desde que se realizó una actualización importante de la funcionalidad.
- Pidoco: basado en la web y fantástico en la creación rápida de prototipos clicables. Las simulaciones y las pruebas se ejecutan en dispositivos sin necesidad de instalar software adicional.
- Protoshare: una forma poderosa de crear prototipos pero con una curva de aprendizaje un poco más pronunciada que algunas de las otras opciones.
- Wireframe: no es más fácil que esta utilidad de arrastrar y soltar para crear wireframes, pero no es la herramienta adecuada para crear prototipos interactivos.
- Wireframe sketcher: utilícelo como una aplicación independiente o conéctelo a Eclipse IDE para obtener funciones adicionales.
¿que nos llevamos?
[/et_pb_text][et_pb_text admin_label=”Text” _builder_version=”3.29.3″ text_font=”PT Serif||||” text_text_color=”#363636″ text_font_size=”20″ text_line_height=”1.6em” ul_font=”PT Serif||||||||” ul_line_height=”1.6em” background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”620px” custom_margin=”30px||0px|” text_font_size_tablet=”” text_font_size_phone=”” text_font_size_last_edited=”on|tablet” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]Hacer prototipos para dispositivos móviles es fácil si tiene las herramientas adecuadas para realizar el trabajo. Las herramientas anteriores deben orientarlo en la dirección correcta, pero vale la pena señalar que las nuevas herramientas se lanzan con regularidad y que el software existente de creación de estructuras y prototipos sin el soporte móvil especializado también puede realizar el trabajo de manera eficiente. Los prototipos son invaluables para probar ideas e iteraciones de un producto en diseño antes de que comience el desarrollo.
[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]