Hi Folks,
We’ve just released a guide to mastering design in Bubble.
This is the culmination of my 5 years experience and @nomorecode design experience as a product designer at a leading global tech company.
The guide will show you how to create perfect responsive design in Bubble using break-points. One of the main problems we see is people not creating page structure before they start designing and this leads to inconsistent responsive design and hours of pain in the responsive editor. With a bit of page structure and basic math, it’s actually very simple and those 320px min width designs become achievable.
The guide also covers principles around working with colour, typography, images and much more.
You can download here - https://buildcamp.io/guide/mastering-design-in-bubble (this page was created using the principle in this guide.)
19 Likes
Having enjoyed your videos, I look forward to this read.
2 Likes
I’m noticing something that needs adjustment on the repeating group. Seems to be off on the alignment
Also, just curious about this below situation where the image gets cut off on the left and right
Is this because the design is based off a page break so certain page widths will experience these cut offs or is it because of the image source. Not really sure what type of elements are used here but assume it is an image.
We’ve only got 4 written reviews as released today. So it’s not off, it’s just 4 tiles using horizontal scroll.
The images are groups. More about it in the guide.
1 Like
Hey @boston85719, long time no speak (you’ve changed your avatar since we last spoke) 
There is a few clever things happening here. First we have a parent-group that contains a background-image. This represents our muted @Bubble UI canvas that I have ‘ghosted’ @20% opacity.
Within this parent-group we have a centre child-group that sits over the UI canvas image that represents a glass window (a hot 2021 UI/UX trend) with a slight gradient / outset shadow and rounded-top.
To each side of the centre child-group are two smaller groups that I have -offset to give the feeling of ‘float’ which allows you to break out of the parent group as visual UI indicators (as seen when we drag and drop elements but emphasized for visual on page enhancement).
I have echoed these words many times over… with the right knowledge and a little creativity, @Bubble is the most powerful and flexible nocode builder in the market today. Forgot the webflow naysayers, everything and more is possible within bubble and that is why we created the guide.
4 Likes
Cool, thanks for the explanation. I’m gonna have to look into the glass window trend as the look you have in this is awesome.
2 Likes
Thanks Matt, appreciate you’re kind words 
Great work - a couple of the best designers in Bubble right here!
2 Likes
Thanks Geoff, I never knew this was your forum profile!
Great stuff guys! Good to see others are taking design in bubble more seriously. And with that I mean more structured
2 Likes
Hey @gregjohnkeegan
This guide is a real great resource for any bubbler, thanks for it!
Just one thing, you recommand to use imgix to force a consistent image shape for dynamic images.
I can’t agree more, imgix is powerful for this purpose. Nevertheless, Bubble team told us few times ago that imgix could be removed from the dynamic image manipulation. Have you got any tip to get the same results with dynamic images without using imgix?
2 Likes
The only other way would be to use a crop tool when the user uploads their image.
2 Likes
this is really cool!
you might have to redo it soon however, with the breaking change to the responsive engine announced the other day 
1 Like
If I buy right now I will to get the update when the new editor and flexbox is release?
Not sure at this stage, we’ll need to take a look at the editor changes when they arrive.
Regardless, the guide will help you from today and covers a lot more than responsive.
I’m interested in this guide. Is it impacted much by the new responsive engine?
