Tutorial

Designing a Bubble Interface

In this introductory-series video about Bubble, the presenter teaches us how to design an interface in Bubble. Designing an interface in Bubble is very simple, we just have to click on the element we want and draw it anywhere on the screen.

The home page of the Bubble is also known as the index page. The Bubble assistant provides us this design to give us a jump start. Every thing we see on this index page is an element. But can also add our own element.

From 00:22, he tells us how we can make and add our own element in the page. He navigates to UI Builder on the top left corner of the page where all different kind of elements are available. These elements are categorized as visual elements, which contain building blocks for our design. Container elements to display things and hold elements together and Input Forms elements that collect data from users etc.

At 00:41, the presenter actually adds an Input element to this index page. He selects an Input element and draws it on the page where it’s needed. We can always click and resize this element and position it wherever we want. He adds this Input element in an existing group that our page has. By adding different elements to the page, we create an element tree which lets us see how elements are stacked in group together.

At 01:04, the demo of the added elements is showed to preview to see what we have added to the page. We have looked here that Bubble does all the complex work for us. These elements are already built and ready to go. Bubble gives us the facility to build our visualized designs just by dragging them onto the page. In the next lesson, workflows will be covered and a workflow will also be created for this newly added input element.

Related Articles

One Comment

Leave a Reply

Back to top button