I am using Bubble to build a hybrid app with Dropsource. Dropsource doesnt support math operations yet so for shopping carts and the like is not yet possible and Bubble can do that.
However, Bubbles UI design quite frankly is outdated, badly. Even the templates you can buy for Bubble are significantly outdated and don’t match any new app you would otherwise see come out today. Its very clear Bubble is focused on the programming factors rather than design, which is great because i think thats what brings the most value.
I think the UI problem can be fixed like this:
The work around i have thought about is have a UI/UX designer go for it through Upwork, 99 designs or similar. They can design the necessary buttons, backgrounds, icons etc. and i can change the text on each button as needed (i.e in Illustrator) and upload as a .png. Has anyone done this? How did it go?
I don’t think I understand your issue. You have complete control over all the appearance of elements, down to size, shape, color, gradients, shadows, etc. What are you unable to do currently tly?
I am a UX Designer currently as my day job, and I have yet to come across something I couldn’t create in Bubble. The only shift you’ll have to make is to think more mathematically when you’re designing in Bubble - making sure your width and height are the same for your buttons, using h tags for any text, etc.
Hiring a freelance designer is OK, but just have them give you access to the Illustrator files. Then you can compare that with Bubble to make sure all the colors, sizes, etc match up between the two.
I wouldn’t upload buttons or icons as png’s, due to the fact that they can get pixelated, and you won’t be able to add any conditional hover states or styles on them. I have occasionally used custom icons I created in Illustrator and uploaded them to Bubble as SVG’s in two colors, one for hover and one for default.
Bubble is an awesome tool though, and after some time using it, it becomes just as easy to use as any Adobe products.
Two thumbs up for this, @callen.hedglen. The Responsive tab, though a lil’ funky is just as capable as things like the responsive settings in Muse, for example. (Perhaps with the exception of SHOWING an element below a certain page width? I think the only option right now is HIDE a thing below a certain page width… not quite sure how you’re supposed to hide a thing at wide screen sizes but SHOW it below them. But I’ve not tried very hard on that one…)
Anyway, if OP would chime in and say something more specific, like, “I’m trying to mimic the interface of SomeDumbApp and am having trouble making a SomeDumbInterfaceElement like theirs,” someone might respond with some great suggestions.
There are very few copycat things you couldn’t build. One NOTABLE exception, HOVERED elements do not (inside of Bubble) generate an event that one can detect and trigger a workflow. This is a pain for certain things and seems like a much-needed feature. But for “styling on hover” (rather than “complex action on hover”) it’s just fine.
@keith - there is a (hacky) thing you can do if you want to trigger an action on hover. 1) put a group of type number on the page, set its initial value to 0 and set its conditional value to 1 when the element you’re looking at is hovered 2) add a workflow that’s “do when group number’s value is 1”
Good point. Does that work for items that are out of scope (such as things in an RG)? (Sorry, not near my machine at this moment to experiment with that.)
Can you tell me where to find that? I researched for a couple of hours before that post. I have read the manual as well. I can’t find what you are talking about.
For example with a button, i can only find width, height, style and angle. Shape, gradients and shadows i can’t find. Where should i be looking for this?
Every element you drag onto the screen has a default “style” applied to it. In the floating gray panel, you need to change the “style” to be empty. This exposes all the other properties. Here’s a quick screenshot of how to get rid of the default style:
If you notice, the currently selected style is highlighted yellow (CTA Button). Right above that is an empty line. Click the empty line, and you’ll take away the default styling. Now, the floating gray panel will have more options you can tinker with.
