How to design things that look good

I’m so lost on how to design anything using bubble.

I feel like I’m fundamentally not understanding how it works. For context my background with programming websites has been doing it from scratch, then Wordpress then I discovered Webflow and have not looked back.

Bubble seems like absolute chaos. I can’t figure out how to do the simplest things. If you accidentally click on the wrong element it jumps to the front. I can’t for the life of me even style an input box it just doesn’t seem to work. Is there any good tutorials on how this works? I’m about to give up on bubble. It feels very unprecise and random but I know I have to be missing something. I’m used to adding divs and containers and properly structuring things. Is that not possible?

I don’t think bubble is for me. It is the worst design interface I have ever seen in my life. I don’t see how you can do anything with it. There’s no reusable components from what I see either. I don’t get how you all are using this. Like maybe for simple designs and prototypes. I love all the database stuff and logic but I don’t see how I can build anything that looks good with these tools without ripping my hair out and spending 40 + hours on learning how to use a backwards system. It’s like the devs have never designed something or used a modern builder like webflow before. You need to have compoents, you need to properly structure your content in divs, grids and containers. This is just not it

This might be just be the learning curve with using any new platform?

There’s a ton of 1st party and 3rd party videos showing how to start your first app. As well as tons of forums posts.

As long as you are on the new responsive engine (default for any new app) you can setup all your containers as Row, Column, etc so everything aligns nicely. Then you can select multiple groups and right click → Group in Row Container to make a new row of elements

There are Reusable Elements, is that what you are looking for? You create something once then just drop in the entire Reusable Element wherever you want (like a header, footer, etc.)

If you want “components” then there are some 3rd party extensions and services to copy/paste pre-made element groups that look nice. Some that come to mind are Atomic Fusion and Frames.

Good looking apps are possible, lots of people have ones that are nicely spaced out and responsive…

For me apps come to life with the new responsive engine, turn everything to dark mode, switch everything to Inter font, and crank the padding and margins so thing’s are spaced nicely…

1 Like

Yeah it’s definitely a learning curve. I’ve been searching for tutotials but I can’t find anything. Everything I see is people just dragging and dropping elements all willy nilly. It just seems so backwards and not the way proper designs should be structured. I would expect to drop in a div style that div how I want (maybe make it a container or another layout element). I can’t wrap my brain around how to do anything like that. If you know of any good tutorials or people I should follow i’d love to hear it.

Like every video I see focuses on structuring your data, users and logic and none of them ever go into how to pull off complex designs or even simple designs.

I don’t see how to do reusable elements. Is there a special section for that?

oh and now I can’t see all my pages anymore. I just see one page. This is a nightmare! hahahaha I need help.

Yeah… So…

Udemy
YouTube
Google
Forum
Intro lessons
And so many third party sites

Just saying…

4 Likes

All the tutorials are using the Fixed container layout where you just drag and drop and resize with your cursor, but they just do that to get the point across about how to set whatever the tutorial is about up.

They don’t want to mess with rows and item spacing and alignment when they just want to show how to structure a database

you can’t just make a container. Like the way every other website on the planet is you’d have a container say width: 1150px; max-width: 100%; margin-left: auto; margin-right: auto; and now everything will fit nicely in there and always be centered. I’ve watched a bunch of videos and it seems like bubble just puts things relative to each other in any setting meaning you can’t get precise designs. I have to be wrong on that.

Yes you can just drop in a group and set everything you just described (of course after watching some tutorials of where those settings are, mostly in the Layout tab of that Group)

2 Likes

I have looked at at least 12 tutorials with no actual description on how to design

No one will teach you how to design. They will teach you how to make functional apps. Design is your thing to learn from different means.

Check out Hype4 academy. The books are great.

A group! ok so you put things inside a group which is your container then? Not what I would assume a group is but this is insanely helpful

I don’t need to learn how to design. I need to know how to structure everything in bubble to create the designs I have already made in Figma. The problem isn’t the design itself if that makes sense. It’s how to actually use the tool to make things look the way I want them too which I would have created the entire design by now by hand in the time it’s taking me to do all this. But clearly not all the user and data info which is why I’m trying to learn. Every system works different but I have never seen anything like bubble. It’s like they decided to throw out what any other builder has done and do something completely different for no reason. Like compare this to something like Webflow and you’ll see what I mean. If there was a tool that had the design and interaction interface of Webflow and the backend capabilities of bubble that would be my dream hahaha

@troy.roberge I thought the website you linked was built on Bubble, I was like damn that looks good :laughing: (Looks completely possible on Bubble though)

Their YouTube videos, and written books are awesome. Honestly bubble should partner with them.

Btw, you can simply import your figma into bubble

@jason5

Hey thanks everyone for your help. I think I need to be more clear on what I’m trying to say.

I am a designers first, front end programmer 2nd. (css, javascript, html, php). Definitely not skilled enough in programming for user authentication and all that stuff.

I’m trying to figure out how to structure my designs in bubble.

So how do you setup containers, styles, and just overall make your designs in bubble. None of it makes sense to me. Is a shape supposed to be a div? are groups containers? How do you add columns? These are all just fundamental bubble questions and I have watched hours of videos without ever seeing anyone explain that stuff

YouTube bubble responsive design, and look for any video in the last 12 months.

does this actually work? I have tried Figma importers before and they always mess things up in my experience. I find it usually better to build natively in whatever system your programming in but if it’s awesome and actually works I can try it. Still doesn’t fix my need to have a basic understand of how to structure designs in bubble.