Nicoweb

Investigando una nueva tecnología el método científico

c2262027 — Tue, 16 Jan 2024 20:36:10 +0000

Mar 07,2023 – 7 min read

Investigando una nueva tecnología el método científico

Sofi Lay- Frontend Developer

Hace tiempo que vengo usando una herramienta en mis desarrollos con React y Next JS para hacer animaciones no solo atractivas sino también performantes, Framer Motion.

Eso me llevo a indagar un poco más, adentrarme en la comunidad de Discord y toparme con que no solo es una librería de animaciones, también es una herramienta de prototipado y no-code que por detrás utiliza código basado en React JS.

Viniendo desde el lado de desarrollo web nunca profundicé demasiado en prototipado de diseño y solo había escuchado sobre lo que era no-code pero me interesaba entender qué brindaba Framer y si podíamos añadirlo a nuestro stack de tecnologías en Paisanos.

Para responder a estas dudas junto con nuestro líder técnico decidimos implementar el método científico resumido en las siguientes etapas:

Experimentación
Acercamiento
Deep drive
Resultados y conclusiones
Recopilación de recursos

Experimentación

Prueba Nº1: Acercamiento

Como primera impresión me pareció que la interfaz de prototipado es similar a Figma, lo cual lo hace muy amigable si alguna vez la utilizaste. No tuve problemas en empezar un nuevo proyecto guiándome solo por lo intuitivo de la herramienta. Cuenta con un on boarding interactivo para ir haciendo paso a paso si sos una persona paciente que no skipea todo.

Cosas a destacar:

Podes importar un diseño directamente de Figma o Sketch.
Invitar a tu equipo a colaborar en real time en tu prototipo.
Muchos recursos, updates frecuentes y una comunidad grande.

Prueba Nº2: Deep Dive

Para arrancar podes elegir entre crear un proyecto de cero o con un template pre armado e ir editando, acá te dejo unos free.

Que faltan servicios que acompañen emprendimientos
La posibilidad que brinda blockchain de innovar en los modelos de negocios
La sobre oferta de productos similares

En base a eso creamos un modelo de negocio que cubra esta tres necesidades → una incubadora de startups web3, cuyo objetivo era evidenciar cómo se pueden validar las hipótesis de negocio, antes de construir algo que nadie necesita, a partir de un ejemplo concreto.

Una recopilación de los puntos fundamentales de Framer

Stack y Frame

Lo primordial que hay que entender cuando arrancamos a diseñar en el canvas es la diferencia entre Stack y Frame.

Un Frame sirve como container o puede ser un elemento en sí mismo como, por ejemplo, un botón o una imagen. Este va a comportarse como un elemento que vamos a poder posicionar en cualquier lugar de nuestro canvas, por default posee position “absolute”.
Un Stack es para crear layouts “in flow” por ende por default posee position “relative”, podemos tratarlo como flexbox y es recomendable usarlo desde un principio para construir el layout de nuestra página. También podemos cambiar su position a fixed o absolute dependiendo de lo que necesitemos.

Para entender mas sobre esto hay un video bastante claro que te dejo acá.

Breakpoints

Arriba del canvas vas a encontrar que dice breakpoint y nos da las opciones de añadir el canvas de tablet y de phone. Estos últimos dos van a heredar el diseño de desktop (si tenemos alguno) y cada cambio que hagamos en desktop va a impactar en tablet y phone. No a la inversa, si modificamos desde phone, no van a cambiar el diseño de desktop.

Framer utilizar por default nos da un canvas como Desktop first, pero eso no significa que no podamos modificarlo. Podemos cambiarlo a phone y comenzar a diseñar en Mobile first si te sentis mas comodo con ese approach.

El BMC es una herramienta que te permite visualizar integralmente tu modelo de negocio según tres grandes partes:

Si cubre un deseo o necesidad real de un conjunto de personas
Si se puede construir
Si es viable económicamente

En esta instancia no tenemos evidencia que respalde nuestro modelo de negocio y su validez por lo que el Business Model Canvas nos permite extraer las hipótesis principales de nuestro idea de negocio basadas en la deseabilidad, factibilidad y viabilidad económica de forma que podamos visualizar claramente cuales son las asunciones que debamos probar.

Gestionando contenido (CMS)

En la barra de herramienta que vemos arriba, vas a encontrar una pestaña llamada CMS. Esta te va a permitir manejar el contenido de tu web.

Experimentar

Agregando una nueva colección te va a dar la opción de añadir y editar, por default ya hay creados unos ejemplos para que puedas customizar.

Una vez que terminamos de añadir lo que queríamos, desde la barra de herramientas y con la opción de Insert vas a encontrar la opción CMS Content. Haciendo drag and drop ya podes editar cómo queres que se vea tu contenido.

Deploy

Cuando terminamos nuestra web y querremos deployar solo tenemos que clickear Publish y listo, nos va a generar un dominio random que podemos customizar. Si elegimos hacerlo gratis este nos va a añadir .framer.website (.photo, .media o .wiki) al final del dominio.

O podes elegir conectar con tu dominio de terceros.

Otros puntos claves

Componentes: una vez que creamos un elemento que podemos repetir a lo largo de la web, como un botón, podemos hacerlo un componente con su estado hover / press y reutilizarlo en el proyecto.

Animaciones: es fácil de hacer animaciones sencillas pero no complejas.

For developers: cada componente por detrás es código de React, la herramienta nos da la opción de poder editar.

Cómo escribir código dentro de Framer

Resultados y conclusiones

Pros

Curva de aprendizaje rápida y amigable.
Deployar una web es muy fácil.
La versión free abarca muchas cosas, podes hacer una web sin problema.

Cons

Por otras experiencias que leí de diseñadores no parece ser una herramienta muy copada para prototipo, pero a la vez está en constante update así que puede que estos comentarios hayan quedado viejos para cuando lo pruebes.

Para qué recomiendo Framer

Si estas buscando una herramienta para deployar una web sencilla, idealmente directamente de Figma y de una manera rápida, es una gran opción. Especialmente para diseñadores de interfaces sin conocimiento de código o si buscas validar una idea con poco tiempo y presupuesto.

Recopilación de recursos

Videos

Artículos | Blogs | Documentación

Comunidad de Discord

Comunidad de Framer en Discord

Compartí esta nota en:

También te podría interesar

UI/UX Design

¿Cómo testear una idea de negocio? El paso a paso

Angelo Tignanelli - Product Designer

Nov 24,2023 – 15 min read

techonology

Investigando una nueva tecnología el método científico

Sofi Lay- Frontend Developer

Mar 07,2023 – 7 min read

Digital Marketing

Diseño a la velocidad de la luz. El caso kuorum

Guille Huber - UX Designer

Jun 28,2023 – 5 min read

¿Tenés un proyecto en mente? ¡Contactános!

¿Cómo testear una idea de negocio? El paso a paso

c2262027 — Tue, 16 Jan 2024 17:21:36 +0000

Nov 24, 2023 – 15 min read

¿Cómo testear una idea de negocio? El paso a paso

Angelo Tignanelli – Product Designer

Nuestro paso por Labitconf 2023 ‍

Durante el evento del 2022 nos dedicamos a recabar información sobre las principales barreras y beneficios que tenían los usuarios web3 al momento de enfrentarse a esta tecnología.

Dentro de las conclusiones de esa dinámica descubrimos:

• Que faltan productos o servicios que acompañen emprendimientos: una de las barreras más grandes es la dificultad en el desarrollo de productos web3 y la falta de acompañamiento para hacerlo, por eso creemos que hay una gran oportunidad para desarrollar productos y servicios web3 con enfoque en la formación y el desarrollo, sin importar el nivel de conocimiento.

• Que hay lugar para el desarrollo de nuevos negocios y productos: la tecnología web3 está revolucionando la forma en que las personas y las empresas interactúan, ofreciendo una gran oportunidad para el desarrollo de nuevos negocios y productos. Está cambiando cómo pensamos los negocios y ofrece nuevas oportunidades para innovar en modelos de negocio que aprovechan la descentralización, la propiedad de datos por parte de los usuarios y la creación de aplicaciones descentralizadas.

Con esto en mente, y sumado a la realidad actual vinculada a la sobre oferta de productos similares sin una propuesta de valor diferencial, para la edición 2023 trabajamos en una actividad que continue lo trabajado el año anterior y aporte valor al ecosistema. Tuvimos en cuenta estos tres puntos:

Que faltan servicios que acompañen emprendimientos
La posibilidad que brinda blockchain de innovar en los modelos de negocios
La sobre oferta de productos similares

¿Cómo testear una idea de negocio? El paso a paso

Al principio las buenas y malas ideas se ven exactamente igual. Y continuar por ese camino, sin poder diferenciarlas, nos puede llevar a construir algo que nadie necesita. Es por eso que, antes de utilizar recursos y tiempo en la implementación de una idea, primero tenemos que validarla.

Organizar

Un modelo de negocio describe las bases sobre las que una empresa crea, proporciona y capta valor. Por lo que el primer paso es detallar todas las aristas necesarias para que el idea funcione, para esto en Paisanos utilizamos la herramienta Business Model Canvas.

El BMC es una herramienta que te permite visualizar integralmente tu modelo de negocio según tres grandes partes:

Si cubre un deseo o necesidad real de un conjunto de personas
Si se puede construir
Si es viable económicamente

Priorizar

Para ser estratégicos en la validación de nuestro modelo de negocio, es clave segmentar las hipótesis y entender cuáles tienen más importancia. Es por eso que el segundo paso es utilizar una matriz de priorización que nos va a permitir entender cuales son esas asunciones más relevantes y de las que tenemos menos evidencia para confirmar o no que vamos por buen camino a la hora de validar nuestro modelo de negocio.

Experimentar

Ahora llegamos a la parte práctica. La experimentación es un método donde se realizan pruebas controladas, planificadas y sistemáticas para evaluar cómo ciertos cambios o acciones afectan los resultados o metas del proyecto. En otras palabras es fallar rápido y barato, probando diferentes caminos, para encontrar el mejor hacia el éxito de nuestro modelo de negocio.

Teniendo claro lo que se va a comprobar, viene la validación de las hipótesis anteriormente priorizadas mediante distintos experimentos, algunos con evidencia más clara y confiable que otros, pero lo importante de este paso es conseguir información para reducir los riesgos e incertidumbres sobre el modelo de negocio.

Ahora, revisada la teoría, volvamos al ejemplo. En Labitconf, realizamos 4 experimentos para poner a prueba nuestro modelo de incubadora de startups web3:

1) Encuesta

La encuesta es un tipo de experimento que nos permiten recopilar datos cuantitativos para poder comprender las preferencias y necesidades de los usuarios, identificar problemas y áreas de mejora, y tomar decisiones informadas sobre el diseño de un negocio.

Para esta instancia usamos celulares para encuestar a las personas que pasaron por nuestro stand, comentándoles sobre la propuesta de valor de nuestra iniciativa a validar.

Resultados

Casi la mitad las personas encuestadas eran emprendedores web3, uno de los segmentos de clientes que intentamos validar, de los cuales el 57% cree que necesita acompañamiento para validar o consolidar su idea de negocio.

Nuestro dato clave a la hora de validar una de nuestras hipótesis fue que:

Compartí esta nota en:

También te podría interesar

UI/UX Design

¿Cómo testear una idea de negocio? El paso a paso

Angelo Tignanelli - Product Designer

Nov 24,2023 – 15 min read

thechonology

Investigando una nueva tecnología el método científico

Sofi Lay- Frontend Developer

Mar 07,2023 – 7 min read

Digital Marketing

Diseño a la velocidad de la luz. El caso kuorum

Guille Huber - UX Designer

Jun 28,2023 – 5 min read

¿Tenés un proyecto en mente? ¡Contactános!