In this 2 part series, Gregory John teaches both marketing page design and application UI. The topics covered include design inspiration starting points, layout and spacing, element sizing, color, typography, responsive design, and accessibility.

Welcome to the design course. In this 2 part series, we're going to learn about both marketing page design and application UI. In this first video, we're going to be designing a landing image for a fictitious SaaS company called Surface. The topics we'll cover are: design inspiration starting points, layout and spacing, element sizing, color, typography, responsive design, and accessibility. This is a build-along course so create a new Bubble app and let's get started.

Welcome to the design course! In this two-part series we're going to learn about both marketing page design and application UI. In the first video, we're going to be designing a landing page for a fictitious SaaS company called Surface. And the topics we'll cover are: design inspiration starting points, layout and spacing, element sizing, color, topography, responsive design, and accessibility. Now, this is a build-along course, so go ahead create a new Bubble app and let's get started.

If you went ahead and skipped the application assistant, that's absolutely fine because you can just jump straight back into your Styles tab and follow along. So let's change our app font to "Poppins". Poppins is just a really nice rounded modern style font. And by changing our app font, it means that all of our text elements, buttons, inputs, etc. all of the default text will be changed to Poppins.

Now we're going to be starting off with some real basic color schemes because I want to prove the point that we don't necessarily need much color to make our designs look super professional. The correct use of color can either hinder the user experience or improve the user experience, so we're going to leave color mostly out of this course, but we'll talk about it at the end. We'll talk about where to get color inspirations, color palettes, and accessibility, which is the contrast between colors.

For now, I just want you to set the Primary color to #121212, okay? That's just a black color. For the Text, I want you to set this to just twos across (#222222), slightly darker. We'll set the rest shortly. Let's click next, and we won't be using any plugins in this course.

Okay, now, before we get started, let's just review what we're going to be building! So here is the demo app and we've got this lovely Surface color that we're going to add at the very end. We've also got a navbar up here which we can't see very well at the moment.

So let's go ahead and preview this page so we can see everything working, and there we go! Nice and clean. Let's scroll down and we've got this lovely big dashboard image, and I'll show you where I got this dashboard image from, but obviously, this needs to represent or give insight to the user about what your application looks like if they become a user. So we're just keeping it really, really simple, but this is enough to talk through both practical and theoretical web design. You can see we've got a lovely little shadow dividing these two sections.

Okay I'm going to right-click and choose "Inspect," and now this gives me the ability to view this design with breakpoints! So if I click on this little button here, I've got my various breakpoints. There's a 375 px breakpoint and I can scroll down we can see that the navbar changes color, image is reduced, this text size is reduced as well, and I can view the mobile navigation. Here is a tablet size, looking good! And here is the desktop size.

Now I'm currently using a Chromium browser called "Arc," so if you have access to Chrome or a Chromium or a Brave browser, rather use that particular browser so that you can also inspect and use the responsive design features of that browser. Can it work in Safari? Yes it can, you'll just need to figure out how to get to the responsive tab.

Okay, so how did I come up with this design? Let's talk about inspiration. And the first thing I'll say is that you really want to do a lot of research. You've obviously done the research for the particular type of business that you want to build, or product. You probably have a feel for what is currently working in your particular industry, and while I like to take inspiration, I always want to change designs and amend it for my particular audience or use case. You never just want to sort of copy, especially if you are looking at inspiration within the same industry.

So how did I get to this particular design? Let me show you. So here I'm actually on Webflow and I think Webflow is a fantastic design tool. They also have many great templates. I was just browsing their template database looking for design inspiration. Now this one by Flowbase is basically called "Surface" and you can see that I've borrowed from the background color, the logo, and some of the layout and spacing. But, I've definitely made it my own.

Now another very good reason resource is https://saaslandingpage.com/, where you can filter by the Landing page, Pricing page, About us, etc. Let's go back to the Landing page. Now these are actual companies, right? So we're looking for inspiration, not to copy - definitely not to copy.

Let's have a look at this one (Stacker). So we've got a two column layout with a large separation between the title text and the subtitles. Pretty cool, actually! Definitely catches my eye. This image is high quality as well. So we're going to be building something like this. A little social proof section, and I love the way that they've divided their columns and rows with this gray background color.

We can also visit the website; yeah, that's amazing, I love the little page load animation. So rounded buttons, and you'll notice what we're going to be building is using rounded buttons as well.

And what I'll usually do is inspect some of the elements on this page. So if we want to know what font this is, the size, spacing, the weight - well, we can just right-click, "Inspect", grab this little arrow icon and then hover over and we can see the font information in this particular block. It's jet black, 52 pixels in size, "PP Mori SemiBold" is the name of this font. The subtitle text is 18 pixels. Now this is obviously at the smaller breakpoint, so what I'm going to do is go back to the desktop breakpoint by just repositioning some stuff, there we go.

Let's have a look now. So 88 pixels for their main H1 and we can see that it's a H1 just below my mouse, it says "h1.framer-text...". So that's pretty large but really, really beautiful.

Let's have a look at the buttons. So we can see the padding of the buttons. Got top and bottom padding of 16 px, left and right padding of 28 px. And we can see the size of the buttons: 56 pixels tall by 200 pixels wide.

This little paragraph text down here is 16 pixels and for this they're using the font "Inter", and Inter I use for a lot of projects myself! I thought I'd use Poppins just to be a little bit different today. We can also see the color that they are using, nines across (#999999). All right, all great stuff!

Let's have a look at another design inspiration website. So this one is called "Landingfolio" and this is more of a template and component library, but it's a similar thing. Here is a design system that I use every so often called AlignUI, let's have a look.

Now this is very, very high-end design. Something I've never really liked about this is the speed of this particular animation - I love the design of the animation but the speed is a little bit jarring. But regardless, this is very, very high-end design. We're not going to be building something like this because AlignUI is a design system for Figma users, so very sort of creative, busy, almost jarring in their approach, but you know, designers kind of like that. But, the audience you're building for probably aren't designers. Maybe one or two of you have a designer audience, but they're probably businesses, BTC customers, that kind of thing, so our designs need to be cleaner and easier to digest. Good design is really about the user experience, okay? It's not about fancy illustrations and if we take a look at say Uber's site or Airbnb or Uber Eats - these big, big companies, their sites are basically designed for conversion purposes. How to get a user through their funnel or as far down their funnel and eventually you know to the end result, which is booking a cab, booking an Airbnb an apartment, or ordering a meal. That's the most important thing here.

It's not about being this design wizard and the good news about UI design in general is I'm actually not a designer myself. People seem to think that I'm this design guru with Bubble but that's not really my background. I have a systematic approach to design because design is really about layout, spacing, using color as a tool not as a distraction, being able to form, format, and choose high-quality images; it's not about being an illustrator or painter, that kind of thing, that's different. Logo designer, that's not what UI design is. Of course we use logos and we use these assets but we can grab those assets from other places. UI design is all about the layout, spacing, responsiveness, making sure that people can use the site how we want them to.

Okay, back on the project that we're building. Let's just talk through some layout and spacing. Okay, so our navigation bar is the same color as the background (we're just going to use white to begin with and we'll play with color later on) and we have a max width of 1200 px. Why 1200 px? Because we're using the bootstrap breakpoints that Bubble provides us and it's industry standard as well. So three column layout.

Beneath that we have a Hero section. A Hero section obviously has a column, all of these elements are in their own Group, and there's definitely a max width here because we have the text is wrapping, okay? So we know that there's a max width there as well.

Then we have an image beneath that. We've got something fancy going on here where the image is beneath the section. And in this section we have a column layout basically around these two elements with a Repeating Group. In the Repeating Group, we have an Option Set of logos.

Let's Inspect and look at the responsive design. Bring this down to 375 px which we've already done, but I did want to point to just a few things here. We can see that the navigation bar has changed significantly. It's not a three column layout anymore, it's a mobile navigation bar. The image is a lot, lot smaller and these logos are smaller, and the text sizing has also changed. So we'll be making these changes conditionally.

Okay let's jump back into our Bubble app and let's start building! So let's just set up some defaults first, so you can double-click on the page to bring up the Property Editor or you can just click on "index" in the Elements Tree on the left. Let's rename the Page title to "Surface." Let's head over to the Layout tab. I'm going to change the Container layout to a column because the page grows as we keep adding sections vertically. I'm going to change the Default builder width to 1200 px and I'm going to leave the Min height for now. The Min height will basically grow as we keep working down the page.

So what we'll do is keep referring back to the completed design to make sure that we're heading in the right direction. But the first thing I'd like you to do is head down to your Containers section and grab a Group. And just sort of draw in a small Group on the page. It's a little bit small - Bubble is in the process of sort of changing the user experience here. At the moment, whenever you drop a Group on the page it defaults to 40 px by 40 px but I think it should be max width.

Anyway, let's rename this Group to "Group section hero." This will become evident shortly. I also want you to go down and uncheck "Fit height to content." I just want it to fill the entire space on the page. The first element we're going to add on the page is Text. So I'm just going to go to the original design, keep going back and forth copying and pasting, but you'll need to type out this text. Here is here, grab the Text element, drop it on the page. I'm going to paste it in and I'm going to zoom in so you can read this: "Build unique and beautiful websites with Surface." Okay, so we pretending that Surface is maybe just a simple website builder.

Now I want you to change the style of the Text element to a Heading 1. Okay, and then after that we're going to center it. And because we changed our default font to Poppins, you can see that Bubble has now linked Poppins as the Heading 1 font.

Now I do actually want to make some changes here. The defaults do work quite well, but we need to know how to change defaults and how to adapt the topography, styling, so that it suits our vision.

So I'm going to go ahead and edit the style and what I'd like you to do is first of all change from Bold to Semi Bold. I'm definitely more of a semi bold kind of designer. I find bold just a little bit extreme. I don't think we need to use bold very much, in fact, I don't think I use bold at all on most of my designs these days.

Okay, let's adapt the font size to 54 pixels. Now the line spacing for large text is too much, okay? Before we change this let's just go have a look. I'm also going to change "Center this text vertically," I'm going to uncheck that.

But if we go back to the design, now if I had to go to the Layout tab (now this is just an example, you don't have to follow along here, I'll let you know when it's time to pick up the mouse), if I to say 576 Max width. If we look at this, the line spacing - the space between the lines of text - is quite extreme, it's actually far too much. So the larger the text, is the less line spacing you need. The smaller the text is, down to about 16 pixels, that would be the largest line spacing because 16 pixels was usually your regular body text size, and that's usually the text size that you would, for instance, read a blog post. You want a little bit more space with that.

Okay so I'm going to go back, edit the style, and I'm going to change line spacing to 1.1. And what I'm also going to do is change the letter spacing to -1. So much like when it comes to line spacing with large text, to make it more readable and legible, you also want to reduce the better spacing a little bit, okay? You only really do this for your H1, H2, H3, and then all the rest of your topography styles would just have the default which is zero. This is looking much better.

I am going to remove this Max width, and you can pick up your mouse again. Sorry, and also make sure that I've just unchecked "Fit width to content," we wouldn't do that for text, but also want to make sure that in the edit style that you did actually change this to 1.1 and -1, so go ahead and do that.

Okay so we have this Group section hero and I want you to do the same as me here: I'm going to detach the style, I'm going to go down to background style and choose flat color. I'm going to change this to let's just find a blue here okay it doesn't need to be exactly what I'm doing. For instance, I'm using #0400FF but I'm going to change the color to 10%. Please do the same because we're talking about layout and spacing now.

Because the way we achieve beautiful layout and spacing aside from the particular numbers that we're going to be using (or values) is about nesting Groups within Groups within Groups. When it comes to a Group, that's where we can start applying, where whether it's a row, a column, we can change it to align to parent. We're going to be doing all of these things but you always want to be applying these values to Groups rather than elements themselves for the most part.

I'm going to go back to my text now because if we look at the example, we have this text in the middle and it is grouped with other elements: subtitle text, buttons, a badge at the top here, so we definitely need this in the middle. So I'm going to right-click and click "Group elements in" --> a "Column container," because I've showed you elements that are stacked. We're going to call this "Group container".

Now on the Layout tab, let's have a play here. So I showed you an extreme example of 576 px, what about 768 px? That looks pretty good to me!

Now I want you to head back to the Appearance tab, please, because I want you to choose "Flat color" again and we're going to we can actually go grab this color here on Group hero section. We're just going to use this as a short exercise, so grab this color and on the left-hand side in your Elements Tree, head down to Group container and then paste this color back in. Then change this to 10%. So you probably deduced from this that I'm trying to determine where the Groups are and how the Groups react. Let's head back to the Layout tab and we can say Horizontal alignment in the center.

Now let's add our subtitle text. So I've gone back to the demo app, I'm going to grab this text, then back in the Editor I'm going to grab a Text element and I'm going to drop it inside this Group, okay? So another way to do this is to just drag a Text element like this in the Elements Tree. There we go!

Right, I'm going to paste that in and you can see that we need some styling here, so let's have a look. So we've got body text, 16 px, 1.4 line spacing. So let's edit the style of Body to 16 px rather. I'm going to change this to 500 (Medium). So Poppins, Medium, 16 px with our text color.

So I'm going to override this so it's center-aligned. What I tend to do is leave my styles left-aligned and if I need to make a small change like an alignment change or in a few instances I need to change maybe the color very, very slightly, instead of creating many, many styles, I just keep my base styles and I just adjust them very slightly occasionally. Which we've done now, fantastic!

Okay, with that done, I'm going to go ahead and click back on Group container because because we want some spacing between this text. This text is touching each other basically, and we don't want that. So I'm going to go to the Layout tab and I'm going to choose gap spacing so that is very descriptive, I'm going to choose 24 pixels. And the way gap spacing works is if I now drop another element in here such as a Button - you don't need to do this - if I do drop a Button, the space between the button and this text is 24 pixels, as well as this text beneath. So that's the way gap spacing works. It's like think of like a ladder: it ladders even spacing between your elements. So we'll be using gap spacing often on containers that have lots of elements, but then we'll also be creating more Groups within these containers: Groups within Groups because it gives us granular control over layout and spacing! Delete that Button for now.

Okay, now this subtitle text. In terms of like visual hierarchy, obviously this text jumps out of us first: it's the most important, it tells us the problem we're solving or what our app does, okay? But in terms of visual hierarchy, I also want to make sure that this subtitle text doesn't span wider than the text up here because that does change the hierarchy ever so much. So in this particular instance, I am going to add a max width to this text now. So on the Layout tab of the subtitle text, we've got a max width of 768 px on the Group container, but this text, I'd rather it be 576 px and put it in the center. And this just reads a lot better.

Okay, let's grab some buttons! Let's actually first review what we're building. So we've got a Button "Get started" that's in its own Group, okay? And we've also got this badge up here that we'll get to. Let me just review some of the padding. Okay great, so let's do this. We want a navbar at the top here, so what we're going to do is on the Layout tab of Group section hero. We're going to choose a Top Padding of 196 px, okay? And I'm going to choose a Bottom Padding of 96 px.

Now these numbers may seem arbitrary, but they're not. They're part of my own personal system which is based on the 4-point system, which is just sort of a modern technique that is adopted by designers these days. In the earlier days it was the 5-point system, meaning that if you want to increment up a level, you move from five pixels to 10 pixel spacing, from 10 pixels to 15 pixel spacing, etc. But the 4-point system is far more granular. You can divide by two in all instances nice and cleanly, that just gives, in my opinion, a much better visual hierarchy that we talked about earlier.

So what you'll learn is because we've got a navbar, I needed a bit more Top Padding here because we're going to lose about 80 pixels to this navbar. But when it comes to creating Group sections and the way a landing page works is that we've got our hero section then our social proof section then our feature section then our review section, then the footer section - everything is a section and everything is aligned very, very neatly. We can collapse and hide those sections when we don't need them or when we're testing them, or we can apply different controls to each section. So section is basically a Group that's placed directly onto the page. We never design directly on the page itself, we always drop in a Group first, we name it "Group section ___," such as "Group section hero," "Group section social proof," etc. That's how we design the marketing page, okay?

And these Group sections are, in the most instances, going to have Top and Bottom padding of 96 px for desktop and that will conditionally change to 64 px for mobile. These Group sections will always have 32 pixels Left and Right Padding. I know what you're thinking: Greg, shouldn't this be a style? And yes, we're going to change this to a style shortly, but I want to continue with this exercise with nested Groups and just complete this design a little bit more before we change it into a style.

So let's add our buttons! Here is a Button here, drop it in, and I'm just going to use my arrow key and to press down on my keyboard to get it to the bottom. Let's change this Button type to an icon and a label. Let's type "Get started" in the Label. And maybe let's use an arrow here for the icon. So I'm going to change the icon library to "Phosphor," I really like Phosphor. Let me type in "arrow" and I'm going to choose a clean, right arrow. Looking good, and I want the arrow on the right-hand side so on the Layout tab I'm going to choose icon placement on the right.

That looks pretty good, but now that we're working with buttons let's just adapt the style slightly because I want a pill-shaped button. So, icon size 24 px. In terms of my element sizing system that's perfect: 24 pixels, you can divide that by four. I'm going to change this to a Medium font (600 for me is too bold for buttons). I'm going to change this to 16 pixels in size, part of the 4-point system.

By the way, feel free to do a Google search or a Perplexity AI search on the 4-point system and do your own research on that. Then on the roundness: eight pixels. Why? Just a creative choice, but also, 4-point system! And let's remove the shadow style.

So if you're feeling a little bit overwhelmed with the sizing, we had 96 pixels, 32 pixels, we have 16 pixels, we have 8 pixels; these are actually what I use in my day-to-day life. I'll change them very, very occasionally, but most of the time my buttons are going to be 16 pixels with eight pixels on the roundness. If I have a larger button, I might in increase the radius size to say 12 pixels, or on a smaller button I might reduce it to say six pixels or four pixels, but for the most part it stays the same. So by the end of the course, you can just use this as a reference app and continue on building.

So that will be our Primary Button. Now, we did say that we wanted a pill-shaped. I wanted to go through the exercise of just showing you what I'd use for a regular rectangular button. I always use eight pixels on the roundness for just a standard button, but instead we need this to be larger, so let's just say 24 pixels. That gives us a pill shape.

Okay, now there were two buttons that we needed here. So it looks like we have another button here, outline button. Okay so let's use - well that should really be a Flat Button. So we've got Poppins, we're going to change this to Medium, 16 pixels, and we're going to change the background to a flat color, our primary contrast color, the roundness to eight pixels, and let's just see what happens when it's hovered. It changes the color slightly. Let's just choose a one-off color here. Usually this would be set up in my style variables first, but let's choose #F1F1F1 if the button is hovered. For this particular button, I'm happy with that.

Let's go back to the Design tab. I'm just going to click command+d to duplicate and I'm going to say I just want a Label button only: "Learn more." And and we're going to change this to a flat button. Now we want the these in their own Group because they need to be side by side in a row. So I'm going to highlight both of them, right-click, "Group elements in" --> a "Row container." Going to change this naming to "Group buttons".

I'm going to have a look at the Layout tab now. Gap spacing is what we need. Let's choose, let's try 20 px here. Yeah, 20 px looks good. And let's choose horizontal alignment in the center. I can see that I forgot to add the roundness in the Styles tab. I'm going to go back and edit the style and change roundness to 24 px, gives us our pill shape.

Okay, and then I'm also going to just go ahead back to the Group container just to grab this blue color and just add it here, just so we can see these groups for now, just so we can visualize them. And this is not something I do in my day-to-day life unless I'm building something slightly more complex, then I absolutely will do this. It just gives me a visual representation of how my Groups are responding, how the layout and spacing works together with the elements inside the Groups. But you won't always have to do this.

But as you can see, we have our main Group section (Group section hero), we have this group here (Group container) and then we have Group buttons. Now we need one more element, that is our little badge element. Let's review: so it says "AI assist" and we've got two elements in here, obviously that would mean that it is a row layout. So I'm going to grab some text first of all and just get it inside. Use my keypad to get this to the top. Type "AI assist" and I suspect this should be a probably a body small, which we don't have.

Okay so let's go through the exercise of adding a font here. So I'm going to go over to the Styles tab and I'm going to go down to "Text". Now I'm going to start with "Body". I'm just going to right-click copy and then paste. Going to make sure that the copy is selected, double-click, change this title so it says "Body small," and then simply the only thing I'm going to change is is the size to 14 pixels. I'm not going to do anything else.

Okay, now we can change this Style of Text AI Assist to Body small, and we need this in a little badge so I'm going to right-click on the Text, say "Group elements in" --> a "Row container," all right, because we need an icon next to it. Let's call this "Group badge" and let's get the icon in before we go any further. So let's go grab an Icon, click once, drop it inside the Group, and let's look for "Sparkle" on the Phosphor regular icon library. Okay, I'm going to edit the style of the standard icon because I want to remove the roundness, and on the layout and spacing, I'm also going to remove the padding.

So the sparkle icon is too large, let's go to the Layout tab and try 20 px by 20 px. That looks pretty good. I'm going to use my keypad to move it to the left inside this Group. And I think for this Group, now that we know what we're doing, I am going to change the appearance to give it a flat color of white, roundness of 20 px so it's a pill shape, and let's align everything nicely here.

So the first thing I'm going to do is remove the min height because the min height is currently 40 pixels. You can see I'm hovered over this Group and we have 40 pixels by 78 pixels. Now why 78 pixels? Because we have "Fit width to content" checked. If I had to uncheck fit width to content, the flexbox system spans full width. So I'm going to fit width to the content within. The content within this group are these two elements here. So let's check "Fit width to content". Let's just remove the min height so now it fits height to the content within, which is the icon and the text.

But we do want more graceful spacing within here, so the first thing we going to do is on the Layout tab of Group badge is check gap spacing. Then on the column, let's try four pixels. That looks good to me! Let's now scroll down and add Top and Bottom Padding of four pixels and four pixels, then Left and Right Padding needs a bit more. Let's try eight pixels and eight pixels.

Let's review, okay? I want a bit more, I'm going to choose Top and Bottom Padding of six pixels and six pixels and then 12 pixels and 12 pixels. I'm happy with that and now I'm going to horizontally align it in the center. Okay! Very, very nice, and in fact, this size (height) can maybe come down to 16 pixels. 16 is divisible by four which means it's going to look very, very harmonious with the rest of the design.

Now before we remove the transparent blue color from our Groups, let's first look at responsive design because there are some design decisions to make. The max width we have - the current width we're looking at - for the Group container is 768 px but we need this to look good all the way down to say 375 px or 320 px. That's up to us. But while we've got these Groups colored, let's first see what happens in the responsive editor.

So I'm going to go ahead and click on the Responsive tab and Bubble's chosen a 320 px mobile breakpoint. This is a little bit dated, let's actually change this by saying "Edit", 375, and instead of pressing return or enter, rather click on this check, okay? And I do want to add another one here as well. So this is part of the bootstrap breakpoint system. These aren't arbitrary numbers, this is part of a design system. And it's not the only design system (there are many design systems out there), bootstrap is one of the first which is just a set of rules for UI design and what makes design so much easier. Because it means that we only need to adapt our design at these particular breakpoints. We don't have to arbitrarily think of in a non-uniform approach create breakpoints. We just use these, we become familiar with them, meaning that we always know when the design needs to change.

But I want to get slightly more granular and I just want to show you how to add another breakpoint. There is a breakpoint here at 576 px, okay? I'm going to click on the little check icon. And this is the full set of breakpoints in the bootstrap system. We'll get another one at 1400 px, but I don't actually use the 1400 px breakpoint because I always have a max width of around 1200 px.

So at 576 px it actually looks okay. But what about at the 375 px breakpoint? And here we can see this quite problematic. What I am going to do though is while you in this view just make sure that Group section hero is highlighted, head over to the Property Editor, and click on "Fit height to content." Now the Group section hero is fitting height to the content within. That content was squashed on the left and right sides horizontally, which means that it had to grow vertically which is why we had an overflow issue. But that's now been resolved.

But anyway, in terms of viewing this on a phone, this wouldn't be a great user experience. There's going to be too much space at the top, this text is far, far too large, you don't really want it to be more than three lines, okay? And these buttons we could actually stack in a column layout. But because we had kept our Groups with this transparent color, we can actually see where some of the problems are, such as the left right spacing is too large.

So now we're going to talk a little bit about responsive design. And what we're going to do is on the Group section hero, head over to the Conditional tab because we're going going to define another condition. This is called breakpoint conditionality. At a particular breakpoint, at a particular size that we determine in our expression right now, we are going to instruct that the left and right padding changes from 32 pixels at desktop to 16 pixels, so far less so we get more screen real estate for our mobile phones. That's what we want to do. You don't want huge padding on your phone, you want to use as much real estate as possible while keeping a little bit of a uniform approach to the padding as well. We always want that. We don't ever want content right up to the sides; it becomes difficult to interact with if so.

So, I'm going to type "page" and I'm going to say that "Current page width," I'm going to start with that expression, then I'm going to hit the smaller than sign (<) and then I'm going to type "576" and Bubble's going to present our custom breakpoint of 576 px: "Custom (576 px)". I'm going to select that. So this expression says that when the page width size, which is dynamic - we don't know what our users are looking at our apps on, whether it's their phone, tablet, or desktop - but when the width is smaller than 576 then let's make a change! Let's change all of the padding. I want the Top padding instead of 196 px, I'm going to change this to 96 px. Bottom padding, instead of 96 px I'm going to change it to 64 px. Then the Left and Right padding we're going to change to 16 px and 16 px. These do jump around a little bit, so just make sure that you've typed - the Left and Right padding wants to be in the center here and Top padding at the bottom. But you can now see that this is far, far easier or it just looks like we we are utilizing the screen real estate far better than previous.

Now we can also do this to text. We can actually do this to anything! So let's go to the text, and actually, let's just copy this expression. Copy expression, head over to the text, define another condition and then paste it in. Okay so currently the font size - I'm not too sure what happened there, but the font size was 54 pixels. So let's change this to 48 px. We're just sort of experimenting here. Okay, so we're on four lines, let's change this to about 40 px, okay 44 px. Now, this is quite a long H1. Maybe if this was an ampersand and not an "and" it would be on three lines, I'm not sure. But I'm much, much happier with that. The user can scan, they can read this a lot quicker, and we can show them more content on page load. Okay, I'm pretty happy with that!

We're going to go through the same principles when it comes to our navbar, which is slightly more involved, but we're going to learn a lot there as well. Let's head back to our UI Builder and now we can go ahead and change the Group section hero, we can just remove the color from the Group section hero. We can do the same on Group container and we can do the same on Group buttons. Okay just make sure that on the... let's have a look at the Layout here, that's fine.

We're ready to preview this so let's go ahead and preview. I'm going to go ahead and also remove the debugger bar on page load. So I went ahead and removed "debug_mode=true" from the URL just so I can test this nice and cleanly.

So obviously our button which is meant to have a white background (we can't you see the white background) but this is a good lesson on hierarchy. Hierarchy meaning that the user, their attention is drawn to the more important parts. Obviously this text is the first place your eye would be drawn to: "Build unique and beautiful websites with Surface." Then after that it would be this button, and this button is probably more important than the "Learn more" button, right? We want to convert them, get them into the next stage of our funnel a lot quicker.

Why don't we go ahead and just add our Surface color now so we can see our buttons and our badges clearly. There's also a reason why I kept this text slightly darker than I would usually do. If I'm working mostly with text on a white background, in terms of hierarchy, I would actually make the body text slightly lighter, maybe like a graphite or dark gray color. That just helps again with hierarchy to show what's important on the page.

Let's head back to the Bubble Editor and go across to the Styles tab. Let's choose "Style variables," and our Surface color, let's change this so it is #FFF1E5. Back in the Design tab I'm going to click on Group section hero and I'm going to select the background color of flat and then I'm going to select our new color! You can see that that pops really nicely.

Let's edit the style of text Body; let's choose regular here. I felt it was slightly too bold and I'm just going to go back. I kind of wish this was on two lines and not on three lines so what can we adapt here. "The ultimate starting point for businesses wanting to excel online. Save hours from your build and easily customized Surface to suit any type of business." Let me remove "or brand". You can adapt this how you like, just keep a similar length. And then going to say "A great starting point" instead of "The ultimate starting point".

What else can we do? There's an "and" here. I'm going to use an ampersand sign so shift+7 on my Mac. There you go, across two lines now that's much better. Okay and the hardcore designer in me would say "Greg, the spacing is a little bit too even between all of these elements. Let's bring the text closer together." So we chose a gap spacing in the Group container of 24 pixels. Let's reduce this down to about 12 pixels. Let's halve it. So I'm going to "Group elements in" --> a "Column container," going to call this "Group text" and I'm going to add gap spacing of 12 pixels. Okay, very nice.

Now we need to add an image, so I'm going to grab an Image element and I'm just going to get it inside for now. Now go ahead and upload the image. Okay, there's the image there.

Now, you'll notice that the image extension might look unfamiliar to you. I used ".avif". This is a new compression standard even better than .webp, created by Google (also very, very good). You might be used to .jpeg or .png, but these file formats are really large, quality can be questionable at smaller sizes.

So these two compression standards, .webp plus .avif (which is the one you should use), these compression standards are good for the web, okay? And this also pertains or has impact for your overall SEO score, especially in the instance of a landing page where Google will score you based on how quickly your landing page lands. The biggest impact is image size, and you can go ahead and you can find converters for the static images that you have control over. Converters like convertio.co. Do a quick Google search for .png to .avif or .jpeg to .avif and these converting services can convert any image style or any image extension to any other image extension. Don't sleep on this. This needs to be done.

Bubble does actually do compression on the fly as well using using a service called CloudFront, but Bubble's not changing say a .png to a different file type, it's just keeping it a .png but reducing the size. But this is going one step further, okay?

Let's head over to the Layout tab because I want to actually match the aspect ratio of this image element to the image I've placed inside the image element, so I'm going to check "Keep aspect ratio fixed." And I specifically designed this dashboard to be a 3 pixel by 2 pixel aspect ratio, which is a common photography and image aspect ratio.

All right, now we can put it in the center and I'm going to uncheck fixed width. Now that's far too large, maybe you like that but I want to contain it slightly so I'm going to say 992 px as the max width, which you'll recognize is one of our bootstrap breakpoints. Okay, I'm going name this "Image dashboard," and for SEO purposes, I'm going to use an alt tag here as well. This is how a Google bot crawler understands this image. This is also for accessibility purposes for people that can't see very well and listen to descriptions of images. Let's say "Surface application dashboard" for the alt tag.

Okay, sort out the gap spacing in Group section hero. Head over to the Layout tab and let's apply some gap spacing of 64 pixels. Okay, so you've seen me use 64 px already in our vertical padding, you've seen me use 32 px which is half of 64, you've seen me use 24, all of these are divisible by four and all part of the system, which is 4, 8, 12, 16, 20, 24, 32, 40, 48, 54... you'll get used to these numbers over time. But designing within a system is the cheat sheet! It is the way that you can create beautiful UI without being a designer.

Let's preview this! Refresh the page. Very, very nice, look at that. Now you can see that I also designed this dashboard, or adapted this existing designed-dashboard, because this is from a Figma kit, okay? I just adapted the colors just to match the sort of monochrome feel that we have. I didn't want to be overly monochrome which is why I added a slightly Surface-y color of you can call that maybe a dusty pink or dusty peach, but because I wanted minimal color, I did want something to have a bit of vibrancy about it, so that's why I'm choosing this background color. You could also use a slightly grey-blue color here as well.

I'm going to show you a little bit of a technique to make this image sit on the page and feel or look a little bit more comfortable. It's got sort of sharpened edges and it just looks like it's been dropped into the position it's in. Let's make it feel more integrated.

So let's do this. First of all, head over to the Appearance tab of Image dashboard. Let's change the roundness to eight pixels, all right? Just curve the roundness slightly. Now let's add a border of solid and before we go any further, I'd like to go into the Styles tab, please. "Style variables," and I want to create a new color here. I'm going to call this "Light grey" or "Grey light" (the other way around) because you'll have multiple tones of grey in any application. Let me say "Borders" in the description, and I'm going to use the color I often use for borders which is #EBEBEB. It's part of my own design system.

Then what I'd usually do as well is have "Grey medium." Often I'd use this for placeholder content. And I'd usually have a "Grey dark" as well, and that I often use for Body text. But remember what I said: because I'm using a colorful background of the dusty pink, I can't use gray text on dusty pink - it clashes and it's also not good for accessibility. People that can't see very well will struggle with the contrast. We always want a good contrast. Now I talked about page load speed, SEO scores in terms of the images. Google also scores you in terms of contrast on your page: how well people can actually see the content.

So anyway, let's go back to "Grey medium" and Grey medium we want it to be around 80... let's do 84s across (#848484). And then in terms of Grey dark, we want this to be more of a dark slate, so let's choose 38s across or 37s across (#373737). It doesn't have to be an exact science, but let me actually show you a resource that will give you these numbers where a lot of research has been done.

So if you go to "UI colors," right, just search that in Google. On UI Colors we have a CSS Color Generator with colors created or devised by by a system called Tailwind which is I guess the second most popular CSS framework after bootstrap but it will soon be the most popular, I'm absolutely certain of that. But anyway, we could find a color like you could start with - if I think of my own education company called Buildcamp - one of my blues is... can't remember off-hand but the primary color is somewhere around here. What has been generated is all the shades that would work with this particular color: a harmonious palette, you call it. You could do the same with greys and blacks, so if I chose- earlier on, if we set our main color to #121212 here are the various greys we can use. Earlier on I said #848484, so this was very similar eights across here. We have #4F4F4F. I used an #EB color earlier, here we have #E7 which is very, very close. A lot of research has been done around how to make harmonious color palettes by Tailwind. This is what I use.

Now if you didn't know which color to start with, you have no sort of starting point, let's have a look at some of the other features! We can go ahead and head over to "Browse," and pick one of these. You would use a 600 for your primary color. Go ahead and just pick one of these but just be wary of what your business does and who the audience is. So if it's health-based, maybe you're using a green. SaaS often uses purple. A lot of companies will be using blues. Airbnb is using something like one of these pinks here, very, very similar.

And of course you can adapt it, okay? So you can actually pick this particular blue, here I've just copied it to the clipboard and I'm going to paste it in, but I'm going to adapt it slightly. So I'm going to say bring this down here, slightly darker, and then it will adapt this for you. All right, fantastic resource. Pin it to your browser; I do the same and I use this almost on a daily basis.

All right let's go back to the Design tab because back on Image dashboard, we are going to go to the Appearance tab and we're going to choose a border style of our light grey, #EBs across. Now the other thing we're going to do is (I absolutely love this little technique here) going to choose "Outset" for the shadow style, going to choose zero for the offsets and the blur radius, and going to choose eight pixels on the spread radius. Then I'm going to choose white as the Boxshadow color and then 50% opacity. So outset is the only value, spread radius of eight pixels with 50% primary contrast. And when I was talking about having this image sit more comfortably in the design, this is what this achieves in my opinion.

So let's refresh. So as you can see now we have the sharp edges, let's refresh. I didn't want sharp edges. I wanted rounded edges because we have a rounded feel or a rounded approach into some of our designs here. So this just feels really, really nice. Sort of a glow about it on the outside now that it's rounded. It's very, very soft.

Okay now with that done, let's go back to our demo app. Here's the demo app. Scrolling down we have this little section down here and I wanted to include this because I want to show you a little negative margin trick to get this image to sit behind this section. I also wanted to show you how to use a Repeating Group to display things like company logos which would then stack to a piece side-by-side when it gets down to mobile phone widths.

Okay, now to achieve this, what we're going to do is grab another Group and I want the Group on the index page here, okay? So I've clicked on "index" and I'm going to grab a Group and I'm just going to drag it beneath Group section hero, or even above it to start with. Let's just call this "Group section logos," hit enter, and on the Layout tab let's uncheck "Fit width to content" so it spans edge to edge. It's just at the top here, it's at the top, going to bring it down in a second. Then I want a Background color of flat white because we're going to have something underneath it, that image will be underneath it. Now I'm just going to hit down on my keyboard, get it down there and just so we have some space to work within, let's just add some Min height here, maybe 320 px.

Okay, so we have our section. So sections, remember, we're going to have Padding of 96 px and 96 px Top and Bottom; Left and Right 32 px and 32 px. Now I'm going to click back on Group section hero, right-click to save myself some time, going to say "Copy special" --> "Copy conditional expressions," which means I can just right-click on Group section logos and choose "Paste special" --> "Paste conditional expressions." Now, we do always need to quickly double-check, so breakpoints... so we're going to change the Bottom padding here to 64.

Okay, so let's go back and review the original design. So we have some text here, I'm just going to copy and paste, (don't forget you have access to my Editor as well) and I'm going to grab some text, drop it in, paste that in. Going to change it to a center alignment like so and I'm going to also change the text here and use my darker gray because this is now on a white background so we don't have to use such a dark color. On the Layout tab, I'm just going to choose center like so, and now we can add our Repeating Group with our logos.

So, in terms of storing the logos, let's head over to the Data tab and Option sets. And let's skip the tutorial and let's create a new Option set, call this "Logos." And by the way, you can actually jump into my app, right-click Logos, copy and literally copy it into your app. Now, to be able to copy an option set into your own app you actually need one to begin with, so what I tend to do is just create a new option set called "Dummy" to start with. Then I'll go to the demo app, I'll right-click copy, and then I can come back and I click and paste. Then I can delete the Dummy option set since it's there just because we needed an existing list here to paste into.

But anyway, let's create a new attribute. This will be called "image" that is of type "image". Okay, so what are the images we need here? We have four: Forbes, Bloomberg, Fast Company, and Tech Crunch. So add new options for all four. I'm not actually using the text itself which is why I'm not sort of bothering with the case sensitivity too much.

Anyway, modify attributes on "Forbes." Notice as well that these are .svg files, okay? I'm always going on about image size: .svg is micro, micro, micro, so if you can use .svg for your images, do it! Now .svgs, you'll find them for things like logos, okay, you can't use an .svg for the large image that I created with the dashboard, that's not what an .svg is for. It's for smaller, block color style images, but use them where we can because they are micro, just a few kilobytes

Okay, that's Bloomberg, Fast Company, and Tech Crunch. Let's grab a Repeating Group. Now you can just use standard methods of displaying these images, which is put them in a group with gap spacing and then drop in some image elements, but I prefer to use a Repeating Group where I can. This is a very great use case because you only design in the first cell and then it just repeats itself, so it makes sense in this instance. And if you're worried about page load speed, well option sets are client-side data so you're not doing a database call to display the data in this Repeating Group.

So this Repeating Group is of type "Logos" for "Type of content". And where do the images live? Let's grab them for the data source. We'll click "Get an option" --> "Logos," "All options," please. This type of content is "Logos" but then we'll display them as images.

Now we know that there are four, okay? So I'm going to change rows to 1 and columns to 4. Now in terms of the Layout, I'm going to put that in the center first of all and I'm going to set a max width let's try 768 px. I'm sort of a little bit uncertain at the moment. I'm going to remove the "Fit width to content" because the max width controls the width. We need it to obviously be smaller, and we'll deal with that later. In terms of the height, 80 px is fine.

So let's grab an Image element and let's get it inside the first cell, all right, and let's hook up the data. For "Dynamic image," we'll say "Current cell's Logo's image". We are going to, yeah, let's leave it at "Rescale" for now. Let's remove the fixed width, remove the min width, and let's set a Max width of these images to maybe 160 px. Again, I'm sort of uncertain at the moment. In terms of an aspect ratio, I'm going to set a maybe a 4 px to 1 px aspect ratio. So how this works is this is an image element, this isn't the image itself. We are now going to be fitting the image itself into the image element. Now I've constrained the image element to be a max width of 160 px with a 4 px by 1 px aspect ratio; however, I have left this to "Rescale," meaning that the image will always try fit the height of this element itself. But we'll make sure that the aspect ratio is respected.

Maybe this is easier just to demonstrate instead of to talk about the theory here. Also, while we're here we need to do the alt tag, so we need the "Current cell's Logo's Display" which is the name. Then, type a space on the keyboard and type "logo," I'm going to type that in right after the dynamic expression.

Okay let's head back. I'm going to change this as well, Image logo. Let's head back to the Layout tab and I want this in the center, like so. And then if I click the Repeating Group I'm also going to click on the Layout tab, container alignment centered as well. We don't want any separators so I'm going to remove those: None. And let's have a look.

What else do we want to do here? We need some gap spacing in Group section logos. Let's choose 20 px. And this text? I think it's okay. Maybe we can just do this actually: we can just say "You're in great company" then click return to the next line so it reads in two lines.

I've also noticed that there are Repeating Group has a border. I'm just going to remove that. Ultimately, if I was building an actual app, these would all be styles. But let's first see how we're getting on with this design.

Refresh, scroll down, and there we go! Now, naturally, this would take me slightly longer. I've already built this - I built this yesterday, just it's fairly fresh in my mind - so I would have experimented with, if I had another logo in there, maybe the max width would be 992 px. The max width of all of my content wouldn't really span past 1200 px unless it was like a very specific design use-case, like an edge to edge background color of a particular section. But most of the content you always want to keep fairly centered so when users are scrolling down the page you know you're keeping them focused to the center. They can kind of get a feel for where the content is, they don't have to look or take their mouse and move the mouse all the way to the top right-hand corner all the way to the top left-hand corner if they're trying to interact with a navbar, for instance.

It's always important because we can't control a user's desktop size or laptop size. I'm on a fairly big desktop and if I didn't have a max width on my content it would look awful, it would be the hero container would be edge to edge with that large text just in one line. We always want to have control over the layout and spacing, which is what exactly what we're doing here.

Okay, let's head back. Let's sort out our responsive design before we head to the navbar section because the navbar is slightly more challenging. Actually, another thing I've noticed as well is in the original design, this one here, we have a shadow and then this image actually overlaps - or underlaps, I would say. How do we do that?

So let's click on this Text element, head over to the Layout tab on Image dashboard. I'm going to select -96 px for bottom margins, so here is a little trick, okay? That brings it down there. We also need to remove the Padding on Group section hero. I'm going to scroll down, remove the padding, and there we go. There's the overlap.

Now I'm going to right-click on Group section logos and say "Bring to front". Now we need to add on the Appearance of Group section logos, we need to add some Shadow style of "Outset". Now I want vertical outset here so I'm going to choose maybe -8 px, remove the horizontal, we don't need horizontal. Maybe a blur radius of 16 px and then I'm going to choose black and I'm going to start at about 20% and just sort of have a look. That's too much: 10%. Too much, 6%. Let's have a look, let's actually preview this page. Yeah, fantastic! That looks really, really good.

But now on mobile, on mobile things change a lot, don't they? They sort of become tall, the content becomes taller so we might have to readjust the amount of negative margin here. We also need to readjust the layout of this Repeating Group.

So let's head across to the Responsive tab, and at 375 px, we can see that we possibly need some more negative margin on this Group, okay? Because it's sort of it's not really ducking beneath it. So I'm going to go across to the Conditional tab on Image dashboard. I'm going to say when "Current page width < Custom (576 px)," choose the custom breakpoint. I'm going to find my Bottom margin (currently -96 px) and I'm going to choose 128 px. There we go! Click somewhere else, let's bring this back to front. Right, it's just the way that Bubble - there we go, actually. Click down here we can see that that's now working nicely.

Now these logos obviously are going to look tiny here, so let's change 4 columns to 2 columns and 2 rows. So let's save ourselves some time, let's just grab this expression from the Conditional tab on Image dashboard and let's go down to RepeatingGroup Logos, paste that in so that custom breakpoint (which is our only breakpoint in this course), we're going to change the rows and the columns. So currently we have 1 row and 4 columns. Let's say 2 columns 2 rows. Let's go ahead and preview. Refresh the page. Okay remember in a Chromium browser, right-click, "Inspect" and then we click on this little breakpoint option down here and there we go.

Now logos could actually even be slightly smaller if you wanted to, and the way to go about that would just be simply to go through a similar process. So I've clicked on the first image, I'm going to paste in the expression for the breakpoint, and I can change the max width. So currently the max width was... what did a set it to on the image? So max width of 160 px, so maybe we could say a 120 px Max width. Let's preview the page. Much nicer. More white space which is what I like; easier to read. Now, what else is missing here? So let's just have a look at our spacing: 16 px, yeah, everything is looking absolutely fantastic.

Okay, so those are our two main sections. Now we're going to do our three-column navigation bar, and this navbar will be a Floating Group. The Floating Group will be a reusable element because navbars and footers especially should be reusable elements so we can reuse them on all pages and design from a central location. So let's jump back in and start with this navbar design.

So in terms of the navbar, we are going to have three parts to it, right? Three columns. You've got your logo on the left, links in the middle, and action buttons on the right-hand side. Obviously when it gets smaller we need to remove elements and adapt the design for mobile. Let's take a look at the demo to see the starting point for this design.

Okay so logo on the left, that is just text, of course that could be an .svg image as well of your own company. In the center, we have some Group links. On the right-hand side is our "Sign in" button. Now, to achieve this layout I have used a row container because it's on the same row and then I've choose the "Space between" flex option on the right-hand side here. Obviously we could move things around, it wouldn't look very good, so I choose "Space between" so it pushes the elements all the way to the end.

Okay, then when we break down to responsive, what I've done is in this navbar, I have the Group Container, okay, this is for desktop, well it's for mobile as well but when we want to interact with a mobile menu icon, then we're going to to be showing this Group here that I've just embedded into the navbar and which is collapsed by default. With a slightly different design, these link elements.

Now this is a reusable navbar and it's set as a Floating Group. So in the Property Editor we can see it's a Floating Group here, vertically floating relative to the top. And it's a reusable element so that when we're on a page somewhere, such as index or any page, we can scroll down to the bottom to the "Reusable elements" section, pick up the "navbar" and drop it on any page.

Okay, let's let's build this thing. So let's add a new reusable element. This is called "navbar". And the way to think about reusable elements is like they are their own page. Reusable elements can have visual elements, they can have workflows, okay? So they can act as their own page. So we're just creating, in native code, if you're react user or other, you'd call this a "Component" basically. We're just building a reusable component.

Bring up the Property Editor. Let's first head to the Layout tab. Now we're going to design with a Default builder width of 1200 px that of course can stretch as far as it wants to. And there is no max width we're going to set on this. We will be setting a max width on the internal Group container, however.

Okay, now, on the Appearance tab, let's change the background color to our Surface color, the dusty pink color. And lastly, the element type, change it from a Group to a Floating Group. Fantastic. So we have our reusable element, it's a Floating Group, and the building UI width is 1200 px. It can stretch as far or as narrow as it wants to from here.

Now we're going to grab Group, just going to drop it inside. This will be called "Group container," and this is what will contain and center our elements. So we're going to go down to Max width 1200 px and remove "Fit width to content." Okay, now the elements inside this group are on the same axis, so we need this to be a row. And I'm going to set the Min height to 80 pixels.

Let's grab some Text and let's add the little Surface logo. So from memory, so you type "Surface," from memory I think this is the font "EB Garamond," and the size maybe 24 px, Semi Bold... let's just have a look at the original design quickly. So 32 px, 600, okay that's fine.

Okay, now this navbar we also need to add on the Layout tab some Left and Right Padding of 32 px and 32 px. And then back on Group container, let's just click on Text Surface and make sure it's vertically aligned in the center of its parent container. Great!

Now in terms of links, let's grab some Link elements, and we need to use Link elements because this is how Google manages to navigate your site when they send a crawler to your site. We also have the ability to submit a sitemap file and expose a sitemap file which Google will also use, but it's very important that you also link all of your pages together. You don't want to use buttons or text for this, you want to use actual links. Sometimes we have to link to pages with a button because we want to run a workflow, create data, adapt data, that's fine. Just make sure that in your header and in your navbar on all of your public-facing pages that you at least have most of the links, all the pages linked together. This a very good strategy to also distribute authority. So Google actually ranks individual pages. It has a domain authority for your domain which is also important. But you could have a blog page or blog article that ranks super high and you can then link that back to your other blog articles, back to your landing page, any other page in your app.

Okay, Link elements! Let's say "Home" for the first one. We're going to fit width to content on this. Remove the Min width and the Min height on this Link element please and put it in the center. Okay Standard Link 14 px? No, let's edit the style of the Standard Link. Let's make this 16 px and Medium, okay?

And also what we can do now actually in Group container itself, let's go to the Layout tab and just choose "Space between" on the container alignment. And what we'll do is just add a button to the mix so everything is lined up nicely there as a button. I'm going to use the arrows on my keyboard to push it to the right-hand side and then on the Layout tab of the button I'm just going to choose vertically align in the center. Okay, that's just so we can push the links to the center here.

So I'm going to duplicate the Link element and duplicate again and duplicate one more time. And these can say anything. Why don't we say, let's look at the original: "Product," "Community," and "Pricing."

With that done, let's highlight all four of the links, right-click, "Group elements in" --> a "Row container." Let's name this "Group links." Okay, let's distribute some even column gap spacing here, let's try try 20 px. Well that was pretty quick folks! We've got a lot of logic to do here but yeah, that was very fast.

Let's head over to the button. Let's say "Log in". I think we've got a "Get started" button to sign a user up in the hero section itself, but you could add a second button here as well if you want to. Maybe let's add an icon as well. Let's try to type "log in" here to search for an icon... "sign in"? I'm not sure which one. On the Layout tab I'm going to push this to the right hand-side for the icon placement. That looks a bit odd, no let's choose "user" for the icon. I'm using the Phosphor icon library, let's choose "User," yeah, I prefer that. Then on the Layout tab I am going to change the icon size to 20 px for that. What else? I think that is that should do it, I'm not going to get overly fussy with that.

Tthen I'd like you to grab another Group. Let's just get this up and running and I want you to drop it inside, not in the Group container, but it in the navbar itself. This will be our "Group mobile links". On the Layout tab, we're going to let this span edge to edge. And so we've got some design space to work within, maybe 60 px for min height, and then I'm just going to make the background white.

Then I'm going to use my keyboard, press the down arrow, put it down there for now. We'll come back to this. On the Layout tab I'm going to collapse it for now. So check "Collapse when hidden" and uncheck "This element is visible on page load." And when do we want to bring it back, folks? When "Current page width < Custom (576 px)," which is our mobile breakpoint. That's when it's visible.

Okay, now the navbar, so the size of this is 80 px. Let's make the navbar min height 80 px. Obviously it grows when this opens.

Let's get this navbar onto our page, so let's head back to index. Just going to try bring that up. Scroll down to the bottom, find your navbar, click once, click again. There it is, brilliant. Let's preview the page! And to close this, refresh.

Okay, we need to fix this up! So this will be the container alignment: it's left-aligned in the parent navbar element, okay? Because we have a max width of 1200 px, so by default it's aligned left. Let's change that.

So we have to double-click our navbar or head over to the Appearance tab and choose "Edit element." And if we click on our navbar in the Elements Tree, head over to the Layout - actually, the way to do this is actually to click on your Group container, sorry, and then choose horizontal alignment in the center. Layout tab of the Group container, the horizontal alignment needs to be in the center. Let's preview this. Very nice, nicely centered.

Now if I inspect the page, I can see that if I bring this down slightly, so down to... gosh, our breakpoint will need to be earlier. Maybe 768 px needs to be our mobile breakpoint because it's starting to touch around 590 px. And when it comes to building projects for yourself or your clients, you know you don't know how many links are going to be here so you need to be a little bit flexible with your breakpoints at times. I try to use 576 px most of the time; I'll use 768 px in this particular instance. That's no problem! Maybe if you have even more links you have a 992 px breakpoint, that's okay.

On Group links, I am going to just reduce a column gap just a touch. I'm going to choose 12 px. So Group mobile links has no conditional statement but it is hidden by default. We're going to show it when we click on an icon.

All right, let's go to the Responsive tab and let's hit the 992 px breakpoint. Things are looking fantastic. 768 px, brilliant. One pixel below 768 px (because we use "less than"), let's bring this down, gone, more space, great! That means we can now... my 576 px breakpoint is missing for some reason, that's all right I'll drag this out to 576 px. So on the left-hand side you can see the page and parent container here. So this looks this looks pretty good.

Something we need to do though is on Group links, which I've just clicked, please do the same, we need to make sure that on the Layout tab of Group links we have "Collapse when hidden" checked so it frees up this internal space.

All right it actually works at our mobile width as well, but for the sake of learning I want to do this. I'm going to right-click on Group links, I'm going to say "Copy conditional expressions" and on this button I'm going to right-click and say "Paste special," "Paste conditional expressions." So this is also hidden at the same breakpoint. And then on the Layout tab of Button Log in, also check "Collapse when hidden." This frees up the space.

So what we need to do now is show a little mobile menu here. Some people call it a "hamburger menu." There are various names for it. So let's go back to our UI Builder and this is how I do it. This is the strategy. Grab yourself an icon, just drop it in anywhere, let's just get it in. Let's choose the Phosphor icon library for now, and here it is here, this is the icon I like: Text-align-left. I like to use that as mobile menus. The sizing is fine. Let's center it vertically, let's check "Collapse when hidden" so it removes the actual horizontal space, and let's make sure it's not visible on page load. I don't want it visible on page load. When do I want it visible? Well we want it visible on the opposite expression, so I'm going to click on Group links, I'm going to click "Copy conditional expressions" and then going to head over to the Elements Tree, find my Icon, and maybe we can change the name here let's say "Icon mobile".

Okay so let's actually show this Icon mobile. Now I'm going to... so on Icon mobile I'm going to click "Paste special," "Paste conditional expressions," okay, you can also just write this expression yourself: "Current page width < Mobile Landscape (768 px)." So now when the opposite is true so, when the "Current page width < Mobile Landscape (768 px)," this is going to be visible, okay? It's going to be visible. So it's not visible by default.

Let's try this out. The other thing I'm going to do is I'm going to use my keyboard just to move it to the right-hand side. So on the Responsive tab, well, you can see it there - so you can't see it there, bring this handle down, and now you can see it. All right, nice and neat!

Now we need to run a workflow to show Group mobile links, so I'm just going to do it from the Responsive Editor and add a workflow. For the first step, go to "Element Actions" --> "Toggle an element," and we want to toggle Group mobile links.

Another neat trick I like to do as well is - let me go back to the Responsive tab - another neat trick I like to do is say that if you open up Group mobile links, on the Conditional tab, I want to change this icon when the links are open to an "x". So we can just target the visibility of this Group mobile links. So when "Group mobile links is visible," that's when this icon is a different icon. I'm going to type "x" on my keyboard find the "x" icon, and there we go! And that's that, that's solved.

All right, so let's put the links inside here. So for that, we need to copy them from Group links and paste it inside Group mobile links in the UI Builder. The layout also needs to change: it needs to be a column now. And what I'm going to do is I'm going to highlight all of this text I want just change the styling a little bit. I'm going to rather choose 24 px for font size and on the spacing - actually, that's too large. Let's do 20 px instead for the font size because don't forget the phone density is normally double, right, so 16-pixel text will end up looking like 8-pixel text on most modern phones. So in Group mobile links I'm going to head over to the Layout tab and just add some gap spacing. Let's try 12 px maybe... let's add it there and add 6 px. Pretty happy with that. Let's try this out.

Let's go down to mobile and we can see a bit of a padding issue here, but there's definitely something... all right, that's fine! We can see that we did change to an "x" icon. Let's go back to our Design tab and fix this.

Okay, first of all, we've got 32 pixels of Left and Right Padding on the navbar element in the Elements Tree. I'm going to remove that. I'm going to say 0 px and 0 px and instead I'm going to place it on the Group container. On the Group container Layout tab, add 32 px of Left and Right padding. But I'm going to say in the Conditional tab that when the "Current page width < Mobile Landscape (768 px)" that's when the left and right padding become 16 px and 16 px.

In here in Group mobile links, all we need to do here is add 16 px and 16 px of Left and Right Padding because you're not going to see it at desktop width, so automatically it's just 16 px and 16 px. Works just fine. And maybe some Bottom Padding here, choose 32 px for that, and maybe Top padding of 32 px, yeah. That looks good.

The other issue I noticed was back on the index page that this "AI Assist" badge was being lost, so on the Conditional tab, let's say that we're going to change the top padding - ah, I can see the problem here: so the Top padding needs to be 96 px and the Bottom padding needs to be 64 px. Let's have another look. So "AI assist" has been fixed! What about this? Still a problem, here what is the problem? Let's go investigate.

All right let's go to our navbar first of all, let's open up Group links. So there's nothing on the Conditional statement, it's not visible on page load, it's collapsed when hidden. What about this Group links here - aha! So when I copied and pasted Group links, I actually inherited the Conditional statements here, so go ahead and delete the conditional statements on Group links. Okay, so Group links, delete conditional statements for the mobile. I'm going to change this to "Group mobile links". We don't need to collapse when hidden because we're actually collapsing this outer Group. We don't even need to fit width to content, none of these need fit width to content, going to remove fit to content. Let's have a look at Responsive. We bring this Group links back, works nicely there. Okay I think we might be in luck, so let's try this. Click here. If I scroll, obviously... I've got one more thing to do here to make this background white when I when I scroll.

So back in Bubble, let's do the following. In the UI Builder, now we've applied our color to the navbar, which is perfect. Here is the background color: Surface. I want to show you a neat little scroll animation here.

I'm going to scroll right down to the bottom of the dynamic data options in the navbar Conditional tab, because we have something here called "Current page scroll position" which is a numerical, okay, it's a value. And Bubble can track this value. When that value is greater than 80 px (this could be any number this is arbitrary, for me I'm just matching the size of my navbar itself), so when I've scrolled 80 pixels down the page then I want the background color to basically change to white. And the other thing I want to do is on the Appearance tab of navbar, I'm going to go to the bottom of the tab and find background style and add 250 pixels of style transition.

Let's preview the page. And when I scroll down, you can see that lovely animation transition. And this is where this looks sort of a lot better in the design, less so here, but you could also have a conditional statement to start with the dusty pink color and change it to white based on the scroll position. We're not going to cover that because I've basically just shown you how to do it right now. And let's go back to our desktop version, scroll down, beautiful white top, fantastic. One last look at mobile. These buttons could have been stacked in a column. Why don't we do that? That's the last thing we're going to do here.

Head back to the index page and the first thing we need to do is on Button Get started, going do the following: add a condition when "Current page width <" and I'm going to use a different breakpoint here, I think the buttons will be too wide at 768 px so we're going to use 576 px. So when "Current page width < Custom (576 px)", here's a new one for you: Min width. Now the min width needs to be variable. I don't know an exact figure. I want it to be edge-to-edge on the mobile phone with 16 pixels of neat padding throughout the page. So I just want the buttons to fill that space beneath 576 px, so instead of a pixel value, I'm going to choose a percentage value. I'm going to say 100%. So in English: when the current page width is less than 576 px, the button width should span all available horizontal space. I'm going to "Copy special", "Copy conditional expressions" and do the same for Button Learn more.

Okay, now this Group needs a bit of gap spacing on the row gap, because it has column gap, which is the horizontal space, but when these buttons push 100% of all available space within Group buttons, then obviously they need a bit of vertical gap as well. So I'm going to choose a bit less for that, I'm going to choose 16 px for that.

And the last thing we need to do is also let this particular Group buttons span edge to edge, so I'm going to "Copy special," "Copy conditional expressions," and actually paste it into this Group itself. So Group buttons now has a conditional statement the same as the buttons within, so on the Responsive tab, if I now go down to 375 px, you can see how they have now been stacked in a column layout.

There you go! Okay folks, that concludes part one: the marketing page. Now we didn't do every single section - I think we would be here for a few days if we did - but this shows you the concepts around spacing, topography, little bit of color (not too much, but I've shown you UI colors, about Tailwind design and how to utilize those colors if you want them) but color should really come last. Get the design correct, get the topography right, the weight of the topography, the spacing, the line spacing, the spacing between the various elements, the element sizing, the breakpoints; that is your UI design. You get that right, the rest is easy. I hope you enjoyed this one and I'll see you in the next one.