#6 Bubble Makers: Cómo usar plantillas y estilos, un ejemplo de SaaS y una pregunta incómoda
Consejos para crear web apps con bubble.io
¡Hola lector! Aquí Pablo.
A partir de esta edición, esta newsletter dejará de ser semanal para pasar a enviarse cada cierto tiempo. A principios de 2021 decidí gastar más tiempo en trastear con Bubble y algo menos en escribir sobre ello. Jugando con Bubble es como surgen las ideas que dan lugar a contenido realmente interesante. Calidad >>> Cantidad.
Como de costumbre, esta newsletter incluye:
Una sección para principiantes de Bubble
Una sección para makers más experimentados en Bubble
Una aplicación creada con Bubble
Un tweet relacionado con no-code que haya encontrado inspirador o útil
Puedes ir directamente a la sección que más te interese. ¡Empezamos!
La Burbuja para Principiantes
Al empezar con Bubble una de las cosas que más me gustaron fue ver cómo podía arrastrar elementos a un lienzo vacío y tener una app funcional en cuestión de horas.
Sin embargo, si queremos construir una app con un buen diseño, hay 2 cosas que recomiendo hacer antes de empezar.
Ir a la sección de Settings y ajustar la paleta de colores para que coincida con los colores de tu marca. Así, siempre que crees un elemento te saldrán estos colores como sugerencias y podrás elegirlos con un click.
Elige 2-3 colores y diferentes tonos de negro & blanco Crear una página de Estilos para definir los colores, botones, fuentes y tamaños de texto de tus elementos principales.
Hay varias razones por las que deberías usar estilos dentro de tu app:
Para ser consistente con tu diseño.
Para ser capaz de editar todos los elementos que tengan el mismo estilo al mismo tiempo, en lugar de tener que ir uno a uno. Creeme, cuando lleves mucho tiempo sin tocar un proyecto lo agradecerás.
Porque hace que tu app sea más rápida. Bubble crea un archivo CSS con todas las propiedades de tus elementos cuando cargas la página. Usar estilos hará que este archivo sea más pequeño.
Algo que te ocurrirá a menudo es que no te valdrá ningún estilo de los que hayas creado. Quizás necesites que tu título esté alineado a la izquierda en vez de centrado, o que sea un poco más pequeño. Tendrás la tentación de clicar en el botón de Remove Style y editar el elemento a mano, pero te recomiendo que no lo hagas. Una vez empiezas a hacerlo es difícil parar y terminarás con un montón de elementos sin estilo.
En lugar de eso, hay dos cosas diferentes que puedes hacer:
Tener diferentes versiones de un mismo estilo y elemento (H1, centrado, H1 a la iquierda, H1 a la derecha) para que puedas elegir el correcto para cada caso de uso.
Hacer click en la pestaña de Conditional del elemento que quieres cambiar y utilizar la condición When This URL is not empty, que se cumplirá siempre, porque en el momento en el que el elemento existe, the URL is not empty. La siguiente imagen muestra un texto que tiene el estilo H1 pero está formateado en azul, porque la condición siempre se aplica (la URL nunca está vacía).
La Burbuja para Makers
Aunque en el manual de buenas prácticas de Bubble sin duda incluiríamos el crear una página de Estilos, quizás no sea tan importante si utilizas un buen template de los que Bubble te ofrece.
Las plantillas son una gran opción para lanzar una app con un empujón inicial y aprender cómo funcionan diferentes elementos en Bubble. Puede que al principio te sea más difícil crear apps con ellas que sin ellas porque no sepas adaptarlas a tus necesidades, pero según vayas ganando experiencia te será mucho más fácil.
Si quieres ver todas las plantillas disponibles, puedes encontrarlas aquí y filtrarlas por categoría (landing page, marketplace, CRM, etc.).
Algunas plantillas que he usado y me han gustado ⬇
Canvas by Airdev: Increíblemente completa. Hace un par de meses sacaron una actualización que permite crear páginas para tu app de Bubble con una extensión de Google Chrome. Es con diferencia el template que más he usado y en mi opinión la curva de aprendizaje merece la pena.
Template Preview (haz click en alguna de las imágenes una vez estés en la página)
EZ Dashboard: Dashboard muy completo, con gráficos, formularios, tablas y menús.
Clean Login Signup: Página simple con flows de signup/login.
Hay muchos otros templates que quiero probar en el futuro, como Tasky - Project Management o Headstart Lite. Hasta ahora me he centrado en aprender Canvas, que tiene lo suyo.
¿Eres de templates o eres más de construir desde 0? ¿Algún template en particular que debería probar?
Bubble App
Esta semana, la app elegida es Rate My Excel, una app creada por Lianna Gerrish que ayuda a diferentes compañías a evaluar las habilidades con Microsoft Excel de los candidatos a los que entrevistan.
El manager de la compañía puede invitar a los candidatos a realizar un test de Excel y revisar sus informes, con las respectivas puntuaciones que hayan conseguido. A su vez, los candidatos reciben una invitación por email, se loguean para ver los diferentes ejercicios, responden a las preguntas y suben los archivos necesarios.
Hay una demo gratuita por si quieres probar la app. Quizás te de ideas para tus propios proyectos. Os muestro en un GIF la interfaz que vería el manager.
Esta app muestra el poder de Bubble para construir un SaaS. Se me ocurren muchas compañias que pueden necesitar una solución similar a esta para realizar pruebas de habilidades o tests similares.
Bubble Tweet
Esta semana os comparto un tweet de Nigel Godfrey. Nigel ha estado comentando en el foro de Bubble desde 2016, lo cual me parece increíble. No hay mucha gente que utilizase Bubble hace 5 años.
Plantea una pregunta interesante: ¿Cuál es el rendimiento actual real de las apps creadas con no-code?
Me gustaría mucho saber qué pensáis sobre esta pregunta. En mi caso no me he encontrado con muchos límites ni problemas de rendimiento, pero se que es por las opciones a y b: mis apps han sido simples y con pocos usuarios. Veremos en el futuro…
Gracias por leerme. Si quieres charlar sobre alguna de estas preguntas, puedes escribirme en Twitter o contestar a este email. ¡Hasta dentro de dos semanas!