Hi all, I find myself designing overly clunky pages and its always too big looking on a laptop screen and even bigger when responsive to a phone. Do you have any tips on how to best design with grids and what steps, layouts, etc you recommend?
2 Likes
Do you use this option ‘Apply maximum width if page is stretched’? With this, you retain the width set in editor even when using wider screens.
Yes, although will that help keep it responsive?
I often use 1200 pixels for the page width, and a 10 pixel grid. The ‘gutters’ aren’t really working for me in Bubble, so I don’t use those.
1200px looks great on desktop, fine on most tablets, and is easy to divide by 4 (300px, making sure it fits even on the smallest 320px-wide iPhone).
3 Likes
Oh wow a 10px grid! Thats wild. Thanks for the input. My designers that I work with at my full time product job run grids like its the bible. Granted they design beautiful software and I am just learning haha, but none the less Ill try your suggestion.
1 Like
Material.io have some great explanations on how to use grids and layouts. This might help.
https://material.io/design/layout/understanding-layout.html#usage
2 Likes
I struggled for a long time with the UI. I bumped into a designer who has a great way to teach (well, at least one that works super well with me): https://refactoringui.com/
It helped me by giving me a simple framework that I can use without having to think through everything myself (which ends up in a visual train wreck).
Check out some of his videos on YouTube
2 Likes
Oh man I just watched that Youtube video…makes me feel like I have a ton to learn as a designer! I love his thought process and logical way of UX. Great suggestions!
1 Like
Me too. I watched it and a lot drips into place. Google’s material.io is good but getting a firm grounding helps a ton. Thanks @rico.trevisan
1 Like