Design
At the heart of Bubble's capabilities is the ability to effortlessly create designs with precision: from basic forms to professional websites and SaaS applications
Last updated
At the heart of Bubble's capabilities is the ability to effortlessly create designs with precision: from basic forms to professional websites and SaaS applications
Last updated
Design is about the look and feel of your app, including its visual appeal, the experience it provides, and the emotions it evokes in its users. When you work on design you focus on the aesthetics: the layout of elements, the typography, the colors and effects like borders, shadows and transitions.
The design of your app serves several important functions: a good and thoughtful design can provide an intuitive user interface, making it easy and enjoyable for your users to navigate and use the app. It can also help you establish a consistent brand identity that makes your app recognizable and helps it stand out.
If you think about it, most apps are really a pretty layer on top of a machinery that aims to simplify a task for a user that would otherwise be complicated. For example, if you are running a marketplace for finding freelancers, a task management app or an e-commerce store for buying art, none of these tasks would be impossible for the user to solve in the first place – but your app can hopefully make it simpler and more enjoyable. Great app ideas make it easy for your users to solve a problem and store data securely.
This is why design is not just about making your app look good: the goal of any well-designed app is to combine appealing visuals with user-friendliness. There are multiple aspects to a successful design and the list below can give you a good starting point for planning your app's user interface. It should be:
Consistent A structured use of colors, fonts and other styling choices gives your app an identity that your users can recognize.
Intuitive An intuitive design makes it easy for users to understand how to use the app
Efficient Thoughtful design can help your users solve their problems efficiently
Accessible A well-planned design makes your app accessible on different types of devices and to users with disabilities
Bubble offers a unique way to build apps: 100% WYSIWYG tools to draw your app on an empty canvas and preview the design immediately. There's no code to write or unexpected results.
By combining Bubble's different tools you can create designs that are consistent, pixel-perfect, fully responsive and compatible with all devices and browsers.
Your app's user interface consists of elements: input fields, buttons, images, checkboxes, calendars, images, icons that each serve a specific purpose. Bubble offers a visual editor that lets you pick and place elements directly on the page instead of writing code and immediately preview it.
Our Element section covers the different element types and how they can be combined to build a virtually limitless number of different user interfaces.
ElementsEvery visible element on your page can be styled in different ways. You can apply styling on a per-element basis or you can use Bubble's Styles feature to save stylesheets that can be applied to multiple elements and be controlled from one central place. Bubble also allows you to set up Font and Color variables that apply those properties to Styles and elements across your app.
StylingBubble's responsive engine ensures that your app looks and behaves well on different devices, such as smartphones, tablets, and desktop computers. Settings up a responsive design eliminates the need to create separate versions of a website for different devices.
Responsive designIn addition to Bubble's tools for building your own designs, we have different resources that can help you set up the design even faster.
Templates are semi-finished apps that can give you starting point when you first set your project up. They contain both design and workflows and serve a wide range of different categories:
Read more and see the full list of categories in the article below.
TemplatesThe Component Library is a collection of pre-built User Interface (UI) components that can be dragged and dropped onto your page to help you build beautiful interfaces faster. These UI components are fully responsive and are made up of containers, visual elements, and form inputs that can be individually customized once added to your page.
The Component LibraryFigma is a popular and useful tool for the first stage of prototyping and design and Bubble has a tool for importing design from Figma into Bubble.
Importing from Figma
