Aprende de una vez por todas cómo planificar tu proyecto de desarrollo de aplicaciones, qué pasos no puedes omitir en tu planificación y, además, conoce algunas herramientas que pueden ayudarte en este proceso.
Uno de los mayores errores que cometen muchos desarrolladores al iniciar un proyecto es lanzarse directamente al desarrollo, ya sea con Herramientas nocode o no, incluso antes de planificar la solicitud.
Algunos hacen esto porque creen que saben todo lo que se necesitará y desarrollará en este proyecto y piensan que será más productivo.
Otros hacen esto debido a la falta de conocimiento sobre las mejores prácticas de desarrollo de software.
Puede estar seguro de que estos proyectos tendrán agujeros o tardarán mucho más de lo necesario en completarse, todo debido a la falta de una buena planificación inicial del proyecto.
Esto no sólo es válido para proyectos con clientes externos, sino que también es válido para el desarrollo de tus propios proyectos personales o paralelos.
En este vídeo quiero mostraros las 7 fases del método NoCode StartUp para realizar la planificación de aplicaciones.
Son fases sumamente importantes que pueden y deben realizarse incluso antes de entrar en la etapa de desarrollo dentro de la herramienta.
Tabla de contenido
Hay mucha planificación que se puede llevar a cabo, incluso antes de que queramos abrir la plataforma que vamos a utilizar para desarrollar nuestra aplicación. Estar con Bubble, FlutterFlow, WeWeb, AppGyver, cualquier herramienta nocode o incluso (y sobre todo) con código.
Dividimos nuestra planificación en 7 fases, que les presentaré aquí ahora, vamos a mostrárselo visualmente.
Al final, todavía quiero presentarles algunos consejos sobre herramientas que pueden ayudarnos mucho en algunas de estas fases.
Fase 0 – Concepto de aplicación general
La fase cero es la fase de conceptualización general de la aplicación, es decir, aquí definiremos exactamente cuál es nuestra app, cuál es su objetivo, qué hace, etc…
Esta fase es sumamente importante ya que será la base para todas las demás.
Todo surge de esa conceptualización, por eso este mapeo debe estar muy bien hecho y alineado con el cliente o cualquier persona involucrada en el proyecto.
Al final esto termina convirtiéndose prácticamente en un alcance del proyecto, de lo que se hará y de lo que se espera.
Aquí, como ejemplo, mencioné algunos de los puntos que se pueden plantear en esta etapa de planificación de la solicitud:
Concepto de app: en este caso hablamos de una app de gestión de proyectos multiempresa.
Podemos recopilar requisitos, o básicamente funciones de nuestra aplicación. Enumerar lo que esperamos que haga la aplicación.
(Tenemos contenido sobre recopilación de requisitos, que puedes ver aquí en nuestro blog o en nuestro canal de YouTube).
Podemos enumerar las páginas que tendrá nuestra aplicación, tipo de usuarios, permisos de usuario, etc.
Creo que entiendes la importancia de este paso, ¿verdad? Toda nuestra aplicación se basará en lo que recopilamos y anotamos aquí.
Fase 1 – Inspiraciones
Ahora que conocemos el objetivo de nuestra aplicación y todos sus requisitos, podemos buscar inspiración.
Busca aplicaciones que hagan algo parecido a lo nuestro, inspirándote principalmente en la Usabilidad.
En diseño existe una ley llamada Ley de Jakob, que dice:
“Los usuarios pasan la mayor parte de su tiempo en otros sitios web y prefieren que su sitio web funcione de la misma manera que todos los demás sitios web que ya conocen”
En otras palabras, los usuarios esperan que su sitio web, aplicación o sistema tenga una usabilidad similar a los otros apps que existen.
Punto importante: la idea aquí es inspirarnos, NO COPIAR.
Aquí en nuestro ejemplo, estamos creando un administrador de proyectos y ya conocemos las páginas que vamos a desarrollar. De esta forma podemos buscar inspiración en aplicaciones similares.
Trajimos aquí algo de inspiración para los flujos de registro e inicio de sesión.
Algunas inspiraciones sobre cómo algunos sistemas de gestión de proyectos como ClickUp o Asana muestran sus proyectos a los usuarios, etc.
Así empezamos a tener una idea de cómo el mercado ya hace lo que intentamos hacer, podemos inspirarnos y encima mejorar la UX.
Ahora que sabemos las páginas que vamos a desarrollar, qué necesita hacer nuestra aplicación y también tenemos algo de inspiración, podemos comenzar a diseñar nuestros Wireframes.
Fase 2 – Estructura alámbrica
Los wireframes no son más que un diseño de baja fidelidad de nuestra aplicación, es decir, aquí no nos centraremos en colocar colores, identidad visual, detalles, sino que nos centraremos en crear un primer boceto de los elementos que estarán presentes en nuestra app, en su disposición y en la experiencia que esperamos transmitir a nuestros usuarios.
Este paso es crucial, porque con él podemos comenzar a visualizar el rostro de nuestra aplicación y también podemos obtener comentarios rápidos y objetivos de quienes participan en el proyecto.
Con Wireframes podemos eliminar distracciones como los colores, el diseño y centrarnos en recopilar comentarios exactamente sobre lo que importa en ese momento, el diseño y la usabilidad.
Aquí, en nuestro ejemplo, ya podemos ver cómo se verá nuestro flujo de inicio de sesión, cómo se distribuirá nuestro panel, etc.
Fase 3 – Flujos de usuarios
Esta fase es muy habitual que se realice en paralelo al wireframing y tiene como objetivo documentar y detallar todo el flujo de acciones que cada usuario puede realizar sobre las pantallas en cuestión.
Detallamos todas las acciones, permisos y restricciones considerando cada tipo de usuario para cada pantalla o página.
En nuestro ejemplo aquí, en nuestra página de inicio de sesión, detallamos los flujos:
- Nuevas Inscripciones
- Acceso
Fase 4 – Modelado de datos
Creo que esta fase no requiere un comentario tan importante.
El modelado de datos es el corazón de cualquier aplicación y debe realizarse antes de pensar en saltar a cualquier plataforma para comenzar el desarrollo. Esto es lo que diferencia al apps que funcionará bien cuando haya más usuarios que al apps que no lo hará.
Sin un buen modelado de datos, las aplicaciones están destinadas a causar problemas importantes en el futuro. Los fallos en el modelado pueden provocar ralentizaciones, una caída del rendimiento y, en algunos casos, la solución será una refactorización completa de la aplicación.
Dado que los datos son el corazón, terminas creando tu aplicación basándose en el modelado de datos. Las lógicas terminan siendo diseñadas de acuerdo a lo diseñado en este modelado. Por eso es importante invertir mucho tiempo en este modelado antes incluso de pensar en utilizar la herramienta.
Aquí, en nuestro ejemplo, podemos ver qué tablas serán necesarias en nuestra aplicación, qué campos tendremos en cada tabla y cómo se relacionan entre sí.
Aquí nuestro objetivo no es enseñar cómo hacer modelado de datos, sin embargo tenemos dos cursos gratuitos en YouTube sobre el tema, uno sobre modelado de datos relacionales y otro sobre modelado de datos no relacionales, Te recomiendo mucho que lo veas, te dejaré las tarjetas de video listadas aquí.
Fase 5 – Seguridad
Esta es la fase más subestimada por todos los usuarios novatos e incluso por algunos usuarios con años de experiencia, es un paso burocrático, pero extremadamente necesario e idealmente también debería pensarse en ello antes de comenzar a desarrollar nuestro apps, ya que puede haber casos en los que Necesitamos remodelar algunas áreas de nuestra base de datos para poder implementar 100% la seguridad esperada en nuestra aplicación.
En la práctica, esta implementación varía de una herramienta a otra, pero a nivel conceptual la idea es la misma.
Necesitamos pensar en los campos de nuestra base de datos y básicamente decir qué campos pueden ser vistos por qué tipo de usuario.
Al hacer este mapeo, solo necesitamos implementarlo en nuestros sistemas.
En nuestro ejemplo, pasé Tipo de datos por tipo de datos e implementé las reglas necesarias para garantizar que solo aquellos que realmente pueden ver los datos sean los únicos con acceso a ellos.
Fase 6 – Identidad visual + Prototipos de alta fidelidad
Ahora finalmente ha llegado el momento de pensar en el diseño de nuestra aplicación.
En esta etapa definimos toda la paleta de colores del proyecto, estilos predeterminados, fuentes, etc… Y lo implementamos en nuestra aplicación, en base a lo que ya hemos construido en nuestros wireframes.
Además, en este punto podemos optar por prototipar nuestra aplicación en una herramienta como Figma, por ejemplo, y darle sensación de vida a este diseño y aplicación.
Es importante e interesante comentar aquí que si nos paramos a analizar, prácticamente en todas las fases aquí mencionadas, podemos realizar micro validaciones con nuestros clientes, de esta manera iremos avanzando en el proyecto poco a poco, con la aprobación del cliente.
Esto mitiga por completo el retrabajo en etapas de desarrollo más avanzadas, que tardan mucho más en adaptarse.
Como prometimos, aquí tienes algunas indicaciones de herramientas que puedes estar utilizando para llevar a cabo algunos de estos pasos:
Planificación General:
- Mirar - https://miro.com/
Inspiraciones:
- comportamiento – https://www.behance.net/
- regatear – https://dribbble.com/
- Marco web – https://webframe.xyz/
- Viento de cola – https://tailwindui.com/
Estructura alámbrica:
- Mirar - https://miro.com/
- figura – https://www.figma.com/
Flujos de usuario
- Flujos de página – https://pageflows.com/
Nuevamente muchachos, todos estos pasos pueden y deben realizarse antes de siquiera pensar en abrir nuestra herramienta NoCode.
Por supuesto, a medida que su conocimiento técnico evolucione, este proceso será cada vez más fácil y también podrá identificar más fases en este proceso de planificación específicas para la herramienta que utilice.
Conozco algunas agencias de desarrollo europeas y australianas, que tienen procesos de documentación específicos y ya han pensado en la herramienta que utilizan para desarrollarse.
Recomiendo a todos que no descuiden este proceso; de lo contrario, probablemente comprenderán el motivo más adelante.
Si disfrutó de este contenido y también está interesado en este tema, dentro de nuestra capacitación exploraremos este tema más a fondo.
Estos ejemplos que di aquí en este video son de un track completo que tenemos en Formación de burbujas de inicio de NoCode, donde detallo paso a paso contigo cada uno de estos temas y posteriormente construimos juntos esta aplicación de Gestión de Proyectos.
¡Gracias, un fuerte abrazo y nos vemos la semana que viene!
ES 
PT 
EN 