For a more general introduction to bubble learning, check the link below.
For resources around getting started building in bubble visit here:
Building decent looking UI in bubble takes some time to get the hang of. But I would say there are a few things that help to create better UI. But once you get the hang of creating good UI in Bubble becomes quite easy, the goal of this content is to understand how to shake off "bubble look" to your site. However more amazing you want to make your design is up to you. But these are just a few tips and tricks on how to make your bubble UI better.
Note don't stress about making the design amazing from the jump, you will improve it over time. But start with a good foundation to create a good a looking UI for your app, and improve it over time.
Here some general tips by bubble io when designing
Tips when Designing
Snap to edges when dragging and resizing element . By default, Bubble will try to snap elements to an existing line on the page. If you want to change this behavior and snap to a grid, you can control this in the Grid menu in the top bar.
The keys to Bubble UI are:
The most difficult part of layouts in bubble is responsivity. I think the concepts are best explained by the videos below.
Using the Styles tabs
You can build some conditions on styles, but only for states, that is to say conditions that are about built-in, simple interactions with the element (hovered, focused, etc.) For instance, conditions using data, or properties on the user, will not qualify as basic. You can define as many styles as you want.
This is a very important tip and a fundamental tool within bubble.io. The style tabs allow you to edit different visual elements like buttons or inputs. Once a style is defined you can reuse it as many times as you want within your bubble app. This helps you to keep a consistent visual aesthetic throughout your app.
It is also helpful performance wise to define your styles in the styles tab. It removes the load off of bubble to have to constantly call upon a different style for each element.
Also, one thing to note to have the colors your frequent the most on hand it is good to define them as well. Go to settings → general → scroll to the color palette. Having these will help to keep your colors consistent throughout the app
A quick aside, one important thing is color selection. I tend to choose one primary color, an accent color, and a darker color as my main. Then I mix these with a selection of 4 whites and darker grays.
How To Use Color In UI Design Wisely to Create A Perfect UI Interface?
Whenever found an interface that looks nice, clean and elegant, I save it. Now I have a collection of more than 100 UI interfaces. After learning, making use of or simply viewing it again and again, I finally realized something in common. It is always the color that steals my heart at the very first look.
How to Choose the Right Font for Your Design
Choosing the "right" font for your design determines how well your designs are perceived. The title of this article should actually be "How To Choose The Right Typeface For Your Design" because the choice you're making is about typeface and not font. But let's not get bogged down by the details.
Good typography can dramatically improve the design of your app. Bad typography will only further show that your app was built in Bubble. To combat bad typography the first thing you can do is to define your text styles in the Styles tab.
Here are some tips for working with typography:
- Always skip a weight want wanting to create contrast go from light to medium or medium to extra bold
- Align your type to one axis,
- Use Space
The embedded link above will go more in-depth on how to create better typography within your apps. But the key to applying this in bubble is to define the elements in the styles tab so you can have a consistent look to your app.
Leverage Frameworks and Importing from Figma
[Beta] Import from Figma
This feature will import your Figma design into your Bubble app. Due to the differences in the two platforms, the import will not be at 100% fidelity, but should still give you a giant head start on developing your Bubble app.
Design frameworks like open build can provide guidance for creating great UI. I copy and past many of their elements and edit them to use them as my own. They have tons of free elements to use and build your app with.
One other option is to do your design in Figma and import it to bubble. This allows you to be more flexible and solely focus on your design, and then just program in everything later. Below is an example of a site I designed and imported from Figma to bubble.io
Figma is also great to design custom icons and illustrations to keep a continue theme throughout the site. To bring them into bubble simply export your asset to an SVG and upload it bubble as an image element.
Dribble and Inspiration
One thing to also mention is the need for inspiration for good ui design. For this the site below is a great resource.
Dribbble - Discover the World's Top Designers & Creative Professionals
Dribbble is where designers gain inspiration, feedback, community, and jobs and is your best resource to discover and connect with designers worldwide.
How To Do Responsive Design in Bubble with Gregory John
In this Makerpad Workshop, we were joined by Bubble extraordinaire Gregory John to show us how to build responsiveness into our Bubble Apps.Bubble is one of ...
Hope this helps and if you need any more help please don't hesistate to ask.