Section 1 (Lesson 4/10): Designing an intuitive and aesthetically pleasing application involves understanding several core elements, and among the most critical are layout and spacing. This tutorial dives into the principles of organizing elements within your Bubble app to create a user-friendly and visually appealing interface.

In this video, we cover:

Resources folder: ➡ https://e6387a14ba6d0bf3e823090f8d959...

Bubble editor: ➡ https://bubble.io/page?type=page&name...

Now there are three core elements to designing an application.

Number one is the styling of your elements, such as your text, your inputs, your buttons, your colors.

Then we also have the layout and spacing (how do we organize these elements so that it makes sense to the end user), such as a form, we'll have text at the top, inputs in the middle, buttons at the bottom, put within a nice box and distributed evenly on the page.

And the third part is interaction. This is what makes an app an app. How do we interact with buttons, inputs, file uploaders and all of those kinds of elements?

In this lesson we're going to be talking about the layout and spacing part, which is super, super important. And Bubble has a very, very effective responsive design system based on the flexbox system. Let's take a look.

So I'd like you to follow along with me for this lesson please. We're currently on the index page and I'd like you to bring up the Property Editor by double-clicking on the page. I'm going to name this "Workplace". Now this page title will show up in the tab that a user is on. And this is the name of the page: "index". We need an index page, so we're not going to change that.

Over on the Layout, we're going to change the Container layout from "Fixed" to "Column", and we'll be covering and using all of these layouts, but within context of building the app a bit later on.

Next thing I'd like to do is change the "Default builder width". Not to be confused with the page width, because the page width is dynamic and the user decides what the page

width is based on the device that they are using. Now we're just instructing Bubble,

what kind of default builder width would we like to build within? I'm going to choose 1400. There's a good reason for that, which we'll get to later.

So all pages basically adhere to a system called the box model. And if you look at applications like Airbnb, all of the designs are basically organized within boxes. Some people call them containers. At Bubble, we call them Groups. But the main lesson here is that elements aren't just randomly thrown onto the page: they're always organized within containers.

Okay, I want you to head over to the Container section and find your Group element. Click once, over on the page, click again. Bubble is then going to add this Group to the page. I want you to rename this group to "Group Parent." On the width, I want you to set 960 and on the height let's set 200.

We're going to change the container layout to "Row" and we will be using all four container layouts in this course. For now, let's set it to "Row".

Over on the Appearance tab, I'd like you to scroll down to where it says "Background style", click the dropdown, choose "Flat color", and then select the blue color. But I would like you to change the opacity of this blue to 10% instead of 100%. Fantastic.

Now to demonstrate the various responsive tools available to us, we're going to add some child groups within this parent. So let's go to the groups area. We're going to click once and instead of dropping on the page we're going to draw it inside this other container group that we just created. Draw in just a basic shape, any shape will do as long as it's inside the Group Parent. Let's name this "Group Child 1".

On the Background style, I'm going to click the dropdown, choose "Flat color", and this time I am going to choose a dark blue. Over on the Layout tab I'm going to choose "Align to parent." This will become clear very soon. Going to choose fixed width 200 and I'm going to choose min height 200.

So on the left-hand side we have the Elements Tree. And the Elements Tree displays all

of the elements currently on the page in a parent-to-child relationship. It also gives us the ability to show and hide various elements on the page, amongst other things.

Now I am busy naming these groups "Parent" and "Child" just to explain a concept, but you won't see me naming them "Parent" and "Child" when we get into the course, we'll rather be calling them things like "Group User," "Group Signup Box," "Group Popup", etc. But for now let's just carry on with this concept.

Next, let's grab some text and we're going to draw it inside the "Group Child 1". All we're going to do is type capital A. Okay, on the "Style Attributes" dropdown, we have some styles. We're going to find "Heading 2". Then we're going to choose center align this text within the text element. And then we're going to set a white color which is the "Primary contrast" style. And to put this in the center, we're going to change to the Layout tab and choose center alignment.

Now let's go back to the Appearance tab of the "Group Parent" and let's have a look at the Elements Tree. So currently we have the "Group Parent" highlighted on the page with a red border, we have the group child currently highlighted and you can also see the label - by the way, you can also change the name of groups within this label - and we have the "Text A" within "Group Child 1".

So it's important to note that this is a nested structure, parent-child relationship. And the beautiful thing about containers is that they can contain other containers or elements or input elements. And this is basically how we're going to be building throughout this course: many groups within groups within groups, which gives us granular layout and spacing control.

So with "Group Parent" highlighted, I'm going to head over to the Layout tab.

Currently we have a Container layout of "Row." It's left-aligned, which means the child

element to the parent will be left-aligned. So "Group Parent" is the one highlighted. If I change the Container alignment, to the center, it moves the child element to the center, right-aligned as well. Let's put it back to the left.

Next, I'd like you to copy and paste this "Group Child 1". You can choose "Edit", "Copy", "Edit", "Paste". Let's change this to "Group Child 2" and let's change this to the letter B. Let's make another copy. This time I'm going to highlight "Group Child 2" and just use my shortcut on my keyboard: command C, command V. I'm going to change the name

to "Group Child 3" and we're going to change the letter B to C.

Okay, so now we have more than one child element. Let's click back on "Group Parent", and head over to the Layout tab. And now if we center align all three groups move to the center, right-align all three groups move to the right.

The next two are really useful. One is called "Space around," if you look at that distribution, but a more useful one is called "Space between". Now you'll see these various layout options all over popular websites and applications. If we take Airbnb for example, if we look at their navigation bar, you'll have the brand on the left, links in the center, buttons on the right. This is a common layout for navigation bar and this is actually what we've achieved right now.

Let's change Container alignment back to the left. And now we're going to change the Container layout to "Column". So at the moment the child elements are distributed on the x-axis next to each other. What happens if we set this to column? Now we've got a stacked layout top to bottom on the y-axis. Very powerful stuff. Let's change back to "Row".

The next thing we're going to do is add what we call "gap spacing". So gap spacing applies even spacing between the elements. So if we check that box, Bubble is going to say how large do you want this gap? We have row and column. We're going to change the column gap to 20 pixels. Nice even spacing.

What about some padding around these elements within this box? I'm going to click down to the bottom. Going to choose 20, 20, 20 and 20 on all four sides. Nice and neat. So you can see that by applying these various layout and spacing settings, we're starting to organize and arrange the elements within, which is the lettering A, B and C.

And again, if I change the Container alignment to "Column," we have the padding all the way around, but we need to re-add some gap. So I'm going to choose 20. Nice and neat.

So that was more of a conceptual lesson around the various tools. We have to be able to distribute the content and our containers on the page. As we start building out the course, we'll be using these settings and more settings throughout to make sure that our designs look absolutely pixel perfect and are also perfectly responsive.

I'll see you in the next lesson.