‍

Your UI/UX design may not be easy to translate in the Bubble-verse

‍

If you have come across my comprehensive Bubble developer roadmap, you know how important it is to design your app in Figma/XD to get a complete picture before building it in Bubble. But your design could take forever to replicate in Bubble and may be unnecessarily complicated. We used to end up doing multiple back and forths at AZKY with our clients and their designers to reach to a point where we could implement the designs. Which got me thinking, if I could put together all my learnings in a design guideline for someone thinking to build in Bubble, it'll save so much valuable time.

So what really makes a design bubble-able?

Short answer, keep it simple.

Here are the 7 key areas you need to focus on so your design is bubble-friendly from the get go.
‍

1. Avoid Complex Components
2. Avoid Overlapping Components
3. Avoid Strange Backgrounds
4. Avoid Awkward Angle and Shapes
5. Avoid Complex Animations
6. Use One Font
7. Use a Simple Sizing System

‍
‍

‍1. Avoid Complex Components

Let's start with a very basic input element. Here's a simple input with the label. It is quite straightforward. 

But if you want to make it fancier by putting an icon inside, it gets complicated. You can put it in, but you'll need a negative margin to fudge things. I'm not saying that it's not possible, but It's just harder and more annoying to build. 

See an example of the price input. Here, the USD is hard. The dollar sign is easy. 

Another example of a very easy component with a disjoint label and a text area

Now if you put the button inside, the outline border, and the icons, it will increase the complexity.

Again, you can make it. But it's clunky. Let me describe how you'll achieve it. You will add a group. You will add an input element without a border inside. In the group, you have this icon. This icon is in this button. So instead of placing one component, you had to replace five, or six components. You had to add conditionals for hover states. Manually handle hovered states because this component is different. Or you could do negative margins here. It's just annoying.

‍

So I guess you get the gist. Avoid complex components wherever you can. The simpler components you use, the better. And make no mistake, you can get beautiful, elegant designs using simple components.

‍

For pagination, similar echoes around the complex component stuff. Take a look at this arrow, border, and the number with the dot number. They are many components and are harder to build.

whereas, this one with the next and previous buttons is much simpler and easier to build. 

We have built complex designs for a number of our clients, it is very much possible but it takes time. If you are a first-time founder or new tech startup with a limited budget and you want to go live with phase one and test the market, and get to product market fit then go for simpler components that do the job. A simpler pagination is fine. It's pagination, why spend a day on pagination? 

‍

‍2. Avoid Overlapping Components

The second tip is to avoid overlapping components. Overlapping as shown in the figure below. See how this design overlaps. It's a bit tricky, especially when it comes to responsiveness. Doable. We've built it. It takes time. So everything is usually doable. It's just a fact of what's easy within time, cost and budget. 

‍

‍

3. Avoid Strange Backgrounds

These dots on the right side can get a bit tricky to do. Hence it is better to keep the backgrounds simple.

‍

4. Avoid Awkward Angle and Shapes

The next tip is to avoid awkward angles and shapes. See the slash in the figure below. It is a bit hard to make. The way you do it is you'd presumably have to have it in the image itself.

Whereas this is straightforward stuff, standard image left hero. 

So the simpler the better. You can get an elegant look out of simplicity, it doesn't have to be complicated.

‍

5. Avoid Complex Animations

See this example, you click and the input field expands and shrinks. It is doable especially now with the max-width and min-width conditionals and everything but with a caveat. Yes you guessed it. You'll end up spending a lot of time on getting this right. 

‍

6. Use One Font

One font is simpler, you can tune the weights and get a lot out of its size and weight. Two fonts are fine as well. Not a big issue. But I'd say avoid custom fonts.  
‍

‍

7. Use a Simple Sizing System

Use one simple sizing system. Ideally, 5 pixels, 10 pixels, 15 pixels, or 20. This one I think is the hardest for designers. Designers are used to their sizing system which is usually fine. 

We get loads of Figma designs with designers using whatever system they have. The key thing is for us to tell all clients what we're going to use is bubble for the implementation. We'll use a different sizing system and as a result, you don't want to do one-to-one mapping of your design.

‍

I hope this was useful. If I have missed something, or if you have another suggestion, please do comment below. If you have particular questions or any types of components, comment below and we’ll answer. 

‍

Also, if you would like us to build something for you, definitely get in touch with the contact link in the description below. And always happy to help.