.png)
Antes de nada, no abandoné el proyecto. Sé que han pasado algunas semanas desde la última actualización, pero estuve avanzando en el repositorio público y en los mockups, así que dejé las publicaciones para después. Lo importante es que el proyecto ya cuenta con un repositorio en GitHub y estoy extendiendo la prueba de concepto validada, ahora con un pipeline de infraestructura aplicando IaC Infraestructura como Código. Si te interesa profundizar en este tema, te recomiendo este artículo de AWS sobre IaC y sus beneficios.
Aún me faltan los templates de varios componentes de la infraestructura, como API Gateway, funciones Lambda y el User Pool de Cognito. Esto me llevará tiempo por la investigación necesaria. Estoy acostumbrado a crear recursos desde el portal de AWS y describir la infraestructura en archivos yaml todavía es relativamente nuevo para mí. Ya había estudiado lo básico con CloudFormation y Terraform, pero ahora lo estoy aplicando en un caso real.
Si quieres revisar el proyecto en vivo, aquí tienes los enlaces: Repositorio en GitHub y App publicada.
En el frontend hice un bootstrap del proyecto, configuré las bibliotecas que voy a usar, preparé el pipeline, definí los recursos de infraestructura con IaC y validé el recorrido de punta a punta. Por ahora, si accedes al enlace del proyecto verás una pantalla mínima que confirma que todo el flujo está desplegando correctamente.
Tras esta puesta al día, vamos al tema central: el proceso de diseño y creación de mockups, recordando que no soy diseñador de interfaces. Empecé investigando contenidos de profesionales de UI en YouTube, revisando portfolios en Dribbble y Behance, y recopilando referencias en Pinterest. Una guía sencilla y útil para quien no es diseñador es la regla 60-30-10 para aplicar color en la interfaz sin sobrecargarla.
60 por ciento: fondos y paneles con colores neutros para dar base visual.
30 por ciento: tipografía y elementos de lectura con suficiente contraste sobre el fondo.
10 por ciento: color de acento asociado a la marca para llamadas a la acción y puntos clave de interacción.
También apliqué consejos simples de microdetalles visuales, como el uso consistente de radios de borde, espaciado y jerarquía tipográfica para suavizar contornos y mejorar la legibilidad. En paralelo hice un benchmarking de apps de finanzas personales en Play Store y App Store. Fue útil para identificar patrones comunes y entender cómo se adaptan elementos entre smartphone y escritorio en productos similares al que quiero desarrollar.
Un hallazgo clave fue diferenciar entre apps nativas y web apps. En móvil nativo, la navegación inferior con navigation bar funciona muy bien porque la app ocupa toda la pantalla. En un web app, el navegador reduce el alto útil, así que suele ser más efectivo usar menús laterales que se sobreponen y se ocultan al terminar la interacción, liberando espacio vertical valioso. Incluso productos que tienen versión web y versión nativa aplican esta distinción.
Para los mockups estoy usando Figma. En su nivel gratuito ofrece funciones excelentes para proyectos pequeños como el mío. Algunas capacidades avanzadas de prototipado con condicionales están en planes de pago, pero para esta fase no son imprescindibles. Empecé por wireframes de baja fidelidad para definir estructura, cabeceras, navegación, área de contexto y contenido principal, pensando desde el inicio en el comportamiento responsive en escritorio, tablet y smartphone.
Decidí no utilizar librerías de componentes preconstruidas. No es que esté en contra, simplemente quise vivir el proceso de diseñar y desarrollar componentes desde cero. Esto supuso muchas iteraciones y refactorizaciones al crear los mockups y la interfaz. Es un trabajo que planeo revisar cíclicamente, incluso cuando me acerque al MVP; siempre habrá espacio para pulir la experiencia de usuario.
Sobre pantallas, quiero destacar Visión General. Es el corazón del sistema y reemplaza lo que ahora tengo en una hoja de Excel: en una sola vista veo ingresos, gastos, inversiones y el gasto diario por mes, con navegación entre meses históricos y futuros para proyección. En escritorio pequeño el menú lateral aparece contraído por defecto, con opción de expandirse para mostrar etiquetas; en pantallas grandes podría mostrarse expandido. El contenido principal ocupa el área central y una barra lateral derecha actúa como panel dinámico con los detalles del elemento seleccionado, por ejemplo, los gastos de un día concreto.
En tablet, el menú lateral se oculta y aparece un encabezado superior con botón de menú tipo navigation drawer. El área principal pasa a dos columnas en lugar de tres y el panel lateral se sustituye por un bottom sheet que emerge desde la parte inferior y se superpone al contenido mientras dura la interacción. En smartphone la disposición se simplifica a una columna y se añade un componente de pestañas bajo el título para alternar entre los bloques que en tablet estaban en dos columnas.
Seguiré publicando avances del proyecto a lo largo de las semanas, incluyendo más detalles de UI, mejoras de rendimiento y evolución del pipeline de infraestructura con IaC en AWS.
Si te interesa construir productos digitales con enfoque en experiencia de usuario, rendimiento y escalabilidad, en Q2BSTUDIO somos especialistas en software a medida y aplicaciones a medida, desde el diseño de interfaces hasta el despliegue en la nube. Podemos acompañarte de punta a punta, desde la ideación y los mockups hasta un desarrollo multiplataforma listo para producción. Conoce cómo abordamos el ciclo completo en nuestro servicio de desarrollo de aplicaciones y software a medida.
Además, si tu estrategia requiere infraestructura sólida y automatizada, trabajamos con servicios cloud AWS y Azure aplicando buenas prácticas de IaC para entornos seguros y reproducibles. Descubre más sobre nuestros servicios cloud AWS y Azure. También contamos con capacidades en inteligencia artificial e IA para empresas, agentes IA, ciberseguridad y pentesting, servicios inteligencia de negocio y dashboards con Power BI, para escalar tu producto con datos y protegerlo de extremo a extremo.
.jpg)