Building UI in Bubble.io
🍥

Building UI in Bubble.io

For a more general introduction to bubble learning, check the link below.

🏃🏿‍♂️
Getting Started Bubble.io

For resources around getting started building in bubble visit here:

Building decent looking UI in bubble takes some time to get the hang of. But I would say there are a few things that help to create better UI. But once you get the hang of creating good UI in Bubble becomes quite easy, the goal of this content is to understand how to shake off "bubble look" to your site. However more amazing you want to make your design is up to you. But these are just a few tips and tricks on how to make your bubble UI better.

Note don't stress about making the design amazing from the jump, you will improve it over time. But start with a good foundation to create a good a looking UI for your app, and improve it over time.

Here some general tips by bubble io when designing

The keys to Bubble UI are:

Layouts

The most difficult part of layouts in bubble is responsivity. I think the concepts are best explained by the videos below.

Using the Styles tabs

This is a very important tip and a fundamental tool within bubble.io. The style tabs allow you to edit different visual elements like buttons or inputs. Once a style is defined you can reuse it as many times as you want within your bubble app. This helps you to keep a consistent visual aesthetic throughout your app.

It is also helpful performance wise to define your styles in the styles tab. It removes the load off of bubble to have to constantly call upon a different style for each element.

Also, one thing to note to have the colors your frequent the most on hand it is good to define them as well. Go to settings → general → scroll to the color palette. Having these will help to keep your colors consistent throughout the app

Color

A quick aside, one important thing is color selection. I tend to choose one primary color, an accent color, and a darker color as my main. Then I mix these with a selection of 4 whites and darker grays.

Typography

Good typography can dramatically improve the design of your app. Bad typography will only further show that your app was built in Bubble. To combat bad typography the first thing you can do is to define your text styles in the Styles tab.

Here are some tips for working with typography:

  • Always skip a weight want wanting to create contrast go from light to medium or medium to extra bold
  • Align your type to one axis,
  • Use Space

The embedded link above will go more in-depth on how to create better typography within your apps. But the key to applying this in bubble is to define the elements in the styles tab so you can have a consistent look to your app.

Leverage Frameworks and Importing from Figma

Leveraging Framerworks

Design frameworks like open build can provide guidance for creating great UI. I copy and past many of their elements and edit them to use them as my own. They have tons of free elements to use and build your app with.

Figma

One other option is to do your design in Figma and import it to bubble. This allows you to be more flexible and solely focus on your design, and then just program in everything later. Below is an example of a site I designed and imported from Figma to bubble.io

Figma

image

In Bubble

image

Figma is also great to design custom icons and illustrations to keep a continue theme throughout the site. To bring them into bubble simply export your asset to an SVG and upload it bubble as an image element.

Dribble and Inspiration

One thing to also mention is the need for inspiration for good ui design. For this the site below is a great resource.

Other Resources

Hope this helps and if you need any more help please don't hesistate to ask.