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

Introduction

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.

Great design solves problems

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.

You can read out more extensive guide on the theory behind designing user interfaces (UI) and thinking about the user experience (UX) in the article below:

Article: Design and UX

Bubble's design tools

Bubble offers a unique way to build apps: 100% tools to draw your app on an empty canvas and 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.

Elements

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 WYSIWYG 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.

Article series: Elements

Styling

Every 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 that apply those properties to Styles and elements across your app.

Article series: Styling Core reference: List of styling properties

Responsive design

Bubble'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.

Article series: Responsive design Core reference: List of responsive properties

Additional design resources

In addition to Bubble's tools for building your own designs, we have different resources that can help you set up the design even faster.

Article section: Design and UX resources

Importing from Figma

Figma 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.

Article: Importing from Figma